项目实战记录 -【用户中心项目】用户中心前端开发

前端技术栈：

依据Ant Design Pro自带的脚手架工具自动生成代码，并对代码进行简化方便后期使用，提高开发效率

因为更新不同版本后会出现不同的配置，这里推荐根据Ant Design Pro的官方【开始使用】教程进行安装调试

首先明确需求，用户中心这里在后端设计上仅有一张表（用户表），这里也仅是对用户操作，所以，可以明确有如下几个页面：

1.用户注册页面

2.用户登录页面

3.用户查询页面

环境与项目搭建

明确需求后开始安装前端的开发环境以及脚手架：

首先需要安装node和yarn工具：

进入官网【下载 | Node.js 中文网 (nodejs.cn)】根据自己的操作系统进行下载安装，安装可以指定目录或默认安装（环境变量地址会自动配置，安装地址既是环境变量地址）

安装好后进入命令行工具输入node -v命令进行版本查询

node -v

如果出现版本信息说明已经正确安装并配置好了环境变量

如果出【现不是内部或外部命令，也不是可运行的程序
或批处理文件】的提示，则说明没有正确安装node或者node的环境变量未能正确配置需要手动配置环境变量，环境变量配置可以参考我之前的获取直聘数据文章中的环境变量配置，配置的是驱动但步骤是一样的【Python之Boss直聘职位数据获取 – 咖啡小喵的窝 (coffecat.cn)】，或者参考这篇文章进行配置Node.js 环境安装到配置环境变量_node配置环境变量-CSDN博客

如果配置好环境变量发现还是无法正常使用node -v进行查看版本，先别着急

1.查看配置的环境变量目录是否正确

2.尝试重启电脑并重试

3.完全卸载并删除node（清除注册列表并更换安装路径），重新安装node，如果仍然不行可以尝试换一个版本进行安装，或根据报错信息百度解决

由于每个人的电脑环境和版本是不同的，可能有些人的电脑安装就没有任何问题有点人电脑怎么也无法安装，这是正常的，根据提示查找解决办法就可以大概率解决

安装好node后就可以使用npm命令了，推荐在安装好node后安装yarn工具，安装yarn是为了弥补 npm 的一些缺陷并且在项目中可能会用到yarn命令，虽然也可以使用npm但是还是推荐安装以便不时之需。

这里可以使用npm install -g进行全局安装

npm install -g yarn

如果在使用yarn命令时发现有时候报错有时候没有问题可能说明网络环境不稳定，可以配置国产镜像来解决，这里如果镜像站不能正常时候可以百度查询最新的镜像替换

yarn config set registry https://registry.npm.taobao.org -g 
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

上述yarn的配置可以参考这篇文章yarn的安装及使用教程_安装yarn-CSDN博客，文章中详细的讲解了命令的使用与安装

安装好需要的工具和环境后就可以初始化脚手架了，可以根据官方的教程进行初始化

# 使用 npm
npm i @ant-design/pro-cli -g
pro create myapp

注意：在执行安装antdesignpro时可能因为本地环境版本与当前官方提供的最新版不一致导致报黄，这里可以忽略或者百度降级与当前版本一致即可，这里如果因为node或npm版本原因可能会导致后面的umi工具无法正常启动（即使这里我使用了umi3但还是看不到那碗饭）不过问题不大，因为后面会使用ProComponents 高级表单来做查询页，所以即使没有也没关系。

后面执行执行pro create myapp，对项目进行初始化

pro create [项目名称]

这里会询问是需要初始化一个标准的项目还是一个完整的项目，如果需要一个完整的antdesign项目可以选择complete，如果只是需要一部分用户脚手架搭建可以使用simple，这里因为并不涉及其他的页面和功能，所以选择的是simple

安装好后可能会提示【No change to package.json was detected. No package manager install will be executed】，不用着急，因为只是拉取了项目还没有对项目进行部署安装

根据上面的步骤就已经把前端的项目拉取下来了，应该可以说已经完成了前端大部分的工作，然后就可以使用编辑器对项目进行安装和初始化，这里可以使用vsCode或者webStrom，这里我使用的是webStrom，和我的idea操作习惯保持一致。

打开项目后会看到readme文件的操作提示

根据提示我们在Terminal中执行npm install对项目进行初始化，如果在初始化过程中因为版本原因或者其他原因导致初始化终止或报错可以根据报错或提示信息百度查找解决办法

