6 N8 l8 l# W, i
" q* I; V+ p H0 Z
8 N) |. c7 n0 d
【课程简介】+ t M# A8 R! C# H/ C. g N
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
3 N) Y4 W: c, l
. T* \0 K" t+ Q# K% b7 U【课程目录】- z% v2 j% r* D% [. E+ O
第1章 课程导学
+ w1 C: Y2 X% e5 \% K* @! J这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
8 P, |! o) D% K1-1 课程导学 试看
( r, m9 }( O1 G: d
, M8 Z+ m; u: k9 |第2章 Vue基础知识
- E, f9 {# }1 U% f! z' E; s! \整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。) ~0 K c" h, r0 R3 Y- ]( P
2-1 概述&脚手架, X' R, n* A0 y, h
2-2 模板语法（1）
' a- q9 z2 o1 M2-3 模板语法（2）
5 ^$ O. ?8 }1 T3 g" p0 f* h2-4 样式与遍历
. Y4 m- U. G7 [( x7 a% ~- T* i ^7 |2-5 事件8 O# o' x5 ~* `1 `
2-6 组件（1）
. }/ T' S6 g" Z1 O2-7 组件（2）- C2 A1 q2 ^& Y+ y$ e/ J5 U& S) a
2-8 路由基础
! e. ~* N5 l4 g* I% _( K3 ]- `2-9 Vuex基础用例（1）
# E; [3 v- U7 j8 n5 M! R0 l' C; f2-10 Vuex基础用例（2）
! B, h# J! B" K& e; _. ^2-11 Vuex高级用例（1）
9 _! _% ~0 M) |; \. e% x8 ? M! [2-12 Vuex高级用例（2）
* T% s8 ^- K5 w& K. O$ N
2 _! O0 k7 T+ E7 K第3章 Koa2基础知识& s; J) ~$ C1 `3 X: n7 ]: ^
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。% G* S F% ~# B: u; e
3-1 Koa-generator
8 R1 m. H) c( r. }$ b- d3-2 Koa异步async$ B( \ R$ l& }$ I* C- u4 N" [
3-3 Koa中间件 B2 n: G3 b/ _: I$ s
3-4 koa路由和cookie
9 M) @2 s9 C. K- s! t6 B$ @) K
: V+ I& J+ H; H% P6 H/ S6 B第4章 Mongoose和Redis基础
7 K9 l0 y8 J5 |4 m2 Nmongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...- s/ ]1 A* L1 p
4-1 mongoose（1）( S, R: G- u/ [) H0 N. M1 f( u7 e
4-2 mongoose（2）5 j% ^! r. ^- [- E, f: G
4-3 Redis（1）
* T- i9 F5 R6 @3 g0 n$ ~4-4 Redis（2）
1 ~9 ? q v% I8 M9 q' L! K% t- w" }7 i% h0 o1 ]# j2 Z' r
第5章 Nuxt.js基础知识0 V, l" G: B* F1 |
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...5 M! Y2 ]# m. g. \- G
5-1 Nuxt.js基础（1）3 D0 P& t; X: h% X6 T9 w
5-2 Nuxt.js基础（2）
+ T T" H4 S, ^6 b& L( v5-3 Nuxt.js基础（3）
: k7 ~3 n2 {# b( d5-4 Nuxt.js基础（4）9 ~3 I" H% Q2 X; Y
# a) l. r1 e: Z! W; M
第6章 实战准备
2 O9 P9 C4 ~+ J. c% z( H7 J工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。( O* M$ l5 X v& l! B
6-1 环境准备与项目安装9 ?* x" j% X; `+ u
6-2 辅助工具安装与配置改装- T% p3 A6 x! L; A* S. k( b7 f' I
* j5 [) p, h5 G* {: s; H/ K
第7章 开发美团网首页; _5 V5 N! }$ }4 ?* F
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
7 x7 J$ L" k0 B. V: ?; A( t9 s7-1 需求分析 试看: \4 m+ P# ~% \2 B
7-2 首页Header开发-城市定位服务设计
8 ]% b/ t) q2 {/ L7-3 首页Header开发-头部引导导航设计 b& D4 T' F9 Q* s5 \; A6 U1 v/ {
7-4 首页Header开发-搜索界面设计
: c: k o- A) g$ q7 `7-5 Bug修复/ }2 k1 ~' V" W! W/ U
7-6 首页搜索1 I$ ]- c4 D- t
7-7 首页菜单（1）
: P1 o+ [8 y4 N; V, ]7-8 首页菜单（2）
- \ r7 Y' m- S' V7-9 章节小结
" C: Y* u! I* e: l) u0 Z4 f8 t7-10 Footer补充& F! D7 L7 K x* ?
$ G2 F+ f$ g# d8 J+ [: A6 r
第8章 开发美团网首页-登录注册
7 z9 J6 J! z$ ?9 V6 H* W3 |& d从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
4 m" z3 e, L( n* b4 x0 J8-1 注册（1）
) J; p1 p% f; b8 v/ l: {; {8-2 注册（2）" O/ Q$ ? V9 A4 }
8-3 注册（3）
" v1 e. X+ S; o9 J; D3 E }: ~8-4 注册（4）
" D8 Z# e& { ~6 R1 |4 N8-5 注册（5）' S7 W- b7 f+ W* b
8-6 注册（6）
- J# ]8 T& m3 e% k( }8-7 注册（7）6 l4 U/ W4 F2 G
8-8 注册&登录（1）
* @, @- U) s. z, }8-9 注册&登录（2）8 M7 R( U8 b8 w+ G `+ q% G1 j
3 i/ ?$ p' S5 v, k! Z7 O5 ^/ Z% w
第9章 开发美团网首页-Search搜索
) J0 J, N7 N7 F! Y只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
9 T! \# @6 L f3 C9-1 城市服务
7 f; ]. o* ~/ V t1 U9-2 菜单数据
; i. @0 v2 \: |8 q, g9-3 Geo接口实现
# I6 _! m n3 h6 ?9 @9-4 Search接口实现（1）
* D9 i- Z: J, E t9-5 Search接口实现（2）
8 O$ `! h/ l) V7 |' A. P
5 y; ?2 X6 u" x% ~, Z第10章 切换城市页5 {; b+ T4 N8 ~# g. y# R
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。. D1 o' o( |/ T2 {4 R
10-1 切换城市（1）6 Q& d3 e/ s- U
10-2 切换城市（2）0 Z5 R; c4 i" p9 }& t4 y% _" P
10-3 切换城市（3）) Q0 n5 Y: V' C9 C
; p! T& v6 A3 t
第11章 美团网产品列表页
9 ~# q5 e `3 w3 A点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。% \' L2 w) f- Q: _* l( x$ v0 i
11-1 页面设计（1）* T9 T( z( Y1 b
11-2 页面设计（2）
- Z, D( N0 n# F7 W3 |5 @/ c11-3 地图组件开发+ C6 W. F }* d3 N
11-4 入口文件编写（1）
- \' Q8 G: g; p+ P7 t11-5 入口文件编写（2）7 v6 ^- p0 i0 |( K* J A6 @
11-6 页面调试
4 q1 Y [! n6 B! G; L5 y6 e
- ?& H' _- A& ]/ y: J* ^第12章 美团网产品详情页开发8 y) c+ R; U! ?, J1 x P: g& e
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。. r9 h' m1 @6 |% x3 d* l0 ]( Z
12-1 需求分析 试看4 p/ A W) p9 a' h+ q& s
12-2 静态模板" E5 d! L% o# N" A2 ~
12-3 产品详情页入口-静态文件
. ?2 Y: L: q3 u12-4 产品详情页-接口
' T+ R/ v+ b2 |6 {5 F, ]( v& L- O6 e! o
第13章 购物车开发
# z& t9 {# r0 V+ ^购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定& a# B: u7 o* Q/ E) N n1 `
13-1 购物车&订单-需求分析3 @) U1 \+ f6 f' d/ l# v
13-2 购物车&订单-页面创建% o& A* g3 u' C) x
13-3 购物车接口实现0 R; l) U) E7 ]; ]% l5 ?
13-4 购物车调试
4 O7 b6 T9 J" I
1 {) z1 v; t$ A5 g2 P第14章 订单页开发
; r9 A! V9 H- n5 l. x3 w: q订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
3 l2 m: ?8 ?+ f! o; ]; F0 x+ c14-1 订单页面. L5 C9 a/ [. b ?/ i
14-2 订单接口) ^% s& x5 X% v
14-3 订单调试
: F2 x* L, ` @, {# X0 V, n% k. [
! Z: V/ j; n" y' A第15章 课程总结' q- ^9 L) }9 G
对课程整体进行回顾与总结8 p( D6 z @* ^2 A; A
15-1 课程总结
2 B" g" Q) R% @ p0 U, e3 Z9 n5 j$ y, d& U& U
【下载地址】
% k/ c" _6 z. B6 J: U, k
' c8 ?1 M3 x$ `5 Y8 j/ G- t, b4 B% u1 \% V. @* `" n- J0 c
4 i. W6 [7 I7 ?( Q
|
|
[复制链接]
a
