用户中心.

概要

项目流程

需求分析->设计>技术选型
初始化(引入所需要的技术)->写demo->写代码->测试->代码提交->部署->发布

代码流程

设计->代码实现->持续优化(复用代码,提取逻辑,常量)

需求 分析

1.登录注册
2.用户管理(对用户的查询或修改)
3.用户校验

技术选型

1. 前端
   三件套+react+组件库Ant design +Umi+Ant design Pro(现成的管理系统)
   Ant design 组件库=>React
   Ant design procomponents 组件库=>Ant design
   Ant design Pro 后台管理系统 =>Ant design,React,Ant design procomponents,其他库

2. 后端

   • java
   • spring(依赖注入框架,帮助管理java对象,集成其他内容)
   • springMvc(web框架,提供接口访问,restful接口等能力)
   • mybatis(Java操作数据库的框架,持久层框架.对jdbc(java底层连接数据库的机制)的封装)
   • mybatis-plus(对mybatis的增强,不用写sql语句也能实现增删改查)
   • springboot(快速启动项目/快速集成项目,不用自己管理spring配置,不用自己整合各种框架,类似开机键)
   • mysql: 数据库
   • junit单元测试库

前端初始化

项目创建

官网

不知道为什么这里报错,添加上npx就成功了
‘pro’ 不是内部或外部命令，也不是可运行的程序
或批处理文件。

npx pro create myapp

注意npm的淘宝镜像源改变了(2024/1/30)
npm install总是卡住不动或者到最后不动，解决问题方法，npm淘宝镜像源最新_npm 安装依赖老是卡在最后一步-CSDN博客
设置镜像源

npm config set registry https://registry.npmmirror.com

查看镜像源

npm config get registry

nvm,nodejs,npm,yarn的卸载与安装

参考这个文章
鱼皮的用户中心项目 （前端Ant Design Pro构建） (yuque.com)

yarn不知道为什么还是没有安装成功,算了,就用npm
要使用Node.js启动前端项目，你需要先确保已经安装了Node.js和npm（Node.js包管理器）。然后按照以下步骤操作：

1. 打开命令行工具（如Windows的cmd或PowerShell，macOS和Linux的终端）。
2. 使用cd命令切换到前端项目的根目录。例如，如果你的项目位于D:\my_project，则输入cd D:\my_project。
3. 确保你的项目中有一个名为package.json的文件，该文件包含了项目的所有依赖信息。如果没有，请运行npm init命令创建一个。
4. 安装项目所需的所有依赖项。在命令行中输入npm install，然后按回车键。这将根据package.json文件中的信息自动下载并安装所有依赖项。
5. 安装完成后，你可以使用node命令启动前端项目。在命令行中输入node <entry-point>，其中<entry-point>是你的前端项目的入口文件。例如，如果你的入口文件是index.js，则输入node index.js。

注意：如果你的项目使用了构建工具（如Webpack、Gulp等），你可能还需要运行相应的构建命令来生成最终的静态资源文件。具体命令取决于你使用的构建工具。

搞那个可视化(小图标)也搞了很久 ---- 结果根本没用到之后

项目启动

1. npm install 下载相关依赖
2. npm run dev/start(参照packge.json文件)

项目瘦身

• 删除国际化文件
  
  
• e2e 自动化测试
• swagger 接口文档

后端初始化

创建项目

如果idea,创建项目不能选择java8,参考鱼皮往期文章,切换阿里云镜像源

lombok
java的注解工具,自动生成getter,setter方法
spring Boot DevTools
热更新,改了代码之后自动重启项目
Spring Configuration Processor
支持相关注解
Mysql Driver
mysql的驱动
Spring Web
给项目增加WEB访问能力
Mybatis Framework
数据访问层的框架

maven
类似前端的软件包管理工具

连接mysql

引入 mybtis-plus

官方文档

application.yml的配置

1. 将后缀改为.yml
   

2. 连接数据库的相关配置
   

3. 新建mapper文件夹,并映射
   
   

以上步骤按照mybatis-plus官方文档来

数据库

设计数据库表

有那些表,表中有哪些字段,字段有什么类型,数据库添加索引(快速找到添加)
表与表之间的关联

用户表

