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

news2025/4/7 15:20:47

创建一个 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: 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);
    }
}

启动项目

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

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

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-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 的代码：
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-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>

登录和注册

登录和注册按钮做成这样：
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 {
    @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);
    }
}

后端启动成功：
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>
          <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>

注册功能


复制到这里
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>
          <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>

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

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

相关文章

DataGear 制作服务端分页的数据可视化看板

DataGear 制作服务端分页的数据可视化看板

DataGear 2.3.0 版本新增了附件图表数据集特性&#xff08;在新建图表时将关联的数据集设置为 附件 &#xff0c;具体参考官网文档定义图表章节&#xff09;&#xff0c;在制作看板时&#xff0c;可以基于此特性&#xff0c;结合dg-chart-listener&#xff0c;利用服务端数据扩…
阅读更多...
HTTP 请求的完整过程

HTTP 请求的完整过程

HTTP 请求的完整过程 当用户在浏览器输入网址回车之后&#xff0c;网络协议都做了哪些工作呢? 首先工作的是 浏览器应用程序&#xff0c;他要解析出 URL中的域名 根据域名获取对应的ip地址&#xff0c;首先从浏览器缓存中査看&#xff0c;如下可以査看浏览器中域名对应ip的解…
阅读更多...
WPF中MVVM架构学习笔记

WPF中MVVM架构学习笔记

MVVM架构是一种基于数据驱动的软件开发架构&#xff0c;它将数据模型&#xff08;Model&#xff09;、视图&#xff08;View&#xff09;和视图模型&#xff08;ViewModel&#xff09;三者进行分离&#xff0c;使得开发者可以更加专注于各自领域的开发。其中&#xff0c;Model负…
阅读更多...
C++入门:从C语言到C++的过渡（2）

C++入门:从C语言到C++的过渡（2）

目录 1.缺省参数 1.1缺省参数的概念 1.2缺省参数的分类及使用 1.3注意点 2.函数重载 2.1函数重载的定义 2.2函数重载的情况分类 2.3注意 2.4函数名修饰规则 3.引用 3.1引用的概念 3.2注意事项 3.3常引用 4.4引用的使用场景 4.4.1作为函数的参数 4.4.2做函数返回…
阅读更多...
计算机网络安全控制技术

计算机网络安全控制技术

1.防火墙技术 防火墙技术是近年来维护网络安全最重要的手段&#xff0c;但是防火墙不是万能的&#xff0c;需要配合其他安全措施来协同 2.加密技术 目前加密技术主要有两大类&#xff1a;对称加密和非对称加密 3.用户识别技术 核心是识别网络者是否是属于系统的合法用户 …
阅读更多...
CSS基础（第二天）

CSS基础（第二天）

Emmet语法 快速生成HTML结构语法 1. 生成标签 直接输入标签名 按tab键即可 比如 div 然后tab 键&#xff0c; 就可以生成 <div></div> 2. 如果想要生成多个相同标签 加上 * 就可以了 比如 div*3 就可以快速生成3个div 3. 如果有父子级关系的标签&#xff0c;可以…
阅读更多...
进制转换【野路子改造】

进制转换【野路子改造】

非科班&#xff0c;一直都是自己的野路子&#xff0c;现在要回炉重造 十进制->二进制 基本思想&#xff1a; 开始写的&#xff08;80%&#xff09;&#xff1a; #include<stdio.h> using namespace std; int main(){ int n; scanf("%d",&n); int a[1…
阅读更多...
Linux(Ubuntu)下MySQL5.7的安装

Linux(Ubuntu)下MySQL5.7的安装

文章目录 1.看系统本身有没有MySQL2.安装MySQL3.登录MySQL4.修改配置文件my.cnf/mysqld.cnf5.开启远程访问功能5.1 允许其他主机通过root访问数据库5.2 Ubuntu下配置文件修改说明 1.看系统本身有没有MySQL mariadb也是mysql所以要先检查一下系统有没有MySQL 我这台机子是新机子…
阅读更多...
FreeRTOS_任务通知_学习笔记

FreeRTOS_任务通知_学习笔记

原文链接 任务通知 使用队列、信号量、事件组等等方法时&#xff0c;并不知道对方是谁。使用任务通知时&#xff0c;可以明确指定&#xff1a;通知哪个任务。 任务通知结构体中只有一个任务通知值&#xff0c;只能保持一个数据。 数据智能给目标任务独享。 任务通知只能一个…
阅读更多...
win10右键没有默认打开方式的选项的处理方法

win10右键没有默认打开方式的选项的处理方法

问题描述 搞了几个PDF书籍学习一下&#xff0c;不过我不想用默认的WPS打开&#xff0c;因为WPS太恶心人了&#xff0c;占用资源又高。我下载了个Sumatra PDF&#xff0c;这时候我像更改pdf文件默认的打开程序&#xff0c;发现右击没有这个选项。 问题解决 右击文件–属性–…
阅读更多...
误差反向传播简介与实现

