使用脚手架创建项目
安装所有依赖/指定依赖
开发环境运行
生产环境打包与发布
stylus的理解和使用
结构化, 变量, 函数/minxin(混合)
vue-router的理解和使用
$router: 路由器对象, 包含一些操作路由的功能函数, 来实现编程式导航(跳转路由)
$route: 当前路由对象, 一些当前路由信息数据的容器, path/meta/query/params
项目路由拆分
确定路由组件显示的区域
确定路由是几级路由
底部导航组件: FooterGuide
导航路由组件: MSite/Search/Order/Profile
4. 抽取头部组件: Header,
通过props向组件传递数据
通过slot向组件传递标签
FooterGuide的显示/隐藏: 通过路由的meta
运行后台项目(启动mongodb服务),
使用postman测试后台接口, 如果不一致, 修改接口文档
封装ajax:
promise+axios封装ajax请求的函数
封装每个接口对应的请求函数(能根据接口文档定义)
解决ajax的跨越域问题: 配置代理, 对代理的理解
vuex编码
创建所有相关的模块: store/index|state|mutations|actions|getters|mutation-types
设计state: 从后台获取的数据
实现actions:
定义异步action: async/await
流程: 发ajax获取数据, commit给mutation
实现mutations: 给状态赋值
实现index: 创建store对象
main.js: 配置store
组件异步显示数据
在mounted()通过$store.dispatch('actionName')来异步获取后台数据到state中
mapState(['xxx'])读取state中数据到组件中
在模板中显示xxx的数据
创建组件, 设计组件的props
使用组件标签, 并传入相应的标签属性
完成组件编码: 使用计算属性
通过vuex获取categorys数组(发请求, 读取)
对数据进行整合一计算(维变为特定的二维数组)
使用Swiper显示轮播, 如何在界面更新之后创建Swiper对象?
1). 使用watch+$nextTick( () =>{界面更新之后立即执行})
2). 使用回调+$nextTick()
使用svg图片实现loading的效果
1). 2种登陆方式的切换
2). 手机号验证
3). 倒计时
4). 密码显示/隐藏
5). 前台表单验证
1). 一次性图形验证码
2). 一次性验证码
3). 手机号/验证码登陆
4). 用户名/密码/图形验证码登陆
5). 退出登陆
6). 自动登陆
cookie:
会话cookie: 保存在浏览器的运行时内存中, 关闭浏览器数据不存在了
持久化cookie: 保存在浏览器管理的文件中, 关闭浏览器数据还存在了
sesion:
会话: 从浏览器打开到关闭整体过程都是一个会话
会话/session对象: 保存在服务器端用来存储数据的容器,
这个对象一旦产生, 服务器会自动向浏览返回一个对应的cookie, 用来保存session的ID: connect.sid=sessionID
在服务器通过req.session获取session对象
1. 从req中取出以connect.sid为key的cookie值
2. 如果有, 找到对应的session对象
3. 如果没有, 创建新的session对象
目标: 关闭浏览器, 再打开还是同一个会话?
让connect.sid的cookie成为一个持久化cookie