1、环境依赖
C:\Users\cyberzhaohyvm>node -v
v14.17.3
C:\Users\cyberzhaohyvm>vue -V
@vue/cli 5.0.4
2、在项目所在目录，安装axios
进入项目所在目录：
D:\01sourcecode\10Tutorial\08Vue\17-2022-12-28-v2\elementui-demo
npm install axios
3、vue.config.js添加配置
module.exports = {
devServer: {
proxy: {
‘/api’: {
target: ‘http://localhost:3000’,
changeOrigin: true,
pathRewrite: {
‘^/api’: ”
}
}
}
}
}
4、App.vue调用
import axios from ‘axios’
<input type=“button” value=“跨域请求“ @click=”getToken“>
getToken(){
axios.post(‘api/user/login’,{
username: ‘zhangsan’
}).then(function(response){
console.log(response)
}).catch(function(error){
console.log(error)
});
}
5、springboot开发的一个服务端
@RestController@RequestMapping("/user")public class UserController { @PostMapping("/login") public Result login(@RequestBody User user){ String token = JwtUtils.generateToken(user.getUsername()); return Result.ok().data("token",token); }}
package com.xdy.springboot4vue.utils;import io.jsonwebtoken.Claims;import io.jsonwebtoken.Jwts;import io.jsonwebtoken.SignatureAlgorithm;import java.security.Signature;import java.util.Date;public class JwtUtils { private static Integer expire = 604800; private static String secret = "abcdefghiabcdefghiabcdefghiabcdefghi"; 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.HS256,secret).compact(); } public static Claims getClaimsByToken(String token){ return Jwts.parser().setSigningKey(secret).parseClaimsJws(token).getBody(); }}package com.xdy.springboot4vue.utils;import java.util.HashMap;import java.util.Map;public class Result { private Boolean success; private Integer code; private String message; private Map data = new HashMap(); public Boolean getSuccess() { return success; } public void setSuccess(Boolean success) { this.success = success; } public Integer getCode() { return code; } public void setCode(Integer code) { this.code = code; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public Map getData() { return data; } public void setData(Map data) { this.data = data; } private Result(){ } public static Result ok(){ Result r = new Result(); r.setSuccess(true); r.setCode(ResultCode.SUCCESS); r.setMessage("成功"); return r; } public static Result error(){ Result r = new Result(); r.setSuccess(false); r.setCode(ResultCode.ERROR); r.setMessage("失败"); return r; } public Result success(Boolean success){ this.setSuccess(success); return this; } public Result message(String message){ this.setMessage(message); return this; } public Result data(String key, Object value){ this.data.put(key,value); return this; } public Result data(Map map){ this.setData(map); return this; }}pom.xml配置文件
4.0.0 org.springframework.boot spring-boot-starter-parent 2.7.5 com.xdy.springboot4vue springboot4vue 0.0.1-SNAPSHOT springboot4vue Demo project for Spring Boot 1.8 org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-test test net.minidev json-smart 2.3.1 compile com.alibaba fastjson 1.2.40 com.baomidou mybatis-plus-boot-starter 3.4.2 mysql mysql-connector-java 5.1.47 com.alibaba druid-spring-boot-starter 1.1.20 io.jsonwebtoken jjwt 0.9.0 org.springframework.boot spring-boot-maven-plugin
6、效果图：
http://localhost:8080/
