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

01学习篇

创建一个 vue 项目

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

数据库 SQL

CREATE DATABASE IF NOT EXISTS egg DEFAULT CHARACTER SET utf8 COLLATE utf8_bin;
USE egg;

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

image.png
设置表格为
image.png

创建后端项目

创建项目

image.png

设置项目

image.pngimage.pngimage.pngimage.png

创建模块

image.png

pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>3.2.5</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>

  <!-- Generated by https://start.springboot.io -->
  <!-- 优质的 spring/boot/data/security/cloud 框架中文文档尽在 => https://springdoc.cn -->
	<groupId>com.example</groupId>
	<artifactId>eggBox</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>eggBox</name>
	<description>eggBox</description>
	<properties>
		<java.version>17</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>com.mysql</groupId>
			<artifactId>mysql-connector-j</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<version>1.18.30</version>
			<scope>provided</scope>
		</dependency>
		<dependency>
			<groupId>com.baomidou</groupId>
			<artifactId>mybatis-plus-spring-boot3-starter</artifactId>
			<version>3.5.5</version>
		</dependency>
		<dependency>
			<groupId>com.google.code.gson</groupId>
			<artifactId>gson</artifactId>
			<version>2.10.1</version>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

.yml 配置

spring:
  application:
    name: 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.mfbz.cn/a/656343.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

超级初始网络

超级初始网络

目录 一、网络发展史 1、独立模式 2、局域网 LAN&#xff08;Local Area Network&#xff09; 3、广域网 WAN (Wide Area Network) 二、网络通信基础 1、IP地址&#xff1a;用于定位主机的网络地址 2、端口号&#xff1a;用于定位主机中的进程 3、网络协议 4、五元组 …
阅读更多...
The First项目报告：解读ZK技术的跨链巨头Polyhedra Network

The First项目报告：解读ZK技术的跨链巨头Polyhedra Network

4 月 17 日&#xff0c;零知识证明&#xff08;ZK&#xff09;基础设施开发团队 Polyhedra Network与谷歌云达成战略合作&#xff0c;以响应 Web2 与 Web3 市场对于该技术日益增长的需求。双方将基于Polyhedra的尖端研究及专有算法通过谷歌云提供的零知识即服务向全球开发者开放…
阅读更多...
基于LLM的优化器评测-非凸函数

基于LLM的优化器评测-非凸函数

