SpringBoot+vue.js

一 、创建一个普通Java项目

二、修改POM文件

<?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 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.kenewstar</groupId>
    <artifactId>springboot-vue</artifactId>
    <version>1.0-SNAPSHOT</version>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.6.RELEASE</version>
    </parent>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--        springboot整合mybatis     -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.2</version>
        </dependency>
        <!--        druid数据库连接池-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.1.21</version>
        </dependency>
        <dependency>
		    <groupId>mysql</groupId>
		    <artifactId>mysql-connector-java</artifactId>
		    <version>5.1.48</version>
		</dependency>

    </dependencies>

</project>

三、创建static目录

该目录用来放置静态资源，也就是前端页面（html）

四、创建application.yml全局配置文件

#设置端口
server:
  port: 80
#数据库连接信息
spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test
    username: root
    password: 1234
    type: com.alibaba.druid.pool.DruidDataSource

五、用户数据表User

六、创建用户实体类User.java，响应实体ResponseCode

User.java

package com.kenewstar.pojo;

/**
 * @Author: kenewstar
 * @Description: 用户实体类
 * @Date:Created in 2020/5/29
 */
public class User {
    
    private Integer id;
    private String username;
    private Integer userage;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

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

    public Integer getUserage() {
        return userage;
    }

    public void setUserage(Integer userage) {
        this.userage = userage;
    }
}

ResponseCode.java

package com.kenewstar.pojo;

/**
 * @Author: kenewstar
 * @Description: 响应信息
 * @Date:Created in 2020/5/29
 */
public class ResponseCode {

    private Integer code;   //响应码

    private Object msg;     //响应信息

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public Object getMsg() {
        return msg;
    }

    public void setMsg(Object msg) {
        this.msg = msg;
    }
    public ResponseCode(){}

    public ResponseCode(Integer code, Object msg) {
        this.code = code;
        this.msg = msg;
    }
}

七、创建用户Mapper

package com.kenewstar.mapper;
import com.kenewstar.pojo.User;
import org.apache.ibatis.annotations.Delete;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;
import org.springframework.stereotype.Repository;
import java.util.List;
/**
 * @Author: kenewstar
 * @Description: 用户mapper接口
 * @Date:Created in 2020/5/29
 */
@Repository
public interface UserMapper {
    /**
     * 查询所有用户
     * @return
     */
    @Select("select id,username,userage from user")
    List<User> selectAllUser();

    /**
     * 插入一个用户
     * @param user 用户参数
     * @return
     */
    @Insert("insert into user(username,userage) values(#{username},#{userage})")
    int insertUser(User user);

    /**
     * 根据用户id删除用户
     * @param id
     * @return
     */
    @Delete("delete from user where id=#{id}")
    int deleteUserById(Integer id);

    /**
     * 根据用户id修改用户信息
     * @param user
     * @return
     */
    @Update("update user set username=#{username},userage=#{userage} where id=#{id}")
    int updateUserById(User user);

    /**
     * 根据用户id查询用户信息
     * @param id
     * @return
     */
    @Select("select id,username,userage from user where id=#{id}")
    User selectUserById(Integer id);
}

八、创建service接口及其实现类

UserService：

package com.kenewstar.service;
import com.kenewstar.pojo.User;
import java.util.List;

/**
 * @Author: kenewstar
 * @Description: 用户业务逻辑层
 * @Date:Created in 2020/5/29
 */
public interface UserService {
    /**
     * 显示所有用户
     * @return
     */
    List<User> showAllUser();

    /**
     * 添加一个用户
     * @param user
     * @return
     */
    int addUser(User user);

    /**
     * 根据用户id删除用户
     * @param id
     * @return
     */
    int removeUserById(Integer id);

    /**
     * 根据用户id修改用户信息
     * @param user
     * @return
     */
    int modifyUserById(User user);

    /**
     * 根据id查询用户
     * @param id
     * @return
     */
    User selectUserById(Integer id);

}

UserServiceImpl：

package com.kenewstar.service.impl;

import com.kenewstar.mapper.UserMapper;
import com.kenewstar.pojo.User;
import com.kenewstar.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

/**
 * @Author: kenewstar
 * @Description:
 * @Date:Created in 2020/5/29
 */
@Service
public class UserServiceImpl implements UserService {
    @Autowired
    private UserMapper userMapper;

    @Override
    public List<User> showAllUser() {
        return this.userMapper.selectAllUser();
    }

    @Override
    public int addUser(User user) {
        return this.userMapper.insertUser(user);
    }

    @Override
    public int removeUserById(Integer id) {
        return this.userMapper.deleteUserById(id);
    }

    @Override
    public int modifyUserById(User user) {
        return this.userMapper.updateUserById(user);
    }

    @Override
    public User selectUserById(Integer id) {
        return this.userMapper.selectUserById(id);
    }
}

九、创建用户控制器类UserController

UserController：

package com.kenewstar.controller;

import com.kenewstar.pojo.ResponseCode;
import com.kenewstar.pojo.User;
import com.kenewstar.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
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 java.util.List;

/**
 * @Author: kenewstar
 * @Description: 用户控制器
 * @Date:Created in 2020/5/29
 */
