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

md文档可在点击下方小卡片获取! 1.搭建环境 1.1 创建项目

创建项目：exam-student-vue

1.2 添加坐标

    
        org.springframework.boot
        spring-boot-starter-parent
        2.1.6.RELEASE
         
    

    
    
        UTF-8
        UTF-8
        1.8
        1.3.2
        2.0.2
        5.1.32
        1.2.5
        1.1.10
    

    
    

        
            org.springframework.boot
            spring-boot-starter-web
        
        
            org.springframework.boot
            spring-boot-starter-test
        
        
            org.springframework.boot
            spring-boot-starter-jdbc
        
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            ${mybatis.starter.version}
        
        
        
            tk.mybatis
            mapper-spring-boot-starter
            ${mapper.starter.version}
        
        
        
            com.github.pagehelper
            pagehelper-spring-boot-starter
            ${pageHelper.starter.version}
        
        
        
            mysql
            mysql-connector-java
            ${mysql.version}
        
        
        
            com.alibaba
            druid-spring-boot-starter
            ${durid.starter.version}
        
        
        
            io.springfox
            springfox-swagger2
            2.7.0
        
        
            io.springfox
            springfox-swagger-ui
            2.7.0

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
@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 班级相关

JavaBean

package com.czxy.domain;

import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;


@Table(name="tb_class")
public class Classes {
    @Id
    @Column(name="c_id")
    private String cid;

    @Column(name="c_name")
    private String cname;

    @Column(name="`desc`")
    private String desc;

    public String getCid() {
        return cid;
    }

    public void setCid(String cid) {
        this.cid = cid;
    }

    public String getCname() {
        return cname;
    }

    public void setCname(String cname) {
        this.cname = cname;
    }

    public String getDesc() {
        return desc;
    }

    public void setDesc(String desc) {
        this.desc = desc;
    }

