一、案例结构

用springboot做后端接口，采用restful风格。

用vue-cli来创建前端项目，通过axios进行前后端交互。

来实现用户的增删改查操作。

二、效果图

点击修改：

点击添加：

三、服务器端

控制层代码：

package com.example.swagger.controller;

import com.example.swagger.dao.UserRepository;
import com.example.swagger.pojo.User;
import com.example.swagger.util.Response;
import com.example.swagger.util.ResponseResult;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiImplicitParam;
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;


@RestController
@Api(tags = "用户管理相关接口")
public class UserController {

    @Autowired
    private UserRepository userRepository;

    //查询所有
    @GetMapping("/users")
    @ApiOperation("查询所有用户的接口")
    public ResponseResult> selectUsers()
    {
         List usersList= userRepository.findAll();

         return Response.createOkResp(usersList);
    }

    //根据id查询
    @GetMapping("/users/{id}")
    @ApiOperation("根据id查询用户的接口")
    @ApiImplicitParam(name = "id", value = "用户id", required = true)
    public ResponseResult selectUserById(@PathVariable(name = "id") int id)
    {
         User user= userRepository.findById(id).get();

         return Response.createOkResp(user);
    }

    //添加
    @PostMapping("/users")
    @ApiOperation("添加用户")
    public ResponseResult addUser(User user)
    {
        userRepository.save(user);

        return Response.createOkResp("add success");
    }

    //修改
    @PutMapping("/users")
    @ApiOperation("修改用户")
    public ResponseResult updateUser(User user)
    {
        userRepository.save(user);

        return Response.createOkResp("edit success");
    }

    //删除
    @DeleteMapping("/users/{id}")
    @ApiOperation("删除用户")
    @ApiImplicitParam(name = "id", value = "用户id", required = true)
    public ResponseResult deleteUser(@PathVariable(name = "id") int id)
    {
        userRepository.deleteById(id);

        return Response.createOkResp("delete success");
    }


}

四、 前端

1、通过vue脚手架创建一个vue项目

创建出来的结构如下

2、安装需要用到的组件

在vscode的菜单“终端”中，选择“新终端”。

2.1安装axios并导入到项目中

打开的新终端中输入如下命令安装

安装完成后导入到项目中

2.2安装qs并导入到项目中

qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库，axios中提交对象时会用到

输入如下命令安装qs

安装完整后导入到项目中

完整的main.js文件

import { createApp } from "vue";
import App from "./App.vue"; 
import router from "./router";
import store from "./store";
import qs from "qs";


import axios from "axios"; //导入axios

const app = createApp(App);

app.config.globalProperties.$axios=axios;

app.config.globalProperties.$qs=qs;

app.use(store).use(router).mount("#app"); //这里的#app对应的是 index.html页面里的div

3、创建用户展示页

3.1 创建Users.vue页面

代码如下：

3.2 设置路由

4、 修改入口页面App.vue

5、创建用户修改页面

5.1、创建EditUser.vue页面

EditUser.vue页面代码：

5.2 设置路由

6、创建用户添加页面

6.1 创建AddUser.vue页面

AddUser.vue页面代码：

6.2 设置路由

7、设置访问端口

在根目录下创建配置文件vue.config.js,里面设置端口