@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;

    private ResponseCode respCode;

    @RequestMapping("/showAllUser")
    public List<User> showAllUser(){
        List<User> list = this.userService.showAllUser();
        return list;
    }
    @RequestMapping("/addUser")
    public ResponseCode addUser(@RequestBody User user){
        int i = this.userService.addUser(user);
        List<User> list = this.userService.showAllUser();
        if (i>0){
            //插入成功
            respCode = new ResponseCode(200,list);
            return respCode;
        }else {
            respCode = new ResponseCode(400,list);
            return respCode;
        }
    }
    @RequestMapping("/removeUserById")
    public ResponseCode removeUserById(Integer id){
        int i = this.userService.removeUserById(id);
        List<User> list = this.userService.showAllUser();
        if (i>0){
            //删除成功
            respCode = new ResponseCode(200,list);
            return respCode;
        }else {
            respCode = new ResponseCode(400,list);
            return respCode;
        }
    }
    @RequestMapping("/modifyUserById")
    public ResponseCode modifyUserById(@RequestBody User user){
        int i = this.userService.modifyUserById(user);
        List<User> list = this.userService.showAllUser();
        if (i>0){
            //修改成功
            respCode = new ResponseCode(200,list);
            return respCode;
        }else {
            respCode = new ResponseCode(400,list);
            return respCode;
        }
    }
    @RequestMapping("/selectUserById")
    public User selectUserById(Integer id){
        User user = this.userService.selectUserById(id);
        return user;
    }

}

十、创建前端页面

在static目录下创建showAllUser.html静态页面：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>显示所有用户</title>
    <!--引入vue.js-->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <!--引入axios -ajax异步请求作用-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

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

<button @click="showAllUser">显示所有用户</button>
<button @click="ok=true">显示添加用户</button>
    <div v-if="code==200">
        <h4 style="color: red;">操作成功</h4>
    </div>
    <div v-if="code==400">
        <h4 style="color: red;">操作失败</h4>
    </div>

    <hr/>
        用户名： <input type="text" v-model="user.username" /><br/>
        用户年龄：<input type="text" v-model="user.userage"/><br/>
    <div v-if="ok">
        <button @click="addUser(user.username,user.userage)">添加用户</button>
    </div>
    <div v-else>
        <input type="hidden" v-model="user.id"/>
        <button @click="modifyUserById(user.id,user.username,user.userage)">修改用户</button>
    </div>
    <hr/>
    <table border="1" align="center" width="50%">
        <tr>
            <td>ID</td>
            <td>用户名</td>
            <td>年龄</td>
            <td>操作</td>
        </tr>
        <tr v-for="user in userList">
            <td>{{user.id}}</td>
            <td>{{user.username}}</td>
            <td>{{user.userage}}</td>
            <td>
                <button @click="selectUserById(user.id)" v-bind:value="user.id">修改</button>
                <button @click='removeUserById(user.id)' v-bind:value="user.id">删除</button>
            </td>
        </tr>

    </table>


</div>
<script>
    new Vue({
        el:'#app',
        data:{
            userList : null,
            respCode : null,
            code     : null,
            user     : {id:null,username:null,userage:null},
            ok       : true
        },
        methods:{
            //查询所有用户
            showAllUser:function () {
                var ul = this;
                axios
                    .get('http://localhost/user/showAllUser')
                    .then(function (response) {
                        ul.userList = response.data;
                    })
                    .catch(function (err) {
                    console.log(err);
                });
            },
            //删除用户根据id
            removeUserById:function (id) {
                var ul = this;
                axios
                    .get('http://localhost/user/removeUserById?id='+id)
                    .then(function (response) {
                        ul.respCode = response.data;
                        ul.userList = ul.respCode.msg;
                        ul.code = ul.respCode.code;
                    })
                    .catch(function (err) {
                        console.log(err);
                    })
            },
            //添加用户
            addUser:function (username,userage) {
                var ul = this;
                axios
                    .post('http://localhost/user/addUser',{
                            username:username,
                            userage:userage
                        }
                    )
                    .then(function (response) {
                        ul.respCode = response.data;
                        ul.userList = ul.respCode.msg;
                        ul.code = ul.respCode.code;
                    })
                    .catch(function (err) {
                        console.log(err);
                    })
            },
            //查询单个用户
            selectUserById: function(id){
                this.ok = false;
                var ul = this;
                axios
                    .get('http://localhost/user/selectUserById?id='+id)
                    .then(function (response) {
                        ul.user = response.data;
                    })
                    .catch(function (err) {
                        console.log(err);
                    })
            },
            //根据用户id修改用户
            modifyUserById:function (id,username,userage) {
                var ul = this;
                axios
                    .post('http://localhost/user/modifyUserById',
                        {
                            id:id,
                            username:username,
                            userage:userage
                        }
                    )
                    .then(function (response) {
                        ul.respCode = response.data;
                        ul.userList = ul.respCode.msg;
                        ul.code = ul.respCode.code;
                    })
                    .catch(function (err) {
                        console.log(err);
                    })
            }


        }

    })
</script>
</body>
</html>

十一、创建启动类

package com.kenewstar;

import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * @Author: kenewstar
 * @Description: springboot启动类
 * @Date:Created in 2020/5/29
 */
@SpringBootApplication
@MapperScan("com.kenewstar.mapper") //扫描Mapper
public class App {
    public static void main(String[] args) {

        SpringApplication.run(App.class,args);
    }
}

十二、结果

在浏览器中输入http://localhost/showAllUser.html
注意：不要配置视图解析器
我这里相当于前后端分离；
该页面只是静态页面，不是模板引擎的页面；

点击显示所有用户

点击删除按钮，可删除用户：

点击修改按钮，可修改用户

我们可以看到表单中出现了需要修改的数据，并且底下的按钮也变成了修改用户按钮
直接在表单中填写修改信息，点击修改即可完成修改操作

添加用户操作
点击上方的显示添加用户即可改变下方的按钮

输入需要添加的信息即可

至此我们完成了使用SpringBoot+Vue.js的CRUD操作；

gitHub源码地址：https://github.com/kenewstar/SpringBoot_Vue