1.说说 application/json 和 application/x-www-form-urlencoded 二者之间的区别。
- application/json是序列化后的 JSON 字符串
- application/json 会作为请求头告诉服务端 消息主体是序列化的JSON字符串，除了低版本的IE，基本都支持。服务端有处理JSON的函数，使用不会有任何麻烦
- application/x-www-form-urlencoded属于编码类型默认是后者
Content-Type被指定为 ‘application/x-www-form-urlencoded’，提交的数据按照 key1=val1&key2=val2 的方式进行编码，key 和 val 都进行了 URL 转码。大部分服务端语言都对这种方式有很好的支持
- Content-Type` 被指定为 ’application/json‘，提交的数据格式为{ "title": "test", "sub": [1,2,3] }
2.说一说在前端这块，角色管理你是如何设计的。
- 添加角色功能
- 角色列表展示，角色编辑、删除、以及角色列表搜索
- 给角色添加菜单权限、以及修改菜单权限
- 给角色添加数据操作权限、以及修改数据操作权限
- 在用户列表中给用户设置不同的角色让其拥有不同的权限
３.@vue/cli 跟 vue-cli 相比，@vue/cli 的优势在哪？
- 通过@vue/cli创建的项目，高度集成了webpack,实现了大部分常见的打包功能，如果需要自定义则编写vue.config.js即可扩展
- 移除了config和build文件夹
- 使用public目录替换static目录存放静态资源
- 在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件
- 安装时会自动下载node_modules里的依赖
- 支持vue ui 视图化的方式创建vue项目
- 构建速度更快
４.详细讲一讲生产环境下前端项目的自动化部署的流程。
-
将本地代码加入 git 管理
-
设置 token
- 目录所在地 Settings --> Developer settings --> Personal access tokens
- 起一个名称， 勾选第一个选项 repo
- 得到 token 保存后续使用，这个 token 只出现一次
-
配置 Secrets
- 在项目中点击 Settings --> Secrets --> New repository secret
- 名字 TOKEN 内容： 上一步获得的 token
- 名字 HOST 内容： 服务器外网 ip
- 名字 PASSWORD 内容： 服务器密码
- 名字 PORT 内容： 默认 22
- 名字 USERNAME 内容： root
-
项目根目录创建 pm2.config.json
{
"apps": [
{
"name": "name",
"script": "npm",
"args": "start"
}
]
}
- 项目根目录创建 .github/workflows/main.yml
- 编写执行的任务
- 将所有代码提交 git 创建tag提交
- 提交成功后在github项目上查看构建状态 Acctions
- 点击 Releases 查看历史版本
５.你在开发过程中，遇到过哪些问题，又是怎样解决的？请讲出两点。
-
在 module.exports 中使用 JSON.stringify 中报错，在webpack中设置为全局
- 解决思路是改为export default 导出 在 webpack.base.conf.js 中配置
plugins:[
new webpack[ 'ProvidePlugin' ]( {
common: ["@/assets/javascript/common/common.js", 'default']
} )
]
项目在 chrome 浏览器下正常，在 ie 8 以上报错，语法错误
- 原因是在项目中使用 DataV ，在 DataV 中使用了 es6 语法没有编译导致语法错误，解决思路在 webpack.base.conf.js 中配置编译
module: {
rules: [
...
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
}
]
},
６.针对新技术，你是如何过渡到项目中？
- 首先进行技术的预判，看项目中是否合适以及该技术是否成型
- 在遇到问题时是否能有解决的方案。该技术的稳定性，基本都符合了，会在新的项目中使用部分功能
- 不会将老项目全部迁移(风险太大)
