用户中心开发笔记（包含遭遇问题以及解决）

用户中心-开发笔记-20230902

目标：能够轻松做出管理系统。

第二次直播内容：

1、上次直播问题总结

2、数据库表设计

3、完成登录注册的前后端开发

4、完成用户管理后台的前后端开发

5、其他

企业做项目流程

需求分析 => 设计（概要设计 、 详细设计） => 技术选型 =>初始化项目 / 引入需要的技术 => 写个小demo

=> 写代码 （实现业务逻辑） => 测试（单元测试）=> 代码提交 / 代码评审 => 部署 => 发布

需求分析

1、登录 / 注册

2、用户管理 （管理员权限）

3、用户校验机制 （仅星球用户）

技术选型

前端：三件套 + React + Ant design(组件库)＋umi + ant design pro

后端：java +

springmvc（接口，restful接口开发）

mybatis （提供数据访， 数据持久层支持）

mybatis plus （mybatis的封装）

springboot （快速启动spring项目）

mysql

部署：服务器 / 容器

数据库设计：

user表

id （主键） bigint

user_account(用户账号) varchar

avatar_url (头像图片性别) varchar

gendar （性别）tinyint

username （用户名）varchar

password （密码） varchar

email （邮箱）varchar

status (账号状态) int

非业务相关字段：

createTime （创建时间）datetime

updateTime （更新时间）datetime

is_delete (逻辑删除字段 ) tinyint

建表语句：

drop table if exists user;
create table user
(
    id           bigint auto_increment comment '用户id',
    user_account varchar(256)                  null comment '用户账户',
    username     varchar(256)                  null comment '用户名',
    avatar_url   varchar(1024)                 null comment '用户头像地址',
    gender       tinyint  default 0            not null comment '性别',
    password     varchar(256)                  null comment '密码',
    email        varchar(512)                  null comment '邮箱',
    user_status  int      default 0            not null comment '用户状态可拓展 0-有效 1表示无效',
    create_time  timestamp default current_timestamp not null,
    update_time  timestamp default current_timestamp not null comment '更新时间',
    is_delete tinyint default 0                not null comment '是否删除 0-没有删除 1-表示删除',
    primary key (id)
) comment '用户信息表';

计划：

今日计划（第二次直播）

今日计划（3月25号直播）

今日计划（04-04）

今日计划（04-17）

部署 - 直播内容

业务实现：

注册逻辑

登录接口逻辑

查询接口

注销用户

直接在session中删除用户即可。

项目部署

原生命令部署

1、后端部署

java -jar .user-center-backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod

使用指定的yml启动jar包会提示（如果提示是没有指定yml使用默认启动，spring.profiles.active=prod没有生效）：

2023-09-21 04:55:25.271  INFO 36896 --- [           main] c.c.u.UsercenterBackendApplication       : The following 1 profile is active: "prod"
​

2、前端部署

请求地址：

• 开发环境： localhost:8080

• 线上环境： xxx.com

  用了umi框架，build时会自动传入一个NODE_ENV == production的参数，npm run start的NODE_ENV === development

• 启动环境：

  • 本地启动：npm run start（本地启动，监听端口，自动更新）
  • 线上启动： npm run build（项目构建打包），可以使用serve工具启动 （npm install -g serve ）
  • 这里需要修改拦截器以修改拦截器的发送请求的前缀（只是一种方法）

修改配置：

拦截器文件： src/request/gobalRequest.ts

const request = extend({
  credentials: 'include', // 默认请求是否带上cookie
  prefix: process.env.NODE_ENV === 'production' ? 'https://123.com' : undefined
});

前端访问请求：

• 项目的配置

  不同的项目（框架）都有不同的配置文件，umi 的配置文件是 config，可以在配置文件后添加对应的环境名称后缀来区分开发环境和生产环境。参考文档：umijs.org/zh-CN/docs/…

  • 开发环境：config.dev.ts
  • 生产环境：config.prod.ts
  • 公共配置：config.ts 不带后缀

宝塔部署

Linux 运维面板

官方安装教程：www.bt.cn/new/downloa…

方便管理服务器、方便安装软件

容器部署

docker 是容器，可以将项目的环境（比如 java、nginx）和项目的代码一起打包成镜像，所有同学都能下载镜像，更容易分发和移植。

再启动项目时，不需要敲一大堆命令，而是直接下载镜像、启动镜像就可以了。

docker 可以理解为软件安装包。

Docker 安装：www.docker.com/get-started… 或者宝塔安装

Dockerfile 用于指定构建 Docker 镜像的方法

Dockerfile 一般情况下不需要完全从 0 自己写，建议去 github、gitee 等托管平台参考同类项目（比如 springboot）

Dockerfile 编写：

• FROM 依赖的基础镜像
• WORKDIR 工作目录
• COPY 从本机复制文件
• RUN 执行命令
• CMD / ENTRYPOINT（附加额外参数）指定运行容器时默认执行的命令

