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<String,Object> data = new HashMap<String,Object>();
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<String, Object> getData() {
return data;
}
public void setData(Map<String, Object> 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<String,Object> map){
this.setData(map);
return this;
}
}
pom.xml配置文件
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.7.5</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.xdy.springboot4vue</groupId>
<artifactId>springboot4vue</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboot4vue</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>net.minidev</groupId>
<artifactId>json-smart</artifactId>
<version>2.3.1</version>
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.40</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.47</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.1.20</version>
</dependency>
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.9.0</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
6、效果图：
http://localhost:8080/
