采用Springboot+React框架搭建的用户中心管理系统,作为基础平台,完成了用户的基本管理功能,如注册、登录、认证、修改等多个功能。后续本人会接入本人完成的各种系统,并进一步改进本管理系统。
- 在线地址:http://user.code-club.fun/user/login
- 后端源码【springboot+Mysql+Mybatis-plus】:https://github.com/Pgeorge13Z/User-center-backend
- 前端源码【React+Ant Design PRO】:https://github.com/Pgeorge13Z/user-center-frontend
前端:
- React 开发框架
- Ant Design Pro(现成的管理系统)
后端:
- mybatis-plus(对 mybatis 的增强,不用写 sql 也能实现增删改查)
- springboot(快速启动 / 快速集成项目。不用自己管理 spring 配置,不用自己整合各种框架)
- junit 单元测试库
功能 | 描述 |
---|---|
登录/注册 | 密码加密存储,todo:后续增加分布式session的方法改进 |
用户管理 | 包括增添、删除、修改用户,包含权限检验逻辑,和Oss在线管理头像等图片信息。 |
容器化部署 | 提供了Docker容器化部署的方案,并解决了跨域等问题 |
模块 | 演示 | 演示 |
---|---|---|
登录 & 注册 | ||
首页 | ||
用户管理(管理员) | ||
个人信息管理 |
在做这个项目的过程中,学会的一些小tips。
- GenerateAllSetter : alt+insert 可以自动生成一个对象的所有set方法。
- GenerateSerialVersionUID 在implements Serializable接口时alt+insert 可以自动生成序列化ID。
- Auto Filling Java Call Arguments 在调用对象方法时,alt+insert 可以自动填充方法参数。
- F7: Step into 进入方法
- F8: Step Over 以行为单位,不进入方法
- F9: 跳到下一个断点,没有的话就结束
因此 比如可以在controller的每一行打上断点,然后给调用的重要业务,如Service里的方法打上断点,通过F9 进入Service中。
(需要先打开Application主文件的debug,打开服务器)
mybatis-plus的功能(学会查官方文档,找配置逻辑删除),
-
在domain的user中给需要逻辑删除的变量加上@TableLogic
-
在
application.yml
中配置如下内容:
mybatis-plus:
configuration:
map-underscore-to-camel-case: false
global-config:
db-config:
logic-delete-field: isDelete # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)
logic-delete-value: 1 # 逻辑已删除值(默认为 1)
logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)
第一个配置是取消mybatis-plus的自动加粗功能;
第二个配置是设置逻辑删除,即数据库中设置isDelete为1时,便查询不到此值。
shift+F6 重构(批量更改一个变量)
ctrl shift - 全部折叠
浏览器为了用户的安全,仅允许向 同域名、同端口 的服务器发送请求。
如何解决跨域?
最直接的方式:把域名、端口改成相同的
让服务器告诉浏览器:允许跨域(返回 cross-origin-allow 响应头)
# 跨域配置
location ^~ /api/ {
proxy_pass http://127.0.0.1:8081/api/;
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Credentials' 'true';
add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
add_header Access-Control-Allow-Headers '*';
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Origin' $http_origin;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain; charset=utf-8';
add_header 'Content-Length' 0;
return 204;
}
}
-
配置 @CrossOrigin 注解
-
添加 web 全局请求拦截器
@Configuration public class WebMvcConfg implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { //设置允许跨域的路径 registry.addMapping("/**") //设置允许跨域请求的域名 //当**Credentials为true时,**Origin不能为星号,需为具体的ip地址【如果接口不带cookie,ip无需设成具体ip】 .allowedOrigins("http://localhost:9527", "http://127.0.0.1:9527", "http://127.0.0.1:8082", "http://127.0.0.1:8083") //是否允许证书 不再默认开启 .allowCredentials(true) //设置允许的方法 .allowedMethods("*") //跨域允许时间 .maxAge(3600); } }
-
定义新的 corsFilter Bean,参考:https://www.jianshu.com/p/b02099a435bd
根据 Dockerfile 构建镜像:
# 后端
docker build -t user-center-backend:v0.0.1 .
# 前端
docker build -t user-center-frontend:v0.0.1 .
Docker 构建优化:减少尺寸、减少构建时间(比如多阶段构建,可以丢弃之前阶段不需要的内容)
docker run 启动:
# 前端
docker run -p 80:80 --ulimit nofile=65535:65535 -d user-center-frontend:v0.0.1
# 后端
docker run -p 8081:8081 --ulimit nofile=65535:65535 -d user-center-backend:v0.0.1
虚拟化
- 端口映射:把本机的资源(实际访问地址)和容器内部的资源(应用启动端口)进行关联
- 目录映射:把本机的端口和容器应用的端口进行关联
进入容器:
docker exec -i -t fee2bbb7c9ee /bin/bash
查看进程:
docker ps
查看日志:
docker logs -f [container-id]
杀死容器:
docker kill
删除容器:
docker rm
强制删除镜像:
docker rmi -f