vue3(element-plus)+springboot_vue3 springboot

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：
最近公司想开发个客户需求变更发布系统，以前都是邮件飞来飞去，无记可寻，容易出现失误，要让客户变更要求系统化数字化，这样的数据可以进行分类统计分析，来更好的服务客户,我想使用vue3(element-plus)前后端分离的来实现此系统，故此学习了下vue框架

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vue3(element-plus)是什么？

vue：是一个用于创建用户界面的开源JavaScript框架，也是一个创建单页应用的Web应用框架；Vue所关注的核心是MVC模式中的视图层，同时，它也能方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互。简单的说，vue是一套前端的开发框架，vue是目前三大主流的框架之一，其他两个框架是:React、Angular。
前端开发框架出现的意义：
1、前端工程化
1）规范化，也就是制定或者约定一个开发规则、开发标准，比如，类的命名规范、制定编码模板代码，等等，提倡约定大于配置（vue、springboot等等当中就有约定大于配置的规范）
2）可定量的过程化方法，简单来说就是制定衡量整个开发流程和进度的方法
3）版本控制，来管理代码的更新
4）开发使用的技术、方法。
2、前后端分离
前端：负责View（视图层）和Controller（业务模块流程控制层）
后端：负责Model层、业务、数据处理等
3、组件化开发
element-plus：基于 Vue 3，面向设计师和开发者的组件库

二、token 安全验证

基于Token的身份验证是无状态的，我们不将用户信息存在服务器中。这种概念解决了在服务端存储信息时的许多问题。NoSession 意味着我们的程序可以根据需要去增减机器，而不用去担心用户是否登录。
1、基于Token的验证过程

2、Token验证的优势

三、使用步骤

1.安装node环境

2.环境搭建

代码如下（示例）：

1、npm install -g cnpm --registry=https://registry.npm.taobao.org
2、npm config set registry https://registry.npm.taobao.org
npm install -g yarn
yarn
npm install -g @vue/cli
vue -V

vue create 项目名称(将自己的项目名称写好就可以，在这里我的项目名称是vue-manage)

vue create springboot-vue-demo
1
2
3
4
5
6
7
8
9
10

选择Manually select features

选择路由和vuex

选择3.x版本

输入y (路由信息为history)

选择In package.json

是否保存配置

创建,启动项目

启动成功,浏览器输入8080端口进行访问

3.idea启动Vue项目

选择npm,在npm中Script选项中输入serve

我这边为什么是dev呢，因为我配置多个环境dev,pro,test
这样我可以通过这个来切换不同的环境

安装vue插件

4.项目基本布局

1.引入Element-plus（基于vue3.x版本）
代码如下（示例）：

npm install element-plus --save
npm i axios -S

npm i qs

npm install sass-loader -D
npm install node-sass -D

cnpm install sass-loader -D
cnpm install node-sass -D

npm install i18n
npm install i18n -save

npm install crypto-js
npm install --save crypto-js

npm install --save nprogress

npm i webpack@3.6.0 -g

cnpm install @element-plus/icons
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

5.后端项目结构

springboot+Mybaties-plus+hutool

代码如下（示例）：

package com.example.springbootdemo.controller;

import com.alibaba.druid.sql.ast.statement.SQLIfStatement;
import com.baomidou.mybatisplus.core.toolkit.Wrappers;
import com.example.springbootdemo.common.*;
import com.example.springbootdemo.entity.User;
import com.example.springbootdemo.mapper.UserMapper;
import com.example.springbootdemo.security.utils.JwtTokenUtils;
import com.example.springbootdemo.security.utils.SignUtils;
import com.example.springbootdemo.vo.UserLoginVo;
import com.example.springbootdemo.vo.UserRegVo;
import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.*;

import javax.annotation.Resource;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.OutputStream;
import java.util.HashMap;
import java.util.Map;

@Slf4j
@CrossOrigin
@RestController
@RequestMapping("/api/auth")
public class AuthController {

    @Resource
    UserMapper userMapper;

