1、说说 application/json 和 application/x-www-form-urlencoded 二者之间的区别。

Content-Type字段

关于字符的编码，HTTP/1.0规定，头信息必须是ASCII码，后面的数据可以是任何格式。因此，服务器回应的时候，必须告诉客户端，数据是什么格式，这就是Content-Type字段的作用

application/json和application/x-www-form-urlencoded都是比较常见的post提交数据的方式
现在越来越多的人把application/json作为请求头，用来告诉服务端消息主题是序列化后的JSON字符串。由于JSON规范的流行，除了低版本IE之外的各大浏览器都原生支持JSON.stringify，服务端语言也都有处理JSON的函数，使用JSON不会遇上什么麻烦

浏览器的原生form表单，如果不设置enctype属性（规定在发送表单数据之前如何对其进行编码），那么最终就会以application/x-www-form-urlencoded方式提交数据

除此之外还有multipart/form-data,我们在表单上传文件时，必须让form的enctype等于这个值

  • Content-Type：application/json：请求体中的数据会以JSON字符串的形式发送到后端
    • 优势：前端不需要关系数据结构的复杂度，后端解析方便
    • 问题：少数的浏览器不兼容
  • Content-Type：application/x-www-form-urlencoded：请求体中的数据会以普通表单形式（键值对？key1=value1&key2=value2）发送到后端
    • 优势：所有浏览器都兼容
    • 问题：在数据结构极其复杂的时候，服务端数据解析会变得很难
  • Content-Type：multipart/form-data：它会将请求体的数据处理为一条消息，以标签为单元，用分隔符分开。既可以上传键值对，也可以上传文件。上传文件时将文件转换成二进制数据进行传输，不涉及转码

    二者之间的转换

    axios使用post发送数据时，默认是直接把json放到请求体中提交到后端的。也就是说，我们的Content-Type变成了application/json，这是axios默认的请求头content-type类型。但是实际我们后端要求的'Content-Type': 'application/x-www-form-urlencoded'为多见，这就与我们不符合。所以很多人会在这里犯错误，导致请求数据获取不到。

我们可以使用qs库对数据进行编码来转换：

  1. import qs from 'qs'
  2. const data = { 'bar': 123 }
  3. const options = {
  4.     method: 'POST',
  5.   headers: { 'content-type': 'application/x-www-form-urlencoded' },
  6.   data: qs.stringify(data),
  7.   url,
  8. }
  9. axios(options)

由于我们通过qs.stringify()转换之后的data，axios会自动把ContentType设置为application/x-www-form-urlencoded，我们不再需要手动添加

  • 如果data是普通对象，则ContentType是application/json
  • 如果data是qs.stringify()转换之后的数据，则ContentType会被设置为application/x-www-form-urlencoded

  • 如果data是formData对象，则contentType是mulitpart/form-data

    2、说一说在前端这块，角色管理你是如何设计的。

    image.png
    封装成列表资源组件，外层使用一个card卡片，头部是一个form表单写的搜索框来搜索列表数据，主体是一个table表格来渲染拿到的数据。主体上方有添加角色的按钮，列表中每条数据除了信息的渲染都拥有 菜单/资源的分配以及编辑和删除四种操作。
    image.png
    角色的添加和编辑可以共享一个组件，利用父子组件通信来处理对话框的关闭和数据刷新以及编辑角色的id传递
    image.png
    角色的分配菜单/分配资源功能，通过分别封装tree树形控件来实现，需要注意的是通过开启props将路由路径参数映射到组件的props数据中来实现解耦

    3、@vue/cli 跟 vue-cli 相比，@vue/cli 的优势在哪？

    @vue/cli和vue-cli的区别

  • @vue/cli是指新版本的Vue CLI 3.x 或 4.x，包的名称做了修改

  • vue-cli则是指老版本的Vue CLI 1.x 或 2.x

由于Vue CLI 3和Vue CLI 4的区别不大，为了方便阅读，后边统一规范为Vue CLI2与Vue CLI4的区别
1、安装、卸载命令

  1. #Vue CLI2：
  2.     安装：npm install -g vue-cli 或 cnpm install -g vue-cli
  3.     卸载：npm uninstall -g vue-cli 或 cnpm uninstall -g vue-cli
  4. #Vue CLI4：
  5.     安装：npm install -g @vue/cli 或 cnpm install -g @vue/cli
  6.     卸载：npm uninstall -g @vue/cli 或 cnpm uninstall -g @vue/cli