npm install

初始化完成后可以找到根目录下的package.json文件中start项，并点击绿色三角形，这时就会跳出右侧窗口，通过下拉框可以选择yarn或者npm用来执行，我这里选择了npm，最后点击apply或者直接点击run完成此项配置并启动项目

如果项目正常启动则会给出访问地址，我们可以点击访问地址进行访问

至此前端项目脚手架的初始化就已经完成了

根据提示可以进行登录

项目瘦身

虽然看上去已经没有太多东西了，但是在项目中其实还有有些没有用到的文件可以去除掉的，这样做的目的是让项目更加清爽，项目文件也一幕了然，后面开发过程中如果有使用到的组件或者文件都可以通过官网进行获取，这里简化后可以让项目更加清晰整洁，如果是在企业中对于团队合作开发也增加了代码与文件的可读性。

项目中的package.json文件中提供了移除国际化的选项，因为只是自己使用，所以目前并不考虑国际化的适配，这里就可以通过提供好的命令进行国际化的移除

移除后重启项目可能会有报错，原因是移除国际化后某些配置没有自动去除，导致启动时引入的配置找不到对应的路径，这里我们可以根据报错全局搜索匹配报错字段进行查找（快捷键为ctrl+shift+f），找到后删除相关配置并重启项目

这里继续删除locales文件夹，可以看出这也是国际化相关的文件

删除swagger和config中的oneapi.json主要定义了一些接口信息

jest.config.ts也是一个测试的配置文件，这里没有使用，可以删除

tests文件也可以去除，测试时的一些配置与操作相关的文件

上述文件去除后启动项目依旧可能会报错，根据报错信息去除相关的配置和路由，根据报错可知，没有找到oneapi.json文件，所以肯定是有地方引用了这个文件

全局搜索oneapi.json并去除相关的配置

删除相关配置后项目正常启动

至此项目瘦身也已经完成了

前端项目目录结构：

【config】目录下存放的是当前项目的配置文件，包括兼容性，主题，国际化，网络请求，代理，路由，页面信息等配置

【mock】下存放的是项目中用到的模拟数据，这个文件到后面就可以删除了，后面会和后端联调，数据从后端获取不再使用模拟数据。

【node_modules】是通过node加载的一套依赖库，项目如果要运行需要用到库中的一些文件，感觉有点象是java中的jdk环境，后面给出的lib root提示也能看出，它是基层的库

【public】文件夹中存放的是项目中访问的一些静态资源

【src】文件夹我理解就相当于是java springboot项目中的src文件夹，里面存放了我们需要编写的内容，后端是接口和配置文件，那前端应该就是相对应的页面和页面相关的一些配置了。

【components】存放的是页面公共的组件

【pages】就是存放的页面

【services】就是服务，服务从后端来，所以这里定义的就是请求或者调用后端的接口，请求以及响应的报文或者实体以及对应的类型

【access】定义的是全局鉴权，就是说，当用户登录后会通过调用获取当前用户的接口获取当前用户信息，在这个文件中去校验是否为管理员，根据返回的结果去渲染不同权限下的目录。

【app】文件是全局初始化配置，对全局初始化后的数据进行操作

【less】全局样式文件

【tsx】全局脚本文件

编辑器js语法检测工具

代码格式化工具

项目相关的执行脚本

前端代码编写

首先可以先从登录页面开始，因为已经有现成的代码所以可以根据现有的代码对其优化，在本次项目中这些部分是没有用到的，所以可以直接去除

通过config配置文件中的routes文件的路径可以找到src目录下的Login目录，这个ts文件中就是登录页。去除上方对应的选择项目，我这里是都去掉了，只保留了账号密码登录，但是这里需要注意，由于去除了整个items所以这里把下面针对不同key的校验也同时去除了，由于去除了这部分文件可能导致依赖或者引用报错，根据报错提示去除掉无效的代码和引用即可

去除底部的其他方式登录

去除这部分代码后需要根据报错提示同步去除引用和其他的代码

搜索文件中相关字样进行更改

对主标题和副标题进行调整，图标可以根据自己的喜好进行替换，可以和它一样将图片存放到public静态资源文件夹内

页面下方的版权与友链信息可以在src目录下的公共组件components中的footer文件夹进行修改

修改footer文件夹下index中的defaultFooter

底部的版权信息可以查看DefaultFooter组件的源码得知，在DefaultFooter中定义copyright即可