id(主键) :bigInt
avatarUrl:头像 varchar
username: varchar
gender: tinyInt
loginaccount:登录账号
password: varchar
phone: varchar
email: varchar
status:用户状态(0 1)
//必需字段
createTime:数据插入时间 datetime
updateTime:数据更新时间 dateTime
isDelete : 是否删除(0,1) tinyInt

登录注册

后端

准备

规整目录

实现基本数据库操作

安装mybatisX插件
根据数据库自动生成
domain实体对象,
mapper(操作数据库的对象),
mapper.xml(定义了mapper对象与数据库的关联,可以在里面自己写sql),
service(包含常见的增删改查)
seviceImpl(具体实现service)


然后把创建出来的代码cv过去

安装插件gernerateall

卡在了测试类服了

Caused by: org.springframework.beans.factory.NoSuchBeanDefinitionException: No qualifying bean of type ‘com.jiangyi.usercenter.mapper.UserMapper’ available: expected at least 1 bean which qualifies as autowire candidate. Dependency annotations: {@org.springframework.beans.factory.annotation.Autowired(required=true)}

-----解决:把有关demo的删掉
然后又报错:
aused by: java.sql.SQLSyntaxErrorException: Unknown column ‘user_account’ in ‘field list’
at com.mysql.cj.jdbc.exceptions.SQLError.createSQLException(SQLError.java:120)
at com.mysql.cj.jdbc.exceptions.SQLExceptionsMapping.translateException(SQLExceptionsMapping.java:122)
at com.mysql.cj.jdbc.ClientPreparedStatement.executeInternal(ClientPreparedStatement.java:916)
at com.mysql.cj.jdbc.ClientPreparedStatement.execute(ClientPreparedStatement.java:354)
at com.zaxxer.hikari.pool.ProxyPreparedStatement.execute(ProxyPreparedStatement.java:44)
at com.zaxxer.hikari.pool.HikariProxyPreparedStatement.execute(HikariProxyPreparedStatement.java)
at org.apache.ibatis.executor.statement.PreparedStatementHandler.update(PreparedStatementHandler.java:47)
at org.apache.ibatis.executor.statement.RoutingStatementHandler.update(RoutingStatementHandler.java:74)
at org.apache.ibatis.executor.SimpleExecutor.doUpdate(SimpleExecutor.java:50)
at org.apache.ibatis.executor.BaseExecutor.update(BaseExecutor.java:117)
at org.apache.ibatis.executor.CachingExecutor.update(CachingExecutor.java:76)
at org.apache.ibatis.session.defaults.DefaultSqlSession.update(DefaultSqlSession.java:194)
at org.apache.ibatis.session.defaults.DefaultSqlSession.insert(DefaultSqlSession.java:181)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at org.mybatis.spring.SqlSessionTemplate$SqlSessionInterceptor.invoke(SqlSessionTemplate.java:427)
… 83 more

mybatisplus:默认将驼峰转成下划线,要关闭
—解决:

注册

逻辑

1. 用户在前端输入账号+密码,以及校验密码
2. 后端校验用户账户,密码是否符合要求
   1.非空
   1.账户不小于4位
   2.密码不小于8位
   3.账户不能重复
   4.账户不包含特殊字符(正则表达式baidu把),密码与校验密码相同等等
3. 对密码进行加密(密码不能明文存储到数据库)
4. 向数据库插入数据

tips:
注释生成:
/+'** "+回车

tips:
使用maven仓库里面的封装好的代码

盐值加密

/**  
* 加密的盐值:混淆密码  (放在类中方法外,公共)
*/  
private static final String SALT="1a2s3d4f";


//2.加密  
// final String SALT="1a2s3d4f";  
String encryptPassword= DigestUtils.md5DigestAsHex((SALT+password).getBytes());

代码