2、项目创建命令

  1. # Vue CLI2:
  2. 　　vue init webpack vue-cli2　　　　# vue-cli2 为项目名称，项目名称不能出现大写字母
  3. # Vue CLI4:
  4. 　　vue create vue-cli4    　　　　  # vue-cli4 为项目名称，项目名称也不能出现大写字母

3、项目目录结构

  1. # Vue CLI2 新建项目，目录结构：
  2. .
  3. ├── build # webpack 相关配置文件（都已配置好，一般不需要进行配置）
  4. ├── config # vue 基本配置文件（我们可以配置监听端口、打包输出等）
  5. ├── node_modules # 第三⽅包存储⽬录
  6. ├── src
  7. │ ├── assets # 公共资源⽬录，放图⽚等资源
  8. │ ├── components # 公共组件⽬录
  9. │ ├── router # 路由相关模块
  10. │ ├── App.vue # 根组件，最终被替换渲染到 index.html ⻚⾯中 #app ⼊⼝节点
  11. │ └── main.js # 整个项⽬的启动⼊⼝模块
  12. ├── static # vue 基本配置文件（我们可以配置监听端口、打包输出等）
  13. ├── .bablerc # babel 编译参数
  14. ├── .editorconfig # EditorConfig 帮助开发⼈员定义和维护跨编辑器（或IDE）的统⼀的代码⻛格
  15. ├── .gitignore # Git 的忽略配置⽂件，告诉Git项⽬中要忽略的⽂件或⽂件夹
  16. ├── .postcssrc.js # 转换 CSS 的工具
  17. ├── index.html # 主页
  18. ├── package-lock.json # 记录安装时的包的版本号，以保证⾃⼰或其他⼈在 npm i nstall 时⼤家的依赖能保证⼀致
  19. ├── package.json # 包说明⽂件，记录了项⽬中使⽤到的第三⽅包依赖信息等内容
  20. └── README.md # 说明⽂档
  1. # Vue CLI4 新建项目，目录结构：
  2. .
  3. ├── node_modules # 第三⽅包存储⽬录
  4. ├── public # 静态资源⽬录，任何放置在 public ⽂件夹的静态资源都会被简单的复制，⽽不经过 webpack
  5. │ ├── favicon.ico
  6. │ └── index.html
  7. ├── src
  8. │ ├── assets # 公共资源⽬录，放图⽚等资源
  9. │ ├── components # 公共组件⽬录
  10. │ ├── router # 路由相关模块
  11. │ ├── store # 容器相关模块
  12. │ ├── views # 路由⻚⾯组件存储⽬录
  13. │ ├── App.vue # 根组件，最终被替换渲染到 index.html ⻚⾯中 #app ⼊⼝节点
  14. │ └── main.js # 整个项⽬的启动⼊⼝模块
  15. ├── .gitignore # Git 的忽略配置⽂件，告诉Git项⽬中要忽略的⽂件或⽂件夹
  16. ├── babel.config.js # Babel 配置⽂件
  17. ├── package-lock.json # 记录安装时的包的版本号，以保证⾃⼰或其他⼈在 npm i nstall 时⼤家的依赖能保证⼀致
  18. ├── package.json # 包说明⽂件，记录了项⽬中使⽤到的第三⽅包依赖信息等内容
  19. └── README.md # 说明⽂档

从两个新建的项目目录结构来看，差别很大：Vue CLI4新建的项目，根目录结构内少了之前的build、config、static文件，配置文件也少了几个，连index.html都没有了，但多了一个public文件夹
3、项目启动命令

  1. # Vue CLI2:
  2.   npm run dev
  3.   "scripts": {
  4.     "dev": "webpack-dev-server --inline ==progress --config build/webpack.dev.conf.js",
  5.     "start": "npm run dev",
  6.     "build": "node build/build.js"
  7.   }
  8. # Vue CLI4:
  9.   npm run serve
  10.   "scripts": {
  11.     "serve": "vue-cli-service serve",
  12.     "build": "vue-cli-service build"
  13.   }

@vue/cli的优势

1、Vuecli的初衷

  • vue-cli：开箱即用，但强制性强，需要按照它的规则进行

    4、详细讲一讲生产环境下前端项目的自动化部署的流程。

    5、你在开发过程中，遇到过哪些问题，又是怎样解决的？请讲出两点。

    6、针对新技术，你是如何过渡到项目中？