电商后台项目：问题回答话术

用到了哪些技术栈？

1.前端：

• vue
• vue-router
• element-ui（前端组件库）
• axios（发起请求）
• Echarts（绘制图形报表）

2.后端：

• node.js
• express
• Jwt（状态保持工具）

登录的相关知识点？

1. http是无状态的：在HTTP这个级别，协议对于发送过的请求和响应都不做持久化处理。

持久化：

• 使用cookie和session（前端和服务器之间，不存在跨域问题）
• token（存在跨域的问题）

git命令相关操作

• git status （当前目录是否干净）
• git checkout -b + 分支名字 （创建并新的分支）
• git branch （查看当前项目所在分支）
• git add . （修改的代码存到暂存区）
• git commit -m “写提交的消息的内容” （暂存区的代码提交到本地仓库中）
• git merge + 新内容分支 （在旧分支里把新分支合并到里面，是旧分支也变成最新的）
• git push （把当前分支推送到码云）
• git push -u origin + 新起的远程仓库名字 （在远程仓库建立新分支，并把当前仓库的内容推送到该远程分支）

：model 和 v-model 的区别

<input v-model="message"> =
<input v-bind:value="message" v-on:input="message = $event.target.value" />
上面这个例子中，
v-bind:value="message" 
只是将message变量的值赋给了input的value，
并没有双向绑定，再此声明一下以防混淆

	v-model是vue.js中内置的双向数据绑定指令，
	用于表单控件以外的标签是不起作用的
	(即只对表单控件标签的数据双向绑定有效)。

	:model相当于v-bind:model的缩写，
    v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，
	这种只是将父组件的数据传递到了子组件，并没有实现子组件和父组件数据的双向绑定。
	当然引用类型除外，子组件改变引用类型的数据的话，父组件也会改变的。

Element-ui 的 Message 组件要全局挂载

把Message组件挂载到Vue的原型上，所有的组件都可用$message来进行使用。

Vue.prototype.$message = Message

未登录时跳转

在全局前置导航守卫中next（）也可以传路由地址
在用户未登录时，使用此跳转到登录页面不如使用编程式导航。

router.replace({
        name: 'login',
        query:{
          redirect: router.currentRoute.fullPath
        }
      })

编程式导航可以使用query参数携带当前页面的地址，在登录成功后可以回到当前页面。router.currentRoute.fullPath

vscode设置保存自动格式化

在根目录下添加.prettierrc文档，内容如下：

{
	"semi": false, //不加分号
	"singleQuote": true //字符串双引号变单引号
	"printWidth": 200 //这一行最多显示多少字符
}

element-ui的组件中

有的组件的index的值不能为数字，那就给数字内容拼接一个空字符。
因为 string + number 存在隐式转换 都转换成string

scope作用域插槽

<el-table-column label='状态' prop='mg_state'>
	<template v-slot='scope'>
		{{scope.row}}//可以打印这一行的所有信息
	</template>
</template>

问题

当我在做权限管理功能时，其中要为不同角色添加权限，点击角色列表里的权限管理按钮会弹出一个该角色的权限树，通过操作树的选项框来为角色分配权限。

首先是，递归地对返回的数据进行判断，将第三级权限存进数组中，再把数组以树的形式渲染在对话框内，通过勾选分支的选择框将权限存入数组，就完成了随当前角色权限的修改。

问题：在对某一个角色进行权限设置后，应该清空一下当前的数组，以免在对其他角色进行设置时，数组原有的数据会影响后序的操作。

vue-table-with-tree-grid的使用

在运行依赖下装这个插件，结合作用域插槽使用

级联选择框

选择一级分类和二级分类，是将一级和二级分类的id存储在数组内，数组又和级联选择框双向绑定。数组selectedKeys就表示选中的父级分类ID数组

<el-cascader expand-trigger='hover' 
:options='parentCateList' :props='cascaderProps' 
v-model='selectedKeys' @change='parentCateChanged'>
</el-cascader>

parentCateChanged 选择项发生变化触发这个函数
数组selectedKeys 的长度大于0时 说明有选中父级分类，那数组中的最后一项便是最近一级的父分类ID

新增的分类的level值始终与数组的长度保持一致。

快捷键

选中多项同类 ctrl + D 连续按D选中多项

split

‘’.split(’’) 返回值为 含有一个空字符串的数组

问题：$nextTick

在我做一个点击tag标签后，tag变为文本框，获得焦点的功能时，在tag上绑定了一个点击事件，点击事件内做了两步处理：

1.将tag标签变成文本框
2.tag获取焦点

但是第二个操作却不能生效，这就是因为第一个操作还没有mounted，所以第二个操作是无法在第一个操作的基础上操作的，如果有这样的需要，就得使用$nextTick方法。