public int userRegister(String account, String password, String checkPassword) {  
//1.校验  
//非空校验  
if(StringUtils.isAllBlank(account,password,checkPassword))  
{  
return -1;  
}  
//账户长度  
if(account.length()<4)  
{  
return -1;  
}  
//密码长度  
if(password.length()<8)  
{  
return -1;  
}  
  
//账户不能包含特殊字符  
if(account.contains("'")||account.contains("-")||account.contains("--")||account.contains("*")||account  
.contains(";")||account.contains("<")||account.contains(">")||account.contains("&")||account.contains  
("$")||account.contains("%")||account.contains("@")||account.contains("!")) {  
return -1;  
}  
  
//密码与校验密码是否相等  
if(!password.equals(checkPassword)){  
return -1;  
}  
  
//账户重复(需要操作数据库)----放在最后,提高性能  
QueryWrapper<User> queryWrapper=new QueryWrapper<>();  
queryWrapper.eq("UserAccount",account);  
int count= Math.toIntExact(userMapper.selectCount(queryWrapper));  
if(count>0){  
return -1;  
}  
//2.加密  
final String SALT="1a2s3d4f";  
String encryptPassword= DigestUtils.md5DigestAsHex((SALT+password).getBytes());  
  
//3.数据库插入数据  
User user=new User();  
user.setUserAccount(account);  
user.setPassword(encryptPassword);//加密后的密码  
userMapper.insert(user);  
  
return user.getId();  
}

登录

登录接口

1. 接收参数:前端传过来用户账户,密码
2. 请求类型:POST
   get适用于查询,且请求参数长度有限,当请求参数很长时不使用
3. 返回值:用户信息(脱敏)
4. 请求体:JSON(传递数据的格式)

逻辑

1. 用户在前端输入账号+密码
2. 后端校验用户账户,密码是否符合要求
   1.非空
   2.账户不小于4位
   3.密码不小于8位
   4.账户不包含特殊字符(正则表达式baidu把)
3. 根据账户查询用户密码,判断是否输入正确(将密码加密后进行对比)
4. 用户信息(脱敏),具体可以新生成一个对象,只设置可以返回的值
5. 记录用户的登录态(session),将其存在服务器上(用springboot封装的服务器tomcat去记录)
6. 返回脱敏后的用户信息

如何记录用户登录态—session—cookie

1. 连接到服务器后,得到session1状态,返回给前端

2. 登录成功后,便得到了登陆成功的session,并给该session设置值(比如用户信息),返回给前端的数据中有设置cookie的命令

3. 前端接受到后端的命令之后,设置cookie,保存到浏览器内

4. 前端再次请求后端的时候(相同的域名),请求头中会携带cookie去请求

5. 后端拿到前端传来的cookie,找到对应的session

6. 后端可以从session中取出基于该session存储的变量(用户登录信息等等)

   session—cookie 一对
   request.getSession().setAttribute(USER_LOGIN_STATE,safetyUser);
   在.yml中
   设置session失效时间
   session:
   timeout: 86400

逻辑删除

mybatis-plus 框架帮助我们做到的
自动判断这条数据没有意义
并不是真的从数据库中删除,只是将数据库中的逻辑删除字段从0变成1

• 这个要和数据库的字段对应,不然查不到
  

tips:
controller层封装请求
controller层倾向于对请求参数本身的校验,不涉及业务逻辑本身(越少越好)
service层是对业务逻辑的校验(有可能被controller之外的类调用)

啊啊啊啊数据库中有这个用户但是还是查询失败返回null为什么

结果找到问题了:
因为isdelete字段设置了默认删除,而数据库中有些数据这个字段不存在,导致查询失败,得把isdelete字段修改为有默认值

成功!

前端

run start:dev

登录

• 莫名奇妙报错
  // @ts-ignore 是一个 TypeScript 注释，用于告诉 TypeScript 编译器忽略该行代码的类型检查。这通常用于临时禁用类型检查，以便在开发过程中快速编写和测试代码。
  

• 修改导航栏下
  
  blankTarget : true(打开新页面跳转)

• 创建constant文件夹,预判项目中不止有一个常量

• @----表示src根目录

• shift+f6 —选中要重构的名字,点击重构

• 如何得知模板中前端代码发起请求的域名

• 一直在想为什么配置了prefix前缀,然后请求头前面还是没有prefix,后来发现是没有按登录
  
  

• 跨域
  前端的端口是8000，而后端的端口是8080，端口不一样就会产生跨域问题。
  