    @Override
    public String toString() {
        return "Classes{" +
                "cid='" + cid + ''' +
                ", cname='" + cname + ''' +
                ", desc='" + desc + ''' +
                '}';
    }
}

Mapper

package com.czxy.mapper;

import com.czxy.domain.Classes;
import tk.mybatis.mapper.common.Mapper;


@org.apache.ibatis.annotations.Mapper
public interface ClassesMapper extends Mapper {
}

2.2.2 学生相关

JavaBean

package com.czxy.domain;

import com.fasterxml.jackson.annotation.JsonFormat;

import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;
import java.util.Date;


@Table(name="tb_student")
public class Student {

    @Id
    @Column(name="s_id")
    private String sid;         //学生ID

    @Column(name="sname")
    private String sname;         //姓名

    @Column(name="age")
    private Integer age;         //年龄

    @Column(name="birthday")
    @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")
    private Date birthday;         //生日

    @Column(name="gender")
    private String gender;      //性别

    @Column(name="c_id")
    private String cid;         //班级外键

    private Classes classes;    //班级对象

    public String getSid() {
        return sid;
    }

    public void setSid(String sid) {
        this.sid = sid;
    }

    public String getSname() {
        return sname;
    }

    public void setSname(String sname) {
        this.sname = sname;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public Date getBirthday() {
        return birthday;
    }

    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }

    public String getGender() {
        return gender;
    }

    public void setGender(String gender) {
        this.gender = gender;
    }

    public String getCid() {
        return cid;
    }

    public void setCid(String cid) {
        this.cid = cid;
    }

    public Classes getClasses() {
        return classes;
    }

    public void setClasses(Classes classes) {
        this.classes = classes;
    }

    @Override
    public String toString() {
        return "Student{" +
                "sid='" + sid + ''' +
                ", sname='" + sname + ''' +
                ", age=" + age +
                ", birthday=" + birthday +
                ", gender='" + gender + ''' +
                ", cid='" + cid + ''' +
                ", classes=" + classes +
                '}';
    }
}

Mapper

package com.czxy.mapper;

import com.czxy.domain.Student;
import tk.mybatis.mapper.common.Mapper;


@org.apache.ibatis.annotations.Mapper
public interface StudentMapper extends Mapper {

}

3.后端实现 3.1 班级后端

3.1.1 查询所有班级

service

package com.czxy.service;

import com.czxy.domain.Classes;
import com.czxy.domain.Student;
import com.czxy.mapper.ClassesMapper;
import com.czxy.mapper.StudentMapper;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import tk.mybatis.mapper.entity.Example;

import javax.annotation.Resource;
import java.util.List;


@Service
@Transactional
public class ClassesService {

    @Resource
    private ClassesMapper classesMapper;
    @Resource
    private StudentMapper studentMapper;

    
    public List findAll() {
        List list = classesMapper.selectAll();
        return list;
    }
}

controller

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;

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

  @Resource
  private ClassesService classesService;

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

}



### 3.1.2 添加班级

* service

~~~java
    
    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;
    }

controller

    @PostMapping
    public baseResult save(@RequestBody Classes classes){
        try {
            // 添加
            boolean result = classesService.save(classes);
            // 返回
            if(result){
                return baseResult.ok("添加成功");
            } else {
                return baseResult.error("添加失败");
            }
        } catch (Exception e) {
            return baseResult.error(e.getMessage());
        }
    }

3.1.3 查询班级详情

service

    
    public Classes findById(String classId){
        Classes classes = classesMapper.selectByPrimaryKey(classId);
        return classes;
    }

controller

	
    @GetMapping("/{id}")
    public baseResult findById(@PathVariable("id") String classId ){
        // 查询
        Classes classes = classesService.findById(classId);

        if(classes != null) {
            // 返回
            return baseResult.ok("查询成功", classes);
        } else {
            return baseResult.error("查询失败");
        }
    }

3.1.4 更新班级

service

    
    public boolean update(Classes classes){
        // 校验
        Classes find = classesMapper.selectByPrimaryKey(classes.getCid());
        if(find == null){
            throw new RuntimeException("ID不存在");
        }
        // 更新非空项
        int count = classesMapper.updateByPrimaryKeySelective(classes);
        return count == 1;
    }

controller

    
    @PutMapping
    public baseResult update(@RequestBody Classes classes){
        try {
            // 添加
            boolean result = classesService.update(classes);
            // 返回
            if(result){
                return baseResult.ok("更新成功");
            } else {
                return baseResult.error("更新失败");
            }
        } catch (Exception e) {
            return baseResult.error(e.getMessage());
        }
    }

3.1.5 删除班级

service

    
    public boolean deleteById(String classId) {
        // 查询指定班级id的学生数
        Example example = new Example(Student.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("cid", classId);
        int studentCount = studentMapper.selectCountByExample(example);
        if(studentCount > 0) {
            throw new RuntimeException("班级已关联学生，不能删除");
        }

        int count = classesMapper.deleteByPrimaryKey(classId);
        return count == 1;
    }

controller

    
    @DeleteMapping("/{id}")
    public baseResult deleteById(@PathVariable("id") String classId ){
        try {
            // 查询
            boolean result = classesService.deleteById(classId);
            // 返回
            if(result){
                return baseResult.ok("删除成功");
            } else {
                return baseResult.error("删除失败");
            }
        } catch (Exception e) {
            return baseResult.error(e.getMessage());
        }
    }

3.2 学生后端

3.1.1 查询所有学生

StudentVo

package com.czxy.vo;


public class StudentVo {
    private String cid;     //班级
    private String sname;       //姓名
    private String startAge;    //开始年龄
    private String endAge;      //结束年龄

    public String getCid() {
        return cid;
    }

    public void setCid(String cid) {
        this.cid = cid;
    }

    public String getSname() {
        return sname;
    }

    public void setSname(String sname) {
        this.sname = sname;
    }

    public String getStartAge() {
        return startAge;
    }

    public void setStartAge(String startAge) {
        this.startAge = startAge;
    }

    public String getEndAge() {
        return endAge;
    }

    public void setEndAge(String endAge) {
        this.endAge = endAge;
    }

    @Override
    public String toString() {
        return "StudentVo{" +
                "cid='" + cid + ''' +
                ", sname='" + sname + ''' +
                ", startAge='" + startAge + ''' +
                ", endAge='" + endAge + ''' +
                '}';
    }
}

service

package com.czxy.service;

import com.czxy.domain.Classes;
import com.czxy.domain.Student;
import com.czxy.mapper.ClassesMapper;
import com.czxy.mapper.StudentMapper;
import com.czxy.vo.StudentVo;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import tk.mybatis.mapper.entity.Example;

import javax.annotation.Resource;
import java.util.List;


@Service
@Transactional
public class StudentService {

    @Resource
    private StudentMapper studentMapper;

    @Resource
    private ClassesMapper classesMapper;


    
    public PageInfo findAllByCondition(StudentVo studentVo, Integer pageSize, Integer pageNum){
        // 拼凑条件
        Example example = new Example(Student.class);
        Example.Criteria criteria = example.createCriteria();
        if(studentVo != null){
            //等值查询
            if(studentVo.getCid() != null && !"".equals(studentVo.getCid())) {
                criteria.andEqualTo("cid",studentVo.getCid());
            }
            // 模糊查询
            if(studentVo.getSname() != null && !"".equals(studentVo.getSname())) {
                criteria.andLike("sname","%"+studentVo.getSname()+"%");
            }
            // 区间查询
            if(studentVo.getStartAge() != null && !"".equals(studentVo.getStartAge())){
                criteria.andGreaterThanOrEqualTo("age",studentVo.getStartAge());
            }
            if(studentVo.getEndAge() != null && !"".equals(studentVo.getEndAge())) {
                criteria.andLessThanOrEqualTo("age",studentVo.getEndAge());
            }
        }

        // 分页
        PageHelper.startPage(pageNum,pageSize);

        // 条件查询
        List list = studentMapper.selectByExample(example);

        // 关联查询
        for(Student student : list){
            // 查询班级外键对应的对象
            Classes classes = classesMapper.selectByPrimaryKey(student.getCid());
            student.setClasses(classes);
        }

        // 分页封装
        PageInfo pageInfo = new PageInfo(list);
        return pageInfo;
    }
}

controller

package com.czxy.controller;

import com.czxy.domain.Student;
import com.czxy.service.StudentService;
import com.czxy.vo.baseResult;
import com.czxy.vo.StudentVo;
import com.github.pagehelper.PageInfo;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.util.List;


@RestController
@RequestMapping("/student")
public class StudentController {

    @Resource
    private StudentService studentService;

    
    @PostMapping("/condition/{pagesize}/{pagenum}")
    public baseResult conditioin(@RequestBody StudentVo studentVo, @PathVariable("pagesize") Integer pagesize , @PathVariable("pagenum") Integer pagenum){
        // 添加
        PageInfo pageInfo = studentService.findAllByCondition(studentVo,pagesize,pagenum);
        // 返回
        return baseResult.ok("查询成功", pageInfo);
    }
}

3.1.2 添加学生

service

    
    public boolean save(Student student){
        // 校验
        Student find = studentMapper.selectByPrimaryKey(student.getSid());
        if(find != null) {
            throw new RuntimeException("ID已存在");
        }
        // 添加
        int count = studentMapper.insert(student);
        return count == 1;
    }

controller

    
    @PostMapping
    public baseResult save(@RequestBody Student student){
        try {
            // 添加
            boolean result = studentService.save(student);
            // 返回
            if(result){
                return baseResult.ok("添加成功");
            } else {
                return baseResult.error("添加失败");
            }
        } catch (Exception e) {
            return baseResult.error(e.getMessage());
        }
    }

3.1.3 查询学生详情

service

    
    public Student findById(String studentId){
        Student student = studentMapper.selectByPrimaryKey(studentId);
        return student;
    }

controller

    
    @GetMapping("/{id}")
    public baseResult findById(@PathVariable("id") String studentId ){
        // 查询
        Student student = studentService.findById(studentId);
        if(student != null){
            // 返回
            return baseResult.ok("查询成功", student);
        } else {
            return baseResult.error("查询失败");
        }
    }

3.1.4 更新学生

service

    
    public boolean update(Student student){
        // 校验
        Student find = studentMapper.selectByPrimaryKey(student.getSid());
        if(find == null) {
            throw new RuntimeException("ID不存在");
        }
        // 更新非空项
        int count = studentMapper.updateByPrimaryKeySelective(student);
        return count == 1;
    }

controller

    
    @PutMapping
    public baseResult update(@RequestBody Student student){
        try {
            // 添加
            boolean result = studentService.update(student);
            // 返回
            if(result){
                return baseResult.ok("更新成功");
            } else {
                return baseResult.error("更新失败");
            }
        } catch (Exception e) {
            return baseResult.error(e.getMessage());
        }
    }

3.1.5 删除学生

service

     
    public boolean deleteById(String studentId) {
        int count = studentMapper.deleteByPrimaryKey(studentId);
        return count == 1;
    }

controller

    
    @DeleteMapping("/{id}")
    public baseResult deleteById(@PathVariable("id") String studentId ){
        // 查询
        boolean result = studentService.deleteById(studentId);
        // 返回
        if(result){
            return baseResult.ok("删除成功");
        } else {
            return baseResult.error("删除失败");
        }
    }

4. 前端实现：Vue版

使用Visual Studio Code 开发前端页面

4.1 班级前端 4.1.1 查询所有




    
    班级列表

    
    



    
        返回首页
        添加班级 

    
        
            
                班级ID
                班级名称
                班级描述
                操作
            
            
                {{classes.cid}}
                {{classes.cname}}
                {{classes.desc}}
                
                    修改
                    删除

4.1.2 添加

4.1.3 修改

跳转页面

修改

回显

提交

4.1.4 删除

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




    
    班级列表

    
    



    
        返回首页
        添加班级 

    
        
            
                班级ID
                班级名称
                班级描述
                操作
            
            
                {{classes.cid}}
                {{classes.cname}}
                {{classes.desc}}
                
                    修改
                    删除

4.2 学生前端 4.2.1 查询所有 1）查询 + 条件 + 分页




    
    班级列表

    
    



    
        返回首页
        添加学生 

        
        
            
                班级
                
                    
                
                姓名：
                
                    
                
                年龄：
                
                    
                    --
                    
                
                
            
        
        
        
        
            
    
                学生ID
                班级ID
                学生姓名
                年龄
                生日
                性别
                操作
            
           
                {{student.sid}}
                {{student.classes.cname}}
                {{student.sname}}
                {{student.age}}
                {{student.birthday}}
                {{student.gender == 1 ? "男" : "女"}}
                
                    修改
                    删除
                
            
        
    
        
        
            {{index}}

2）查询条件，下拉列表




    
    班级列表

    
    



    
        返回首页
        添加学生 

        
        
            
                班级
                
                    
                
                姓名：
                
                    
                
                年龄：
                
                    
                    --
                    
                
                
            
        

        
        
            
    
                学生ID
                班级ID
                学生姓名
                年龄
                生日
                性别
                操作
            
           
                {{student.sid}}
                {{student.classes.cname}}
                {{student.sname}}
                {{student.age}}
                {{student.birthday}}
                {{student.gender == 1 ? "男" : "女"}}
                
                    修改
                    删除
                
            
        
    
        
        
            {{index}}

3）跳转




    
    班级列表

    
    



    
        返回首页
        添加学生 

        
        
            
                班级
                
                    
                
                姓名：
                
                    
                
                年龄：
                
                    
                    --
                    
                
                
            
        

        
        
            
    
                学生ID
                班级ID
                学生姓名
                年龄
                生日
                性别
                操作
            
           
                {{student.sid}}
                {{student.classes.cname}}
                {{student.sname}}
                {{student.age}}
                {{student.birthday}}
                {{student.gender == 1 ? "男" : "女"}}
                
                    修改
                    删除
                
            
        
    
        
        
            {{index}} 
            跳转到第 页

4）改变分页pageSize




    
    班级列表

    
    



    
        返回首页
        添加学生 

        
        
            
                班级
                
                    
                
                姓名：
                
                    
                
                年龄：
                
                    
                    --
                    
                
                
            
        

        
        
            
    
                学生ID
                班级ID
                学生姓名
                年龄
                生日
                性别
                操作
            
           
                {{student.sid}}
                {{student.classes.cname}}
                {{student.sname}}
                {{student.age}}
                {{student.birthday}}
                {{student.gender == 1 ? "男" : "女"}}
                
                    修改
                    删除
                
            
        
    
        
        
            每页
            条，

            {{index}} 
            ，跳转到第 页

4.2.2 添加

4.2.3 修改

4.2.4 删除




    
    班级列表

    
    




    返回首页
    添加学生 

    
    
        
            班级
            
                
            
            姓名：
            
                
            
            年龄：
            
                
                --
                
            
            
        
    

    
    
        

            学生ID
            班级ID
            学生姓名
            年龄
            生日
            性别
            操作
        
        
            {{student.sid}}
            {{student.classes.cname}}
            {{student.sname}}
            {{student.age}}
            {{student.birthday}}
            {{student.gender == 1 ? "男" : "女"}}
            
                修改
                删除
            
        
    

    
    
        每页
        条，

        {{index}}
        ，跳转到第 页

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

domain

package com.czxy.domain;

import javax.persistence.Column;
import javax.persistence.Id;
import javax.persistence.Table;


@Table(name = "tb_user")
public class User {
    @Id
    @Column(name = "u_id")
    private String uid;         //用户编号

    @Column(name = "user_name")
    private String username;     //用户名

    @Column(name = "password")
    private String password;         //密码

    @Column(name = "gender")
    private Integer gender;         //性别,1表示男，0表示女

    public String getUid() {
        return uid;
    }

    public void setUid(String uid) {
        this.uid = uid;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public Integer getGender() {
        return gender;
    }

    public void setGender(Integer gender) {
        this.gender = gender;
    }

    @Override
    public String toString() {
        return "User{" +
                "uid='" + uid + ''' +
                ", username='" + username + ''' +
                ", password='" + password + ''' +
                ", gender=" + gender +
                '}';
    }
}

