最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

焦点快播：SpringBoot+VUE

来源：博客园

一、案例结构

用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"; //导入axiosconst 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页面

代码如下：

<script>export default {    name:"Users",    data() {return {userList:[]}},      methods:{         getUsers(){                     this.$axios.get("http://localhost:8080/users").then(res => {                           this.userList=res.data.data;         })         },         delRow(id){          console.log(id);          this.$axios.delete("http://localhost:8080/users/"+id).then(res=>{             if(res.data.code==200){                               this.getUsers()             }          })        }          },     //页面加载时触发     mounted:function(){        this.getUsers();     }      }</script>

3.2 设置路由

4、 修改入口页面App.vue

5、创建用户修改页面

5.1、创建EditUser.vue页面

EditUser.vue页面代码：

<script>    export default {      name: "EditUser",      data(){        return {          user:{            id:"",            uname:"",            age:""          }        }      },      methods:{        findOne(){          this.$axios.get("http://localhost:8080/users/"+this.user.id).then(res=>{            console.log(res.data.data);            this.user = res.data.data          })        },        editUserInfo(){                     this.$axios.put("http://localhost:8080/users",this.$qs.stringify(this.user)).then(res=>{            console.log(res);            if(res.data.code==200){              this.$router.push("/users") //切换路由  跳回到用户展示页            }          })        }      },      created() {        console.log("修改的ID"+this.$route.query.id);        this.user.id=this.$route.query.id        this.findOne()      }// created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。// mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。// 其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作    }</script>

5.2 设置路由

6、创建用户添加页面

6.1 创建AddUser.vue页面

AddUser.vue页面代码：

<script>export default {      name: "AddUser",      data(){        return {          user:{            id:0,            uname:"",            age:0                }        }      },      methods:{        addUserInfo(){          console.log(this.$qs.stringify(this.user));//id=0&uname=sadsd&age=18                    this.$axios.post("http://localhost:8080/users/",this.$qs.stringify(this.user)).then(res=>{            console.log(res.data.data);            if(res.data.code==200)                this.$router.push("/users")           })        }      }}</script>

6.2 设置路由

7、设置访问端口

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

关键词： 创建用户 删除用户 服务器端