# fed-e-task-03-06

**Repository Path**: sfl001/fed-e-task-03-06

## Basic Information

- **Project Name**: fed-e-task-03-06
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-05-15
- **Last Updated**: 2021-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# fed-e-task-03-06

- 解答题：

#### 1.说说 application/json 和 application/x-www-form-urlencoded 二者之间的区别。
- application/x-www-form-urlencoded方式是比较老的一种方式，这种方式的好处就是浏览器都支持，在请求发送过程中会对数据进行序列化处理，以键值对形式？key1=value1&key2=value2的方式发送到服务器，
- application/json，随着json规范的越来越流行，并且浏览器支持程度原来越好，许多开发人员易application/json作为请求content-type，告诉服务器请求的主题内容是json格式的字符串，服务器端会对json字符串进行解析，这种方式的好处就是前端人员不需要关心数据结构的复杂

#### 2.说一说在前端这块，角色管理你是如何设计的。
说道角色管理-永远分不开权限管理，这里我们简单说一下权限管理，权限管理简单来说就是控制用户所能使用当前系统的哪些功能，具体细化到模块，按钮等等。角色管理往往是基于业务管理需求而预先在系统中设定好的固定标签，每个角色对应明确的系统权限，他是一个集合的概念，是众多最小权限颗粒的组成。我们通过把权限给这个角色，再把角色给账号，从而实现账号的权限，因此它承担了一个桥梁的作用。引入角色这个概念，可以帮助我们灵活的扩展，使一个账号可以具备多种角色，其所拥有的系统权限一般不会随意更改，并且角色也不会随着用户的被添加和被移除而进行改变，相较于用户管理而言更加稳定。

#### 3.@vue/cli 跟 vue-cli 相比，@vue/cli 的优势在哪？
- 启动@Vue-Cli Gui, 项目依赖 清晰明了亦可直接在界面安装依赖
- 在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效
- 3.0 新加入了 TypeScript 以及 PWA 的支持
- 配置项更简单明了
- - 移除了配置文件目录，config 和 build 文件夹, 额外配置可通过在根目录vue.config.js 配置
- - 移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
- - 在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

#### 4.详细讲一讲生产环境下前端项目的自动化部署的流程。
- 需要提前安装 JDK，JDK 安装教程网上很多，请自行搜索。
- 下载jenkins 并且安装，完成后自动打开http://localhost:8000，这时需要等待一会，进行初始化
- 按照提示找到对应的文件（直接复制路径在我的电脑中打开），其中有管理员密码。
- 安装社区推荐的插件并创建管理员用户，点击完成并保存，然后一路下一步。
- 配置完成后自动进入首页，这时点击 Manage Jenkins -> Manage plugins 安装插件。
- 点击可选插件，输入 nodejs，搜索插件，然后安装
- 安装完成后回到首页，点击 Manage Jenkins -> Global Tool Configuration 配置 nodejs。如果你的电脑是 win7 的话，nodejs 版本最好不要太高，选择 v12 左右的就行。
- 下载 Jenkins 提供的 demo 项目 building-a-multibranch-pipeline-project，然后在你的 Gitea 新建一个仓库,把内容克隆进去，并提交到 Git服务器。
- 打开 Jenkins 首页，点击 新建 Item 创建项目
- 选择源码管理，输入你的 Git 上的仓库地址。
- 选择你的构建环境，这里选择刚才配置的 nodejs
- 点击增加构建步骤，windows 要选 execute windows batch command，linux 要选 execute shell。
- 构建命令输入 npm i && npm run build && xcopy .\build* G:\node-server\dist\ /s/e/y，这行命令的作用是安装依赖，构建项目，并将构建后的静态资源复制到指定目录 G:\node-server\dist\。这个目录是静态服务器资源目录(自行修改为你的服务器资源目录)
- 保存后，返回首页。点击项目旁边的小三角，选择 build now, 开始构建项目，我们可以点击项目查看构建过程, 最后输出finished success 就构建成功了

#### 5.你在开发过程中，遇到过哪些问题，又是怎样解决的？请讲出两点。
1. 浏览器请求总是附带options 这样一个请求，测试要求去掉这个请求，因为总是看错，本着好奇心我也看着不爽的原因，就去研究了一下这个options 是怎么回事, 然后各种资料查找，代码分析，最后得出结果，浏览器会分为简单请求和复杂请求， 常用的有GET，POST，HEAD，HTTP的头信息不超出以下几种字段：
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
- 剩下的就是复杂请求了，浏览器出现options 的原因就是因为复杂请求，所谓的复杂请求大概解释如下： XMLHttpRequest会遵守同源策略(same-origin policy). 也即脚本只能访问相同协议/相同主机名/相同端口的资源, 如果要突破这个限制, 那就是所谓的跨域, 此时需要遵守CORS(Cross-Origin Resource Sharing)机制。
-那么, 允许跨域, 不就是服务端设置 *Access-Control-Allow-Origin: * * 就可以了吗? 普通的请求才是这样子的, 除此之外, 还一种叫请求叫preflighted request。
preflighted request在发送真正的请求前, 会先发送一个方法为OPTIONS的预请求(preflight request), 用于试探服务端是否能接受真正的请求，如果options获得的回应是拒绝性质的，比如404\403\500等http状态，就会停止post、put等请求的发出。
第一个OPTIONS的请求是由Web服务器处理跨域访问引发的。OPTIONS是一种“预检请求”，浏览器在处理跨域访问的请求时如果判断请求为复杂请求，则会先向服务器发送一条预检请求，根据服务器返回的内容浏览器判断服务器是否允许该请求访问。如果web服务器采用cors的方式支持跨域访问，在处理复杂请求时这个预检请求是不可避免的。 到这里，就明白了了什么是复杂请求，知道问题，那就对症下药，既然跨域，那我们就从服务端出发，解决跨域问题，需要在服务端处理一下，不然无法跨域访问post,服务端拦截器设置：
```
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
chain.doFilter(req, res);
```
重启服务器，然后再次请求，发现没了options 预检请求了, 至此问题解决了，也了解了什么是复杂请求，什么是简单请求了

2. JS正则在IOS 无法使用断言表达式
- 通过分析字符串，将原来的断言表达式拆分为多个非断言方式的表达式，或者直接使用字符串方法来操作达到效果，或者使用正则构造函数创建断言表达式。

```
// 修改前报错不支持
let str = "SCscHero123SCscHero";
let reg = /(?<=SCscHero)\d+(?=SCscHero)/g;
console.log(str.match(reg)[0])

// 修改后
let str = "SCscHero123SCscHero";
let reg = /SCscHero(\d+)SCscHero/;
console.log(str.match(reg)[1]);
// 最好的方式
let reg = new RegExp("SCscHero(\d+)SCscHero", 'g');
console.log(str.match(reg)[0])
```

#### 6.针对新技术，你是如何过渡到项目中？
首先新技术，想使用到项目之中，首先得考虑稳定与否，然后得花时间自己学习，达到一定火候才可以考虑运用到项目之中。
1. 针对老项目，时间充裕，采用重构整个项目，时间不足，可以通过官方提供方法逐步过渡
2. 新项目可以直接从零开始，逐步完善整个项目。在开发过程中同样也是对新技术的熟练和巩固过程