2 _: Y. M3 c3 M+ E% I7 o
+ R D4 W3 V t2 P3 N
* l K" Q! U/ Y- O- S) L【课程简介】5 g f) B, D1 _) N3 }+ ]! H, R
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。7 R7 v0 P) ~; q; d* Z: Q4 C
9 A, W" f+ z4 H& T' Y2 ]4 L" R# ?【课程目录】
2 W% ^' w1 Q/ L4 J3 a4 G0 ?) h% m第1章 课程导学8 T( R" e2 b* z
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
% ^" s7 H8 x, p1-1 课程导学 试看
- k) n& Q0 g0 d9 E' n: j5 U, O) L7 o
第2章 Vue基础知识6 R4 p0 h: n; L
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
# D! z4 j4 @6 Q* S2-1 概述&脚手架/ `4 Y7 s4 o5 r; a
2-2 模板语法（1）6 V6 \( {2 ^. V, `6 {- K
2-3 模板语法（2）+ @$ u! Y* B3 {8 d9 j2 D, n6 m! m
2-4 样式与遍历7 T( f' M+ I6 q/ U8 g" q2 E
2-5 事件* v/ E# w8 a! y
2-6 组件（1）* H7 _9 M D0 x
2-7 组件（2）" I) \8 `% S+ b8 }6 h
2-8 路由基础
# S+ S) S3 g* D) h2-9 Vuex基础用例（1）0 G6 Q- q2 A' r; j/ `
2-10 Vuex基础用例（2）
3 u5 C- f: V' u- E2-11 Vuex高级用例（1）
6 O# V/ W3 I5 m4 M: G: Y% W7 }2-12 Vuex高级用例（2）
6 L/ I) G6 M; C% K7 R, V; D& t
# ~ n2 M: d+ W, K+ } R+ u) d第3章 Koa2基础知识
4 }' U0 i2 u$ ?1 W& _0 rNode服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。' f: @6 c. U# M6 {9 ?
3-1 Koa-generator
. z. t0 J- w3 ^3-2 Koa异步async- v, [5 U G6 I6 M0 c; b
3-3 Koa中间件
/ a4 [7 e2 |- @4 |' L: a& C/ X; j: l3-4 koa路由和cookie' w" P9 e! D# B9 \* e
- {6 p6 j( b6 V第4章 Mongoose和Redis基础3 `* P: Y2 F8 h. J' u! ?/ f( O
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...
$ \6 G |. h- R* D4-1 mongoose（1）$ y2 u$ y! A8 S2 e6 E F! ^
4-2 mongoose（2）
4 W, y/ V, v2 B$ v8 S* {4-3 Redis（1）) M2 y1 b( [; h9 s6 A$ b
4-4 Redis（2）* ]. W2 e$ `0 }# C
4 S, u( M6 t0 e0 t0 J第5章 Nuxt.js基础知识
* T. X. t/ p0 H+ M q2 s4 sNuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...9 c% D2 \8 k+ i0 k3 b
5-1 Nuxt.js基础（1）
8 M. ^0 p4 o6 l( z7 _$ f5-2 Nuxt.js基础（2）
9 l' ]9 [' Y. T- T4 [8 Y5-3 Nuxt.js基础（3）8 y% t) K, h5 q# ]( j3 z
5-4 Nuxt.js基础（4）- t. l" e3 v A+ ~$ z( v, x
% v, N, a, X- K* ~3 ~! P第6章 实战准备
* E; ?* ^5 f7 W% @7 i. W工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。; z# X$ @" {7 F
6-1 环境准备与项目安装, Z9 W, R! y& t) U" i6 F
6-2 辅助工具安装与配置改装
k' Q9 ]' j* K6 U8 p$ ?# v1 @
" v1 ]1 U2 z! \, D, o6 K第7章 开发美团网首页4 m/ i4 F1 [7 z/ ]* i% h _
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。' W$ x* N' F! D: f. y
7-1 需求分析 试看0 B# o* Y& W; H' h$ G- b5 g
7-2 首页Header开发-城市定位服务设计. N3 y# o; @& P. F; z- Y1 r
7-3 首页Header开发-头部引导导航设计
! N# Y, s& T. m9 w4 P: M& c2 Y: q7-4 首页Header开发-搜索界面设计 w( ~9 P% y+ d* |
7-5 Bug修复7 n _1 v: ~1 ?8 M6 `' ]) S# J
7-6 首页搜索, Q& o% d. t1 y! k8 L( x" g
7-7 首页菜单（1）' z, j# R7 U4 c: y' n P
7-8 首页菜单（2）/ }" D. O+ L/ l( R
7-9 章节小结; m8 X; ]8 z; D. M$ b
7-10 Footer补充
- `+ N- k) @$ E6 y3 S. s; o" T2 `0 B% X, E4 K0 X0 ?
第8章 开发美团网首页-登录注册
9 W; s$ V4 [ U+ Y1 I% \" U- r从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
. ~$ n, p: Y/ @8 P8 d8-1 注册（1）/ M0 U* M N, ?" q: Q( {* n
8-2 注册（2）- l- Z8 m0 F/ x7 ]1 U1 J
8-3 注册（3）' B7 O7 F, h/ [4 T+ z2 p
8-4 注册（4）
& v* r: }5 T; M/ j9 c: b8-5 注册（5）
6 O* H4 N, _ C( V% O- r1 [8-6 注册（6）( l h, p# @# k$ T9 U2 b/ E
8-7 注册（7）+ _; R! B4 M# B7 H$ P' P
8-8 注册&登录（1）
* U! Y" q5 B- U/ B0 v8-9 注册&登录（2）
) i; ?4 k8 K' b7 H( t: |& X# U. m+ [4 a" Z" X. b
第9章 开发美团网首页-Search搜索
+ P) K) o1 }, _" O9 g, w; c只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。3 ]' F- U) ] E0 x: r% Z
9-1 城市服务4 ~* x2 e+ b( f# P9 j; U
9-2 菜单数据" R- z: M5 p! M! n4 t* O$ d
9-3 Geo接口实现* y7 H% S6 w( s
9-4 Search接口实现（1）
: U1 M' L2 i" q1 E5 E/ r9-5 Search接口实现（2）; ~7 e% W R! ~- ^
7 z: O. O6 X4 N* p6 G, K
第10章 切换城市页% j; x3 M+ G% E
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。 ~3 L1 r" U5 J* l4 X
10-1 切换城市（1）" R4 |: k, M: V/ q* j, j4 T
10-2 切换城市（2）
/ k# Z& i H' M$ d2 W6 b! ~3 P10-3 切换城市（3）1 `0 j! ]4 V6 {" t4 n! b
3 J {9 ^; B8 A( B$ ]. S1 M( q第11章 美团网产品列表页6 y7 k2 i# T( _1 P0 I2 t ]
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
2 Y; G. ~8 ^! {+ r) _11-1 页面设计（1）
m! W# s6 Z: a& `4 K4 \11-2 页面设计（2）
5 z+ L" r! o# U$ [* z0 p11-3 地图组件开发) @; y9 \( e& C. \& }1 v7 t# ^
11-4 入口文件编写（1）
/ c; I' m7 ?3 I- _& d11-5 入口文件编写（2）
A/ B7 A) Q! k11-6 页面调试
/ I- r5 G6 p+ q0 C& m0 U$ f
" W( U; I* G0 z% E. a% {第12章 美团网产品详情页开发; F* d6 m9 l- C3 j
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
1 Q' `9 \/ x+ k12-1 需求分析 试看5 X; X7 t2 O" d5 E3 g# K1 \
12-2 静态模板
7 d3 B4 E8 ?, i9 V! t& `12-3 产品详情页入口-静态文件6 B* D* N7 I2 q* D
12-4 产品详情页-接口
# q. }; Z6 N) w2 X2 I2 }+ e2 B: U" G- C( M% Z& ?' O/ n
第13章 购物车开发/ S3 ?- ?+ g( [' E
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
2 g8 D6 f, w& R: Z3 K. W13-1 购物车&订单-需求分析/ a; o( N) k5 ^3 Z
13-2 购物车&订单-页面创建
8 j$ q! @4 z8 L7 j* g) A0 I0 }13-3 购物车接口实现8 H n1 X5 j. |- S
13-4 购物车调试% |, R" O/ L; G: ~" L" ~
% w: C& o: M3 p# a/ S第14章 订单页开发
. u. a2 m t% ?6 i订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。6 S) m8 T( y; b
14-1 订单页面
5 C5 r6 V+ S9 X+ [; d14-2 订单接口
( q! o$ P6 O8 L: Z( @14-3 订单调试# i v, W# G5 c8 ^2 L* c
1 _) H1 F- c9 g第15章 课程总结
2 F8 O& Q# r/ `7 Q+ n2 y对课程整体进行回顾与总结) n! e/ ]* w9 K* @- M" X
15-1 课程总结" U: n: |6 G5 x& s1 A) Y# N+ `
+ O* z) G: @! ?6 r' t% k
【下载地址】* I6 }4 B! ?% t1 s V o [1 G. M
8 q- q5 M: N5 z& @
0 Z6 Y* ?( \7 O# i& h" u1 K# I
8 D! Z& v" A3 V2 Q1 ~% u3 l$ |- p
|
|
[复制链接]
a