根据 Dockerfile 构建镜像：

# 后端
docker build -t user-center-backend:v0.0.1 .
​
# 前端
docker build -t user-center-front:v0.0.1 .

Docker 构建优化：减少尺寸、减少构建时间（比如多阶段构建，可以丢弃之前阶段不需要的内容）

docker run 启动

# 前端
docker run -p 80:80 -d user-center-frontend:v0.0.1
​
# 后端
docker run -p 8080:8080 user-center-backend:v0.0.1

虚拟化

进入容器

docker exec -i -t  fee2bbb7c9ee /bin/bash

查看进程

docker ps 

查看日志

docker logs -f [container-id]

杀死容器

docker kill

强制删除镜像

docker rmi -f

绑定域名

前端项目访问：用户输入网址 => 域名解析服务器（把网址解析为 ip 地址 / 交给其他的域名解析服务） =>

服务器 =>（防火墙）=> nginx 接收请求，找到对应的文件，返回文件给前端 => 前端加载文件到浏览器中（js、css） => 渲染页面

后端项目访问：用户输入网址 => 域名解析服务器 => 服务器 => nginx 接收请求 => 后端项目（比如 8080端口）

nginx 反向代理：替服务器接收请求，转发请求

笔记

三种初始化java项目的方式

1、github 下载现成的代码

2、springboot官方的模板生成器

自动生成器的使用

MyBatisX 插件，自动根据数据库生成 domain 实体对象、mapper（操作数据库的对象）、mapper.xml（定义了 mapper对象和数据库的关联，可以在里面自己写 SQL）、service（包含常用的增删改查）、serviceImpl（具体实现 service）

如何知道是某个用户登录了？

javaWeb知识

1、连接服务器后，得到一个匿名session

2、登录成功后，得到登录成功的session，并给该session设置一些值（比如用户信息），返回给前端一个设置cookies的命令。 session => cookies

3、前端收到后端的命令后，设置cookie，保存到浏览器内。

4、前端再次请求后端的时候，在请求头中带上cookies去做请求

5、后端拿到前端传来的cookie，找到对应的session

6、后端从session中可以取出session中存储变量

使用mybatis plus的逻辑删除

步骤 1: 配置com.baomidou.mybatisplus.core.config.GlobalConfig$DbConfig

• 例: application.yml

mybatis-plus:
  global-config:
    db-config:
      logic-delete-field: flag # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)
      logic-delete-value: 1 # 逻辑已删除值(默认为 1)
      logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)

步骤 2: 实体类字段上加上@TableLogic注解

@TableLogic
private Integer deleted;

我得版本超过了3.3.0因此我不配置然后做一下测试。确实可用，但是也遇到了一个小的问题，则就是

代理

正向代理：替客户端向服务器发送请求。

反向代理：替服务器统一接受请求。

控制层 Controller 封装请求

application.yml 指定接口全局 api

servlet:
  context-path: /api

@RestController 适用于编写 restful 风格的 api，返回值默认为 json 类型

controller 层倾向于对请求参数本身的校验，不涉及业务逻辑本身（越少越好）

service 层是对业务逻辑的校验（有可能被 controller 之外的类调用）

Ant Design Pro（Umi 框架）

app.tsx 项目全局入口文件，定义了整个项目中使用的公共数据（比如用户信息）

access.ts 控制用户的访问权限

首次访问页面（刷新页面），进入 app.tsx，执行 getInitialState 方法，该方法的返回值就是全局可用的状态值。

ProComponents 高级表单

待优化点 todo

• 前端密码重复提示（可能有别的优化方式）
• 注册没有友好的提示
• 用户注销
• 优化查询接口（支持更多查询）

MFSU：前端编译优化

Ant Design 组件库 => React

Ant Design Procomponents => Ant Design

Ant Design Pro 后台管理系统 => Ant Design、React、Ant Design Procomponents、其他的库

UMI定义全局拦截器：

自定义的 request文件

    /**
 * request 网络请求工具
 * 更详细的 api 文档: https://github.com/umijs/umi-request
 */
import {extend} from 'umi-request';
import {message} from "antd";
​
​
const request = extend({
  credentials: 'include', // 默认请求是否带上cookie
});
​
​
/**
 * 所有响应拦截器
 */
​
/**
 * 所有响应拦截器
 */
request.interceptors.response.use(async (response: any, options: any): Promise => {
  const res = await response.clone().json();
  if (res.code === '0') {
    return res.data;
  }
​
  // 如果报错则需要提示用户错误信息
  message.error(res.description)
  return res.data;
});
​
export default request;
​

在发送请求出引入自定义的request文件，使用这个代替UMI自带的request

// @ts-ignore
/* eslint-disable */
import request from "@/request/gobalRequest";

多环境

本地开发：localhost（127.0.0.1）