误差反向传播简介与实现

误差反向传播 导语计算图反向传播链式法则 反向传播结构加法节点乘法节点 实现简单层加法乘法 激活函数层实现ReLUSigmoid Affine/Softmax层实现Affine基础版批版本 Softmax-with-Loss 误差反向传播实现梯度确认总结参考文献 导语 书上在前一章介绍了随机梯度下降法进行参数与…
阅读更多...
C语言 控制台API函数

C语言 控制台API函数

目录 前言1. 句柄 HANDLE2. 控制台API结构体2.1 坐标结构 COORD2.2 光标信息结构 CONSOLE_CURSOR_INFO2.3 控制台屏幕缓冲区信息结构 CONSOLE_SCREEN_BUFFER_INFO 3. 控制台API函数3.1 获取句柄 GetStdHandle3.2 获取光标信息 GetConsoleCursorInfo3.3 设置光标信息SetConsoleC…
阅读更多...
达梦8 RLOG_COMPRESS_LEVEL参数对系统的影响

达梦8 RLOG_COMPRESS_LEVEL参数对系统的影响

测试环境是一套主备达梦数据库。下面在主备库分别设置参数进行测试 测试一、 主库设置RLOG_COMPRESS_LEVEL9&#xff0c;备库设置为0。 分别删除主备库的归档日志后执行测试脚本 #当前时间 date disql SYSDBA/SYSDBA:1807 <<EOF #显示归档大小 select sum(free)/1024…
阅读更多...
win10无权禁用任务计划程序中的任务

win10无权禁用任务计划程序中的任务

问题说明 最近被win10的自动频繁更新搞得难受&#xff0c;发誓要彻底禁用这个家伙&#xff0c;于是网上找了教程执行&#xff0c;发现执行到禁用windows update计划任务时&#xff0c;提示&#xff1a; 这特么windows这个辣鸡系统&#xff0c;限制还真多&#xff01;&#xf…
阅读更多...
❤ Vscode和Idea都可以使用的-AI插件（官方-百度出的）

❤ Vscode和Idea都可以使用的-AI插件（官方-百度出的）

❤ Vscode和Idea都可以使用的-AI插件&#xff08;官方-百度出的&#xff09; 最新AI特别火&#xff0c;给大家推荐一下最新出的VScode插件&#xff0c;辅助我们写代码&#xff01; 1、下载地址&#xff1a; > https://comate.baidu.com/zh/shopping?inviteCodefkzlak8f …
阅读更多...
HarmonyOS-MPChart绘制一条虚实相接的曲线

HarmonyOS-MPChart绘制一条虚实相接的曲线

本文是基于鸿蒙三方库mpchart&#xff08;OpenHarmony-SIG/ohos-MPChart&#xff09;的使用&#xff0c;自定义绘制方法&#xff0c;绘制一条虚实相接的曲线。 mpchart本身的绘制功能是不支持虚实相接的曲线的&#xff0c;要么完全是实线&#xff0c;要么完全是虚线。那么当我…
阅读更多...
嵌入式单片机启动地址映射关系

嵌入式单片机启动地址映射关系

一、内核只会从0地址启动 1.0地址第一个字是sp栈指针，第二个字是Reset_Handler入口，参考图1中启动代码中的中断向量表。具体使用流程参考图2（参考自野火） 图1 图2 2.0地址映射以后，软件上使用0地址访问的空间是映射到的器件的空间 3.0地址映射只会影响单个器件上的地址，…
阅读更多...
【C++】09.vector

【C++】09.vector

一、vector介绍和使用 1.1 vector的介绍 vector是表示可变大小数组的序列容器。就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素。也就是意味着可以采用下标对vector的元素进行访问&#xff0c;和数组一样高效。但是又不像数组&#xff0c;它的大小是可以动态改…
阅读更多...
2024/5/25 英语每日一段

2024/5/25 英语每日一段

Alex Bols of the GuildHE group, representing 60 universities and colleges, said: “As the financial health of the higher education sector becomes ever more challenging, the need for a long-term funding solution becomes ever more urgent. “The increasing co…
阅读更多...
鸿蒙HarmonyOS实战-Stage模型（信息传递载体Want）

鸿蒙HarmonyOS实战-Stage模型（信息传递载体Want）

&#x1f680;前言 应用中的信息传递是为了实现各种功能和交互。信息传递可以帮助用户和应用之间进行有效的沟通和交流。通过信息传递&#xff0c;应用可以向用户传递重要的消息、通知和提示&#xff0c;以提供及时的反馈和指导。同时&#xff0c;用户也可以通过信息传递向应用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023