    private final JwtTokenUtils jwtTokenUtils;
    public AuthController(JwtTokenUtils jwtTokenUtils) {
        this.jwtTokenUtils = jwtTokenUtils;
    }

    @GetMapping(value = "/getToken")
    public Result<?> getToken(String user, String password){
        Map map = new HashMap();
        map.put("user",user);
        map.put("password",password);
        String token = jwtTokenUtils.createToken(map);

        return Result.success(token);
    }

    @GetMapping(value = "/identifyCode")
    public Result<?> identifyCode() throws IOException {
        // 生成随机字串
        String verifyCode = VerifyCodeUtils.generateVerifyCode(5);

        Map<String, String> params = new HashMap<String, String>();
        params.put("signature",verifyCode);


        Map map = new HashMap();
        map.put("signature",Base64.encode(SignUtils.getSign(params, Constants.APP_KEY).getBytes()));
        map.put("code", verifyCode);

        return Result.success(map);
    }

    @GetMapping(value = "/kaptcha")
    public Result<?> kaptcha() throws IOException {

        // 生成随机字串
        String verifyCode = VerifyCodeUtils.generateVerifyCode(4);

        // 生成图片
        int w = 111, h = 36;
        ByteArrayOutputStream stream = new ByteArrayOutputStream();
        VerifyCodeUtils.outputImage(w, h, stream, verifyCode);

        Map<String, String> params = new HashMap<String, String>();
        params.put("signature",verifyCode);


        Map map = new HashMap();
        map.put("signature",Base64.encode(SignUtils.getSign(params, Constants.APP_KEY).getBytes()));
        map.put("img", Base64.encode(stream.toByteArray()));

        return Result.success(map);
    }

    //登录接口
    @PostMapping("/login")
    public Result<?> login(@RequestBody UserLoginVo user)
    {
        Map<String, String> params = new HashMap<String, String>();
        params.put("signature",user.getKaptcha());
        String kaptcha = Base64.encode(SignUtils.getSign(params, Constants.APP_KEY).getBytes());
        if(!kaptcha.equals(user.getSignature()))
        {
            return Result.error(ResultCode.FAIL.getCode(),"验证码错误");
        }

        User res = userMapper.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername,user.getUsername()).eq(User::getPassword,user.getPassword()));
        //判断查询是否存在
        if (res == null||res.getStatus()==StatusCode.DELETE.getCode()){
            return Result.error(ResultCode.FAIL.getCode(),"用户名或密码错误");
        }

        if (res.getStatus()==StatusCode.NOT_PASS.getCode())
        {
            return Result.error(ResultCode.FAIL.getCode(),"用户在还审核中");
        }

        Map map = new HashMap();
        map.put("username",res.getUsername());
        map.put("password",res.getPassword());
        String token = jwtTokenUtils.createToken(map);

        map = new HashMap();
        map.put("token",token);
        map.put("expire",43200);
        map.put("user",res);

        return Result.success(map);
    }

    //注册接口
    @PostMapping("/register")
    public Result<?> register(@RequestBody UserRegVo user) {
        //注册之前先验证是否有重名

        User res = userMapper.selectOne(Wrappers.<User>lambdaQuery().eq(User::getUsername, user.getUsername()));
        //判断查询是否存在
        if (res != null) {
            return Result.error(ResultCode.FAIL.getCode(), "用户名重复!");
        }

        Map<String, String> params = new HashMap<String, String>();
        params.put("signature", user.getIdentifyCode());
        String identifyCode = Base64.encode(SignUtils.getSign(params, Constants.APP_KEY).getBytes());
        if (!identifyCode.equals(user.getSignature())) {
            return Result.error(ResultCode.FAIL.getCode(), "验证码错误");
        }

        //默认角色
        if (user.getRoleId() == null) {
            user.setRoleId(-1);
        }

        try {
            userMapper.insert(user);

        } catch (Exception e) {
            System.out.println("异常："+ e.getMessage());
            log.error(e.getMessage());
            return Result.error(ResultCode.FAIL.getCode(),"注册失败！");
        }
        return Result.success();
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

Postman 测试API接口

6.前端界面

登录

注册

首页

---

总结

记录点点滴滴