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

创建一个 vue 项目

创建这个新的文件夹

创建前端项目 eggbox

数据库 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

设置表格为

创建后端项目

创建项目

设置项目

创建模块

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: eggBox
  datasource:
    url: jdbc:mysql://localhost:3306/egg?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis-plus:
  configuration:
    # 开启驼峰命名自动映射
    map-underscore-to-camel-case: true
    # 开启日志打印
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  type-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 {
    @Autowired
    private 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);
    }
}

启动项目

前端增删改查

准备

vscode 打开之前创建的前端项目

新建一个终端

启动项目

安装 axios

引入 element-plus
npm install element-plus安装 elementplus

// 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 [email protected]

将这些代码复制到 main.js

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

App.vue 删成这样

启动项目

编写代码

复制这些代码

复制到这里

打开看一下

至此

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 网站复制按钮组件

至此

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>

至此

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>

至此

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>

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

至此

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>

修改功能

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

先看效果：

至此，前端代码

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>

删除功能

演示：

点击删除后：

再刷新网页：

至此，前端代码：

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-dialog
            v-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>
          <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: [],
      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>

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

至此，前端代码：

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-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>
        </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: [],
      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

修改 02

修改 03

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

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

至此，前端代码：

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-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>
        </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: [],
      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 的代码：

将分页按钮居中

至此，实现页面分页，每页五条信息

至此，前端代码

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-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>
        </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>
          <StudentEgg
            v-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>

登录和注册

登录和注册按钮做成这样：

使用这两个按钮：

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

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;

后端操作

entity.User

package com.example.eggbox.entity;
import lombok.Data;

@Data
public class User {
    private Integer id;
    private String username;
    private String passwords;
}

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 {
    @Autowired
    private 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);
    }
}

后端启动成功：

前端操作

修改变量名：

至此，登录功能完成：

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>
          <StudentEgg
            v-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>

注册功能

复制到这里

至此，前端代码：

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>
          <StudentEgg
            v-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>

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

创建一个 vue 项目

数据库 SQL

创建后端项目

创建项目

设置项目

创建模块

pom.xml

.yml 配置

mybatisplus 插件代码生成器

代码

启动项目

前端增删改查

准备

编写代码

至此

至此

至此

至此

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

至此

修改功能

至此，前端代码

删除功能

至此，前端代码：

弹出对话框

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

至此，前端代码：

其他修改

修改 01

修改 02

修改 03

至此，前端代码：

分页实现

至此，前端代码

登录和注册

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

后端操作

前端操作

至此，登录功能完成：

注册功能

至此，前端代码：

悦读