用户中心（上）
写在前面
作为后端程序员，前端不用学很深，只要在前后端分离的项目中，了解前后端是如何进行数据交互的就行【Ajax发请求+后端request接收参数，使用框架接收参数会更简单，然后返回给前端JSON】。之前在前后端不分离的项目中，使用过session作用域给前端响应数据。
说一个题外话：在准备简历的时候，写上去的内容一定是自己充分准备好的，不是所有学过的技术栈都往上写，那就很容易踩坑，导致面试失败。简历上写的只是帮助你通过面试，没有写上的技术栈之后可以再根据项目需求学，或者自己整理归纳，分享输出。
需求分析
1.登录/注册
2.用户管理（仅管理员可见）对用户的查询或者修改
3.用户校验（仅指定用户可以注册/登录）
技术选型
前端
- 三件套：HTML CSS JS
- React: React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。
- Ant Design:是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。 特性：提炼自企业级中后台产品的交互语言和视觉风格。开箱即用的高质量 React 组件。
- Umi:umi 是一个可插拔的企业级 react 应用框架。umi是前端框架，是对React的又一层封装，React是对JS的封装。Umi提供了一些路由：用户输入不同的URL，就能访问不同的组件。
- Ant Design Pro:Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案，致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。可以这么理解：它就是一个现成的管理系统，在这个基础上，我们可以二次开发，因为它的业务太多了，我们大部分情况是要根据自己的需求删减的，然后补充自己的独有业务。
后端
-
java（jdk8）
-
spring(依赖注入框架，帮助开发者管理Java对象，集成一些其他的内容)
-
sringmvc(web框架，提供接口访问，restful接口等能力)
-
mybatis(Java操作数据库的框架，持久层框架，对JDBC的封装)
-
mybatisplus（对mybatis的增强，不用写sql也能实现增删改查）
-
springboot(快速启动/快速集成项目，不用自己管理spring配置，不用自己整合各种框架)
-
junit的单元测试库（springboot其实已经整合了单元测试库）
- MySQL5.7
- 部署：服务器/容器（平台）
项目笔记
前端初始化
- 下载node.js，它是js的运行时环境，类似于JDK里的JRE作用。
参考博客，只要看前两步
- 安装包管理器yarn（类似后端的maven），其实下载node.js后会自动下载它自带的包管理器npm，但是yarn的下载包的速度更快，所以就用yarn。
参考博客
- 在workspace里新建一个目录用来存放项目，进入目录，在上方输入cmd，快速进入到这个项目目录中，执行
ant design pro 提供了create umi 来快速的初始化脚手架，它就是一个初始化前端项目的工具
yarn create umi 项目名
前端脚手架是指什么？
前端开发中提到的“脚手架”是一个形象的比喻，比喻各类语言的前期工作环境。
在软件开发上（当然也包括前端开发）的脚手架指的就是：有人帮你把这个开发过程中要用到的工具、环境都配置好了，你就可以方便地直接开始做开发，专注你的业务，而不用再花时间去配置这个开发环境，这个开发环境就是脚手架。
比如vue.js就有个vue-cli脚手架，基于node.js的开发环境，作者帮你把开发环境大部分东西都配置好了，你把脚手架下载下来就可以直接开发了，不用再考虑搭建这些工具环境。
-
按照umi脚手架的引导，根据自己的项需求一步一步的完成初始化，完成后，脚手架（就是没有业务的代码）也就拉取（下载）好了（拉取的原理就是git从网上【github】拉代码，所以在这之前要安装好git，并且最好配好环境变量），然后在这个基础上再进行自己的业务开发。
依次选择了：
a.ant-design-pro
b.typescript
c.simple
-
webStorm或vscode打开刚才下载好的代码，注意：这个代码只是项目的源代码，依赖包并没有拉下来，那么我们就安装依赖包，在webstorm的terminal（或cmd进入项目根目录）输入yarn，执行。
我在webstorm的terminal里输入yarn会报错，可能的原因：webstorm默认打开的是PowerShell，禁止运行脚本这个问题。当时我直接就用cmd执行的，没有管这个bug,以后可以百度解决它。
yarn作为包管理器是如何知道项目用了哪些依赖呢？
答：用到了package.json文件【把yarn理解成maven】，里面有个dependencies里面写了项目用到的依赖，yarn会去解析他。
- 依赖拉取完成后就可以把项目跑起来了。
找到package.json文件里面的start，点击左侧的绿色按钮即可。
启动原理：package.json除了定义了依赖信息，还定义了一些可运行的scripts脚本，这些脚本以键值对的形式存在，值就是一条命令。
前端项目也要先进行编译，部署，然后再运行。
编译是因为当时初始化脚手架的时候选择了TS，所以要编译成JS，JS是解释性语言，不用编译。
部署在本地8000端口，浏览器直接就可以访问了。
- 检查项目确实跑起来了，再安装Umi UI 。
yarn add @umijs/preset-ui -D
和上面一样，这条命令在webstorm的终端里不能执行，直接换成在cmd的黑窗口执行。
Umi UI 是Umi框架提供的一种开发者模式，帮助我们快速开发完整的界面。Umi UI可以比作一个插件，我们使用这个插件，选择我们要快速生成的UI界面，然后配置好路由（url）。用户输入这个url就可以访问到生成的界面，因为它生成了对应的代码。
顺便说一下Umi UI生成代码的原理：和第三、四、五步的流程是一样的，先是git从github拉代码，再执行yarn添加依赖（依赖也可以理解是源代码需要的库，库就是别人写好的代码，拿来直接用，具体包括：工具类库，框架）
当时使用UmI UI 生成代码的时候出现了一直生产不成功的情况，当时没有记录这个bug,但是隐约记得是因为git没有配置环境变量，后来卸载重装配好环境变量就好了，所以告诉我们在装一些软件基础设施的时候一定要很清晰，该配置的配置的，下次再下载任何软件时，尽量装最常用的版本，选择阅读量高的教程，最好装完记录一下，方便以后查因为软件问题造成的bug。
- 做好以上的准备工作后就可以进行项目瘦身体了，删掉一些过度设计，就是我们自己的项目不要的部分。
下一篇博客继续。
参考资料：
别人的笔记
自己的笔记
百度