• 解决跨域问题后,打断点发现后端接收userAccount=null
  之前在这里改过,只是一个约束,理解为代码提示
  刚才我们改的loginParams是ts文件里的，只是定义了一种规范，都是些假数据，而真数据在我们表单中。
  那么我们就需要把表单提交的参数和后台对应上，然后参数需要在login下的index.tsx文件中改。
  
  全局搜索username将其替换userAccount
  ctr+f:打开搜索框
  ctr+shift+R:全局替换
  ctr+R:替换
  
  

获取登录用户状态接口

• 后端:获取当前用户的登录态
• 如果接口返回的是currentUser,只返回了当初登录时的用户信息,不能保证这个过程中用户信息没有改变
• 需要访问数据库来获得真实可靠的用户信息
  
• 前端:
  
  
  
  • bug:
    点击登录后无法跳转页面,然后重启了一下就解决了
    发现只是登录点击无法跳转,但是已经可以访问其他页面了
    点击的时候会触发onsubmit方法仔细查找,发现问题
    
  • 头像不出来
    
    后端有数据,应该是前端给他设置的字段不一致,导致
    可是改了前端的字段,为什么还是不显示,mmp
    
    
    tnnd,还是得百度找,注释掉就可以了
    
    仔细想了一下,注释掉是不对的(然后发现全局替换没有生效)
    
• 点击小米饭图标没有展示

注册

• 复制login,copy改为register
  

• 再对register文件修修剪剪
  

• 添加register路由(ctr+alt+l 格式化)
  

• bug:
  会自动重定向到login
  通过全局搜索,发现了onpageChange的生命周期函数
  
  
  注意要想有效果话,前面的获取用户部分要注释掉
  
  

• 对register修剪
  
  
  

  • 把登录按钮换成注册
    
    
    于是在ant design官方文档搜索,搜不到->去Ant design procomponents
    还是搜不到->看源码
    
    

• 修改onfinish方法
  

  
  

  • 修改handlesubmit 表单提交方法
    
    
    ctr+alt+o:快速去除没用的包

• 前后端联调
  TODO:注册没有友好提示

• 跳转后路径参数有问题
  
  

• 跳转到登录界面后,发登录界面没有注册的链接
  

前后端交互

前端向后端发送请求
前端ajax来请求后端
axios封装了ajax
request 是 ant design 项目又封装了一次
追踪request源码 : 用到了umi的插件

跨域解决方法

代理

正向代理:
代客户端,向服务端发送请求
反向代理
代服务端接收客户端请求

操作

但是后端支持跨域不安全，正好Ant Design Pro给我们也提供了一个代理，我们就是用它这个试一试。

• 改前端
  注意代理地址前面加了/api:
  意思:如果访问路径带上了/api,则触发代理
  
  
  路径加上/api用来触发代理
  

• 改后端
  

• 现在端口一致
  

• bug,后端没有响应数据
  路径都是对的,为什么响应数据没有呢呢
  
  

啊啊啊啊啊啊要疯了,改了两天了还是找不到问题所在

• 莫名其妙突然又出现断点,又成功了
  
  但是还是没有响应数据
  唯一修改-----把type改了,之前直接cv过来没有修改

  • 成功解决了!!!
    

代理

让后端支持跨域(不安全)

用户管理

后端

!!! 必须鉴权
由于Web服务器是无状态的，它不知道用户上一次请求做了什么。因此，每次接收到用户的请求时，都需要进行鉴权，以确保用户具有进行请求操作的权限。总的来说，鉴权有助于提高系统的安全性，防止未经授权的用户访问或修改数据。

– 数据库添加role字段

查询用户

1. 根据用户名模糊查询

• session 取出的user一直为null啊啊啊啊啊啊啊
  

• 因为填写请求体的时候带了参数,实际不用,根据已有的session
  

• 返回值比较多,没有过滤
  

• 实现过滤
  

删除用户

1. 根据id删除

常量类编写

前端

• 新建admin页面
• 添加路由
• 观察路由设置,模仿
  
  

写用户管理页面

• 给页面唯一标识id(最好,手动隔离)
• ProComponents组件库中,选择适合的组件
• 引入他人组件,删多余
• 展示的是字符串的avatar,修改渲染逻辑render(文档中查询)
• _ 占位符
• API中的变量可以理解为全局变量
• api接口封装
  
  • bug
    图片未显示
    

valueType
dataIndex:要和typing.d.ts文件中的字段一一对应

