Vue全家桶+SSR+Koa2全栈开发美团网(学习笔记)

这是一篇学习笔记，写于2019年3月20号。在学习过程中有些技术已经更新了，跟着老师的课程会出现警告或者报错，都已经修复了。课程传送门（https://coding.imooc.com/class/280.html）耐心学习，收获非常大，打通全栈技术。

如果有帮助，点个赞再走呗。如果需要对应的数据库，可以在后面下邮箱地址，如果也是学习此课程，有需要讨论的地方，也可在留言区留言。

第二章(vue基础)

1. 自定义指令是什么？在什么情况下使用？在功能在小到一个表达式无法解决，大到不需要一个组件去处理的时候，自定义组件非常合适。
2. 修饰符是什么？有什么用？.prevent 修饰符， 还有按键修饰符。使用修饰符可以大大简化我们对 DOM 的操作。
3. vuex 如何快速 map 有 module 的 store 呢？…mapState(‘moduleName’,[’counter’])
4. 讲清楚了 exports module.exports export export default 的区别 https://www.cnblogs.com/fayin/p/6831071.html 非常好的文章。

第三章(koa2基础)

1. 快速安装项目？koa2 -e koa2-learn
2. 用 npm run dev 的项目为什么能自动监听代码变更，重新启动 node 呢？因为 nodemon 可以监视node.js 应用程序中的任何改变并自动重启服务，非常适合用在开发环境中。
3. async await 实现异步的特点？就是用同步的写法来实现异步的操作，不用写回调函数，让代码逻辑更流畅。
4. 中间件的原理？中间件use 可以没有顺序，因为 koa2 接收之后 request 会经过一次中间件，reponse 出去之前会经过一次中间件。
5. 如何自定义中间件，然后观察执行顺序，理解中间件原理？
6. router 这块多练习一下，理解流程。
7. cookie 和 session 的关系。服务端用 session 来识别客户端的状态，客户端用 cookie 来保存服务端的 session。

第四章(mongodb redis)

