搭建前端环境
①、安装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
js
import axios from 'axios'
import router from '@/router'
const service = axios.create({
baseURL:'/',
timeout:10000,
withCredentials:true,
})
api/login.js
js
import request from '@/utils/request'
export const Login = data => {
return request({
url:'/api/login',
method:'post',
data,
})
}
views/login/index.vue
html
<template>
</template>
搭建后端环境

安装mysql
shell
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
shell
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

统一结果实体类
java
@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());
}
}
java
//枚举类中封装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模块中
java
@Configuration
public class Knife4jConfig{
@Bean
public GroupOpenApi adminApi(){
return GroupedOpenApi.builder()
.group("admin-aip")
.pathsToMatch("/admin/**")
.build();
}
@Bean
public 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
js
const service = axios.create({
baseURL: 'http://localhost:8501',//后端服务的ip地址和端口号
timeout: 10000,
withCredentials: true,
})
src/api/login.js
js
//登录接口
export const Login = data => {
return request({
url: 'admin/system/index/login',
method: 'post',
data,
})
}
②、后端
java
@Tag(name="用户接口")
@RestController
@RequestMapping(value="/admin/system/index")
public class IndexController{
@Autowired
private 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类上都添加这样一个接口
java
@RestController
@RequestMapping(value="/admin/system/index")
@CrossOrigin(allowCredentials="true",originPatterns="*",allowedHeaders="*")
public class IndexController{
}
方案二:添加一个配置类
java
@Component
public class WebMvcConfiguration implements WebMvcConfigurer{
@Override
public void addCorsMappings(CorsRegistry registry){
registry.addMapping("/**")//添加路径规则
.allowCredentials(true)//是否允许在跨域的情况下传递Cookie
.allowedOriginPatterns("*")//允许请求来源的域规则
.alloweMethods("*")
allowedHeaders("*");//允许所有的请求头
}
}