用户注销

后端

移除登陆时设置的session中的user_login_state
参数: request,

前端

寻找触发注销功能的位置—公共的头部—去compomnnents–找到avatarDropDown
观察代码

用户校验

仅适用于用户可信的情况

后端

逻辑

让用户自己填写
1. 2-5位编号
补充对编号的校验
长度校验,唯一性校验

• 添加planeCode字段
• 注意添加字段后要重新生成对象
  
  一定注意要改userMapper.xml文件
  需要改user
  
  用户脱敏的方法修改
  
  
  

前端

补充输入框,适配后端

• 修改前端页面
  

• 修改前端请求:
  点击注册会触发onsubmit方法,进行修修改改
  
  
  进入register,发现不用改
  

• 注意后端改了数据库,前端的currentUser字段修改
  

• 用户管理页中添加planetCode字段

• 突然发现问题
  按照编号注册不成功,啊啊啊啊(1:03)

• 我真的太不上心了,有因为这个bug玩了一天,啊啊啊啊啊,结果现在发现是因为我输入注册的账号密码不符合我自己设置的校验规则,所以一直校验失败

代码优化

先完成 ,再完美

后端

封装通用的返回对象

1. 给对象补充一些信息,告诉前端这个请求在业务层面上是成功还是失败
2. HTTP自带了状态码(200,500----),为什么不用-------只提供了笼统的状态码,不精准
   {
   “name”:“yupi”
   },
   ⬇
   //成功
   {
   “code”: 0 //业务状态码
   “data”:
   {
   “name”:“yupi”
   },
   “message”: “ok”
   }
   //失败
   {
   “code”: 0 //业务状态码
   “data”: null
   “message”: “用户操作异常,XXXX”
   }
3. 自定义错误码
4. 返回类支持正常与错误

• 为什么使用泛型
  不知道data是什么类型(可能user,可能int),要做一个通用的返回类
  
• 创建工具类,封装
  
  

3. 自定义错误码
   
4. 返回类中支持成功与失败
   
   

封装全局异常处理

多个地方都要用到,麻烦

1. 定义全局异常处理类
   • 相对Java的异常类,支持更多的字段
   • 自定义构造函数,更灵活/快捷的设置字段
2. 编写全局异常处理器
   • 捕获代码中的所有异常,集中处理,让前端得到更详细的业务报错/信息
     @RestControllerAdvice,这个类可以捕获所有的控制器抛出的异常，并返回自定义的错误响应
   • 屏蔽项目框架本身的异常,不暴露服务器状态
   • 集中处理,比如记录日志
   • 实现:
     1.spring AOP:在调用方法的前后进行额外的处理
3. todo-全局请求日志和登录校验

• 没有返回编写的异常码
  2. 使用全局异常处理器

前端

对接后端的返回值-----获得data

然后每个接口都要改----麻烦

全局的请求响应拦截器

文档 在Ant Design Pro中Umi-request全局请求响应的处理_umi request 允许修改响应数据-CSDN博客

• 应用 场景
  我们需要对接口的通用响应,进行统一处理,比如从response中取出data;或者根据code去集中处理错误,比如用户未登录,没有权限之类
• 优势:
  不用在每个接口请求中去写相同的逻辑
• 实现:
  参考使用的请求封装工具的官方文档,别人的博客等
  创建新的文件,在该文件中配置一个全局请求类,在发送请求的时候,使用我们自己定义的全局请求类

1. 新建包和文件
   
2. 导入
   
3. 修改代码
   

部署

🦈笔记

多环境

文档:多环境设计_程序员鱼皮-多环境设计-CSDN博客
本地开发 : localhost(127.0.0.1)

• 什么是多环境(线上/测试)
  同一套项目代码在不同的阶段需要根据实际情况来调整配置部署到不同机器上
• 为什么要用多环境
  1. 每个环境互不影响
  2. 为了区分不同的阶段:开发/测试/生产
  3. 对项目进行优化:
     • 本地日志级别
     • 精简依赖,节省项目体积
     • 项目的环境/参数可以调整,比如jvm参数
       针对不同环境做不同的事情