1. mongodb里面的数据表的概念 collection 就是 mysql 里面的 table。
2. 启动 mongodb 命令 mongod --dbpath ~/Documents/mongo/db
3. mongodb 和 mongoose 如何在 koa2 项目中应用起来呢？①先按照 mongoose；②定义 config.js文件用于连接数据库；③创建 mongoose 中的 schema 并且绑定 model； ④用 model 和 entity 去操作数据库的增删改查。
4. redis ①brew install redis ②启动 redis-server /usr/local/etc/redis.conf
5. npm install koa-generic-session koa-redis --save
6. 如何让 session 结合 Redis 进行配合，让服务端产生 session 存于客户端的 cookie 并用 redis 进行服务端存储读写？① app.keys=[“keys”,”keyskeys”] 用于加密的 key ② app.use(session({store: new Redis()}) ③ app.session.count++
7. 使用 redis-cli 打开 shell 命令行 查看 keys * ; get key 等等命令来查看 redis 里面的数据。
8. ①用let redis = new Redis().client 拿到 redis 客户端； ② 用 redis.hset(‘fix’,’name’,Math.random()); 来设置除了 session 以外的 redis 使用；③ 在 redis-cli 中查看存储值: hget fix name

第五章(Nuxt.js)

1. nrm 是一款可以让用户切换选择 npm 的镜像源工具。
2. 页面组件（pages 自动创建路由对应关系） -> 模板组件（layouts 可以自定义模板）-> component（普通组件）
3. 初始化项目？vue init nuxt-community/koa-template nuxt-learn
4. ①server 中写个 router 返回内容 ②在 pages 中用 async asyncData(){}方法获取数据，直接 return。对比原来在 vue 的 mounted 钩子函数中用 axios 获取数据的方式，在源码的展示上有什么不同？
5. asyncData 和 fetch 的区别？asyncData 获取 data 中的数据，而 fetch 则获取 vuex 中的数据。
6. 为什么 SSR 渲染需要把静态 html 渲染好给到客户端之后，又额外把数据给到客户端呢？因为客户端的静态文件无法交互，交互事件的绑定是在客户端完成的，这个时候就需要数据和vue 模板。
7. let {status,data:{list}}= await axios.get('http://localhost:3000/citys/list’); 为什么解构不能获得 data？

第六章(环境准备)

1. nuxt 升级到2.0以上之后不需要通过模板去安装 vue 项目了。 ① npm install -g npx ② npx create-nuxt-app project-name ③ 用 npm install —update-binary 重新安装
2. 默认用官方 nuxt 脚手架安装的项目，不支持 import 的语法？① - -exec babel-node ② touch .babelrc 填入内容 {“presets”:[“es2015”]} ③ npm install babel-preset-es2015 ④ 再安装 npm install --save-dev babel-cli
3. 官方 nuxt 脚手架默认不支持 scss ！ 如何支持呢？ npm install sass-loader node-sass
4. 修改 build 文件，css 模块引入 reset.css 和 ‘~assets/css/main.css’

第七章(首页开发)

1. 十分重要的理念 ① 模板设计（主要用来解决复用性的问题）② 组件设计（如何拆分组件？这里会有一些抽象思维，如何把一些具象的组件抽象成最合理的、灵活的一种组件。） ③ 数据结构设计（因为我们 vue 框架是组件开发，对于组件来说无非包括两个内容，一个是模板一个是数据，如果数据结构没有设计好，会导致模板和数据逻辑比较复杂，所以数据结构设计也是十分重要的内容。）④ 接口设计（这个是和数据结构相关联的，设计了怎么样的数据结构，需要服务端如何下发数据，这是相互结合的。）
2. 掌握

   • 这些标签对可以加快开发速度。

   • 掌握 emmet 的 html 写法，也可以加快页面编写速度。
   • input 有两个事件 @focus @blur
   • 如何快速从对象数组中过滤出指定属性值的对象呢？ this.menu.filter((item) => item.type === this.kind)[0]
   • template 模板上进行 v-for 循环，:key 属性无法绑定在 template 上面。

第八章(注册登录)

1. 一个十分重要的思想，注册登陆这些表单有极其复杂的逻辑！我们一定要利用好第三方库现成的验证和提示逻辑，来实现简化我们的代码流程。
2. 登陆注册这个页面必须写一下，体会其中的难度，以后要多多学会借用现成的东西。
3. iconfont 下载的东西，默认有个字号大小要注意。
4. 所以阴影的遮盖顺序是当元素的 position 为 relative 或者 absolute 时, z-index 大的遮盖 z-index 小的
5. 了解 img 在 div 中居中定位的方法 https://www.cnblogs.com/abeam/p/7865671.html
6. 分清楚 dl ul 以及 inline 和 inline-block
7. 生成4位随机验证码 Math.random().toString(16).slice(2,6).toUpperCase()
8. ①开通 qq 邮箱的 SMTP 服务，获取授权码：xxxxxxxxxxxxx ②创建数据库相关的 dbs models/users.js config.js ③ 创建API 接口相关interface/users.js interface/utils/axios.js interface/utils/passport.js ④ 在 config.js 中配置 dbs redis smtp 以及 getcode 和 expire 函数（为什么非要放回一个行数呢？）
9. ① 安装 mongoose 写users.js 的配置。安装： koa-router koa-redis nodemailer 引入 /dbs/models/users ; /utils/passport ; /dbs/config ; /utils/axios ② 配置axios.js 用create一个 instance实例 ③ 配置 passport.js 安装 koa-passport passport-local 引入 /dbs/models/users 加入固定策略代码包括账号密码验证，序列化和反序列化。
10. 然后 /interface/users.js中写一堆接口 再接着 去/server/index.js中用 router
11. passport 的详细了解网站 https://www.kancloud.cn/digest/passport-js-note/64049
12. 注册登陆页面可能是有中文的，要进行一个转码： window.encodeURIComponent(username)
13. 密码要在客户端 进行 crypto-js 加密，不能明文传输，很不安全。
14. location.herf=‘/login’ 客户端用这个方式来进行页面跳转。
15. nuxt.js工作流熟悉比如 middleware 什么时候执行？

第九章(search 搜索)

1. lodash 库；
2. ssr 传递 menu 数据。
3. 为了不让前端的数据格式和名称不受后端过多的限制，前端需要做一下 map。let r = pois.filter(item => item.photos.length).map(item=> return {title:item.name, pos:item.type.split(‘;’)[0], price:item.biz_ext.cost || ‘暂无’ })

第九章(search 搜索)

1. js-pingyin 库；
2. 学会把城市先在对象中存储，然后再把对象转换成数组，这个思想很重要。
3. 用 herf 实现页面锚点的定点滚动。
4. 服务端有自己的数据结构，客户端也要有自己的数据结构，不能过分依赖于服务端的结构，不然服务端数据结构改了，客户端要改数据结构就非常麻烦。都有自己的结构，你好我好大家好，客户端自己做一层映射就让客户端非常自由和灵活。
5. 地图组件用高德实现以下。
6. 弄懂 vue 里面的 asyncData 钩子方法。
7. 在用 axios 调用 get 方法的时候。参数要这样传递 {params:{keyword,city}}

其他章(详情页，购物车)

1. 如果 async 返回了字段数据，在 data 中又重复定义，会被 data 覆盖掉吗？
2. 练习一下判断登陆和未登录返回不同数据的接口。
3. 购物车的物品展示要学会用 el-table 快速搭建，总价和数量要学会用自定义 scope 去动态计算。能解决很多写逻辑的代码的时间，一定要学会借力丫。
4. 无论是 mysql 还是 mongodb 存储 Date 类型的数据都有个时区的概念，为了统一，可以全部存 String。
5. SSR 有两个好处，①是用户体验好，展现出来就是有数据的，不需要异步加载。②是保护接口，因为数据随页面下发，用户根本不知道有接口的存在。

效果图

实现 session 登陆，退出登录，passport 验证

实现复杂的校验

实现登陆功能