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

01学习篇

创建一个 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.rhkb.cn/news/337298.html

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

相关文章

如何使用前端表格控件实现多数据源整合？

如何使用前端表格控件实现多数据源整合？

前言 作为表格产品的典型应用场景之一&#xff0c;几乎所有的行业都会存在类 Excel 报表开发这样的应用场景&#xff0c;而在这些应用场景中&#xff0c;经常会遇见下面的这些痛点&#xff1a; 报表数据往往来自多个不同的数据源&#xff0c;需要报表系统能够同时连接多个数据源…
阅读更多...
反VC情绪：加密市场需要新的分布式代币发行方式

反VC情绪：加密市场需要新的分布式代币发行方式

GME事件 GME事件反应了社交媒体在金融决策中的影响力&#xff0c;散户投资者群体通过集体行动&#xff0c;改变了很多人对股市的看法和参与方式。 GME事件中&#xff0c;meme扮演了核心角色。散户投资者使用各种meme来沟通策略、激励持股行为&#xff0c;创造了一种反对华尔街…
阅读更多...
5. MySQL运算符和函数

5. MySQL运算符和函数

文章目录 【 1. 算术运算符 】【 2. 逻辑运算符 】2.1 逻辑非 (NOT 或者 !)2.2 逻辑与运算符 (AND 或者 &&)2.3 逻辑或 (OR 或者 ||)2.4 异或运算 (XOR) 【 3. 比较运算符 】3.1 等于 3.2 安全等于运算符 <>3.3 不等于运算符 (<> 或者 !)3.4 小于等于运算符…
阅读更多...
AdroitFisherman模块安装日志(2024/5/31)

AdroitFisherman模块安装日志(2024/5/31)

安装指令 pip install AdroitFisherman-0.0.29.tar.gz -v 安装条件 1:Microsoft Visual Studio Build Tools 2:python 3.10.x 显示输出 Using pip 24.0 from C:\Users\12952\AppData\Local\Programs\Python\Python310\lib\site-packages\pip (python 3.10) Processing c:\u…
阅读更多...
QT加载CAD文件（二）LibreCAD源码编译

QT加载CAD文件（二）LibreCAD源码编译

一、LibreCAD LibreCAD是一个开源软件&#xff0c;不用破解激活&#xff0c;可以打开编辑DXF格式的文档&#xff0c;软件大小只有二十多M&#xff0c;对于一些比较简单的图纸还是可以胜任的。本文主要讲该软件源码编译。如果了解软件的基本使用可以参考https://blog.csdn.net/…
阅读更多...
参数高效微调PEFT(一)快速入门BitFit、Prompt Tuning、Prefix Tuning

参数高效微调PEFT(一)快速入门BitFit、Prompt Tuning、Prefix Tuning

参数高效微调PEFT(一)快速入门BitFit、Prompt Tuning、Prefix Tuning 目前&#xff0c;模型最全的网站是HuggingFace&#xff0c;但是国内需要魔法流量才能访问。另外&#xff0c;现在大模型权重文件都较大&#xff0c;也会浪费不少流量&#xff0c;因此这里推荐使用魔搭社区下…
阅读更多...
一文学懂Base64编码原理

一文学懂Base64编码原理

前言 Base64编码与ASCII编码一样&#xff0c;也是一种编码方式。不同的是ASCII码采用7位二进制数表示&#xff08;包括大小写字母、数字、标点符号和一些不可见字符&#xff09;&#xff0c;而Base64采用6位二进制数表示&#xff08;包括大小写字母、0~9数字、和/&#xff09;…
阅读更多...
Java | Leetcode Java题解之第120题三角形最小路径和

Java | Leetcode Java题解之第120题三角形最小路径和

题目&#xff1a; 题解&#xff1a; class Solution {public int minimumTotal(List<List<Integer>> triangle) {int n triangle.size();int[] f new int[n];f[0] triangle.get(0).get(0);for (int i 1; i < n; i) {f[i] f[i - 1] triangle.get(i).get(i…
阅读更多...
如何修改开源项目中发现的bug？

如何修改开源项目中发现的bug？

如何修改开源项目中发现的bug&#xff1f; 目录 如何修改开源项目中发现的bug&#xff1f;第一步&#xff1a;找到开源项目并建立分支第二步&#xff1a;克隆分支到本地仓库第三步&#xff1a;在本地对项目进行修改第四步&#xff1a;依次使用命令行进行操作注意&#xff1a;Gi…
阅读更多...
闽盾杯 2021 DNS协议分析

闽盾杯 2021 DNS协议分析

今年CISCN的Tough DNS 的前戏就是DNS协议分析 直接可以查找到flag的base64形式Zmxh 发现就是请求的dnslog 携带的数据 过滤器就是 dns tshark -r dns.pcapng -T json -Y "dns" >1.json 字段选择 dns.qry.name tshark -r dns.pcapng -T json -Y "dns"…
阅读更多...
Linux 编译安装python

Linux 编译安装python