• 多环境分类
  1. 本地环境(自己电脑localhost)
  2. 开发环境(远程开发,大家连接同一台机器,方便开发)
  3. 测试环境(测试,独立的数据库):开发/测试/产品.性能测试/功能测试/系统集成测试
  4. 预发布环境:(体验服)基本和正式环境一致,使用正式环境的数据库
  5. 正式环境(线上,公开对外访问的项目):尽量完美
  6. 沙箱环境(实验环境):未来做实验

前端多环境实战

将请求url换为后端服务器上的地址(不再是本地)

• 请求地址
  开发环境:localhost:8000
  线上环境:user-backend.code-nav.cn
  

• 实现:根据传入变量控制当前环境
  startFront(env){
  if(env=‘prod’)
  {
  //不输出注释
  //项目优化
  //修改请求地址
  }else{
  //保持本地开发逻辑
  }
  }

  用了 umi 框架，build 时会自动传入 NODE_ENV == production 参数，
  start 时 NODE_ENV 参数为 development
  

启动方式:

• 开发环境：npm run start（本地启动，监听端口、自动更新）
• 线上环境：npm run build（项目构建打包），可以使用 serve 工具启动（npm i serve）
  serve
• 在dist 文件夹下运行serve
  
• 在本地启动了一个web服务器,相当于nginx
  
  项目配置:
• 不同的项目（框架）都有不同的配置文件，umi 的配置文件是 config，可以在配置文件后添加对应的环境名称后缀来区分开发环境和生产环境。参考文档(搜部署)：https://umijs.org/zh-CN/docs/deployment
• 开发环境：config.dev.ts
• 生产环境：config.prod.ts
• 公共配置：config.ts 不带后缀
  

静态化
给每一个路由都生成一个index.html文件,当web服务器中没有对应的资源,的时候就不会报错
（官方的解释：在一些场景中，无法做服务端的 html fallback，即让每个路由都输出 index.html 的内容，那么就要做静态化。https://v3.umijs.org/zh-CN/docs/deployment#静态化）

注意

process.env获取为{}
process.env.NODE_ENV获取为undefined
打包后,在dist文件中就正常运行了-----模拟出生产环境

后端多环境

后端提供用户的增删改查和登录,连接了数据库(3306),改变连接的数据库

如何区分环境
SpringBoot 项目，通过 application.yml 添加不同的后缀来区分配置文件

如何在本地运行生产环境的地址
再次构建本项目(spring项目—打jar包)
构建jar包
行maven里的package,然后文件了会生成一个target,这里报错是因为Test里面还有错误，一般情况下这个最好是要解决他(正式上线的情况下)，再去package，这里可以通过点击maven上面的⚡图标来跳过Test。

运行jar包,传入 环境变量区分环境

PS E:\codeBYyupi\userCenter\userCenter\target> java -jar .\userCenter-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod

主要是改:
依赖的环境地址

1. 数据库地址
2. 缓存地址
3. 消息队列地址
4. 项目端口号
   服务器配置

bug

PS E:\codeBYyupi\userCenter\userCenter\target> java -jar .\userCenter-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod
.\userCenter-0.0.1-SNAPSHOT.jar中没有主清单属性

在使用maven打包后出现的一个问题.\user_center-0.0.1-SNAPSHOT.jar中没有主清单属性_.\user-center-0.0.1-snapshot.jar中没有主清单属性-CSDN博客

项目部署

前端

安装 web 服务器：nginx 、apache、tomcat

安装 nginx 服务器：

1. 用系统自带的软件包管理器快速安装，比如 centos 的 yum
2. 自己到官网安装（参考文章）

curl -o nginx-1.21.6.tar.gz http://nginx.org/download/nginx-1.21.6.tar.gz

tar -zxvf nginx-1.21.6.tar.gz

cd nginx-1.21.6

   37  2022-04-17 23:30:09 yum install pcre pcre-devel -y
   39  2022-04-17 23:30:59 yum install openssl openssl-devel -y
   41  2022-04-17 23:31:57 ./configure --with-http_ssl_module --with-http_v2_module --with-stream
   42  2022-04-17 23:32:13 make
   43  2022-04-17 23:32:54 make install
   48  2022-04-17 23:33:40 ls /usr/local/nginx/sbin/nginx
   vim /etc/profile
  在最后一行添加：export PATH=$PATH:/usr/local/nginx/sbin	
  
  nginx
  
  netstat -ntlp 查看启动情况

