本文主要是介绍电商后台项目:问题回答话术,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
电商后台项目:问题回答话术
- 用到了哪些技术栈?
- 登录的相关知识点?
- git命令相关操作
- :model 和 v-model 的区别
- Element-ui 的 Message 组件要全局挂载
- 未登录时跳转
- vscode设置保存自动格式化
- element-ui的组件中
- scope作用域插槽
- 问题
- vue-table-with-tree-grid的使用
- 级联选择框
- 快捷键
- split
- 问题:$nextTick
- 过滤器用于过滤毫秒时间
- 问题:使用upload上传组件
- 插入富文本编辑器
- lodash深拷贝的使用
- Echarts的使用
- 添加进度条nprogress的使用
- 项目优化策略
- 自定制webpack的配置
- 通过externals加载外部CDN资源
- 路由懒加载
- node服务器、gzip压缩、HTTP服务
用到了哪些技术栈?
1.前端:
- vue
- vue-router
- element-ui(前端组件库)
- axios(发起请求)
- Echarts(绘制图形报表)
2.后端:
- node.js
- express
- Jwt(状态保持工具)
登录的相关知识点?
- 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 = truereturn 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 = falsereturn args})})}
}
通过externals加载外部CDN资源
默认情况下,通过import语法导入的第三方依赖包,最终会被打包合并到同一个文件中,从而导致打包成功后,单文件体积过大的问题。
为了解决上述问题,可以通过webpack的externals节点,来配置并加载外部的CDN资源。凡是声明在externals中的第三方依赖包,都不会被打包。
在打包期间webpack会先检查,有没有在externals里面声明一些依赖包,如果有,webpack就不会把对应的依赖打包到里面去,而是用到对应依赖时,去全局找,直接使用。externals就是排除某些包,不让其打包到最终的文件里面去。
路由懒加载
- 安装@babel/plugin-syntax-dynamic-import包
- 在babel.config.js配置文件中声明该插件
- 将路由改成按需加载的形式
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)
这篇关于电商后台项目:问题回答话术的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!