电商网站后台管理系统
项目地址
vue_shop: 基于Vue+Vue-Router+Vuex+Element-ui+axios,实现的黑马电商后台管理系统https://gitee.com/zhou-kai520/vue_shop
技术栈
Vue2、Vue-Router、Vuex、Element-UI、axios
项目功能
项目开发模式
前后端分离,后端写接口,前端实现接口调用、并且将数据渲染到页面上。
项目优化
实现步骤:
A.生成打包报告,根据报告优化项目
B.第三方库启用 CDN
C.Element-UI 组件按需加载
D.路由懒加载
E.首页内容定制
chainWebpack 可以通过链式编程的形式,修改 webpack 配置
configureWebpack 可以通过操作对象的形式,修改 webpack 配置
项目总结
登录到使用
1. 将登录成功之后的 token,保存到客户端的 sessionStorage 中
1.1 项目中除了登录之外的其他 API 接口,必须在登录之后才能访问
1.2 token 只应在当前网站打开期间生效,所以将 token 保存在 sessionStorage 中
element-ui
每个组件的样式可以通过它的名称来设置。
如上传图片等组件,发起网络请求时,是库自己封装的函数(不是 axios ),没有携带TOKEN,无法链接我们的数据库,所以我们要自己设置。
尚品汇(电商网站)
项目地址
尚品汇: 根据尚硅谷的网课,实现了大部分的尚品汇功能。https://gitee.com/zhou-kai520/shangpinhui
技术栈
Vue2、Vue-Router、Vuex、Webpack、axios、less
项目功能
类似于京东的电商网站,涵盖登录、注册、搜索、详情、购物车、我的订单等。
项目总结
服务器
如果带给服务器的参数是可有可无的;属性值为空的字符串还是会把字段带个服务器,而如果相应字段变为 undefined ,当前字段就不会带给服务器(可以减小服务器消耗)
webpack
webpack 默认对外暴露:图片、JSON 数据格式
mockjs 模拟数据
mock 用来拦截前端 ajax 请求,返回自定义的数据用于测试前端接口。
小项目
直接用生命周期钩子和 data 保存数据
大项目
统一封装 用函数的形式给出数据
防抖和节流(通俗理解)
防抖:就是回城,被打断就要重新来
截流:就是技能CD,CD没好,你用不了技能
问题:if 中如果是空对象,能否进入判断成功执行语句中?
答:能,在转化布尔值时,对于对象而言,只有 null 转为 false,其他的都为 true,因此,一定要注意 [ ] { } 都会被转为 true
空对象 {} 与 null 的区别
空对象{}是一个不完全空对象,原型链上有 Object,null 为原型链顶端,因此 Object.prototype.__proto__ === null 为 true
null 是完全空对象,原型链也没有
空数组 [ ]
空数组 [ ] 原型链上还比空对象 { } 多一个 Array