springboot2+mybatis-plus+vue3创建入门小项目[学生管理系统]02[实战篇]

创建一个 vue 项目

创建这个新的文件夹
image.png
创建前端项目 eggbox
image.png

数据库 SQL

CREATE DATABASE IF NOT EXISTS egg DEFAULT CHARACTER SET utf8 COLLATE utf8_bin;
USE egg;CREATE TABLE `stu` (`id` INT AUTO_INCREMENT, -- 自增主键`name` VARCHAR(64) NOT NULL, -- 非空姓名字段，最大长度64字符`stuid` INT DEFAULT NULL, -- 学号`classroom` VARCHAR(10) DEFAULT NULL, -- 班级字段，最大长度10字符`grade` DECIMAL(5, 2) DEFAULT NULL, -- 成绩字段，十进制数，最多5位数，小数点后2位PRIMARY KEY (`id`) -- 设定t_id为主键
) ENGINE=InnoDB DEFAULT CHARSET=utf8; -- 使用InnoDB存储引擎，字符集设为utf8

image.png
设置表格为
image.png

创建后端项目

创建项目

image.png

设置项目

image.pngimage.pngimage.pngimage.png

创建模块

image.png

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>3.2.5</version><relativePath/> <!-- lookup parent from repository --></parent><!-- Generated by https://start.springboot.io --><!-- 优质的 spring/boot/data/security/cloud 框架中文文档尽在 => https://springdoc.cn --><groupId>com.example</groupId><artifactId>eggBox</artifactId><version>0.0.1-SNAPSHOT</version><name>eggBox</name><description>eggBox</description><properties><java.version>17</java.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.30</version><scope>provided</scope></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-spring-boot3-starter</artifactId><version>3.5.5</version></dependency><dependency><groupId>com.google.code.gson</groupId><artifactId>gson</artifactId><version>2.10.1</version></dependency></dependencies><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build></project>

.yml 配置

spring:application:name: eggBoxdatasource:url: jdbc:mysql://localhost:3306/egg?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghaiusername: rootpassword: 123456driver-class-name: com.mysql.cj.jdbc.Driver
mybatis-plus:configuration:# 开启驼峰命名自动映射map-underscore-to-camel-case: true# 开启日志打印log-impl: org.apache.ibatis.logging.stdout.StdOutImpltype-aliases-package: com.baomidou.pojo# 扫描mapper文件mapper-locations: classpath:mapper/*.xml

mybatisplus 插件代码生成器

略.studyBox中有详细的

代码

  • controller
package com.example.eggbox.controller;import com.example.eggbox.entity.Stu;
import com.example.eggbox.mapper.StuMapper;
import com.google.gson.Gson;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.List;/*** <p>*  前端控制器* </p>** @author author* @since 2024-05-22*/
@RestController
@RequestMapping("/stu")
@CrossOrigin(origins = {"*", "null"})
public class StuController {@Autowiredprivate StuMapper stuMapper;private Gson gson=new Gson();@GetMapping("/students")public String getStudents(){List<Stu> stu = stuMapper.selectList(null);return gson.toJson(stu);}@PostMapping("/add")public void addStudent(@RequestBody Stu stu){stuMapper.insert(stu);}@PostMapping("delete")public void removeStudent(@RequestBody Stu stu){stuMapper.deleteById(stu);}@PostMapping("update")public void updateStudent(@RequestBody Stu stu){stuMapper.updateById(stu);}
}

启动项目

image.png

前端增删改查

准备

vscode 打开之前创建的前端项目
image.png
新建一个终端
image.png
启动项目
image.png
安装 axios
image.png
引入 element-plus
npm install element-plus安装 elementplus
image.png
image.png

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'const app = createApp(App)app.use(ElementPlus)
app.mount('#app')

安装 npm i bootstrap@5.3.0-alpha1
image.png
将这些代码复制到 main.js

import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.min.js'

image.png
App.vue 删成这样
image.png
启动项目
image.png

编写代码

复制这些代码
image.png
复制到这里
image.png
image.png
打开看一下
image.png
image.png
image.png

至此

  • App.vue
<template><div id="app"><table class="table caption-top"><caption><h1>学生成绩管理系统</h1></caption><thead><tr><th scope="col">姓名</th><th scope="col">学号</th><th scope="col">班级</th><th scope="col">成绩</th><th scope="col">操作</th></tr></thead><tbody></tbody></table></div>
</template><script>export default {name: 'App',components: {}
}
</script><style></style>
  • StudentEgg.vue
<template><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr>
</template><script>
export default {}
</script><style></style>

去 elementplus 网站复制按钮组件
image.pngimage.png

至此

  • App.vue
<template><div id="app"><table class="table caption-top"><caption><h1>学生成绩管理系统</h1><el-button type="success" @click="getStudent">获取学生信息</el-button></caption><thead><tr><th scope="col">姓名</th><th scope="col">学号</th><th scope="col">班级</th><th scope="col">成绩</th><th scope="col">操作</th></tr></thead><tbody></tbody></table></div>
</template><script>
import axios from "axios"
export default {name: 'App',components: {},methods:{getStudent(){axios({url:"http://localhost:8080/stu/students",method: 'GET',}).then(res=>{console.log(res.data);})}}
}
</script><style></style>
  • StudentEgg.vue
<template><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td></tr>
</template><script>
export default {}
</script><style></style>

image.png

至此

  • App.vue
<template><div id="app"><table class="table caption-top"><caption><h1>学生成绩管理系统</h1><el-button type="success" @click="getStudent">获取学生信息</el-button></caption><thead><tr><th scope="col">姓名</th><th scope="col">学号</th><th scope="col">班级</th><th scope="col">成绩</th><th scope="col">操作</th></tr></thead><tbody><StudentEgg></StudentEgg></tbody></table></div>
</template><script>
import axios from "axios"
import StudentEgg from './components/StudentEgg.vue'
export default {name: 'App',components: {StudentEgg},methods:{getStudent(){axios({url:"http://localhost:8080/stu/students",method: 'GET',}).then(res=>{console.log(res.data);})}}
}
</script><style></style>
  • StudentEgg.vue