多环境：指同一套项目代码在不同的阶段需要根据实际情况来调整配置并且部署到不同的机器上。

为什么需要？

针对不同环境做不同的事情。

在后端中文件写入一个文件，记录sql

create table user
(
    id           bigint auto_increment comment '用户id'
        primary key,
    user_account varchar(256)                        null comment '用户账户',
    username     varchar(256)                        null comment '用户名',
    avatar_url   varchar(1024)                       null comment '用户头像地址',
    gender       tinyint   default 0                 not null comment '性别',
    password     varchar(256)                        null comment '密码',
    email        varchar(512)                        null comment '邮箱',
    user_role    int       default 0                 not null comment '用户角色 0-用户 1-管理员',
    user_status  int       default 0                 not null comment '用户状态可拓展 0-有效 1表示无效',
    create_time  timestamp default CURRENT_TIMESTAMP not null,
    update_time  timestamp default CURRENT_TIMESTAMP not null comment '更新时间',
    is_delete    tinyint   default 0                 not null comment '是否删除 0-没有删除 1-表示删除'
)
    comment '用户信息表';
​
​

问题记录

1、node17+版本以上 ，安装umi3后，启动项目报错。

原因：因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，反正咱是没看懂，大概就是因为加了某些限制

解决方案：

window系统在idea终端上设置

set NODE_OPTIONS=--openssl-legacy-provider

还有一种配置环境变量的方法：

将这个--openssl-legacy-provider值配置到环境变量中即可一劳永逸的解决。

或者将其配置到命令中（记得写&&）：这个实际解决了问题的√

"dev": "set NODE_OPTIONS=--openssl-legacy-provider && npm run start:dev ",

2、yarn安装报错

实际是因为没有初始化git导致 husky无法安装

解决方案： 初始化git

git init

3、疑问： 官网在日期为9/2版本中，

没有在提供umi-ui的依赖的开启命令，可能是有什么缺陷？但是命令安装又可以。

4、@Resource 和 @Autowire的区别

使用@Autowired 注解，会按类型装配，如果有多个同类型的 bean，会抛出异常。 使用@Resource 注解，会按名称装配，如果名称不存在，会使用类型装配。

如果你的项目中没有多个同类型的bean,那么@Autowired和@Resource是可以互换使用的,如果有多个同类型的bean,那么就要使用@Resource进行指定名称注入。 如果有多个同类型的bean,但是你没有使用@Resource进行名称指定,就会抛出异常，所以在使用@Autowired注解时,要确保只有一个同类型的bean。

同类型bean：如果一个基类被多个继承继承（或者一接口被多个类实现），同时他们被这些类统称为基类的同类bean。

还有一种就是一个类有多个bean在spring容器中，这种bean也叫同类bean。

回到上面的问题： 如果是application容器中有多个同类bean，且你指定基类的实例由byType注入时，这个时候则会发生报错。

5、使用mybatis x生成没有mapper文件时，

注意是是不是第二步中没有勾选使用的mybatis plus版本

6、使用rest api接口调用服务时，

首先报错415，加上编码格式后，提示数据格式

暂时尚未定位原因，但是加上@ResponeBody注解问题解决。

7.遭遇问题 前端能正常启动但是访问不了前端界面，

解决问题： 换浏览器启动即可，目前是谷歌浏览器无法启动。

8、因为所有文件爆红，所以需要设置git的忽略文件夹

umi项目的git忽略文件设置（远程直接创建）：

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
​
# dependencies
**/node_modules
# roadhog-api-doc ignore
/src/utils/request-temp.js
_roadhog-api-doc
​
# production
/dist
​
# misc
.DS_Store
npm-debug.log*
yarn-error.log
​
/coverage
.idea
yarn.lock
package-lock.json
pnpm-lock.yaml
*bak
​
​
# visual studio code
.history
*.log
functions/*
.temp/**
​
# umi
.umi
.umi-production
​
# screenshot
screenshot
.firebase
.eslintcache
​
build
​

9.提交代码时报错：

husky - commit-msg hook exited with code 1 (error)

原因是开启了husky的校验

解决方案： 1、提交commit的message格式为：

git commit -m "fix: 初始化项目"

10、页面重定向：

代码中做了判断，需要设置逻辑改写代码中的判断逻辑

11、在nginx目录中 执行./config文件报错：

./configure: error: the HTTP rewrite module requires the PCRE library.
You can either disable the module by using --without-http_rewrite_module
option, or install the PCRE library into the system, or build the PCRE library
statically from the source with nginx by using --with-pcre= option.
​

解决办法：

1、首先检查是否已经安装pcre包，

rpm -qa pcre

这里我虽然检查了发现已经安装包了，跑./configuer脚本还是报错，所以最后还是重新执行了一下安装

2、重新安装pcre包

yum install pcre pcre-devel

3、再次跑./configuer脚本检查，这次应该是安装成功了。