该方法，就是当页面重新渲染之后，才会指定回调函数中的代码。

过滤器用于过滤毫秒时间

自己手写的：

Vue.filter('dataFormat', function(originVal) {
    const dt = new Date(originVal)

    const y = dt.getFullYear()
    const m = (dt.getMonth() + 1 + '').padStart(2, '0')
    const d = (dt.getDate()+ '').padStart(2, '0')

    const hh = (dt.getHours() + '').padStart(2, '0')
    const mm = (dt.getMinutes() + '').padStart(2, '0')
    const ss = (dt.getSeconds() + '').padStart(2, '0')

    return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

使用第三方包dayjs

import dayjs from 'dayjs'
// 配置中文语言包
import 'dayjs/locale/zh-cn'
import relativeTime from 'dayjs/plugin/relativeTime'
// 配置处理使用相对时间
dayjs.extend(relativeTime)

// 配置使用中文语言包
dayjs.locale('zh-cn')
Vue.filter('datetime', (value, format = 'YYYY:MM:DD HH:mm:ss' ) => {
    return dayjs(value).format(format)
})

问题：使用upload上传组件

使用upload上传组件上传图片时，控制台network返回“无效token”的信息，返回状态码400

其原因是在于，在为axios请求设置请求拦截器的时候，为每一个请求都挂载了Authorization的请求头，用于携带token

但upload组件，在上传时并没有用到我们自己的axios发送请求。

不过该组件有一个headers属性用于设置上传的请求头，那就为该组件动态绑定一个请求头Authorization，并使其携带token

插入富文本编辑器

在运行依赖中添加vue-quill-editor

使用全局挂载，客户端SPA

lodash深拷贝的使用

_.cloneDeep()
传入要拷贝的对象，返回与原对象相同但不关联的新对象

Echarts的使用

在运行依赖中安装
导入
在mounted中：

• 初始化图表
• 准备数据和配置项
• 展示数据（将服务器返回的数据和options进行合并）

使用lodash的merge函数合并两个对象，能有鼠标跟随的效果

添加进度条nprogress的使用

在运行依赖中安装
在请求拦截器中使用NProgress.start()表示启用进度条
在响应拦截器中使用NProgress.done()表示关闭进度条

项目优化策略

• 生成打包报告
• 第三方库启用CDN
• Element-ui按需加载
• 路由懒加载
• 首页内容定制

运行build会生成dist目录，这就可用于生产环境的发布。

安装开发依赖babel-plugin-transform-remove-console
并在根目录下的babel.config.js文件中的plugins中增加一项’transform-remove-console’

再次运行build,就删除了代码中的所有console

自定制webpack的配置

使用vue.config.js

module.exports = {
  // 发布模式
  chainWebpack: config => {
    config.when(process.env.NODE_ENV === 'production', config => {
        config.entry('app').clear().add('./src/main-prod.js')
        config.set('externals', {
          vue: 'Vue',
          'vue-router': 'VueRouter',
          axios: 'axios',
          lodash: '_',
          echarts: 'echarts',
          nprogress: 'NProgress',
          'vue-quill-editor': 'VueQuillEditor'
        })
        config.plugin('html').tap(args => {
          args[0].isProd = true
          return args
        })
      })
      // 开发模式
    config.when(process.env.NODE_ENV === 'development', config => {
      config.entry('app').clear().add('./src/main-dev.js')
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    })
  }
}

通过externals加载外部CDN资源

默认情况下，通过import语法导入的第三方依赖包，最终会被打包合并到同一个文件中，从而导致打包成功后，单文件体积过大的问题。

为了解决上述问题，可以通过webpack的externals节点，来配置并加载外部的CDN资源。凡是声明在externals中的第三方依赖包，都不会被打包。

在打包期间webpack会先检查，有没有在externals里面声明一些依赖包，如果有，webpack就不会把对应的依赖打包到里面去，而是用到对应依赖时，去全局找，直接使用。externals就是排除某些包，不让其打包到最终的文件里面去。

路由懒加载

1. 安装@babel/plugin-syntax-dynamic-import包
2. 在babel.config.js配置文件中声明该插件
3. 将路由改成按需加载的形式

node服务器、gzip压缩、HTTP服务

const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')
const app = express()

const options = {
    cert: fs.readFileSync('./full_chain.pem'),//公钥
    key: fs.readFileSync('./private.key')//私钥
}

// 把这行写到静态资源托管之前gzip压缩才会生效
app.use(compression())
// 托管静态目录
app.use(express.static('./dist'))
app.listen(80, () => {
    console.log('server running at http://127.0.0.1');
})
// https.createServer(options, app).listen(443)