mapper

package com.czxy.mapper;

import com.czxy.domain.User;
import tk.mybatis.mapper.common.Mapper;


@org.apache.ibatis.annotations.Mapper
public interface UserMapper extends Mapper {
}

5.3 用户注册 5.3.1 分析

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

5.3.2 后端实现

编写service，用户名存在不允许注册

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BvY3WRpL-1635379567699)(assets/image-20201012111842320.png)]

package com.czxy.service;

import com.czxy.domain.User;
import com.czxy.mapper.UserMapper;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import tk.mybatis.mapper.entity.Example;

import javax.annotation.Resource;


@Service
@Transactional
public class UserService {

    @Resource
    private UserMapper userMapper;

    
    public boolean register(User user){
        // 校验：用户名
        User findUser = findByUsername(user.getUsername());
        if(findUser != null){
            throw new RuntimeException("用户名已存在");
        }

        // 添加
        int count = userMapper.insert(user);

        // 返回
        return count == 1;
    }

    
    public User findByUsername(String username){
        // 拼凑条件
        Example example = new Example(User.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("username", username);

        // 查询
        User user = userMapper.selectOneByExample(example);
        return user;
    }

}

编写controller

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EQSlLBvT-1635379567700)(assets/image-20201012112126781.png)]

package com.czxy.controller;

