搭建前端环境和后端环境

搭建前端环境

①、安装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")));}
}