基于LLM的优化器评测-非凸函数 目标函数测试结果测试代码测试日志 背景: ​ 很多时候我们需要为系统寻找最优的超参.比如模型训练,推理的量化等.本文尝试将LLM当成优化器,帮忙我们寻找最优的超参. 验证方法: 1.设计一个已知最优解的多项式,该多项式有3个变量(因为3个变量可以…
阅读更多...
温故而知新-Spring篇【面试复习】

温故而知新-Spring篇【面试复习】

温故而知新-Spring篇【面试复习】 前言版权推荐温故而知新-Spring篇IOCAOP循环依赖springboot如果要对属性文件中的账号密码加密如何实现&#xff1f;SpringBoot的优点Spring Boot 的核心注解是哪个&#xff1f;它主要由哪几个注解组成的&#xff1f; 最后 前言 2023-7-31 15:…
阅读更多...
MX Component基础使用（多点位读取，多点位写入）

MX Component基础使用（多点位读取，多点位写入）

步骤&#xff0c;先连接PLC&#xff0c;然后在填入对应的点位 D10 然后去读取。 using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Linq;using System.Text;using System.Threading.Tasks;us…
阅读更多...
微信小程序进阶(1)--自定义组件

微信小程序进阶(1)--自定义组件

自定义组件 1.1 什么是自定义组件 开发文档&#xff1a;https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 小程序中常常会有些通用的交互模块&#xff0c;比如&#xff1a;下拉选择列表、搜索框、日期选择器等&#xff1b;这些界面交互模块可…
阅读更多...
FPGA DMA技术分享（赋能高速数据处理的新动力介绍篇）

FPGA DMA技术分享（赋能高速数据处理的新动力介绍篇）

一、引言 在现代数字信号处理系统中&#xff0c;数据的高速、高效传输与处理是关键。FPGA&#xff08;现场可编程门阵列&#xff09;以其高度的灵活性和并行处理能力&#xff0c;成为实现这一目标的理想平台。而DMA&#xff08;直接内存访问&#xff09;技术&#xff0c;作为FP…
阅读更多...
Transformers x SwanLab：可视化NLP模型训练

Transformers x SwanLab：可视化NLP模型训练

HuggingFace 的 Transformers 是目前最流行的深度学习训框架之一&#xff08;100k Star&#xff09;&#xff0c;现在主流的大语言模型&#xff08;LLaMa系列、Qwen系列、ChatGLM系列等&#xff09;、自然语言处理模型&#xff08;Bert系列&#xff09;等&#xff0c;都在使用T…
阅读更多...
MM模块六（收货）

MM模块六（收货）

接到供应商收到的货以后&#xff0c;进行一个收货的动作 收货&#xff1a;MIGO 1.消耗物料的采购订单 数量是供应商的数量 消耗物料的采购订单&#xff0c;收进来的货物直接进入消耗&#xff0c;不会增加库存&#xff0c;所以这里没有库存地点进行选择 点击过账 收货后在采购…
阅读更多...
mysql手动新建数据库

mysql手动新建数据库

点击号输入数据库名&#xff0c;端口号&#xff0c;密码&#xff0c;连接到sa数据库新建数据库&#xff0c;语言必须选择utf8mb4新建数据库用户给数据库用户设置对应权限给数据库用户勾选权限
阅读更多...
利用迭代方法求解线性方程组（Matlab）

利用迭代方法求解线性方程组（Matlab）

一、问题描述 利用迭代方法求解线性方程组。 二、实验目的 掌握Jacobi 方法和Gauss-Seidel 方法的原理&#xff0c;能够编写代码实现两种迭代方法&#xff1b;能够利用代码分析线性方程组求解中的误差情况。 三、实验内容及要求 用代码实现&#xff1a;对下列方程中重新组织…
阅读更多...
区间选点问题-贪心-C++

区间选点问题-贪心-C++

问题&#xff1a; 给定 &#x1d441; 个闭区间 [ai,bi]&#xff0c;请你在数轴上选择尽量少的点&#xff0c;使得每个区间内至少包含一个选出的点。 输出选择的点的最小数量。 位于区间端点上的点也算作区间内。 输入格式 第一行包含整数 &#x1d441;&#xff0c;表示区间数…
阅读更多...
【C++11】lambda匿名函数和包装器

【C++11】lambda匿名函数和包装器

目录 一&#xff0c;lambda匿名函数 1-1&#xff0c;lambda的引入 1-2&#xff0c;lambda表达式书写格式 1-3&#xff0c;lambda函数的名称 1-4&#xff0c;lambda捕获列表的使用 1-5&#xff0c;函数对象与lambda表达式 二&#xff0c;包装器 2-1&#xff0c;function…
阅读更多...
项目管理基础知识

项目管理基础知识

项目管理基础知识 导航 文章目录 项目管理基础知识导航一、项目相关概念二、时间管理三、人员管理四、风险管理 一、项目相关概念 项目定义的三层意思 一定的资源约束:时间资源、经费资源、人力资源一定的目标一次性任务 里程碑 是项目中的重要时点或事件持续时间为零&…
阅读更多...
PX4水下机器人源码分析

PX4水下机器人源码分析

一、Px4版本1.14.1机型文件 PX4Autopilotmain\ROMFS\px4fmu_common\init.d\airframes路径下 这个脚本设置了BlueROV2&#xff08;重型配置&#xff09;的各种参数和初始化步骤&#xff0c;包括电池设置、通信设置、机架和旋翼配置以及PWM输出功能的映射。通过这些设置&#x…
阅读更多...
unity制作app（10）--统一字体

unity制作app（10）--统一字体

1.载入字体&#xff0c;微软雅黑&#xff0c;需要3分钟左右 加载进来3个 2.font文件夹下创建一个txt&#xff0c;内部的内容如下&#xff1a; &#xfeff;啊阿埃挨哎唉哀皑癌蔼矮艾碍爱隘鞍氨安俺按暗岸胺案肮昂盎凹敖熬翱袄傲奥懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙坝霸罢爸白柏…
阅读更多...
AI视频教程下载：零基础学会DALL-E 、Midjourney、Microsoft Designer、Adobe Firefly

AI视频教程下载：零基础学会DALL-E 、Midjourney、Microsoft Designer、Adobe Firefly

学完本课程会得到什么&#xff1a; 掌握ChatGPT、DALL-E 2、Midjourney、Microsoft Bing Chat、Microsoft Designer和Adobe Firefly&#xff0c;全面理解生成性AI及其应用 了解OpenAI及其在生成性AI领域的尖端研究 理解提示工程的重要性以及它如何帮助产生更好的输出和数据 …
阅读更多...
【QGIS入门实战精品教程】5.3：CGCS2000转Lambert投影

【QGIS入门实战精品教程】5.3：CGCS2000转Lambert投影

参考阅读： 【GlobalMapper精品教程】081：WGS84/CGCS2000转Lambert投影 文章目录 一、加载实验数据二、投影转换三、批量投影转换一、加载实验数据 加载配套实验数据，如下图所示：图层为长沙市范围、长沙市酒店宾馆分布点位、湖南省酒店分布点位矢量数据。 双击图层，打开信…
阅读更多...
【Vue】Vue2中的Vuex

【Vue】Vue2中的Vuex

目录 Vuex介绍Vuex 中的核心概念 在vue2中使用Vuex安装 Vuex创建一个 Vuex Store在 Vue 实例中使用 Vuex编写 Vuex 的 state、mutations 和 actions在组件中使用 Vuex Vuex的核心State组件中获取 Vuex 的状态mapState 辅助函数对象展开运算符 Getter基本使用示例 通过属性访问通…
阅读更多...
Unity实现首行缩进两个字符

Unity实现首行缩进两个字符

效果 在Unity中如果想实现首行缩进两个字符&#xff0c;你会发现按空格是没法实现的。 实现原理&#xff1a;用空白的透明的字替代原来的位置。 代码&#xff1a; <color#FFFFFF00>XXX</color> 赶紧去试试吧&#xff01;
阅读更多...
最新文章

Copyright @ 2022~2023