完整的SpringBoot+Vue增删改查(学生管理)

Maynor

发布于 2021-12-06 20:39:50

6.8K1

发布于 2021-12-06 20:39:50

文章被收录于专栏：最新最全的大数据技术体系

md文档可在点击下方小卡片获取!

1.搭建环境

1.1 创建项目

创建项目：exam-student-vue

1.2 添加坐标

    <parent>
        <groupId>org.springframework.bootgroupId>
        <artifactId>spring-boot-starter-parentartifactId>
        <version>2.1.6.RELEASEversion>
        <relativePath/> 
    parent>

    
    <properties>
        <project.build.sourceEncoding>UTF-8project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8project.reporting.outputEncoding>
        <java.version>1.8java.version>
        <mybatis.starter.version>1.3.2mybatis.starter.version>
        <mapper.starter.version>2.0.2mapper.starter.version>
        <mysql.version>5.1.32mysql.version>
        <pageHelper.starter.version>1.2.5pageHelper.starter.version>
        <durid.starter.version>1.1.10durid.starter.version>
    properties>

    
    <dependencies>

        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-webartifactId>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-testartifactId>
        dependency>
        <dependency>
            <groupId>org.springframework.bootgroupId>
            <artifactId>spring-boot-starter-jdbcartifactId>
        dependency>
        
        <dependency>
            <groupId>org.mybatis.spring.bootgroupId>
            <artifactId>mybatis-spring-boot-starterartifactId>
            <version>${mybatis.starter.version}version>
        dependency>
        
        <dependency>
            <groupId>tk.mybatisgroupId>
            <artifactId>mapper-spring-boot-starterartifactId>
            <version>${mapper.starter.version}version>
        dependency>
        
        <dependency>
            <groupId>com.github.pagehelpergroupId>
            <artifactId>pagehelper-spring-boot-starterartifactId>
            <version>${pageHelper.starter.version}version>
        dependency>
        
        <dependency>
            <groupId>mysqlgroupId>
            <artifactId>mysql-connector-javaartifactId>
            <version>${mysql.version}version>
        dependency>
        
        <dependency>
            <groupId>com.alibabagroupId>
            <artifactId>druid-spring-boot-starterartifactId>
            <version>${durid.starter.version}version>
        dependency>
        
        <dependency>
            <groupId>io.springfoxgroupId>
            <artifactId>springfox-swagger2artifactId>
            <version>2.7.0version>
        dependency>
        <dependency>
            <groupId>io.springfoxgroupId>
            <artifactId>springfox-swagger-uiartifactId>
            <version>2.7.0version>
        dependency>

    dependencies>

1.3 拷贝properties文件

#端口号
server.port=8080

#数据库基本配置
spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/db3?useUnicode=true&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=1234

#druid 连接池配置
#驱动
#spring.datasource.driver-class-name=com.mysql.jdbc.Driver
#初始化连接池大小
spring.datasource.druid.initial-size=1
#最小连接数
spring.datasource.druid.min-idle=1
#最大连接数
spring.datasource.druid.max-active=20
#获取连接时候验证，会影响性能
spring.datasource.druid.test-on-borrow=true

# mybatis
# mybatis.type-aliases-package=com.czxy.domain.base
# mybatis.mapper-locations=classpath:mappers/*.xml
#mapper
mapper.not-empty=false
mapper.identity=MYSQL
#开启驼峰映射
mybatis.configuration.map-underscore-to-camel-case=true
mybatis.mapper-locations=classpath*:mapper/*.xml
#开启log4j打印SQL语句
logging.level.com.czxy.dao=debug

1.4 编写启动类

package com.czxy;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @author manor
 *  
 */
@SpringBootApplication
public class StudentVueApplication {
    public static void main(String[] args) {
        SpringApplication.run(StudentVueApplication.class, args);
    }
}

1.5 拷贝封装类

1.6 拷贝配置类

2. 基本结构

2.1 初始化数据库

2.1.1 创建数据库

create database db1010;
use db1010;

2.1.2 建表语句

-- 班级表
create table tb_class(
  `c_id` varchar(32) primary key comment '班级ID',
  `c_name` varchar(50) comment '班级名称',
  `desc` varchar(200) comment '班级描述'
);
insert into tb_class(`c_id`,`c_name`,`desc`) values('c001','Java12班','。。。。');
insert into tb_class(`c_id`,`c_name`,`desc`) values('c002','Java34班','。。。。');

# 学生表
create table tb_student(
  s_id varchar(32) primary key comment '学生ID',
  sname varchar(50) comment '姓名',
  age int comment '年龄',
  birthday datetime comment '生日',
  gender char(1) comment '性别',
  c_id varchar(32)
);
alter table tb_student add constraint foreign key (c_id) references tb_class (c_id);

insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s001','赵三',19,'2001-01-17','1','c001');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s002','钱四',19,'2001-05-16','1','c001');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s003','孙五',18,'2002-03-15','1','c001');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s004','李三',19,'2001-04-14','0','c002');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s005','周四',19,'2001-02-13','0','c002');
insert into tb_student(`s_id`,`sname`,`age`,`birthday`,`gender`,`c_id`) values('s006','王五',18,'2002-06-12','1','c002');

2.2 后端实现：domain、Mapper

2.2.1 班级相关

2.2.2 学生相关

3.后端实现

3.1 班级后端

3.1.1 查询所有班级

package com.czxy.controller;
import com.czxy.domain.Classes;
 import com.czxy.service.ClassesService;
 import com.czxy.vo.BaseResult;
 import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
 import java.util.List;
/**
@author manor

*/
 @RestController
 @RequestMapping("/classes")
 public class ClassesController {

  @Resource
  private ClassesService classesService;

  /**
   * 查询所有
   * @return
   */
  @GetMapping
  public BaseResult findAll(){
      // 查询
      List list = classesService.findAll();
      // 返回
      return BaseResult.ok("查询成功", list );
  }

}

### 3.1.2 添加班级

* service

~~~java
    /**
     * 添加班级
     * @param classes
     * @return
     */
    public boolean save(Classes classes) {
        // 校验
        Classes find = classesMapper.selectByPrimaryKey(classes.getCid());
        if(find != null){
            throw new RuntimeException("ID已存在");
        }
        // 添加
        int count = classesMapper.insert(classes);
        return count == 1;
    }

3.1.3 查询班级详情

3.1.4 更新班级

3.1.5 删除班级

3.2 学生后端

3.1.1 查询所有学生

3.1.2 添加学生

3.1.3 查询学生详情

3.1.4 更新学生

3.1.5 删除学生

4. 前端实现：Vue版

使用Visual Studio Code 开发前端页面

4.1 班级前端

4.1.1 查询所有

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表title>

    <script type="text/javascript" src="js/vue.js">script>
    <script type="text/javascript" src="js/axios.js">script>

head>
<body>
    <div id="app">
        <a href="index.html">返回首页a>
        <a href="classes_add.html">添加班级a> <br/>
    
        <table id="tid" border="1" width="800">
            <tr>
                <td>班级IDtd>
                <td>班级名称td>
                <td>班级描述td>
                <td>操作td>
            tr>
            <tr v-for="(classes,index) in classesList" :key="index">
                <td>{{classes.cid}}td>
                <td>{{classes.cname}}td>
                <td>{{classes.desc}}td>
                <td>
                    <a href="">修改a>
                    <a href="">删除a>
                td>
            tr>
        table>
    div>
body>
html>
<script>
        new Vue({
            el: '#app',
            data: {
                classesList: [],       //班级数据
            },
            mounted() {
                // 查询所有
                this.findAll()
            },
            methods: {
                findAll() {
                    var url = `/classes`;
                    axios.get(url)
                    .then( response => {
                        if(response.data.code == 1){
                            this.classesList = response.data.data
                        } else {
                            alert(response.data.message)
                        }
                    })
                    .catch(error => {
                        alert(error)
                    })
                }
            },
        })
    script>

4.1.2 添加

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表title>

    <script type="text/javascript" src="js/vue.js">script>
    <script type="text/javascript" src="js/axios.js">script>

<body>
head>
    <div id="app">
        <a href="classes_list.html">返回列表页a>
    
        <table id="tid" border="1">
            <tr>
                <td>班级IDtd>
                <td><input v-model="classes.cid" /> td>
            tr>
            <tr>
                <td>班级名称td>
                <td><input  v-model="classes.cname" /> td>
            tr>
            <tr>
                <td>班级描述td>
                <td>
                    <textarea cols="20" rows="5" v-model="classes.desc" >textarea>
                td>
            tr>
            <tr>
                <td>td>
                <td><input type="button" value="添加" @click="addClasses" />td>
            tr>
    
        table>
    div>