页面调整后编写接口部分的代码

根据routes确定登录页

然后找到登录页中的handleSubmit提交部分，点击login跳转到登录接口，由于是脚手架自带的登录功能，所以已经创建好了这个登录的接口，在这里我们需要对登录接口进行调整

对登录接口的入参和回参进行调整，调整成前后端约定好的数据结构，并对接口路径进行调整

点进去后可以对数据结构进行调整

在调整入参和回参结构后对回参的状态判断进行调整

上述代码中可以知道，当状态为ok时会提示登录成功，并刷新用户信息，之后会通过history.push进行跳转，根据fetchUserInfo搜索可得知，是在app中全局加载时调用的，这里需要同时修改queryCurrentUser接口的接口路径以及CurrentUser的数据结构，保持和后端接口约定好的数据结构，登录部分就已经调整完成了

然后就是注册页面，因为和登录页类似，所以可以直接使用登录页，在登录页的基础上进行调整

首先在routes中添加注册页面的路径

将登录页拷贝一份重命名为register

将登录相关的字样调整成register，根据前后端约定重新编写注册逻辑的入参和回参实体，添加表单校验逻辑参数（checkPassword），并对密码进行校验

由于没有找到合适的注册组件，于是还是使用的loginform组件，在loginform组件基础上添加submitter属性，可以对登录按钮进行修改，将带有登录字样的地方修改为注册

在输入组件ProFormText中添加确认密码输入框并重命名为checkPassword

之后就是调整注册接口，将原来的登录改为注册，并参考登录接口编写注册接口，返回的数据格式同样使用和后端讨论好的结构，并且最好统一返回结构方便后面的异常统一处理，这里对返回的code进行判断，当后端返回的是400时说明接口有异常抛出或接口报错，获取接口返回的错误信息并展示，当获取的cdoe状态是200时，提示注册成功并跳转至登录页面，当调用接口出现异常时捕获异常并提示注册失败，请重试。

注册接口，将请求和响应结构调整为注册相关的数据结构

至此，注册页已经调整好了

最后就剩下登录后的管理员页了，通过routes可知，在path属性中可以定义是什么权限，在管理权限中可以添加一个路由，这个路由下的页面就只有管理员可见了

通过access属性全局查找可知，在access中通过初始化时的状态判断是否是管理员权限

接下来就是创建查询页面，这里使用ant的ProComponents高级组件库中的组件来实现，地址【https://procomponents.ant.design/】

通过查找，在组件中的ProTable发现查询表格就是我们需要的，所以就使用它了

在组件下方会有一栏，最右侧有一个展开代码，点一下就可以得到组件代码了

获取到代码后在pages中创建Admin/UserManage目录，然后粘贴获取到的代码

从字段开始，将字段改为前后端沟通好的数据结构中的字段，然后将ProColumns中的数据结构替换成我们自己的

补充对表单中的属性说明

columns 属性

  dataIndex      对应返回数据对象的属性
  title          表格列名
  copyable       是否允许复制
  ellipsis       是否允许缩略
  valueType      用于声明这一列的类型（dateTime、select）

调整好字段后找到下方的request，调整成前后端约定好的接口与数据结构

至此查询页就已经完成了，所有页面完成后就要为上线部署做准备

在config中可知，本地联调使用的是dev环境

在src目录下创建plugins文件夹，定义全局请求，通过production区分是否是生产环境，如果是生产环境使用线上的地址，如果不是则使用undefined

在services的api在将我们创建好的globalRequest替换原来使用umi框架的request

在根目录创建docker文件夹，添加nginx配置，用于docker镜像部署时nginx配置

配置文件，为nginx添加跨域配置

server {
    listen 80;

    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    root /usr/share/nginx/html;
    include /etc/nginx/mime.types;

    location / {
        try_files $uri /index.html;
    }
   # 跨域配置
   location ^~ /api/ {
   # 跨域配置
   proxy_pass http://公网ip/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;
   }
   }

}

在项目根目录下创建Dockerfile文件，为部署做准备

FROM nginx

WORKDIR /usr/share/nginx/html/

COPY ./docker/nginx.conf /etc/nginx/conf.d/default.conf

COPY ./dist  /usr/share/nginx/html/

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

Dockerfile文件关键字说明

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

至此前端所有的页面以及部署相关的功能就已经完成了

发表回复 取消回复

发表回复取消回复