搭建前端环境和后端环境

搭建前端环境

①、安装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("*");//允许所有的请求头
	}
}
相关推荐
夏天想1 分钟前
vue2+elementui使用compressorjs压缩上传的图片
前端·javascript·elementui
考虑考虑7 分钟前
使用jpa中的group by返回一个数组对象
spring boot·后端·spring
今晚打老虎z9 分钟前
dotnet-env: .NET 开发者的环境变量加载工具
前端·chrome·.net
用户38022585982415 分钟前
vue3源码解析:diff算法之patchChildren函数分析
前端·vue.js
GiraKoo15 分钟前
【GiraKoo】C++11的新特性
c++·后端
MO2T20 分钟前
使用 Flask 构建基于 Dify 的企业资金投向与客户分类评估系统
后端·python·语言模型·flask
烛阴20 分钟前
XPath 进阶:掌握高级选择器与路径表达式
前端·javascript
小鱼小鱼干24 分钟前
【JS/Vue3】关于Vue引用透传
前端
JavaDog程序狗26 分钟前
【前端】HTML+JS 实现超燃小球分裂全过程
前端
光溯星河28 分钟前
【实践手记】Git重写已提交代码历史信息
后端·github