Vue基本整合（一）

NPM安装

npm是node的包管理工具

https://nodejs.org/en/

脚手架安装

npm i -g @vue/cli

https://registry.npmjs.org/

vue浏览器插件

https://devtools.vuejs.org/guide/installation.html#chrome

https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

VUEX

全局变量管理

vuex4对应vue3，vuex3对应vue2

https://vuex.vuejs.org/

axios

ajax请求发起

npm install axios

import axios from 'axios'

axios.defaults.baseURL='http://localhost:8088'

https://axios-http.com/docs/intro

可以设置请求头

vue-router

路由管理

router4对应vue3，router3对应vue2

npm install vue-router

https://router.vuejs.org/guide/

mockjs

模拟后端数据

npm install mockjs

Mock.mock(RegExp('/user/say.*'),{'a':'a'}) //为了匹配带参数的请求要使用正则

Mock.mock('/user2/say',{'a':'b'})

http://mockjs.com/examples.html

vue-element-admin

一个vue的前段实现，可借鉴

https://github.com/PanJiaChen/vue-element-admin

https://panjiachen.github.io/vue-element-admin-site/

js-cookie

cookie设置

import Cookies from 'js-cookie'

跨域问题（一般跨域无法使用cookie）

https://www.cnblogs.com/xmyd/p/11555214.html

springboot3不能使用jdk8

热部署

springboot web项目热部署，引入插件包，然后设置程序自动编译（idea有高级设置和compiler两个地方要设置）

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-devtools</artifactId>

<optional>true</optional>

</dependency>

JWT鉴权包

<dependency>

<groupId>io.jsonwebtoken</groupId>

<artifactId>jjwt</artifactId>

<version>0.9.1</version>

</dependency>

简单实现

package com.example.demo.uitls;import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;import java.util.Date;public class Auth {private static long expire = 604800;private static String secret = "fdsalfjadskfjldsa";public static String generateToken(String username){Date now = new Date();Date expiration = new Date(now.getTime()+1000*expire);return Jwts.builder().setHeaderParam("type","JWT").setSubject(username).setIssuedAt(now).setExpiration(expiration).signWith(SignatureAlgorithm.HS512,secret).compact();}public static Claims getClaimsByToken(String token){return Jwts.parser().setSigningKey(secret).parseClaimsJws(token).getBody();}
}

参考：

1天搞定SpringBoot+Vue全栈开发(https://www.bilibili.com/video/BV1nV4y1s7ZN)