<template><tr><th scope="row">1</th><td>Mark</td><td>Otto</td><td>@mdo</td><td><el-button type="primary" round>Primary</el-button><el-button type="primary" round>Primary</el-button></td></tr>
</template><script>
export default {}
</script><style></style>

image.png

至此

  • App.vue
<template><div id="app"><table class="table caption-top"><caption><h1>学生成绩管理系统</h1><el-button type="success" @click="getStudent">获取学生信息</el-button></caption><thead><tr><th scope="col">姓名</th><th scope="col">学号</th><th scope="col">班级</th><th scope="col">成绩</th><th scope="col">操作</th></tr></thead><tbody><StudentEgg v-for="stu in students" :key="stu.id" :student="stu"></StudentEgg></tbody></table></div>
</template><script>
import axios from "axios"
import StudentEgg from './components/StudentEgg.vue'
export default {name: 'App',components: {StudentEgg},data() {return {students:[]}},methods:{getStudent(){axios({url:"http://localhost:8080/stu/students",method: 'GET',}).then(res=>{console.log(res.data);this.students=res.data;})}}
}
</script><style></style>
  • StudentEgg.vue
<template><tr><td>{{ student.name }}</td><td>{{ student.stuid }}</td><td>{{ student.classroom }}</td><td>{{ student.grade }}</td><td><el-button type="primary" round>Primary</el-button><el-button type="primary" round>Primary</el-button></td></tr>
</template><script>
export default {props:["student"]
}
</script><style></style>

image.png
image.png

设置整个页面内容居中以及表格其他设置

image.png
image.png
image.png
image.png

至此

  • App.vue
<template><div id="app"><div class="col-8 offset-2"><table class="table caption-top table-hover"><caption class="text-center"><h1>学生成绩管理系统</h1><el-button type="success" @click="getStudent">获取学生信息</el-button></caption><thead><tr><th scope="col">姓名</th><th scope="col">学号</th><th scope="col">班级</th><th scope="col">成绩</th><th scope="col">操作</th></tr></thead><tbody><StudentEgg v-for="stu in students" :key="stu.id" :student="stu"></StudentEgg></tbody></table></div></div>
</template><script>
import axios from "axios"
import StudentEgg from './components/StudentEgg.vue'
export default {name: 'App',components: {StudentEgg},data() {return {students:[]}},methods:{getStudent(){axios({url:"http://localhost:8080/stu/students",method: 'GET',}).then(res=>{console.log(res.data);this.students=res.data;})}}
}
</script><style></style>
  • StudentEgg.vue
<template><tr><td>{{ student.name }}</td><td>{{ student.stuid }}</td><td>{{ student.classroom }}</td><td>{{ student.grade }}</td><td><el-button type="primary" round>修改</el-button><el-button type="danger" round>删除</el-button></td></tr>
</template><script>
export default {props:["student"]
}
</script><style></style>

image.png
image.png

修改功能

点击“修改”按钮，表格信息会变成输入框，用户直接在输入框进行修改

先看效果：
image.png
image.png
image.png
image.png

至此，前端代码

  • App.vue
<template><div id="app"><div class="col-8 offset-2"><table class="table caption-top table-hover"><caption class="text-center"><h1>学生成绩管理系统</h1><el-button type="success" @click="getStudent">获取学生信息</el-button></caption><thead><tr><th scope="col">姓名</th><th scope="col">学号</th><th scope="col">班级</th><th scope="col">成绩</th><th scope="col">操作</th></tr></thead><tbody><StudentEgg v-for="stu in students" :key="stu.id" :student="stu"></StudentEgg></tbody></table></div></div>
</template><script>
import axios from "axios"
import StudentEgg from './components/StudentEgg.vue'
export default {name: 'App',components: {StudentEgg},data() {return {students:[]}},methods:{getStudent(){axios({url:"http://localhost:8080/stu/students",method: 'GET',}).then(res=>{console.log(res.data);this.students=res.data;})}}
}
</script><style></style>
  • StudentEgg.vue
