' v- }" j* T! J3 M
; ]5 W/ K) n4 c% q! e2 X( `6 N7 z2 Z; E1 F; u
【课程简介】
! b0 k- f1 v% c0 B) T( O这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。/ o d( Q# R! p+ N: _
5 o0 \1 z9 C {1 K【课程目录】7 `' S+ _6 k9 [3 N3 ]
第1章 课程导学$ i. L) e P# U# \( ]
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等2 j/ Y z9 } j' O
1-1 课程导学 试看 \% v0 p. d, g- \ g6 X9 e! L
0 }+ |9 L# w2 V4 O1 Z
第2章 Vue基础知识
( v W6 _/ ^. a" Z; s整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
0 `! q5 j3 @; ^( t/ H* U1 ?2-1 概述&脚手架
4 \+ W2 _" u+ e- ^& {; g2-2 模板语法（1）0 J3 Z0 B( `6 q" h8 U
2-3 模板语法（2）- v6 v. C# ?+ u) J1 Y
2-4 样式与遍历" T6 _, G! h3 [ s0 F2 X% C' Y
2-5 事件0 `5 _( A! \6 ^/ R. E. h/ u
2-6 组件（1）
" S. `- K5 f# x z2-7 组件（2）9 }( L* A5 m2 \5 a8 G3 R
2-8 路由基础9 C4 G( W5 @7 h4 |3 |+ l: @
2-9 Vuex基础用例（1）
/ a. p8 n1 g$ J/ S3 R Y2-10 Vuex基础用例（2）$ w# I- D a1 w! N
2-11 Vuex高级用例（1）
( Y |3 h; v! r2-12 Vuex高级用例（2）" C4 s$ ]0 I4 u' q# z
. V# L- P9 C8 h7 S第3章 Koa2基础知识# Y7 E7 Q+ @! I/ a/ R/ ^
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
; F3 Q1 Q' z9 I0 x3-1 Koa-generator, `' b1 C8 ]! M' k8 w" |
3-2 Koa异步async
1 ` D. o. d _) w. T2 y3-3 Koa中间件- O0 |8 V0 i" o [ [# F% F
3-4 koa路由和cookie+ W2 `" |6 K8 v
/ _2 }" h+ h0 a2 b. p ^第4章 Mongoose和Redis基础: `# M2 `2 E2 [+ a
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...! D0 v5 z- C0 P- F4 r# ^/ d2 e6 n' Y
4-1 mongoose（1）
% J. N, O5 o& A( \/ e3 g4-2 mongoose（2）+ L( K9 U) E( H7 {. o1 Z
4-3 Redis（1）( @! Y) c) i! W+ P6 @( l
4-4 Redis（2）
6 |* [( c. a. T) c& U% r" X- l& D* S, D. k, w7 B) ]& k/ Y: ]
第5章 Nuxt.js基础知识8 Z! ^. L# T) k) y; m
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。..., V/ ^2 T, S# h/ Y3 e/ |* ~& J
5-1 Nuxt.js基础（1）
3 F, v; G( E% N# v. C9 s% J5-2 Nuxt.js基础（2）
3 `$ E2 \# y8 X; A( G5-3 Nuxt.js基础（3）/ B" { A4 ]: x8 l7 i
5-4 Nuxt.js基础（4）
; `- c1 {# v; ^+ \
& e1 u5 U7 E5 l5 ^' z# g第6章 实战准备2 ?( Q, Z4 ~" r
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
- w2 K1 ]0 }/ I9 g* M. t6-1 环境准备与项目安装
) C+ K8 M. K. h, t3 U( X6-2 辅助工具安装与配置改装& ]+ U$ N1 m' h$ J7 p2 l4 R
* v- G* T: F! h
第7章 开发美团网首页
0 G! n, L1 E. a0 a' J/ ] V E; `% w从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
, O( Y m5 ?7 z3 J7-1 需求分析 试看3 n5 I" @' @+ p9 O3 O4 `
7-2 首页Header开发-城市定位服务设计
% W6 N/ @8 A/ g; a9 E# `7-3 首页Header开发-头部引导导航设计
! K* F X& g' H# [6 \7-4 首页Header开发-搜索界面设计8 X1 t& e: G" U
7-5 Bug修复# S7 w/ l1 R% m) u' N# ] x) `
7-6 首页搜索
+ E2 ?0 z4 e8 R9 }+ R- p7-7 首页菜单（1）
( B5 a0 X% D8 i$ ]4 K0 p2 l$ d7-8 首页菜单（2）$ f/ {- g+ m) i: n4 |- e( w
7-9 章节小结( c: W, Q) ^% ], j# y. r9 D
7-10 Footer补充. Q) V# {/ M o- B) H
: l& R+ |* b1 [( Y- k* k, c$ Z第8章 开发美团网首页-登录注册
2 V& y" }9 N1 \: L从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
6 [7 b5 K& Z& b9 T8 x1 P8-1 注册（1）$ u+ D! C5 R) B1 l* \; n) C
8-2 注册（2）' v3 a# r/ _8 o" U" Z
8-3 注册（3）
8 y+ S" f8 N4 ?7 m5 Y, @( _! ^" d8-4 注册（4）. Z' y2 m# E2 J$ a2 }
8-5 注册（5）
1 ?# \" X7 z3 W% [8-6 注册（6）0 o5 B4 p4 d3 q& q' f: R
8-7 注册（7）0 ?" b, Z6 I: x' Y: h
8-8 注册&登录（1）
) |4 I% I/ _6 K) m9 R$ u5 C8-9 注册&登录（2）
" W: v- O8 v. c, {$ C9 H n: U& m0 W! |) D2 Z0 b
第9章 开发美团网首页-Search搜索7 h! S" e+ q) E
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
# j0 [. S# d5 B$ \4 N2 e4 ~, i. @( s9-1 城市服务
" _' a6 d7 F& I+ H) m' S7 L9-2 菜单数据" K5 g9 Z/ n+ `' M* s/ I3 d3 j
9-3 Geo接口实现
; I! q3 v$ d2 [& K" c. e' M9-4 Search接口实现（1）1 L) N" ~4 g1 j- N, f0 |6 b
9-5 Search接口实现（2）2 [: H: I. z! e' f* U
# K/ S( x- y2 O第10章 切换城市页; \% x4 q7 ?5 S8 [ H# n
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
" |6 _& y) a5 V3 ]1 I10-1 切换城市（1）
) m% W; M9 q( l, i5 R10-2 切换城市（2）
+ @+ {8 v8 e4 m6 m' M3 R( D: @10-3 切换城市（3）
4 z* t6 `5 S2 p. ]" J; F1 ?
9 \# Q) {% \& s0 `7 w$ k r3 I第11章 美团网产品列表页: O, B" F% i- L4 ]' v+ q
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
8 [ \' u ~5 i% k" c11-1 页面设计（1）
1 P2 W0 E+ b- n9 |: {% _% f11-2 页面设计（2）: r9 w, C3 o0 O% n
11-3 地图组件开发
# x" D( v# T1 n11-4 入口文件编写（1）
0 Q8 j9 P, W! V" r, b) M; j: a11-5 入口文件编写（2）
1 h1 g3 M& o* u2 y1 V% ]4 B11-6 页面调试
. {& a+ B* V, J1 x$ W0 Q4 }$ D+ w4 Q- D
第12章 美团网产品详情页开发4 O8 R0 W4 \1 x
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
- o0 W% ]: W7 F( m" K$ z" w12-1 需求分析 试看
z9 \0 C! D) x# Y! s4 D! a [12-2 静态模板
- Q, i! O. n0 I3 g! `" m12-3 产品详情页入口-静态文件
( k+ e S% a4 I: m. Q/ i" {# s12-4 产品详情页-接口
+ P e7 y$ r6 x# ~$ @$ \3 ] @
+ \, n1 ^! s6 A0 ~, f7 ~第13章 购物车开发
5 {3 T8 l* ?, c1 m购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定9 n* n' H0 a5 O7 |; M* |5 U, H
13-1 购物车&订单-需求分析9 m( c, f4 ?6 W5 V
13-2 购物车&订单-页面创建
& ~3 u4 a1 T4 O+ e- P- u13-3 购物车接口实现
5 T! R+ J+ y" U1 a7 D# U5 ^& k* b4 E13-4 购物车调试! J0 t$ x; M9 }, S7 l7 k
9 {4 |( f4 @3 {* a第14章 订单页开发
0 g+ K3 ]2 X, C4 @! z订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。$ I6 p B6 \% z1 y$ Y
14-1 订单页面9 @2 y1 A: S1 V7 b5 {: B' B
14-2 订单接口
2 k, \2 h$ q7 s' d4 ~2 a14-3 订单调试
, c$ h; O& B6 U# }2 A5 c2 G t: F* O' i8 E# X
第15章 课程总结
T; T+ ?1 {9 A+ ` k7 J& l6 a对课程整体进行回顾与总结/ J" Q, w1 D8 j$ b& @
15-1 课程总结5 @( }+ v- v( X2 P% Z# w
1 G( q6 l+ C0 G/ S2 `【下载地址】/ H8 M2 r( K1 h3 z7 @, `$ I
" ~3 V9 e* I- H3 @3 F/ i" y% E/ B E Y" v1 ?4 B3 S) Q# t' t
5 M) v/ N9 c' A1 y5 ~( A5 R5 g
|
|
[复制链接]
a
