搭建前端環境

①、安裝vscode，并安裝相應的插件工具

②、安裝node.js，可以選擇當前版本，或者其他版本

③、創建工作區

創建一個空文件夾，然后通過vscode工具打開，保存為后綴名為.code-workspace

④、從gitee中clone中后臺模板Vue3 Element Admin產品

下載、解壓，并重命名

將解壓后的項目復制到Vscode工具所在的工作區目錄

根據配置文件package.json下載依賴

右擊項目，打開終端，通過命令：npm install


如果下載速度過慢，可以暫停ctrl + c，通過鏡像重新下載

⑤、修改頁面項目bug

⑥、啟動界面 npm start

utils/requst.js 封裝了ajax

import axios from 'axios'
import router from '@/router'const service = axios.create({baseURL:'/',timeout:10000,withCredentials:true,
})

api/login.js

import request from '@/utils/request'export const Login = data => {return request({url:'/api/login',method:'post',data,})
}

views/login/index.vue

<template></template>

搭建后端環境

安裝mysql

docker pull mysql:8.0.30# 創建容器
docker run -d --name mysql -p 3306 -v mysql_data:/var/lib/mysql -v mysql_conf:/etc/mysql -restart=always --privileged=true -e MYSQL_ROOT_PASSWORD=1234 mysql:8.0.30

安裝redis

docker pull redis:7.0.10# 在宿主機/var/lib/docker/volumes/redis-config/_data/目錄下創建一個redis配置文件
vim redis.conf
# 內容如下：
appendonly yes # 開啟持久化
port 6379
requirepass 1234 # 密碼可以不設置
bind 0.0.0.0 # 遠程調用# 如果/var/lib/docker/volumes沒有redis-config，創建數據卷
#docker volume create redis-config# 創建容器
docker run -d -p 6379:6379 --start=always -v redis-config:/etc/redis/config -v redis-data:/data --name redis redis redis-server /etc/redis/config/redis.conf

統一結果實體類

@Data
public class Result<T>{private Integer code;private String message;private T data;private Result(){}public static <T> Result<T> build(T body,Integer,String message){Result<T> result = new Result<>();result.setData(body);result.setCode(code);result.setMessage(message);return result;}//通過枚舉類構造Result對象方法public static <T> Result build(T body,ResultCodeEnum resultCoeEnum){return build(body,resultCodeEnum.getCode(),resultCodeEnum.getMessage());}
}

//枚舉類中封裝code,message的信息
@Getter
public enum ResultCodeEnum{SUCCESS(200,"操作成功");LOGIN_ERROR(201,"用戶名或者密碼錯誤");private Integer code;private String message;private ResultCodeEnum(Integer code,String message){this.code = code;this.message = message;}
}

整合swagger

①、依賴

②、common模塊中

@Configuration
public class Knife4jConfig{@Beanpublic GroupOpenApi adminApi(){return GroupedOpenApi.builder().group("admin-aip").pathsToMatch("/admin/**").build();}@Beanpublic OpenAPI customOpenAPI(){return new OpenAPI().info(new Info().title("尚品甑選API接口文檔").version("1.0").description("尚品甑選API接口文檔").contact(new Contact().name("atguigu")));}
}

③、使swagger生效，通過啟動類的組件掃描注解，將以上配置類所在的包納入管理

@ComponentScan(basPackages = “com.abel.example”)

前端對接后端接口

①、前端

src/utils/request.js

const service = axios.create({baseURL: 'http://localhost:8501',//后端服務的ip地址和端口號timeout: 10000,withCredentials: true,
})

src/api/login.js

//登錄接口
export const Login = data => {return request({url: 'admin/system/index/login',method: 'post',data,})
}

②、后端

@Tag(name="用戶接口")
@RestController
@RequestMapping(value="/admin/system/index")
public class IndexController{@Autowiredprivate SysUserService sysUserService;@Operation(summary="登錄的方法")@PostMapping("login")public Result login(@RequestBody LoginDto loginDto){LoginVo loginVo = sysUserService.login(loginDto);return Result.build(loginVo,ResultCodeEnum.SUCCESS);}
}

③、跨域問題解決

通過一個域的javaScript腳本和另外一個域的內容進行交互，是不允許的。

CORS解決方案

方案一：后端開啟跨域支持

但需要在每個contrlller類上都添加這樣一個接口

@RestController
@RequestMapping(value="/admin/system/index")
@CrossOrigin(allowCredentials="true",originPatterns="*",allowedHeaders="*")
public class IndexController{}

方案二：添加一個配置類

@Component
public class WebMvcConfiguration implements WebMvcConfigurer{@Overridepublic void addCorsMappings(CorsRegistry registry){registry.addMapping("/**")//添加路徑規則.allowCredentials(true)//是否允許在跨域的情況下傳遞Cookie.allowedOriginPatterns("*")//允許請求來源的域規則.alloweMethods("*")allowedHeaders("*");//允許所有的請求頭}
}