import com.czxy.domain.User;
import com.czxy.service.UserService;
import com.czxy.vo.baseResult;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import javax.annotation.Resource;


@RestController
@RequestMapping("/user")
public class UserController {

    @Resource
    private UserService userService;

    
    @PostMapping("/register")
    public baseResult register(@RequestBody User user) {
        try {
            // 注册
            boolean result = userService.register(user);

            // 返回
            if(result){
                return baseResult.ok("注册成功");
            } else {
                return baseResult.error("注册失败");
            }
        } catch (Exception e) {
            return baseResult.error(e.getMessage());
        }
    }

}

5.3.3 前端实现

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

注册 |

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

5.4 用户登录 5.4.1 分析

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

5.4.2 后端实现

修改service，添加login方法

    public User login (User user){
        // 校验：用户名
        User findUser = findByUsername(user.getUsername());
        if(findUser == null){
            throw new RuntimeException("用户名不存在");
        }

        // 登录条件
        Example example = new Example(User.class);
        Example.Criteria criteria = example.createCriteria();
        criteria.andEqualTo("username", user.getUsername());
        criteria.andEqualTo("password", user.getPassword());

        // 查询
        User loginUser = userMapper.selectOneByExample(example);
        return loginUser;
    }

修改controller，添加login 方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G9lSq9bM-1635379567702)(assets/image-20201012113858143.png)]

    
    @PostMapping("/login")
    public baseResult login(@RequestBody User user) {
        try {
            // 注册
            User loginUser = userService.login(user);

            // 返回
            if(loginUser != null ){
                // 需要将用户信息响应给浏览器
                return baseResult.ok("登录成功", loginUser);
            } else {
                return baseResult.error("用户名或密码不匹配");
            }
        } catch (Exception e) {
            return baseResult.error(e.getMessage());
        }
    }

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




    
    首页
    


    
        班级管理 |
        学生管理 |
        
            
            欢迎 {{loginUser.username}} ，
            退出 |
        
        
            
            注册 |
            登录 |

5.5 用户注销




    
    首页
    


    
        班级管理 |
        学生管理 |
        
            
            欢迎 {{loginUser.username}} ，
            退出 |
        
        
            
            注册 |
            登录 |

5.6 用户注册前校验 5.6.1 分析

5.6.2 后端实现

修改 UserController

   
    @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 前端实现

修改注册页面




    
    用户注册

    
    

    




    返回首页

    
        
            用户名
            
                
                {{result.message}}
            
        
        
            密码
             
        
        
            性别
            
                 男
                 女

班级ID	班级名称	班级描述	操作
{{classes.cid}}	{{classes.cname}}	{{classes.desc}}	修改删除

学生ID	班级ID	学生姓名	年龄	生日	性别	操作
{{student.sid}}	{{student.classes.cname}}	{{student.sname}}	{{student.age}}	{{student.birthday}}	{{student.gender == 1 ? "男" : "女"}}	修改删除

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

Java相关栏目本月热门文章