vue+springboot项目流程(青青菜鸟—第一季）

QuitXIN

已于 2023-06-04 11:23:59 修改

阅读量2.1k

点赞数 7

分类专栏： springboot+vue 文章标签： vue.js spring boot java

于 2023-05-18 17:14:09 首次发布

本文链接：https://blog.csdn.net/weixin_52479647/article/details/130746897

版权

springboot+vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

（1）

素材：https://pan.baidu.com/s/1ZZ8c-kRPUxY6FWzsoOOjtA 提取码：up4c

数据库：名称：xdb，内容如下，自行创建(139条消息) 【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 数据库设计_大菜007的博客-CSDN博客

（2）前端：

(139条消息) 【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 前端_vue+springboot前后端分离开发实战_大菜007的博客-CSDN博客

1.node -v和npm -v版本高一点没关系

2.见图

3.改配置可以使用vscode的搜索功能，然后看情况改！

4.改标题如图，将vue-admin-template换成如图所示！(get-page-title.js删除 || 'vue-admin-template')

5.ctrl+c 输入 y, 再输入 npm run dev部署项目

6.①登录页面 src/views/login/index.vue（src/utils/validate.js）

7. 按F12检查页面，左上角鼠标对应开启，可以知道布局对应的style！

8.②下拉菜单 src/layout/components/Navbar.vue

9.③首页面包屑导航（src/components/Breadcrumb/index.vue）

10.④菜单初始化(src/views/sys 与 test ，src/router/index.js)

图标svg文件可上 https://www.iconfont.cn/ 下载

11.⑤标签栏导航（跟着前端那个博客改-是全的）

接下来跟着前端博客改

到此为止，前端就准备得差不多了。

（3）后端：

(139条消息) 【SpringBoot+Vue】全网最简单但实用的前后端分离项目实战笔记 - 后端_大菜007的博客-CSDN博客

1.导包

2.配置文件

3.代码生成器

4.启动类加注解，进行测试

5.跟着链接写即可，全的，省略的接口在Controller中，自己看即可。
package com.lantu.sys.controller;

import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.lantu.common.vo.Result;
import com.lantu.sys.entity.User;
import com.lantu.sys.service.IUserService;
import org.apache.ibatis.annotations.Param;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import org.springframework.stereotype.Controller;

import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * <p>
 *  前端控制器
 * </p>
 *
 * @author xsp
 * @since 2023-05-15
 */
@RestController //细节
@RequestMapping("/user")
//@CrossOrigin 跨越处理
public class UserController {

    @Autowired
    private IUserService userService;
    //密码加密
    @Autowired
    private PasswordEncoder passwordEncoder;

    //查询全部信息接口
    @GetMapping("/all")
    public Result<List<User>> getAllUser(){
         List<User> list = userService.list();
        return Result.success(list,"查询成功鸭！");
    }
    //登录接口
    @PostMapping("/login")
    public Result<Map<String,Object>> login(@RequestBody User user){
        Map<String,Object> data = userService.login(user);
        if(data != null){
            return Result.success(data);
        }
        return Result.fail(20002,"用户名或密码错误");
    }
    //用户信息接口
    @GetMapping("/info")
    public Result<?> getUserInfo(@RequestParam("token") String token){
        //根据token获取用户信息，根据redis获取
        Map<String,Object> data = userService.getUserInfo(token);
        if(data != null){
            return Result.success(data);
        }
        return Result.fail(20003,"用户信息获取失败");
    }
    //注销接口
    @PostMapping("/logout")
    public Result<?> logout(@RequestHeader("X-Token") String token){
        userService.logout(token);
        return Result.success("注销成功");
    }

    // 查询用户列表
    @GetMapping("/list")
    public Result<?> getUserListPage(@RequestParam(value = "username", required = false) String username,
                                     @RequestParam(value = "phone", required = false) String phone,
                                     @RequestParam("pageNo") Long pageNo,//当前页
                                     @RequestParam("pageSize") Long pageSize) {  //每页显示多少条
        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper();
        wrapper.eq(StringUtils.hasLength(username), User::getUsername, username);
        wrapper.eq(StringUtils.hasLength(phone), User::getPhone, phone);
        wrapper.orderByDesc(User::getId);//按ID降序排序
        Page<User> page = new Page<>(pageNo, pageSize); //当前页和每页显示多少条
        userService.page(page, wrapper);

        Map<String, Object> data = new HashMap<>();
        data.put("total", page.getTotal());
        data.put("rows", page.getRecords());

        return Result.success(data);
    }

    //新增接口
    @PostMapping
    public Result<?> addUser(@RequestBody User user){   //Result<?>表示返回空
        user.setPassword(passwordEncoder.encode(user.getPassword()));
        userService.save(user);
        return Result.success("新增用户成功！");
    }

    //修改接口
    @PutMapping
    public Result<?> updateUser(@RequestBody User user){   //Result<?>表示返回空
        user.setPassword(null);//表示不修改密码
        userService.updateById(user);
        return Result.success("修改用户成功！");
    }

    //根据id获取用户信息 ， 配合修改接口使用
    @GetMapping("/{id}")
    public Result<User> getUserById(@PathVariable("id") Integer id){
        User user = userService.getById(id);
        return Result.success(user);
    }
    //删除接口
    @DeleteMapping("/{id}")
    public Result<User> deleteUserById(@PathVariable("id") Integer id){
        userService.removeById(id);
        return Result.success("删除用户成功");
    }

}
6.如果接口是post请求，用postman来测试。注意带参数，带Headers参数该如何操作！

7.注销接口：登录成功生成token，获取用户信息可以通过token，注销也要获取token

到此为止写了登录，获取信息，注销接口后，后端就准备得差不多了，现在开始前后端对接工作。

前后端对接

1.src/api/user.js 修改

2修改vue.config.js，屏蔽mock请求

3 修改 .env.development 中的base api，打包部署的话要修改.env.production

4.去idea写跨越问题代码--在配置类中

到此为止，前后端对接工作完成，开始对用户管理（crud）布局与接口进行前后端的交互。

主要使用elementui官网的组件来完成本项目中vue前端的开发！

1.用户管理界面（src/views/sys/user.vue）

搜索栏

（1）Card卡片--简单卡片

（2）输入框

（3）Button按钮

（4）src/App.vue(全局组件)

（5）Icon--加到标签的icon属性中

（6）Layout布局

结果列表

（1）Card卡片

（2）Table表格

分页组件

（1）Pagination分页

（2）src/main.js 改中文

2.用户列表查询接口（idea的controller类）
（1）userController类中的getUserListPage（）方法--可以在不输入时查出全部，输入时查出一致的！
（2）配置类中MpConfig设置分页拦截器

3.在前端中用户列表查询对接后端

（1）在src/api/userManage.js中编写

（2）在src/views/sys/user.vue中编写七七八八的

4.新增接口与页面布局

（1）.userController类中写方法addUser()

（2）.Dialog对话框，Switch开关-用户信息编辑对话框（src/views/sys/user.vue）中编写七七八八的

5.表单验证

（1）.Dialog对话框，用户信息编辑对话框（src/views/sys/user.vue）中编写七七八八的

（2）Form表单-表单验证，用户信息编辑对话框（src/views/sys/user.vue）中编写七七八八的

6.表单提交

（1）Form表单-表单验证，用户信息编辑对话框（src/views/sys/user.vue）中编写七七八八的

（2）与后台提交接口进行对接（src/api/userManage.js）中进行对接addUser()方法

（3）Message消息提示src/views/sys/user.vue

（4）Tag标签src/views/sys/user.vue

7.密码加密

（1）修改新增用户接口userController类的addUser方法，多加一条加密语句

（2）登录接口的Service层逻辑需要改变 UserServiceImpl

8.用户修改

（1）userController类中写updateUser（）方法

（2）userController类中写getUserById（）方法

（3）Button按钮-src/views/sys/user.vue 编写七七八八

（4）对接后端接口，在src/api/userManage.js中对接getUserById(),updateUser()方法

（5）在src/views/sys/user.vue 编写七七八八

（6）在src/api/userManage.js中新增saveUser()方法

（7）在src/views/sys/user.vue 编写七七八八

9.用户删除

（1）在userController类中写deleteUser（）方法

（2）对接后端接口，在src/api/userManage.js中新增deleteUserById()方法

（3）在src/views/sys/user.vue 编写七七八八

（4）MessageBox弹框--在src/views/sys/user.vue 编写七七八八