body>
html>
<script>
    new Vue({
        el: '#app',
        data: {
            classes: {},       //学生表单数据
        },
        mounted() {
            
        },
        methods: {
            addClasses() {
                var url = `/classes`;
                axios.post(url, this.classes)
                .then( response => {
                    if(response.data.code == 1){
                        // 成功提示
                        alert(response.data.message)
                        // 跳转
                        location.href = "classes_list.html"
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            }
        },
    })
script>

4.1.3 修改

跳转页面

<a :href="'classes_edit.html?id=' + classes.cid">修改a>

4.1.4 删除

修改 classes_list.html 页面，填写修改功能

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表title>

    <script type="text/javascript" src="js/vue.js">script>
    <script type="text/javascript" src="js/axios.js">script>

head>
<body>
    <div id="app">
        <a href="index.html">返回首页a>
        <a href="classes_add.html">添加班级a> <br/>
    
        <table id="tid" border="1" width="800">
            <tr>
                <td>班级IDtd>
                <td>班级名称td>
                <td>班级描述td>
                <td>操作td>
            tr>
            <tr v-for="(classes,index) in classesList" :key="index">
                <td>{{classes.cid}}td>
                <td>{{classes.cname}}td>
                <td>{{classes.desc}}td>
                <td>
                    <a :href="'classes_edit.html?id=' + classes.cid">修改a>
                    <a href="#" @click="deleteClasses(classes.cid)">删除a>
                td>
            tr>
        table>
    div>
body>
html>
<script>
    new Vue({
        el: '#app',
        data: {
            classesList: [],       //班级数据
        },
        mounted() {
            // 查询所有
            this.findAll()
        },
        methods: {
            findAll() {
                var url = `/classes`;
                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.classesList = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            deleteClasses(id) {
                if(! confirm("您确定要删除么？")){
                    return 
                }
                // 删除
                var url = `/classes/${id}`;
                axios.delete(url)
                .then( response => {
                    if(response.data.code == 1){
                        // 成功提示
                        alert(response.data.message)
                        // 跳转
                        location.href = "classes_list.html"
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            }
        },
    })
script>

4.2 学生前端

4.2.1 查询所有

1）查询 + 条件 + 分页

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表title>

    <script type="text/javascript" src="js/vue.js">script>
    <script type="text/javascript" src="js/axios.js">script>

head>
<body>
    <div id="app">
        <a href="index.html">返回首页a>
        <a href="student_add.html">添加学生a> <br/>
        
        <table>
            <tr>
                <td>班级td>
                <td>
                    <select v-model="student.cid">
                        <option value="">--选择班级--option>
                        <option value="c001">--Java12--option>
                        <option value="c002">--Java34--option>
                    select>
                td>
                <td>姓名：td>
                <td>
                    <input type="text" placeholder="请输入姓名" v-model="student.sname"size="10">
                td>
                <td>年龄：td>
                <td>
                    <input type="text" placeholder="请输入开始年龄" v-model="student.startAge" size="10">
                    --
                    <input type="text" placeholder="请输入结束年龄" v-model="student.endAge" size="10">
                td>
                <td><input type="button" value="查询" @click="condition(1)">td>
            tr>
        table>
        
        
        <table id="tid" border="1" width="800">
            <tr>
    
                <td>学生IDtd>
                <td>班级IDtd>
                <td>学生姓名td>
                <td>年龄td>
                <td>生日td>
                <td>性别td>
                <td>操作td>
            tr>
           <tr v-for="(student,index) in pageInfo.list" :key="index">
                <td>{{student.sid}}td>
                <td>{{student.classes.cname}}td>
                <td>{{student.sname}}td>
                <td>{{student.age}}td>
                <td>{{student.birthday}}td>
                <td>{{student.gender == 1 ? "男" : "女"}}td>
                <td>
                    <a href="">修改a>
                    <a href="">删除a>
                td>
            tr>
        table>
    
        
        <div id="pageId">
            <a href="#" v-for="index in pageInfo.pages" :key="index" @click.prevent="condition(index)" >{{index}}a> 
        div>

    div>
body>
html>
<script>
    new Vue({
        el: '#app',
        data: {
            pageSize: 2,        //每页多少条
            student: {          //表单对象

            },
            pageInfo: {},       //分页对象
        },
        mounted() {
            // 查询所有
            this.condition(1)
        },
        methods: {
            condition(pageNum) {
                var url = `/student/condition/${this.pageSize}/${pageNum}`;
                axios.post(url, this.student)
                .then( response => {
                    if(response.data.code == 1){
                        this.pageInfo = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                })
            }
        },
    })
script>

2）查询条件，下拉列表

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表title>

    <script type="text/javascript" src="js/vue.js">script>
    <script type="text/javascript" src="js/axios.js">script>

head>
<body>
    <div id="app">
        <a href="index.html">返回首页a>
        <a href="student_add.html">添加学生a> <br/>
        
        <table>
            <tr>
                <td>班级td>
                <td>
                    <select v-model="student.cid">
                        <option value="">--选择班级--option>
                        <option v-for="(classes,index) in classesList" :key="index" :value="classes.cid">{{classes.cname}}option>
                    select>
                td>
                <td>姓名：td>
                <td>
                    <input type="text" placeholder="请输入姓名" v-model="student.sname"size="10">
                td>
                <td>年龄：td>
                <td>
                    <input type="text" placeholder="请输入开始年龄" v-model="student.startAge" size="10">
                    --
                    <input type="text" placeholder="请输入结束年龄" v-model="student.endAge" size="10">
                td>
                <td><input type="button" value="查询" @click="condition(1)">td>
            tr>
        table>

        
        <table id="tid" border="1" width="800">
            <tr>
    
                <td>学生IDtd>
                <td>班级IDtd>
                <td>学生姓名td>
                <td>年龄td>
                <td>生日td>
                <td>性别td>
                <td>操作td>
            tr>
           <tr v-for="(student,index) in pageInfo.list" :key="index">
                <td>{{student.sid}}td>
                <td>{{student.classes.cname}}td>
                <td>{{student.sname}}td>
                <td>{{student.age}}td>
                <td>{{student.birthday}}td>
                <td>{{student.gender == 1 ? "男" : "女"}}td>
                <td>
                    <a href="">修改a>
                    <a href="">删除a>
                td>
            tr>
        table>
    
        
        <div id="pageId">
            <a href="#" v-for="index in pageInfo.pages" :key="index" @click.prevent="condition(index)" >{{index}}a> 
        div>

    div>
body>
html>
<script>
    new Vue({
        el: '#app',
        data: {
            pageSize: 2,        //每页多少条
            student: {          //表单对象
                cid: ''
            },
            pageInfo: {},       //分页对象
            classesList: []     //班级列表
        },
        mounted() {
            // 查询所有
            this.condition(1)
            // 查询所有班级
            this.findAllClasses()
        },
        methods: {
            condition(pageNum) {
                var url = `/student/condition/${this.pageSize}/${pageNum}`;
                axios.post(url, this.student)
                .then( response => {
                    if(response.data.code == 1){
                        this.pageInfo = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                })
            },
            findAllClasses() {
                var url = `/classes`;
                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.classesList = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            }
        },
    })
script>

3）跳转

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表title>

    <script type="text/javascript" src="js/vue.js">script>
    <script type="text/javascript" src="js/axios.js">script>

head>
<body>
    <div id="app">
        <a href="index.html">返回首页a>
        <a href="student_add.html">添加学生a> <br/>
        
        <table>
            <tr>
                <td>班级td>
                <td>
                    <select v-model="student.cid">
                        <option value="">--选择班级--option>
                        <option v-for="(classes,index) in classesList" :key="index" :value="classes.cid">{{classes.cname}}option>
                    select>
                td>
                <td>姓名：td>
                <td>
                    <input type="text" placeholder="请输入姓名" v-model="student.sname"size="10">
                td>
                <td>年龄：td>
                <td>
                    <input type="text" placeholder="请输入开始年龄" v-model="student.startAge" size="10">
                    --
                    <input type="text" placeholder="请输入结束年龄" v-model="student.endAge" size="10">
                td>
                <td><input type="button" value="查询" @click="condition(1)">td>
            tr>
        table>

        
        <table id="tid" border="1" width="800">
            <tr>
    
                <td>学生IDtd>
                <td>班级IDtd>
                <td>学生姓名td>
                <td>年龄td>
                <td>生日td>
                <td>性别td>
                <td>操作td>
            tr>
           <tr v-for="(student,index) in pageInfo.list" :key="index">
                <td>{{student.sid}}td>
                <td>{{student.classes.cname}}td>
                <td>{{student.sname}}td>
                <td>{{student.age}}td>
                <td>{{student.birthday}}td>
                <td>{{student.gender == 1 ? "男" : "女"}}td>
                <td>
                    <a href="">修改a>
                    <a href="">删除a>
                td>
            tr>
        table>
    
        
        <div id="pageId">
            <a href="#" v-for="index in pageInfo.pages" :key="index" @click.prevent="condition(index)" >{{index}}a> 
            跳转到第 <input type="text" v-model="pageNum" size="5" @keydown.enter="go" />页
        div>

    div>
body>
html>
<script>
    new Vue({
        el: '#app',
        data: {
            pageSize: 2,        //每页多少条
            pageNum: 1,         //第几页
            student: {          //表单对象
                cid: ''
            },
            pageInfo: {},       //分页对象
            classesList: []     //班级列表
        },
        mounted() {
            // 查询所有
            this.condition(1)
            // 查询所有班级
            this.findAllClasses()
        },
        methods: {
            condition(pageNum) {
                var url = `/student/condition/${this.pageSize}/${pageNum}`;
                axios.post(url, this.student)
                .then( response => {
                    if(response.data.code == 1){
                        this.pageInfo = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                })
            },
            findAllClasses() {
                var url = `/classes`;
                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.classesList = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            go() {
                if(parseInt(this.pageNum) == this.pageNum) {
                    this.condition(this.pageNum)
                }
            }
        },
    })
script>

4）改变分页pageSize

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表title>

    <script type="text/javascript" src="js/vue.js">script>
    <script type="text/javascript" src="js/axios.js">script>

head>
<body>
    <div id="app">
        <a href="index.html">返回首页a>
        <a href="student_add.html">添加学生a> <br/>
        
        <table>
            <tr>
                <td>班级td>
                <td>
                    <select v-model="student.cid">
                        <option value="">--选择班级--option>
                        <option v-for="(classes,index) in classesList" :key="index" :value="classes.cid">{{classes.cname}}option>
                    select>
                td>
                <td>姓名：td>
                <td>
                    <input type="text" placeholder="请输入姓名" v-model="student.sname"size="10">
                td>
                <td>年龄：td>
                <td>
                    <input type="text" placeholder="请输入开始年龄" v-model="student.startAge" size="10">
                    --
                    <input type="text" placeholder="请输入结束年龄" v-model="student.endAge" size="10">
                td>
                <td><input type="button" value="查询" @click="condition(1)">td>
            tr>
        table>

        
        <table id="tid" border="1" width="800">
            <tr>
    
                <td>学生IDtd>
                <td>班级IDtd>
                <td>学生姓名td>
                <td>年龄td>
                <td>生日td>
                <td>性别td>
                <td>操作td>
            tr>
           <tr v-for="(student,index) in pageInfo.list" :key="index">
                <td>{{student.sid}}td>
                <td>{{student.classes.cname}}td>
                <td>{{student.sname}}td>
                <td>{{student.age}}td>
                <td>{{student.birthday}}td>
                <td>{{student.gender == 1 ? "男" : "女"}}td>
                <td>
                    <a href="">修改a>
                    <a href="">删除a>
                td>
            tr>
        table>
    
        
        <div id="pageId">
            每页
            <select v-model="pageSize" @change="condition(1)">
                <option value="1">1option>
                <option value="2">2option>
                <option value="5">5option>
                <option value="10">10option>
            select>条，

            <a href="#" v-for="index in pageInfo.pages" :key="index" @click.prevent="condition(index)" >{{index}}a> 
            ，跳转到第 <input type="text" v-model="pageNum" size="5" @keydown.enter="go" />页
        div>

    div>
body>
html>
<script>
    new Vue({
        el: '#app',
        data: {
            pageSize: 2,        //每页多少条
            pageNum: 1,         //第几页
            student: {          //表单对象
                cid: ''
            },
            pageInfo: {},       //分页对象
            classesList: []     //班级列表
        },
        mounted() {
            // 查询所有
            this.condition(1)

            // 查询所有班级
            this.findAllClasses()
        },
        methods: {
            condition(pageNum) {
                var url = `/student/condition/${this.pageSize}/${pageNum}`;
                axios.post(url, this.student)
                .then( response => {
                    if(response.data.code == 1){
                        this.pageInfo = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                })
            },
            findAllClasses() {
                var url = `/classes`;
                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.classesList = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            go() {
                if(parseInt(this.pageNum) == this.pageNum) {
                    this.condition(this.pageNum)
                }
            }
        },
    })
script>

4.2.2 添加

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表title>

    <script type="text/javascript" src="js/vue.js">script>
    <script type="text/javascript" src="js/axios.js">script>

<body>
head>
    <div id="app">

        <a href="student_list.html">返回列表页a>
    
        <table id="tid" border="1">
            <tr>
                <td>学生td>
                <td><input v-model="student.sid" /> td>
            tr>
            <tr>
                <td>班级IDtd>
                <td>
                    
                    <select v-model="student.cid">
                        <option value="">--请选择--option>
                        <option v-for="(classes,index) in classesList" :key="index" :value="classes.cid">{{classes.cname}}option>
                    select>
                td>
            tr>
            <tr>
                <td>姓名td>
                <td><input v-model="student.sname"/> td>
            tr>
            <tr>
                <td>年龄td>
                <td><input v-model="student.age" /> td>
            tr>
            <tr>
                <td>生日td>
                <td><input v-model="student.birthday"/> td>
            tr>
            <tr>
                <td>性别td>
                <td>
                    <input type="radio" v-model="student.gender" value="1" />男
                    <input type="radio" v-model="student.gender" value="0" />女
                td>
            tr>
            <tr>
                <td>td>
                <td><input type="button" value="添加" @click="addStudent"/>td>
            tr>

        table>
    div>
body>
html>
<script>
    new Vue({
        el: '#app',
        data: {
            student: {          //表单对象
                cid: ''
            },
            classesList: []     //班级列表
        },
        mounted() {

            // 查询所有班级
            this.findAllClasses()
        },
        methods: {

            findAllClasses() {
                var url = `/classes`;
                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.classesList = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            addStudent() {
                var url = `/student`;
                axios.post(url, this.student)
                .then( response => {
                    if(response.data.code == 1){
                        // 成功提示
                        alert(response.data.message)
                        // 跳转
                        location.href = "student_list.html"
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },

        },
    })
script>

4.2.3 修改

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑学生title>

    <script type="text/javascript" src="js/vue.js">script>
    <script type="text/javascript" src="js/axios.js">script>

<body>
head>
<div id="app">

    <a href="student_list.html">返回列表页a>

    <table id="tid" border="1">
        <tr>
            <td>学生td>
            <td><input v-model="student.sid" /> td>
        tr>
        <tr>
            <td>班级IDtd>
            <td>
                
                <select v-model="student.cid">
                    <option value="">--请选择--option>
                    <option v-for="(classes,index) in classesList" :key="index" :value="classes.cid">{{classes.cname}}option>
                select>
            td>
        tr>
        <tr>
            <td>姓名td>
            <td><input v-model="student.sname"/> td>
        tr>
        <tr>
            <td>年龄td>
            <td><input v-model="student.age" /> td>
        tr>
        <tr>
            <td>生日td>
            <td><input v-model="student.birthday"/> td>
        tr>
        <tr>
            <td>性别td>
            <td>
                <input type="radio" v-model="student.gender" value="1" />男
                <input type="radio" v-model="student.gender" value="0" />女
            td>
        tr>
        <tr>
            <td>td>
            <td><input type="button" value="添加" @click="editStudent"/>td>
        tr>

    table>
div>
body>
html>
<script>
    new Vue({
        el: '#app',
        data: {
            student: {          //表单对象
                cid: ''
            },
            classesList: []     //班级列表
        },
        mounted() {

            // 查询所有班级
            this.findAllClasses()
        },
        methods: {

            findAllClasses() {
                var url = `/classes`;
                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.classesList = response.data.data
                        // 查询详情
                        this.findById()
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            findById() {
                // 获得id
                var arr = location.href.split("?id=")
                var id = arr[1]
                // 路径
                var url = `/student/${id}`;

                axios.get(url)
                .then( response => {
                    if(response.data.code == 1){
                        this.student = response.data.data
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            editStudent() {
                var url = `/student`;
                axios.put(url, this.student)
                .then( response => {
                    if(response.data.code == 1){
                        // 成功提示
                        alert(response.data.message)
                        // 跳转
                        location.href = "student_list.html"
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },

        },
    })
script>

4.2.4 删除

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>班级列表title>

    <script type="text/javascript" src="js/vue.js">script>
    <script type="text/javascript" src="js/axios.js">script>

head>
<body>
<div id="app">
    <a href="index.html">返回首页a>
    <a href="student_add.html">添加学生a> <br/>
    
    <table>
        <tr>
            <td>班级td>
            <td>
                <select v-model="student.cid">
                    <option value="">--选择班级--option>
                    <option v-for="(classes,index) in classesList" :key="index" :value="classes.cid">{{classes.cname}}option>
                select>
            td>
            <td>姓名：td>
            <td>
                <input type="text" placeholder="请输入姓名" v-model="student.sname"size="10">
            td>
            <td>年龄：td>
            <td>
                <input type="text" placeholder="请输入开始年龄" v-model="student.startAge" size="10">
                --
                <input type="text" placeholder="请输入结束年龄" v-model="student.endAge" size="10">
            td>
            <td><input type="button" value="查询" @click="condition(1)">td>
        tr>
    table>

    
    <table id="tid" border="1" width="800">
        <tr>

            <td>学生IDtd>
            <td>班级IDtd>
            <td>学生姓名td>
            <td>年龄td>
            <td>生日td>
            <td>性别td>
            <td>操作td>
        tr>
        <tr v-for="(student,index) in pageInfo.list" :key="index">
            <td>{{student.sid}}td>
            <td>{{student.classes.cname}}td>
            <td>{{student.sname}}td>
            <td>{{student.age}}td>
            <td>{{student.birthday}}td>
            <td>{{student.gender == 1 ? "男" : "女"}}td>
            <td>
                <a :href="'student_edit.html?id='+student.sid">修改a>
                <a href="#" @click.prevent="deleteStudent(student.sid)">删除a>
            td>
        tr>
    table>

    
    <div id="pageId">
        每页
        <select v-model="pageSize" @change="condition(1)">
            <option value="1">1option>
            <option value="2">2option>
            <option value="5">5option>
            <option value="10">10option>
        select>条，

        <a href="#" v-for="index in pageInfo.pages" :key="index" @click.prevent="condition(index)" >{{index}}a>
        ，跳转到第 <input type="text" v-model="pageNum" size="5" @keydown.enter="go" />页
    div>

div>
body>
html>
<script>
    new Vue({
        el: '#app',
        data: {
            pageSize: 2,        //每页多少条
            pageNum: 1,         //第几页
            student: {          //表单对象
                cid: ''
            },
            pageInfo: {},       //分页对象
            classesList: []     //班级列表
        },
        mounted() {
            // 查询所有
            this.condition(1)
            this.condition(1)
            this.condition(1)
            this.condition(1)
            // 查询所有班级
            this.findAllClasses()
        },
        methods: {
            condition(pageNum) {
                var url = `/student/condition/${this.pageSize}/${pageNum}`;
                axios.post(url, this.student)
                    .then( response => {
                        if(response.data.code == 1){
                            this.pageInfo = response.data.data
                        } else {
                            alert(response.data.message)
                        }
                    })
                    .catch(error => {
                    })
            },
            findAllClasses() {
                var url = `/classes`;
                axios.get(url)
                    .then( response => {
                        if(response.data.code == 1){
                            this.classesList = response.data.data
                        } else {
                            alert(response.data.message)
                        }
                    })
                    .catch(error => {
                        alert(error)
                    })
            },
            go() {
                if(parseInt(this.pageNum) == this.pageNum) {
                    this.condition(this.pageNum)
                }
            },
            deleteStudent(id) {
                if(! confirm("您确定要删除么？")){
                    return
                }
                // 删除
                var url = `/student/${id}`;
                axios.delete(url)
                    .then( response => {
                        if(response.data.code == 1){
                            // 成功提示
                            alert(response.data.message)
                            // 跳转
                            location.href = "student_list.html"
                        } else {
                            alert(response.data.message)
                        }
                    })
                    .catch(error => {
                        alert(error)
                    })
            }
        },
    })
script>

5. 用户操作

5.1 建表语句

create table tb_user(
  u_id varchar(32) primary key comment '用户编号',
  user_name varchar(50) comment '用户名',
  password varchar(32) comment '密码',
  gender bit comment '性别,1表示男，0表示女'
);
insert into tb_user(u_id,user_name,password,gender) values('u001','jack','1234',1);
insert into tb_user(u_id,user_name,password,gender) values('u002','rose','1234',0);
insert into tb_user(u_id,user_name,password,gender) values('u003','张三','1234',1);

5.2 后端实现：domain、mapper

5.3 用户注册

5.3.1 分析

用户注册，其实就是添加功能

5.3.2 后端实现

5.3.3 前端实现

修改首页，跳转到注册页面

<a href="user_register.html">注册a> |

编写注册功能：注册成功跳转到首页

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册title>

    <script type="text/javascript" src="js/vue.js">script>
    <script type="text/javascript" src="js/axios.js">script>

<body>
head>
    <div id="app">
        <a href="index.html">返回首页a>
    
        <table id="tid" border="1">
            <tr>
                <td>用户名td>
                <td><input v-model="user.username" /> td>
            tr>
            <tr>
                <td>密码td>
                <td><input type="password" v-model="user.password" /> td>
            tr>
            <tr>
                <td>性别td>
                <td>
                    <input type="radio" v-model="user.gender" value="1"> 男
                    <input type="radio" v-model="user.gender" value="0"> 女
                td>
            tr>
            <tr>
                <td>td>
                <td><input type="button" value="注册" @click="register" />td>
            tr>
    
        table>
    div>
body>
html>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {},       //用户表单数据
        },
        methods: {
            register() {
                var url = `/user/register`;
                axios.post(url, this.user)
                .then( response => {
                    if(response.data.code == 1){
                        // 成功提示
                        alert(response.data.message)
                        // 跳转
                        location.href = "index.html"
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            }
        },
    })
script>

5.4 用户登录

5.4.1 分析

用户登录，也是就是一个通过用户名和密码的查询功能

5.4.2 后端实现

5.4.3 localStorage&sessionStorage详解

localStorage和sessionStorage都是window对象提供的全局属性，在浏览器中存储key/value对的数据
- localStorage，本地存储，浏览器窗口关闭后，数据保留。
- sessionStorage，会话存储，浏览器窗口关闭后，数据删除。
基本操作：存储数据、查询数据、删除数据

	功能	实例
localStorage	存储数据	localStorage.setItem(“键”,“值”)
	查询数据	localStorage.getItem(“键”)
	删除数据	localStorage.removeItem(“键”)
sessionStorage	存储数据	sessionStorage.setItem(“键”,“值”)
	查询数据	sessionStorage.getItem(“键”)
	删除数据	sessionStorage.removeItem(“键”)

5.4.4 前端实现

5.4.5 首页优化

修改index.html页面

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页title>
    <script type="text/javascript" src="js/vue.js">script>
head>
<body>
    <div id="app">
        <a href="classes_list.html">班级管理a> |
        <a href="student_list.html">学生管理a> |
        <span v-if="loginUser != null">
            
            欢迎 {{loginUser.username}} ，
            <a href="#">退出a> |
        span>
        <span v-if="loginUser == null">
            
            <a href="user_register.html">注册a> |
            <a href="user_login.html">登录a> |
        span>
    div>
    
body>
body>
html>
<script>
    new Vue({
        el: '#app',
        data: {
            loginUser: null,       //登录用户信息
        },
        mounted() {
            var userStr = localStorage.getItem("loginUser")
            if(userStr){
                this.loginUser = JSON.parse(userStr)
            }
        },
        
    })
script>

5.5 用户注销

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页title>
    <script type="text/javascript" src="js/vue.js">script>
head>
<body>
    <div id="app">
        <a href="classes_list.html">班级管理a> |
        <a href="student_list.html">学生管理a> |
        <span v-if="loginUser != null">
            
            欢迎 {{loginUser.username}} ，
            <a href="#" @click.prevent="logout">退出a> |
        span>
        <span v-if="loginUser == null">
            
            <a href="user_register.html">注册a> |
            <a href="user_login.html">登录a> |
        span>
    div>
    
body>
body>
html>
<script>
    new Vue({
        el: '#app',
        data: {
            loginUser: null,       //登录用户信息
        },
        mounted() {
            var userStr = localStorage.getItem("loginUser")
            if(userStr){
                this.loginUser = JSON.parse(userStr)
            }
        },
        methods: {
            logout() {
                localStorage.removeItem("loginUser")
                location.href = "index.html"
            }
        },
        
    })
script>

5.6 用户注册前校验

5.6.1 分析

5.6.2 后端实现

修改 UserController

   /**
     * 用户名校验
     * @param user
     * @return
     */
    @PostMapping("/checkname")
    public BaseResult checkname(@RequestBody User user) {
        try {
            // 注册
            User findUser = userService.findByUsername(user.getUsername());

            // 返回
            if(findUser == null ){
                return BaseResult.ok("用户名可用");
            } else {
                return BaseResult.error("用户名不可用");
            }
        } catch (Exception e) {
            return BaseResult.error(e.getMessage());
        }
    }

5.6.3 前端实现

修改注册页面

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册title>

    <script type="text/javascript" src="js/vue.js">script>
    <script type="text/javascript" src="js/axios.js">script>

    <style>
        .red {
            color: red;
        }
        .green {
            color: green;
        }
    style>

<body>
head>
<div id="app">
    <a href="index.html">返回首页a>

    <table id="tid" border="1">
        <tr>
            <td>用户名td>
            <td>
                <input v-model="user.username" @blur="checkname" />
                <span :class="{'red': result.code == 0,'green': result.code == 1}" >{{result.message}}span>
            td>
        tr>
        <tr>
            <td>密码td>
            <td><input type="password" v-model="user.password" /> td>
        tr>
        <tr>
            <td>性别td>
            <td>
                <input type="radio" v-model="user.gender" value="1"> 男
                <input type="radio" v-model="user.gender" value="0"> 女
            td>
        tr>
        <tr>
            <td>td>
            <td><input type="button" :disabled="result.code==0" value="注册" @click="register" />td>
        tr>

    table>
div>
body>
html>
<script>
    new Vue({
        el: '#app',
        data: {
            user: {},       //用户表单数据
            result: {       //查询结果
                code: 0
            }      
        },
        methods: {
            register() {
                var url = `/user/register`;
                axios.post(url, this.user)
                .then( response => {
                    if(response.data.code == 1){
                        // 成功提示
                        alert(response.data.message)
                        // 跳转
                        location.href = "index.html"
                    } else {
                        alert(response.data.message)
                    }
                })
                .catch(error => {
                    alert(error)
                })
            },
            checkname() {
                var url = `/user/checkname`;
                axios.post(url, this.user)
                .then( response => {
                    // 记录查询结果
                    this.result = response.data
                })
                .catch(error => {
                    alert(error)
                })
            }
        },
    })
script>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/10/28 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html

网站

数据库

sql

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

完整的SpringBoot+Vue增删改查(学生管理)

完整的SpringBoot+Vue增删改查(学生管理)

md文档可在点击下方小卡片获取!

1.搭建环境

1.1 创建项目

1.2 添加坐标

1.3 拷贝properties文件

1.4 编写启动类

1.5 拷贝封装类

1.6 拷贝配置类

2. 基本结构

2.1 初始化数据库

2.1.1 创建 数据库

2.1.2 建表语句

2.2 后端实现：domain、Mapper

2.2.1 班级相关

2.2.2 学生相关

3.后端实现

3.1 班级后端

3.1.1 查询所有班级

3.1.3 查询班级详情

3.1.4 更新班级

3.1.5 删除班级

3.2 学生后端

3.1.1 查询所有学生

3.1.2 添加学生

3.1.3 查询学生详情

3.1.4 更新学生

3.1.5 删除学生

4. 前端实现：Vue版

4.1 班级前端

4.1.1 查询所有

4.1.2 添加

4.1.3 修改

4.1.4 删除

4.2 学生前端

4.2.1 查询所有

1）查询 + 条件 + 分页

2）查询条件，下拉列表

3）跳转

4）改变分页pageSize

4.2.2 添加

4.2.3 修改

4.2.4 删除

5. 用户操作

5.1 建表语句

5.2 后端实现：domain、mapper

5.3 用户注册

5.3.1 分析

5.3.2 后端实现

5.3.3 前端实现

5.4 用户登录

5.4.1 分析

5.4.2 后端实现

5.4.3 localStorage&sessionStorage详解

5.4.4 前端实现

5.4.5 首页优化

5.5 用户注销

5.6 用户注册前校验

5.6.1 分析

5.6.2 后端实现

5.6.3 前端实现

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

2.1.1 创建数据库