<template><tr><td v-show="!is_edit">{{ localStudent.name }}</td><td v-show="!is_edit">{{ localStudent.stuid }}</td><td v-show="!is_edit">{{ localStudent.classroom }}</td><td v-show="!is_edit">{{ localStudent.grade }}</td><td v-show="!is_edit"><el-button type="primary" round @click="modify">修改</el-button><el-button type="danger" round>删除</el-button></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.name"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.stuid"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.classroom"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.grade"/></td><td v-show="is_edit"><el-button type="primary" round @click="save">保存</el-button><el-button type="danger" round>删除</el-button></td></tr></template><script>
import axios from 'axios'
export default {props:["student"],data(){return {is_edit:false,localStudent:{...this.student}};},watch:{student:{handler(newStudent){this.localStudent = {...newStudent};},immediate: true}},methods:{modify(){this.is_edit=true;},save() {axios({url: "http://localhost:8080/stu/update",method: "POST",data: this.localStudent // 修正为使用 localStudent}).then(() => {this.$emit("update:student", this.localStudent); // 修正事件名为 "update"this.is_edit = false;}).catch(error => {console.error("更新学生信息时发生错误:", error);// 可能需要在这里处理错误情况，比如通知用户});}}
}
</script><style></style>

删除功能

演示：
image.png
点击删除后：
image.png
再刷新网页：
image.png

至此，前端代码：

  • App.vue
<template><div id="app"><div class="col-8 offset-2"><table class="table caption-top table-hover"><caption class="text-center"><h1>学生成绩管理系统</h1><el-button type="success" @click="getStudent">获取学生信息</el-button></caption><thead><tr><th scope="col">姓名</th><th scope="col">学号</th><th scope="col">班级</th><th scope="col">成绩</th><th scope="col">操作</th></tr></thead><tbody><StudentEgg v-for="stu in students" :key="stu.id" :student="stu"></StudentEgg></tbody></table></div></div>
</template><script>
import axios from "axios"
import StudentEgg from './components/StudentEgg.vue'
export default {name: 'App',components: {StudentEgg},data() {return {students:[]}},methods:{getStudent(){axios({url:"http://localhost:8080/stu/students",method: 'GET',}).then(res=>{console.log(res.data);this.students=res.data;})}}
}
</script><style></style>
  • StudentEgg.vue
<template><tr><td v-show="!is_edit">{{ localStudent.name }}</td><td v-show="!is_edit">{{ localStudent.stuid }}</td><td v-show="!is_edit">{{ localStudent.classroom }}</td><td v-show="!is_edit">{{ localStudent.grade }}</td><td v-show="!is_edit"><el-button type="primary" round @click="modify">修改</el-button><el-button type="danger" round @click="delStu">删除</el-button></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.name"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.stuid"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.classroom"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.grade"/></td><td v-show="is_edit"><el-button type="primary" round @click="save">保存</el-button><el-button type="danger" round>删除</el-button></td></tr></template><script>
import axios from 'axios'
export default {props:["student"],data(){return {is_edit:false,localStudent:{...this.student}};},watch:{student:{handler(newStudent){this.localStudent = {...newStudent};},immediate: true}},methods:{modify(){this.is_edit=true;},save() {axios({url: "http://localhost:8080/stu/update",method: "POST",data: this.localStudent // 修正为使用 localStudent}).then(() => {this.$emit("update:student", this.localStudent); // 修正事件名为 "update"this.is_edit = false;}).catch(error => {console.error("更新学生信息时发生错误:", error);// 可能需要在这里处理错误情况，比如通知用户});},delStu(){axios({url:"http://localhost:8080/stu/delete",method:"POST",data:this.localStudent})}}
}
</script><style></style>

弹出对话框

<template><div id="app"><div class="col-8 offset-2"><table class="table caption-top table-hover"><caption class="text-center"><h1>学生成绩管理系统</h1><el-button type="success" @click="getStudent">获取学生信息</el-button><el-button plain @click="dialogVisible = true">Click to open the Dialog</el-button><el-dialogv-model="dialogVisible"title="Tips"width="500":before-close="handleClose"><span>This is a message</span><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">Cancel</el-button><el-button type="primary" @click="dialogVisible = false">Confirm</el-button></div></template></el-dialog></caption><thead><tr><th scope="col">姓名</th><th scope="col">学号</th><th scope="col">班级</th><th scope="col">成绩</th><th scope="col">操作</th></tr></thead><tbody><StudentEggv-for="stu in students":key="stu.id":student="stu"></StudentEgg></tbody></table></div></div>
</template><script>
import axios from "axios";
import StudentEgg from "./components/StudentEgg.vue";
export default {name: "App",components: {StudentEgg,},data() {return {students: [],dialogVisible:false};},methods: {getStudent() {axios({url: "http://localhost:8080/stu/students",method: "GET",}).then((res) => {console.log(res.data);this.students = res.data;});},handleClose(done){this.$confirm('确认关闭？').then(()=>{done();}).catch(()=>{});}},
};
</script><style>
</style>

<template><tr><td v-show="!is_edit">{{ localStudent.name }}</td><td v-show="!is_edit">{{ localStudent.stuid }}</td><td v-show="!is_edit">{{ localStudent.classroom }}</td><td v-show="!is_edit">{{ localStudent.grade }}</td><td v-show="!is_edit"><el-button type="primary" round @click="modify">修改</el-button><el-button type="danger" round @click="delStu">删除</el-button></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.name"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.stuid"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.classroom"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.grade"/></td><td v-show="is_edit"><el-button type="primary" round @click="save">保存</el-button><el-button type="danger" round>删除</el-button></td></tr></template><script>
import axios from 'axios'
export default {props:["student"],data(){return {is_edit:false,localStudent:{...this.student}};},watch:{student:{handler(newStudent){this.localStudent = {...newStudent};},immediate: true}},methods:{modify(){this.is_edit=true;},save() {axios({url: "http://localhost:8080/stu/update",method: "POST",data: this.localStudent // 修正为使用 localStudent}).then(() => {this.$emit("update:student", this.localStudent); // 修正事件名为 "update"this.is_edit = false;}).catch(error => {console.error("更新学生信息时发生错误:", error);// 可能需要在这里处理错误情况，比如通知用户});},delStu(){axios({url:"http://localhost:8080/stu/delete",method:"POST",data:this.localStudent})}}
}
</script><style></style>

image.png

将对话框改造成“添加学生信息”

image.png
image.pngimage.png

至此，前端代码：

App.vue

<template><div id="app"><div class="col-8 offset-2"><table class="table caption-top table-hover"><caption class="text-center"><h1>学生成绩管理系统</h1><el-button type="success" @click="getStudent">获取学生信息</el-button><el-button plain @click="dialogVisible = true">添加学生信息</el-button><el-dialogv-model="dialogVisible"title="添加"width="500":before-close="handleClose"><div>输入学生信息：</div><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="addStudent">添加</el-button></div></template><div><span>姓名</span><input type="text" v-model="newStudent.name"></div><div><span>学号</span><input type="text" v-model.number="newStudent.stuid"></div><div><span>班级</span><input type="text" v-model="newStudent.classroom"></div><div><span>成绩</span><input type="text" v-model.number="newStudent.grade"></div></el-dialog></caption><thead><tr><th scope="col">姓名</th><th scope="col">学号</th><th scope="col">班级</th><th scope="col">成绩</th><th scope="col">操作</th></tr></thead><tbody><StudentEggv-for="stu in students":key="stu.id":student="stu"></StudentEgg></tbody></table></div></div>
</template><script>
import axios from "axios";
import StudentEgg from "./components/StudentEgg.vue";
export default {name: "App",components: {StudentEgg,},data() {return {students: [],dialogVisible:false,newStudent:{name:"",stuid:"",classroom:"",grade:""}};},methods: {getStudent() {axios({url: "http://localhost:8080/stu/students",method: "GET",}).then((res) => {console.log(res.data);this.students = res.data;});},handleClose(done){this.$confirm('确认关闭？').then(()=>{done();}).catch(()=>{});},addStudent(){axios({url: 'http://localhost:8080/stu/add',method: 'POST',data:this.newStudent})this.dialogVisible = false}},
};
</script><style>
</style>

StudentEgg.vue

<template><tr><td v-show="!is_edit">{{ localStudent.name }}</td><td v-show="!is_edit">{{ localStudent.stuid }}</td><td v-show="!is_edit">{{ localStudent.classroom }}</td><td v-show="!is_edit">{{ localStudent.grade }}</td><td v-show="!is_edit"><el-button type="primary" round @click="modify">修改</el-button><el-button type="danger" round @click="delStu">删除</el-button></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.name"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.stuid"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.classroom"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.grade"/></td><td v-show="is_edit"><el-button type="primary" round @click="save">保存</el-button><el-button type="danger" round>删除</el-button></td></tr></template><script>
import axios from 'axios'
export default {props:["student"],data(){return {is_edit:false,localStudent:{...this.student}};},watch:{student:{handler(newStudent){this.localStudent = {...newStudent};},immediate: true}},methods:{modify(){this.is_edit=true;},save() {axios({url: "http://localhost:8080/stu/update",method: "POST",data: this.localStudent // 修正为使用 localStudent}).then(() => {this.$emit("update:student", this.localStudent); // 修正事件名为 "update"this.is_edit = false;}).catch(error => {console.error("更新学生信息时发生错误:", error);// 可能需要在这里处理错误情况，比如通知用户});},delStu(){axios({url:"http://localhost:8080/stu/delete",method:"POST",data:this.localStudent})}}
}
</script><style></style>

其他修改

修改 01

image.png
image.png

修改 02

image.png
image.png

修改 03

删除后页面不会立刻刷新变化，手动刷新一次才会变化
现在修改
image.png

如果删除的时候，没反应，还没删掉页面就刷新了，可以把这里添加的这一行代码删掉

至此，前端代码：

App.vue

<template><div id="app"><div class="col-8 offset-2"><table class="table caption-top table-hover" style="text-align: center;"><caption class="text-center"><h1>学生成绩管理系统</h1><el-button type="success" @click="getStudent">获取学生信息</el-button><el-button type="warning" plain @click="dialogVisible = true">添加学生信息</el-button><el-dialogv-model="dialogVisible"title="添加"width="500":before-close="handleClose"><div>输入学生信息：</div><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="addStudent">添加</el-button></div></template><div><span>姓名</span><input type="text" v-model="newStudent.name"></div><div><span>学号</span><input type="text" v-model.number="newStudent.stuid"></div><div><span>班级</span><input type="text" v-model="newStudent.classroom"></div><div><span>成绩</span><input type="text" v-model.number="newStudent.grade"></div></el-dialog></caption><thead><tr><th scope="col">姓名</th><th scope="col">学号</th><th scope="col">班级</th><th scope="col">成绩</th><th scope="col">操作</th></tr></thead><tbody><StudentEggv-for="stu in students":key="stu.id":student="stu"></StudentEgg></tbody></table></div></div>
</template><script>
import axios from "axios";
import StudentEgg from "./components/StudentEgg.vue";
export default {name: "App",components: {StudentEgg,},data() {return {students: [],dialogVisible:false,newStudent:{name:"",stuid:"",classroom:"",grade:""}};},methods: {getStudent() {axios({url: "http://localhost:8080/stu/students",method: "GET",}).then((res) => {console.log(res.data);this.students = res.data;});},handleClose(done){this.$confirm('确认关闭？').then(()=>{done();}).catch(()=>{});},addStudent(){axios({url: 'http://localhost:8080/stu/add',method: 'POST',data:this.newStudent})this.dialogVisible = false}},
};
</script><style>
</style>

StudentEgg.vue

<template><tr><td v-show="!is_edit">{{ localStudent.name }}</td><td v-show="!is_edit">{{ localStudent.stuid }}</td><td v-show="!is_edit">{{ localStudent.classroom }}</td><td v-show="!is_edit">{{ localStudent.grade }}</td><td v-show="!is_edit"><el-button type="primary" round @click="modify">修改</el-button><el-button type="danger" round @click="delStu">删除</el-button></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.name"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.stuid"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.classroom"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.grade"/></td><td v-show="is_edit"><el-button type="primary" round @click="save">保存</el-button><el-button type="danger" round>删除</el-button></td></tr></template><script>
import axios from 'axios'
export default {props:["student"],data(){return {is_edit:false,localStudent:{...this.student}};},watch:{student:{handler(newStudent){this.localStudent = {...newStudent};},immediate: true}},methods:{modify(){this.is_edit=true;},save() {axios({url: "http://localhost:8080/stu/update",method: "POST",data: this.localStudent // 修正为使用 localStudent}).then(() => {this.$emit("update:student", this.localStudent); // 修正事件名为 "update"this.is_edit = false;}).catch(error => {console.error("更新学生信息时发生错误:", error);// 可能需要在这里处理错误情况，比如通知用户});},delStu(){axios({url:"http://localhost:8080/stu/delete",method:"POST",data:this.localStudent})location.reload();}}
}
</script><style></style>

分页实现

添加这些 elementui 的代码：
image.png
image.png
将分页按钮居中
image.pngimage.png

image.pngimage.png
image.png
image.png
至此，实现页面分页，每页五条信息

至此，前端代码

App.vue

<template><div id="app"><div class="col-8 offset-2"><table class="table caption-top table-hover" style="text-align: center;"><caption class="text-center"><h1>学生成绩管理系统</h1><el-button type="success" @click="getStudent">获取学生信息</el-button><el-button type="warning" plain @click="dialogVisible = true">添加学生信息</el-button><el-dialogv-model="dialogVisible"title="添加"width="500":before-close="handleClose"><div>输入学生信息：</div><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="addStudent">添加</el-button></div></template><div><span>姓名</span><input type="text" v-model="newStudent.name"></div><div><span>学号</span><input type="text" v-model.number="newStudent.stuid"></div><div><span>班级</span><input type="text" v-model="newStudent.classroom"></div><div><span>成绩</span><input type="text" v-model.number="newStudent.grade"></div></el-dialog></caption><thead><tr><th scope="col">姓名</th><th scope="col">学号</th><th scope="col">班级</th><th scope="col">成绩∈[0,999]</th><th scope="col">操作</th></tr></thead><tbody><StudentEggv-for="stu in students_for_page":key="stu.id":student="stu"></StudentEgg></tbody></table><div class="text-center"><el-button-group><el-button type="primary" icon="il-icon-arrow-left" @click="last_page">上一页</el-button><el-button type="primary" @click="next_page">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button></el-button-group></div></div></div>
</template><script>
import axios from "axios";
import StudentEgg from "./components/StudentEgg.vue";
export default {name: "App",components: {StudentEgg,},data() {return {page:1,students: [],dialogVisible:false,newStudent:{name:"",stuid:"",classroom:"",grade:""}};},methods: {getStudent() {axios({url: "http://localhost:8080/stu/students",method: "GET",}).then((res) => {console.log(res.data);this.students = res.data;});},handleClose(done){this.$confirm('确认关闭？').then(()=>{done();}).catch(()=>{});},addStudent(){axios({url: 'http://localhost:8080/stu/add',method: 'POST',data:this.newStudent})this.dialogVisible = false},next_page(){this.page +=1;},last_page(){this.page -=1;}},computed:{students_for_page(){return this.students.slice(this.page*5-5,this.page*5);}}
};
</script><style>
</style>

StudentEgg.vue

<template><tr><td v-show="!is_edit">{{ localStudent.name }}</td><td v-show="!is_edit">{{ localStudent.stuid }}</td><td v-show="!is_edit">{{ localStudent.classroom }}</td><td v-show="!is_edit">{{ localStudent.grade }}</td><td v-show="!is_edit"><el-button type="primary" round @click="modify">修改</el-button><el-button type="danger" round @click="delStu">删除</el-button></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.name"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.stuid"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.classroom"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.grade"/></td><td v-show="is_edit"><el-button type="primary" round @click="save">保存</el-button><el-button type="danger" round>删除</el-button></td></tr></template><script>
import axios from 'axios'
export default {props:["student"],data(){return {is_edit:false,localStudent:{...this.student}};},watch:{student:{handler(newStudent){this.localStudent = {...newStudent};},immediate: true}},methods:{modify(){this.is_edit=true;},save() {axios({url: "http://localhost:8080/stu/update",method: "POST",data: this.localStudent // 修正为使用 localStudent}).then(() => {this.$emit("update:student", this.localStudent); // 修正事件名为 "update"this.is_edit = false;}).catch(error => {console.error("更新学生信息时发生错误:", error);// 可能需要在这里处理错误情况，比如通知用户});},delStu(){axios({url:"http://localhost:8080/stu/delete",method:"POST",data:this.localStudent})location.reload();}}
}
</script><style></style>

登录和注册

登录和注册按钮做成这样：
image.png
使用这两个按钮：
image.png

创建数据库表格并添加一个数据

image.png

USE egg;
CREATE TABLE USER(id INT AUTO_INCREMENT,username VARCHAR(20) NOT NULL,passwords VARCHAR(20) NOT NULL,PRIMARY KEY (`id`)
) ENGINE=INNODB DEFAULT CHARSET=utf8;

后端操作

image.png

  • entity.User
package com.example.eggbox.entity;
import lombok.Data;@Data
public class User {private Integer id;private String username;private String passwords;
}

image.pngimage.png

  • controller.UserController
package com.example.eggbox.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.example.eggbox.entity.User;
import com.example.eggbox.mapper.UserMapper;
import com.google.gson.Gson;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;/*** <p>*  前端控制器* </p>** @author author* @since 2024-05-25*/
@RestController
@RequestMapping("/user")
@CrossOrigin(origins = {"*","null"})
public class UserController {@Autowiredprivate UserMapper userMapper;private Gson gson=new Gson();@PostMapping("/login")public String loginStudent(@RequestBody User user){QueryWrapper<User>userQueryWrapper=new QueryWrapper<>();userQueryWrapper.setEntity(user);User user_selected=userMapper.selectOne(userQueryWrapper);if (user_selected==null){return "0";}return "1";}@PostMapping("/register")public void register(@RequestBody User user){userMapper.insert(user);}
}

后端启动成功：
image.png

前端操作

image.png
image.png

修改变量名：
image.png
image.png

至此，登录功能完成：

  • App.vue
<template><div id="app"><div class="col-8 offset-2"><table class="table caption-top table-hover" style="text-align: center;"><caption class="text-center"><h1>学生成绩管理系统</h1><el-button type="success" @click="getStudent">获取学生信息</el-button><el-button type="warning" @click="dialogVisible = true">添加学生信息</el-button><el-dialog v-model="dialogVisible" title="添加" width="500" :before-close="handleClose" ><div>输入学生信息：</div><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="addStudent">添加</el-button></div></template><div><span>姓名</span><input type="text" v-model="newStudent.name"></div><div><span>学号</span><input type="text" v-model.number="newStudent.stuid"></div><div><span>班级</span><input type="text" v-model="newStudent.classroom"></div><div><span>成绩</span><input type="text" v-model.number="newStudent.grade"></div></el-dialog><el-button type="primary" circle @click="dialogVisibleLogin = true">登录</el-button><el-dialog v-model="dialogVisibleLogin" title="登录" width="500" :before-close="handleClose"><div>输入用户信息</div><div><span>账&nbsp;&nbsp;&nbsp;&nbsp;户</span><input type="text" v-model="user_for_login.username"/></div><div><span>密&nbsp;&nbsp;&nbsp;&nbsp;码</span><input type="password" v-model="user_for_login.passwords"/></div><template #footer><div class="dialog-footer"><el-button @click="dialogVisibleLogin = false">取消</el-button><el-button type="primary" @click="login">登录</el-button></div></template></el-dialog></caption><thead><tr><th scope="col">姓名</th><th scope="col">学号</th><th scope="col">班级</th><th scope="col">成绩∈[0,999]</th><th scope="col">操作</th></tr></thead><tbody><StudentEggv-for="stu in students_for_page":key="stu.id":student="stu"></StudentEgg></tbody></table><div class="text-center"><el-button-group><el-button type="primary" icon="il-icon-arrow-left" @click="last_page">上一页</el-button><el-button type="primary" @click="next_page">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button></el-button-group></div></div></div>
</template><script>
import axios from "axios";
import StudentEgg from "./components/StudentEgg.vue";
export default {name: "App",components: {StudentEgg,},data() {return {user_for_login:{username:"",passwords:""},page:1,students: [],dialogVisible:false,dialogVisibleLogin:false,newStudent:{name:"",stuid:"",classroom:"",grade:""}};},methods: {getStudent() {if(sessionStorage.getItem("isLogined")=="true"){axios({url: "http://localhost:8080/stu/students",method: "GET",}).then(res => {console.log(res.data);this.students = res.data;});}else{this.$alert("尚未登录，请先登录");}},handleClose(done){this.$confirm('确认关闭？').then(()=>{done();}).catch(()=>{});},addStudent(){axios({url: 'http://localhost:8080/stu/add',method: 'POST',data:this.newStudent})this.dialogVisible = false},next_page(){this.page +=1;},last_page(){this.page -=1;},login(){ axios({url: 'http://localhost:8080/user/login',data: this.user_for_login,method:"POST"}).then(res =>{console.log(res.data);if(res.data=="1"){sessionStorage.setItem("isLogined","true");alert("登陆成功，点击继续");}else{alert("用户名或密码错误");}})this.dialogVisibleLogin=false}},computed:{students_for_page(){return this.students.slice(this.page*5-5,this.page*5);}}
};
</script><style>
</style>
  • StudentEgg.vue
<template><tr><td v-show="!is_edit">{{ localStudent.name }}</td><td v-show="!is_edit">{{ localStudent.stuid }}</td><td v-show="!is_edit">{{ localStudent.classroom }}</td><td v-show="!is_edit">{{ localStudent.grade }}</td><td v-show="!is_edit"><el-button type="primary" round @click="modify">修改</el-button><el-button type="danger" round @click="delStu">删除</el-button></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.name"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.stuid"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.classroom"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.grade"/></td><td v-show="is_edit"><el-button type="primary" round @click="save">保存</el-button><el-button type="danger" round>删除</el-button></td></tr></template><script>
import axios from 'axios'
export default {props:["student"],data(){return {is_edit:false,localStudent:{...this.student}};},watch:{student:{handler(newStudent){this.localStudent = {...newStudent};},immediate: true}},methods:{modify(){this.is_edit=true;},save() {axios({url: "http://localhost:8080/stu/update",method: "POST",data: this.localStudent // 修正为使用 localStudent}).then(() => {this.$emit("update:student", this.localStudent); // 修正事件名为 "update"this.is_edit = false;}).catch(error => {console.error("更新学生信息时发生错误:", error);// 可能需要在这里处理错误情况，比如通知用户});},delStu(){axios({url:"http://localhost:8080/stu/delete",method:"POST",data:this.localStudent})location.reload();}}
}
</script><style></style>

注册功能


复制到这里
image.png

image.png
image.png
image.png

至此，前端代码：

App.vue

<template><div id="app"><div class="col-8 offset-2"><table class="table caption-top table-hover" style="text-align: center;"><caption class="text-center"><h1>学生信息管理系统</h1><el-button circle type="danger" @click="dialogVisibleRegister = true">注册</el-button><el-dialog v-model="dialogVisibleRegister" title="注册" width="500" :before-close="handleClose"><span>输入注册信息</span><div><span>新建账户：</span><input type="text" v-model="user_for_register.username"></div><div><span>账户密码：</span><input type="password" v-model="user_for_register.passwords"></div><div><span>确认密码：</span><input type="password" v-model="user_for_register.confirmPassword"></div><template #footer><div class="dialog-footer"><el-button @click="dialogVisibleRegister = false">取消</el-button><el-button type="primary" @click="register">注册</el-button></div></template></el-dialog><el-button type="success" @click="getStudent">获取学生信息</el-button><el-button type="warning" @click="dialogVisible = true">添加学生信息</el-button><el-dialog v-model="dialogVisible" title="添加" width="500" :before-close="handleClose" ><div>输入学生信息：</div><template #footer><div class="dialog-footer"><el-button @click="dialogVisible = false">取消</el-button><el-button type="primary" @click="addStudent">添加</el-button></div></template><div><span>姓名</span><input type="text" v-model="newStudent.name"></div><div><span>学号</span><input type="text" v-model.number="newStudent.stuid"></div><div><span>班级</span><input type="text" v-model="newStudent.classroom"></div><div><span>成绩</span><input type="text" v-model.number="newStudent.grade"></div></el-dialog><el-button type="primary" circle @click="dialogVisibleLogin = true">登录</el-button><el-dialog v-model="dialogVisibleLogin" title="登录" width="500" :before-close="handleClose"><div>输入用户信息</div><div><span>账&nbsp;&nbsp;&nbsp;&nbsp;户</span><input type="text" v-model="user_for_login.username"/></div><div><span>密&nbsp;&nbsp;&nbsp;&nbsp;码</span><input type="password" v-model="user_for_login.passwords"/></div><template #footer><div class="dialog-footer"><el-button @click="dialogVisibleLogin = false">取消</el-button><el-button type="primary" @click="login">登录</el-button></div></template></el-dialog></caption><thead><tr><th scope="col">姓名</th><th scope="col">学号</th><th scope="col">班级</th><th scope="col">成绩∈[0,999]</th><th scope="col">操作</th></tr></thead><tbody><StudentEggv-for="stu in students_for_page":key="stu.id":student="stu"></StudentEgg></tbody></table><div class="text-center"><el-button-group><el-button type="primary" icon="il-icon-arrow-left" @click="last_page">上一页</el-button><el-button type="primary" @click="next_page">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button></el-button-group></div></div></div>
</template><script>
import axios from "axios";
import StudentEgg from "./components/StudentEgg.vue";
export default {name: "App",components: {StudentEgg,},data() {return {user_for_login:{username:"",passwords:""},user_for_register:{username:"",passwords:"",confirmPassword:""},page:1,students: [],dialogVisible:false,dialogVisibleLogin:false,dialogVisibleRegister:false,newStudent:{name:"",stuid:"",classroom:"",grade:""}};},methods: {getStudent() {if(sessionStorage.getItem("isLogined")=="true"){axios({url: "http://localhost:8080/stu/students",method: "GET",}).then(res => {console.log(res.data);this.students = res.data;});}else{this.$alert("尚未登录，请先登录");}},handleClose(done){this.$confirm('确认关闭？').then(()=>{done();}).catch(()=>{});},addStudent(){axios({url: 'http://localhost:8080/stu/add',method: 'POST',data:this.newStudent})this.dialogVisible = false},next_page(){this.page +=1;},last_page(){this.page -=1;},login(){ axios({url: 'http://localhost:8080/user/login',data: this.user_for_login,method:"POST"}).then(res =>{console.log(res.data);if(res.data=="1"){sessionStorage.setItem("isLogined","true");alert("登陆成功，点击继续");}else{alert("用户名或密码错误");}})this.dialogVisibleLogin=false},register(){axios({url:"http://localhost:8080/user/register",method:"POST",data:this.user_for_register})this.dialogVisibleRegister=false;this.$alert("注册成功")}},computed:{students_for_page(){return this.students.slice(this.page*5-5,this.page*5);}}
};
</script><style>
</style>

StudentEgg.vue

<template><tr><td v-show="!is_edit">{{ localStudent.name }}</td><td v-show="!is_edit">{{ localStudent.stuid }}</td><td v-show="!is_edit">{{ localStudent.classroom }}</td><td v-show="!is_edit">{{ localStudent.grade }}</td><td v-show="!is_edit"><el-button type="primary" round @click="modify">修改</el-button><el-button type="danger" round @click="delStu">删除</el-button></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.name"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.stuid"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model="localStudent.classroom"/></td><td v-show="is_edit"><input class="w-50" type="text" v-model.number="localStudent.grade"/></td><td v-show="is_edit"><el-button type="primary" round @click="save">保存</el-button><el-button type="danger" round>删除</el-button></td></tr></template><script>
import axios from 'axios'
export default {props:["student"],data(){return {is_edit:false,localStudent:{...this.student}};},watch:{student:{handler(newStudent){this.localStudent = {...newStudent};},immediate: true}},methods:{modify(){this.is_edit=true;},save() {axios({url: "http://localhost:8080/stu/update",method: "POST",data: this.localStudent // 修正为使用 localStudent}).then(() => {this.$emit("update:student", this.localStudent); // 修正事件名为 "update"this.is_edit = false;}).catch(error => {console.error("更新学生信息时发生错误:", error);// 可能需要在这里处理错误情况，比如通知用户});},delStu(){axios({url:"http://localhost:8080/stu/delete",method:"POST",data:this.localStudent})location.reload();}}
}
</script><style></style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/15039.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

前端传参的三种方式

前端传参的三种方式

1、params 传参 参数拼接在地址 url 的后面给后台&#xff1b;地址栏中可见 案例1 地址栏&#xff1a;https://xxxxxxxx/admin/clues/detail?id558 接口代码&#xff1a; export function getClueDetail(query: any) {return request<clueItem>({url: /clues/detai…
阅读更多...
Java:图书管理系统

Java:图书管理系统

目录 一.book 1.在book包中的Book 类用来定义和引用书的名字&#xff0c;作者&#xff0c;价格&#xff0c;类型等。 2.在book包中的第二个类是BookList是用来构建书架&#xff0c;和书架上的初始书本&#xff0c; 二、ioperations 1.AddOperation (增加图书) 2.BorrowOp…
阅读更多...
Linux环境基础开发工具的使用（yum，vim，gcc/g++，make/Makefile，gdb）

Linux环境基础开发工具的使用（yum，vim，gcc/g++，make/Makefile，gdb）

Linux 软件包管理器-yum 什么是软件包及安装方式 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序。 但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好, 做成软件包(可以理解成windows上的安装程序)放在一个服务器上, 通过包管理…
阅读更多...
数据结构——栈（详细分析）

数据结构——栈（详细分析）

目录 &#x1f349;引言 &#x1f349;栈的本质和特点 &#x1f348;栈的基本操作 &#x1f348;栈的特点 &#x1f34d;后进先出 &#x1f34d;操作受限 &#x1f34d;动态调整 &#x1f348;栈的优缺点 &#x1f34d;优点 &#x1f34d;缺点 &#x1f349;栈的应用…
阅读更多...
SQOOP详细讲解

SQOOP详细讲解

SQOOP安装及使用 SQOOP安装及使用SQOOP安装1、上传并解压2、修改文件夹名字3、修改配置文件4、修改环境变量5、添加MySQL连接驱动6、测试准备MySQL数据登录MySQL数据库创建student数据库切换数据库并导入数据另外一种导入数据的方式使用Navicat运行SQL文件导出MySQL数据库impo…
阅读更多...
数据结构------二叉树经典习题2

数据结构------二叉树经典习题2

博主主页: 码农派大星. 关注博主带你了解更多数据结构知识 1.非递归的前序遍历 1.用栈来实现 2,前序遍历是根左右, 先是根节点入栈,,然后不为空时向左遍历,当为空时就返回向右遍历,右为空时直接出栈,依次循环即可. public void preOrderNot(TreeNode root){Stack<TreeNo…
阅读更多...
科技赋能，打破视障人士的沟通壁垒

科技赋能，打破视障人士的沟通壁垒

在探索如何增强盲人群体的社会参与度与幸福感的旅程中&#xff0c;盲人社交能力提升策略成为了不容忽视的一环。随着科技的不断进步&#xff0c;像“蝙蝠避障”这样的辅助软件&#xff0c;不仅在日常出行中为盲人提供了实时避障和拍照识别的便利&#xff0c;也在无形中为他们拓…
阅读更多...
华为数通 HCIP-Datacom（H12-821）题库

华为数通 HCIP-Datacom（H12-821）题库

最新 HCIP-Datacom&#xff08;H12-821&#xff09;完整题库请扫描上方二维码访问&#xff0c;持续更新中。 BGP路由的Update消息中可不包含以下哪些属性&#xff1f; A、Local Preference B、AS Path C、MED D、Origin 答案&#xff1a;AC 解析&#xff1a;as-path和ori…
阅读更多...
Java17 --- SpringCloud之Sentinel

Java17 --- SpringCloud之Sentinel

目录 一、Sentinel下载并运行 二、创建8401微服务整合Sentinel 三、流控规则 3.1、直接模式 3.2、关联模式 3.3、链路模式 3.3.1、修改8401代码 3.3.2、创建流控模式 3.4、Warm UP&#xff08;预热&#xff09; ​编辑 3.5、排队等待 四、熔断规则 4.1、慢调用比…
阅读更多...
【C++】09.vector

【C++】09.vector

一、vector介绍和使用 1.1 vector的介绍 vector是表示可变大小数组的序列容器。就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是可以动态改…
阅读更多...
操作系统实验四 （综合实验）设计简单的Shell程序

操作系统实验四 （综合实验）设计简单的Shell程序

前言 因为是一年前的实验&#xff0c;很多细节还有知识点我都已经遗忘了&#xff0c;但我还是尽可能地把各个细节讲清楚&#xff0c;请见谅。 1.实验目的 综合利用进程控制的相关知识&#xff0c;结合对shell功能的和进程间通信手段的认知&#xff0c;编写简易shell程序&…
阅读更多...
Excel透视表：快速计算数据分析指标的利器

Excel透视表：快速计算数据分析指标的利器

文章目录 概述1.数据透视表基本操作1.1准备数据&#xff1a;1.2创建透视表&#xff1a;1.3设置透视表字段&#xff1a;1.4多级分类汇总和交叉汇总的差别1.5计算汇总数据&#xff1a;1.6透视表美化&#xff1a;1.7筛选和排序&#xff1a;1.8更新透视表&#xff1a; 2.数据透视-数…
阅读更多...
【B站 heima】小兔鲜Vue3 项目学习笔记Day02

【B站 heima】小兔鲜Vue3 项目学习笔记Day02

文章目录 Pinia1.使用2. pinia-计数器案例3. getters实现4. 异步action5. storeToRefsx 数据解构保持响应式6. pinia 调试 项目起步1.项目初始化和git管理2. 使用ElementPlus3. ElementPlus 主题色定制4. axios 基础配置5. 路由设计6. 静态资源初始化和 Error lens安装7.scss自…
阅读更多...
Github 2024-05-24 开源项目日报 Top10

Github 2024-05-24 开源项目日报 Top10

根据Github Trendings的统计，今日(2024-05-24统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Python项目3非开发语言项目2TypeScript项目2JavaScript项目1Kotlin项目1C#项目1C++项目1Shell项目1Microsoft PowerToys: 最大化Windows系统生产…
阅读更多...
软件设计师备考笔记（十）：网络与信息安全基础知识

软件设计师备考笔记（十）：网络与信息安全基础知识

文章目录 一、网络概述二、网络互连硬件&#xff08;一&#xff09;网络的设备&#xff08;二&#xff09;网络的传输介质&#xff08;三&#xff09;组建网络 三、网络协议与标准&#xff08;一&#xff09;网络的标准与协议&#xff08;二&#xff09;TCP/IP协议簇 四、Inter…
阅读更多...
某神，云手机启动？

某神，云手机启动？

某神自从上线之后&#xff0c;热度不减&#xff0c;以其丰富的内容和独特的魅力吸引着众多玩家&#xff1b; 但是随着剧情无法跳过&#xff0c;长草期过长等原因&#xff0c;近年脱坑的玩家多之又多&#xff0c;之前米家推出了一款云某神的app&#xff0c;目标是为了减少用户手…
阅读更多...
RedisTemplateAPI:String

RedisTemplateAPI:String

文章目录 ⛄1 String 介绍⛄2 命令⛄3 对应 RedisTemplate API❄️❄️ 3.1 添加缓存❄️❄️ 3.2 设置过期时间(单独设置)❄️❄️ 3.3 获取缓存值❄️❄️ 3.4 删除key❄️❄️ 3.5 顺序递增❄️❄️ 3.6 顺序递减 ⛄4 以下是一些常用的API⛄5 应用场景 ⛄1 String 介绍 Str…
阅读更多...
ue引擎游戏开发笔记（47）——设置状态机解决跳跃问题

ue引擎游戏开发笔记（47）——设置状态机解决跳跃问题

1.问题分析&#xff1a; 目前当角色起跳时&#xff0c;只是简单的上下移动&#xff0c;空中仍然保持行走动作&#xff0c;并没有设置跳跃动作&#xff0c;因此&#xff0c;给角色设置新的跳跃动作&#xff0c;并优化新的动作动画。 2.操作实现&#xff1a; 1.实现跳跃不复杂&…
阅读更多...
Java中的继承和多态

Java中的继承和多态

继承 在现实世界中&#xff0c;狗和猫都是动物&#xff0c;这是因为他们都有动物的一些共有的特征。 在Java中&#xff0c;可以通过继承的方式来让对象拥有相同的属性&#xff0c;并且可以简化很多代码 例如&#xff1a;动物都有的特征&#xff0c;有名字&#xff0c;有年龄…
阅读更多...
Mybatis源码剖析---第一讲

Mybatis源码剖析---第一讲

Mybatis源码剖析 基础环境搭建 JDK8 Maven3.6.3&#xff08;别的版本也可以…&#xff09; MySQL 8.0.28 --> MySQL 8 Mybatis 3.4.6 准备jar&#xff0c;准备数据库数据 把依赖导入pom.xml中 <properties><project.build.sourceEncoding>UTF-8</p…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023