注意 nginx 权限

后端

安装 : java、maven打包

服务器

鱼皮

🦈

原始部署

前端

nginx

Nginx三种安装方式 - 知乎 (zhihu.com)

查看服务器信息

free -h

在xshell 中下载niginx

curl -o nginx-1.24.0.tar.gz https://nginx.org/download/nginx-1.24.0.tar.gz

在相对的目录下解压

tar -zxvf nginx-1.24.0.tar.gz

发现没有bin目录

百度 nginx的安装:
依次执行以下的命令
yum install pcre pcre-devel -y
yum install openssl openssl-devel -y
./configure --with-http_ssl_module --with-http_v2_module --with-stream
make
make install
ls /usr/local/nginx/sbin/nginx

配置环境变量

这里执行Nginx，会提示没有找到，然后就是环境的配置
使用这个命令 vim /etc/profile
在最后一行添加：export PATH=$PATH:/usr/local/nginx/sbin
(回车之后按 o 进入编辑模式)
:wq 退出(先按Esc)

修改环境变量之后，需要重新激活一下
source /etc/profile
再用 netstat -ntlp 查看启动情况

前端打包上传

1. 打开前端项目，build运行一下，然后找到dist文件所在位置，压缩，之后拖进Xshell。
2. 使用命令解压 unzip dist.zip -d user-center-front
3. cd进去user-center-front 文件，再cd进dist，把里面的文件到user-center-front目录下。
4. 移除空的dist
5. 现在前端的文件都上传到了服务器的user-center-front里面了
   然后我们需要打开Nginx，cd conf 去修改一下nginx.conf的配置
   命令： vim nginx.conf
   

然后访问报错

具体鱼皮说是，因为之前Nginx的安装时，编译重置了安装环境，现在的Nginx的配置文件在最外面的 usr/local/nginx 里
我们serveice文件里的nginx.conf复制到 usr/local/nginx /conf/

cd cat /usr/local/nginx/conf
vim nginx.conf 再次修改跟之前一样
nginx -s reload 保存

查看权限

ps -ef|grep ‘nginx’

vim nginx.conf

在执行nginx -s reload,然后这边就出来了

后端

安装配置

使用yum来安装jdk1.8(自动配置好环境变量)

yum install -y java-1.8.0-openjdk*

官网下载maven
安装maven （这里好像问题，这个网站下载下来的不对，最好自己下好了，再拖进去）
Maven – Download Apache Maven
https://maven.apache.org/download.cgi

-bin:编译好的二进制文件

//1.
curl -o apache-maven-3.8.5-bin.tar.gz https://dlcdn.apache.org/maven/maven-3/3.8.5/binaries/apache-maven-3.8.5-bin.tar.gz
//2.直接拖拽压缩包到services目录下
//解压
tar -zxvf apache-maven-3.9.6-bin.tar.gz

mvn:使用这个文件构建项目

配置环境变量

pwd:获取当前目录
/root/services/apache-maven-3.9.6/bin

vim /etc/profile:进入编辑
到最后一行
粘贴刚刚的路径

esc +:wq退出并保存

source /etc/profile 刷新配置

验证一下是否安装好了
mvn -v(在services下运行)

mvn --help
查看mvn的命令

git clone xxx 下载代码

打包构建，跳过测试
mvn package -DskipTests

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

后端上传

1. 安装git yum install -y git

这里鱼皮是通过git拉取项目到服务器上的，需要先把我们自己的项目上传的git上面，上传的操作不会的可以去网上搜一下，我这里就直接用鱼皮的git地址了。需要自己的账户和密码。
http://gitlab.code-nav.cn/root/user-center-backend.git

git clone http://gitlab.code-nav.cn/root/user-center-backend.git
用户名:calmthinker
密码:!Gg963852

2. 使用maven 进行打包，-DskipTests是跳过测试。（记得进去你自己的user-center-backdend项目）

   mvn package -DskipTests
   （这里启用这种方式打包需要很久,鱼皮他觉得太久了，就把文件直接拖了上去）
   鱼皮拖上去的上jar包

3. jar包运行
   然后就是执行

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

