/ M6 I- f9 H( a! ~% Z' f( F$ C5 I, d" `
- l# V$ K8 C3 r9 V
【课程简介】
# C4 b+ z9 c! W, s8 Q9 n这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。: P7 }: |4 _! T4 l' @
3 A# u W# G5 r( R- W【课程目录】
: F( ]5 V/ U, j; d8 H第1章 课程导学
6 j2 S7 ~# ?- W1 k. ~) E这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
8 A* ?% U' ]. c( L+ |* e, i1-1 课程导学 试看
' S( Q. E# ?; [4 P7 g# x* ?* `6 B! J' _! N# {8 O$ ]
第2章 Vue基础知识
( F$ i9 L1 `/ G) W7 C整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。- w/ c1 p' F1 {' h2 b1 C$ ~5 o
2-1 概述&脚手架
2 X; ~' d# e/ o2-2 模板语法（1）
4 x& Z' a5 M0 z6 ]' y) F2-3 模板语法（2）( m8 X6 p# r" q
2-4 样式与遍历
# W: E$ l6 e% s7 p5 f2-5 事件 Q2 q( n! r3 U" Z- L* @" z$ B
2-6 组件（1）
6 |7 o# T1 L& y: U: B+ f2-7 组件（2）
$ j- m+ R/ h, |2-8 路由基础
- w. E- x) B0 v2-9 Vuex基础用例（1）
8 k8 m, Y: m1 { C! I: q% I2-10 Vuex基础用例（2）
& q# Y. c7 z; l2-11 Vuex高级用例（1）6 N; d& { A6 ~5 M$ q' N
2-12 Vuex高级用例（2）4 A \, C8 c+ g) [/ S
- l3 c: u8 l0 R, R, N' s3 u第3章 Koa2基础知识
+ i; ?( {9 S2 l4 ]6 O+ kNode服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
& V1 X, \! L1 F5 Q! J3-1 Koa-generator
; g8 W# x; a1 i' D3-2 Koa异步async
& k( X; c( \7 c( ~3-3 Koa中间件( u1 o: u& `! D
3-4 koa路由和cookie
7 @' \" T5 W/ W. [9 c. J. \; v# z! \' p( u
第4章 Mongoose和Redis基础
Z' W! A& w9 V# s# X% `7 \. R$ R6 W/ kmongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。.../ D5 X& R m! X( ~) {! ~& j
4-1 mongoose（1）, K9 E. |# ?/ g1 b) {
4-2 mongoose（2）0 r O6 K' P2 w* n
4-3 Redis（1）7 }8 ?, g& M7 z* [
4-4 Redis（2）4 n+ `7 m# @4 `. }* T
5 _) s9 m7 K& F1 V; O$ m s1 _
第5章 Nuxt.js基础知识; @. ^7 |0 l8 q _9 h. p' ], E
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...
3 S! }: i/ O" o6 S' _& {5-1 Nuxt.js基础（1）. t; P8 K S$ Q6 S/ d/ H/ Q8 r
5-2 Nuxt.js基础（2）) O- O- w6 ]( e* Y6 f
5-3 Nuxt.js基础（3）
0 U8 j) p6 o) h3 h e2 ?: }+ x5-4 Nuxt.js基础（4）; l4 U, D( M4 c3 k1 ], \+ N' z
. g8 F5 e* [/ {- C
第6章 实战准备5 z2 Z1 E! P* Y1 b) Y
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。( z+ u' O/ ~3 i; A( F2 }& d
6-1 环境准备与项目安装
4 X6 a) H/ H% D7 K0 C9 b6-2 辅助工具安装与配置改装. k# F9 ^: O y2 N
W; S" x9 c) f+ R1 h第7章 开发美团网首页7 G9 g P" N8 p/ w/ l- G
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
- ]9 k+ f, u' o) A7 V- w* d7-1 需求分析 试看
! K/ V' W I* c& a0 @3 |9 F# g7-2 首页Header开发-城市定位服务设计6 B, m( I# O4 s2 q
7-3 首页Header开发-头部引导导航设计6 ~+ T2 Q8 I/ y1 ~4 e% g, h
7-4 首页Header开发-搜索界面设计
6 y2 k1 u1 G$ T7-5 Bug修复
) A$ l# j, C/ H J/ g7-6 首页搜索
; [' b0 _- Q) V7-7 首页菜单（1）1 m& g$ T. t7 u( j# A, |2 m
7-8 首页菜单（2）
7 r$ n5 m; Y" U& o7-9 章节小结
4 t) P/ t' k, D2 p% V% c- D7-10 Footer补充
8 _* C8 `4 K( X3 ?! B2 Z6 S" w! }0 a- D/ X
第8章 开发美团网首页-登录注册' A4 h7 o; h+ b* M
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
# f2 p! d: G5 G! o Z+ U8-1 注册（1）
- K1 `" \9 }; C4 K5 w' {8-2 注册（2）
* } h; o/ }$ J/ }$ b8-3 注册（3）) m! Z+ Y' n. L+ Y% S! W, Q
8-4 注册（4）
- Z! H+ t1 M# e. D8-5 注册（5）
6 {. b; N9 H) _$ {, E1 c8-6 注册（6）
8 L b0 R. P% m+ \; W6 G8-7 注册（7）
/ [1 B. X* |6 l f+ F7 `$ ^+ }& x" i4 o+ X8-8 注册&登录（1）
8 D$ ^% D! u$ Z3 I7 F8-9 注册&登录（2）, y, C. r6 N$ W6 j
8 K. z) N6 E* }) T+ L第9章 开发美团网首页-Search搜索
6 v: ^* K" D+ _5 t& K: d只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。 Y6 l5 i. q; C i: ^5 w* s" b! R
9-1 城市服务: O, P9 D2 L- B- [2 K9 h
9-2 菜单数据- n) @5 ], K& N
9-3 Geo接口实现
! ` t/ Z- m% y+ a/ B9 X* O$ }9-4 Search接口实现（1）0 `9 i' u4 u# s0 M0 Y
9-5 Search接口实现（2）, I8 d4 v( ?' x. a4 F, i5 Q
# N" E) B7 c7 J$ |8 I) ?第10章 切换城市页
* H4 X6 e$ X. U: E1 n切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
7 }4 L4 U0 Y- b$ N10-1 切换城市（1）
* y3 \3 O9 z7 u10-2 切换城市（2）: Y- }" h8 S* U! z
10-3 切换城市（3）; G, K0 t) L7 Q& d! S, I% v7 p
4 y# t/ E8 \2 f7 H2 B第11章 美团网产品列表页
, p) t3 ~) w; V' o1 ]) c点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
/ [9 _" }4 C$ _1 _- z; B11-1 页面设计（1）* R0 _% b$ x: x: I/ K; a
11-2 页面设计（2）& H+ n" c& w1 l1 D. T
11-3 地图组件开发
& Q4 i2 v! S4 |( X' y" _11-4 入口文件编写（1）: \* W# V6 M2 V: U% ^+ y! } W
11-5 入口文件编写（2）
4 R$ u8 @, ]; O7 r' U% k9 ]11-6 页面调试
: B; L# y6 \2 H2 r# k* X7 s6 H, A% \" o) u" ~
第12章 美团网产品详情页开发
$ D) F% U7 U4 Y7 i7 V产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。1 s9 q# [) K% d: Y7 K
12-1 需求分析 试看
/ r( @5 M: \( b2 M( `- g6 M. s12-2 静态模板
. d3 ^1 K) o. B1 H, V4 M12-3 产品详情页入口-静态文件
0 p! f6 v, z4 j! D# |0 Y/ Q12-4 产品详情页-接口
0 n% ^! V( n$ |# \7 o+ C; F/ ^6 l4 w+ B- y1 @" Y
第13章 购物车开发/ ?( @9 L5 J- R' k! U; P
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定* A3 D- b [ K$ c
13-1 购物车&订单-需求分析
l( G5 u) K* W. b$ [% v13-2 购物车&订单-页面创建
, C# q' L+ H c6 V% Z& e" Z13-3 购物车接口实现
0 V, V# W/ ~3 R13-4 购物车调试
9 R: W( V7 b- a/ q1 ^/ d/ V& n' [& r- `5 }) f
第14章 订单页开发
6 W4 \- @3 H9 }5 o0 e' e5 l9 P! A订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。5 @: ^/ B) O% ?( g- X. `
14-1 订单页面* g" N, W- r: v, M |7 [& `
14-2 订单接口
/ d$ y. T/ P/ ~1 }+ z- S14-3 订单调试% I, n- i6 c3 O/ D4 t5 ?
5 R5 d7 Y6 W O. H第15章 课程总结3 y+ b. q6 c4 O# P( S, C- {8 M
对课程整体进行回顾与总结
7 o4 _, K3 m, ?) |* G15-1 课程总结: g; K7 u( D" z7 k; `( d( \
* t' n6 j$ v% D# |6 `8 m5 ?! u
【下载地址】
$ N% ?5 M7 c* l5 u
0 P4 y9 S' L1 k# H* K5 R1 W8 D4 X5 x& E
/ y) Z7 o: T% D' l |
|
[复制链接]
a