以deepin操作系统安装Python3.8.10为例。 下载 python3.8.10 官网下载 Linux要下载源码&#xff0c;进行编译。 下图tarball即tar包&#xff0c;是压缩包的意思。python官网给出两种压缩格式的tarball&#xff0c;下载哪个都可以。 方式一&#xff1a;直接点击链接下载 方式…
阅读更多...
如何评价GPT-4o?GPT-4o和ChatGPT4.0的区别是啥呢？

如何评价GPT-4o?GPT-4o和ChatGPT4.0的区别是啥呢？

如何评价GPT-4o? GPT-4o代表了人工智能领域的一个重要里程碑&#xff0c;它不仅继承了GPT-4的强大智能&#xff0c;还在多模态交互方面取得了显著进步。以下是几个方面的分析&#xff1a; 技术特点 多模态交互能力&#xff1a;GPT-4o支持文本、音频和图像的任意组合输入与输出…
阅读更多...
数据结构：希尔排序

数据结构：希尔排序

文章目录 前言一、排序的概念及其运用二、常见排序算法的实现 1.插入排序2.希尔排序总结 前言 排序在生活中有许多实际的运用。以下是一些例子&#xff1a; 购物清单&#xff1a;当我们去超市购物时&#xff0c;通常会列出一份购物清单。将购物清单按照需要购买的顺序排序&…
阅读更多...
[羊城杯 2021]BabySmc

[羊城杯 2021]BabySmc

运行就是输入flag 不知道怎么跳过去的 这个应该就是smc加密的函数了 运行完这个函数才能继续往下 int __cdecl main(int argc, const char **argv, const char **envp) {__int64 v3; // rbx__int64 v4; // r12__int64 v5; // r13unsigned __int64 v6; // raxchar v7; // spcha…
阅读更多...
一分钟学习数据安全——自主管理身份SSI基本概念

一分钟学习数据安全——自主管理身份SSI基本概念

之前我们已经介绍过数字身份的几种模式。其中&#xff0c;分布式数字身份模式逐渐普及演进的结果就是自主管理身份&#xff08;SSI&#xff0c;Self-Sovereign Identity&#xff09;。当一个人能够完全拥有和控制其数字身份&#xff0c;而无需依赖中心化机构&#xff0c;这就是…
阅读更多...
【深度密码】神经网络算法在机器学习中的前沿探索

【深度密码】神经网络算法在机器学习中的前沿探索

目录 &#x1f69d;前言 &#x1f68d;什么是机器学习 1. 基本概念 2. 类型 3. 关键算法 4. 应用领域 5. 工作流程 &#x1f68b;什么是神经网络 基本结构 &#x1f682;神经网络的工作原理 前向传播&#xff08;Forward Propagation&#xff09;&#xff1a; 损失函…
阅读更多...
20240531在飞凌的OK3588-C开发板上跑原厂的Buildroot测试ETH0接口【仅供参考】

20240531在飞凌的OK3588-C开发板上跑原厂的Buildroot测试ETH0接口【仅供参考】

20240531在飞凌的OK3588-C开发板上跑原厂的Buildroot测试ETH0接口 2024/5/31 20:28 rootrk3588-buildroot:/# ifconfig eth0 up rootrk3588-buildroot:/# ifconfig eth1 up rootrk3588-buildroot:/# ifconfig rootrk3588-buildroot:/# rootrk3588-buildroot:/# ifconfig eth1…
阅读更多...
Postgresql源码（134）优化器针对volatile函数的排序优化分析

Postgresql源码（134）优化器针对volatile函数的排序优化分析

相关 《Postgresql源码&#xff08;133&#xff09;优化器动态规划生成连接路径的实例分析》 上一篇对路径的生成进行了分析&#xff0c;通过make_one_rel最终拿到了一个带着路径的RelOptInfo。本篇针对带volatile函数的排序场景继续分析subquery_planner的后续流程。 subquer…
阅读更多...
使用 Vue 3 和 vue-print-nb 插件实现复杂申请表的打印

使用 Vue 3 和 vue-print-nb 插件实现复杂申请表的打印

文章目录 1&#xff1a;创建 Vue 3 项目2&#xff1a;安装 vue-print-nb 插件3&#xff1a;配置 vue-print-nb 插件4&#xff1a;创建一个复杂的申请表5&#xff1a;使用 ApplicationForm 组件6&#xff1a;运行项目 在开发管理系统或申请表打印功能时&#xff0c;打印功能是一…
阅读更多...
EG2106 原装正品 贴片SOP-8 大功率MOS管栅极驱动芯片耐压600V

EG2106 原装正品 贴片SOP-8 大功率MOS管栅极驱动芯片耐压600V

EG2106 在电机控制中的应用非常广泛&#xff0c;下面是一些典型的应用案例&#xff1a; 1. 无刷直流电机&#xff08;BLDC&#xff09;控制&#xff1a;EG2106 可以用于驱动无刷直流电机的功率MOSFET或IGBT。在无刷电机控制器中&#xff0c;通常会用到H桥电路来控制电机的正…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023