但之前要给权限，给了权限之后再执行。

chmod a+x userCenter-0.0.1-SNAPSHOT.jar

但是发现在这个界面不能干任何事。
ctrl+c中断
需要让项目在后台运行

nohup java -jar userCenter-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod &
之后按回车正常

命令 jps 看查运行的java程序

宝塔linux部署

Linux 运维面板
官方安装教程：https://www.bt.cn/new/download.html

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

重装系统，之前用的是CentOS系统，这次用宝塔Linux系统

在防火墙中可以添加自己的ip地址，仅限自己访问IP地址查询_本机IP_我的IP (900cha.com)
（这里注意，ip是自己的，端口要8888，这是默认的）

测试一下是否成功

从这里可以拿到自己的账户和密码。

登录进来了

calmthinker
!Gg963852

软件商店搜索
nginx，点击快速安装就行。
Tomcat(9),下载这个只是为了java，它里面包含java的,方便管理服务器、方便安装软件

前端

点击网站–>添加站点(只修改网站名)

点击根目录-> 删除该目录下所有的文件->上传前端dist

如果要修改nginx

后端

8080端口:tomcat占用,停止这个服务

记得在防火墙放行8080端口

bug

mmp卡在这里不晓得为什么

根本启动不了tcp4

解决:
把之前的前端文件后端文件路径严格按照鱼皮的不乱放就成功了

docker 部署

Docker 命令大全 | 菜鸟教程 (runoob.com)

docker 是容器，

可以将项目的环境（比如 java、nginx）和项目的代码一起打包成镜像，所有同学都能下载镜像，更容易分发和移植。
再启动项目时，不需要敲一大堆命令，而是直接下载镜像、启动镜像就可以了。

docker 可以理解为软件安装包。
Docker 安装：https://www.docker.com/get-started/ 或者宝塔安装

如何制作镜像

Dockerfile:用于指定构建 Docker 镜像的方法
Dockerfile 一般情况下不需要完全从 0 自己写，建议去 github、gitee 等托管平台参考同类项目（比如 springboot）

Dockerfile 编写：

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

下载docker:
不知道为什么宝塔下载不了,百度linux命令在终端中下载的

【Linux部署Docker安装步骤详解及问题解决】_linux安装docker-CSDN博客

后端构建docker镜像

我这里就取用鱼皮的git了。我是自己新建的一个目录app，因为git过来会又有一个user-center-backend。
http://gitlab.code-nav.cn/root/user-center-backend.git

构建docker镜像
//后端(没权限,用sudo)
user-center-backend>> sudo docker build -t user-center-backend:v0.0.1 .(当前目录下
)

前端构建docker镜像

我的还没有上传到github先暂时用到鱼皮的

sudo git clone http://gitlab.code-nav.cn/root/user-center-frontend.git
进入对应目录,找到Dockerfile文件

sudo docker build -t user-center-frontend:v0.0.1 . 构建docker镜像

bug

解决
直接在本地构建好dist,上传到对应的位置

查看已经构建好的镜像:
宝塔面板/docker images

运行镜像

1. 停用之前的网站
   这里还需要关掉nginx，因为你只关掉了网站，但nginx服务还是占了80端口的

2. 运行镜像

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

(-p:将容器中的端口 映射 到 某个端口)（-d 后台启动）
虚拟化
1. 端口映射：把本机的资源（实际访问地址）和容器内部的资源（应用启动端口）进行关联
2. 目录映射：把本机的端口和容器应用的端口进行关联

进入容器

docker exec -i -t  fee2bbb7c9ee /bin/bash

查看进程

docker ps 


查看日志

docker logs -f [container-id]

杀死容器

docker kill

强制删除镜像

docker rmi -f

启动之后可以自己去网页验证一下

Docker容器平台部署----未完待续

1. 云服务商的容器平台
2. 面向某个领域的容器平台(前端webify 后端微信云托管)

补充

1. auto filing…
   

2. idea 自带的测试请求
   

3. webstrom
   MFSU:前端代码优化
   

idea便捷操作

定制快捷键,自动生成代码

同时编辑多行

shift + alt + 鼠标左键

查看ddl代码

快速模拟请求

webstorm 快捷操作

快速折叠代码

ctr+shift+ -