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.pswp.cn/web/15039.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/15039.shtml
英文地址，請注明出處：http://en.pswp.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…
閱讀更多...
保研機試算法訓練個人記錄筆記（七）

保研機試算法訓練個人記錄筆記（七）

輸入格式&#xff1a; 在第1 行給出不超過10^5 的正整數N, 即參賽&#xff5d;人數。隨后N 行&#xff0c;每行給出一位參賽者的 信息和成績&#xff0c;包括其所代表的學校的編號&#xff08;從1 開始連續編號&#xff09;及其比賽成績&#xff08;百分制&#xff09;&#xf…
閱讀更多...
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;棧的應用…
閱讀更多...
002 遞歸評論 mongodb websocket消息推送

002 遞歸評論 mongodb websocket消息推送

文章目錄 商品評論CommentController.javaComment.javaCommentServiceImpl.javaCommentRepository.javaCommentService.javaWebSocketConfig.javaWebSocketProcess.javaapplication.yamlproductReview.htmlindex.htmlindex.jsindex.css 訂單評論EvaluateMapper.xmlEvaluateMapp…
閱讀更多...
從零手寫實現 nginx-01-為什么不能有 java 版本的 nginx?

從零手寫實現 nginx-01-為什么不能有 java 版本的 nginx?

前言 大家好&#xff0c;我是老馬。很高興遇到你。 作為一個 java 開發者&#xff0c;工作中一直在使用 nginx。卻發現一直停留在使用層面&#xff0c;無法深入理解。 有一天我在想&#xff0c;為什么不能有一個 java 版本的 nginx 呢&#xff1f; 一者是理解 nginx 的設計…
閱讀更多...
HTTP 協議中 GET 和 POST 有什么區別?分別適用于什么場景?

HTTP 協議中 GET 和 POST 有什么區別?分別適用于什么場景?

HTTP 協議中 GET 和 POST 是兩種常用的請求方法&#xff0c;它們的區別如下: 1. 參數傳遞方式不同 GET 請求參數是在 URL 中以鍵值對的形式傳遞的&#xff0c;例如:http://www.example.com/&#xff1f;key1value1&k ey2value2。 而 POST 請求參數是在請求體中以鍵值對的…
閱讀更多...
SQOOP詳細講解

SQOOP詳細講解

SQOOP安裝及使用 SQOOP安裝及使用SQOOP安裝1、上傳并解壓2、修改文件夾名字3、修改配置文件4、修改環境變量5、添加MySQL連接驅動6、測試準備MySQL數據登錄MySQL數據庫創建student數據庫切換數據庫并導入數據另外一種導入數據的方式使用Navicat運行SQL文件導出MySQL數據庫impo…
閱讀更多...
數據訪問與Spring Data JPA

數據訪問與Spring Data JPA

數據訪問與Spring Data JPA 在現代Java應用程序中&#xff0c;持久化數據是核心功能之一。Spring Data JPA&#xff08;Java Persistence API&#xff09;為開發者提供了一種簡單且高效的方式來訪問和操作數據庫。在本博文中&#xff0c;我將向您展示如何使用Spring Data JPA來…
閱讀更多...
數據結構------二叉樹經典習題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…
閱讀更多...
深度學習訓練框架——監督學習為例

深度學習訓練框架——監督學習為例

訓練框架 文章目錄 訓練框架1. 模型網絡結構2. 數據讀取與數據加載2.1Dataloater參數2.2 collate_fn 3. 優化器與學習率調整3.1 優化器3.2 學習率調度 4迭代訓練4.1 train_epoch4.2 train iteration 5.1 保存模型權重 本文內容以pytorch為例 1. 模型網絡結構 自定義網絡模型繼…
閱讀更多...
測試開發面試題

測試開發面試題

簡述自動化測試的三大等待 強制等待。直接使用time.sleep()方法讓程序暫停指定的時間。優點是實現簡單&#xff0c;缺點是不夠靈活&#xff0c;可能會導致不必要的等待時間浪費。隱式等待。設置一個固定的等待時間&#xff0c;在這個時間內不斷嘗試去查找元素&#xff0c;如果…
閱讀更多...
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自…
閱讀更多...
最新文章

Copyright @ 2022~2023