7 X+ O; M( Z8 ?) ^& F0 F
. Z; I( L# Q+ y, P& q" `) S- P) C6 j2 Q
【课程简介】9 B* o }! f. E# P& I
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。% p4 s) @9 P1 h; i ` l6 u; r
( O5 s& U# m( _ [% a# a【课程目录】- A+ D& e& ^- _/ Q
第1章 课程导学. h% O/ P% z+ ]
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
' W h8 C$ d3 x4 [3 N# [9 I1-1 课程导学 试看
- t: y) V& {0 W8 _, o- f6 D, @' T8 T1 I; y( X3 p( J7 F
第2章 Vue基础知识1 d" I1 u1 X: G; p
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
; P# W$ y' T3 b+ O6 T0 @2-1 概述&脚手架
. w N% C, G% d: t+ C' h6 _4 i2-2 模板语法（1）- s7 k0 `( G/ P8 \3 p& }
2-3 模板语法（2）
& k+ k( f! c% h; a2-4 样式与遍历7 U% k9 [' A8 R
2-5 事件) K& D W; i+ W% u- c8 V# ~# N
2-6 组件（1）% I' K2 Z, A# L* {$ O: y
2-7 组件（2）9 V9 `: j" b+ b) [
2-8 路由基础
% U5 ~6 c/ E2 z* t2-9 Vuex基础用例（1）4 Q% U0 b1 ^5 m4 {3 y' v. z% d
2-10 Vuex基础用例（2）9 y6 H: Y2 J8 _ D( W+ w
2-11 Vuex高级用例（1）
! q; J) `* ^5 V7 r$ w1 k/ l2-12 Vuex高级用例（2）
! X" M5 U% \: E) |# V$ U3 ~6 t+ [/ k0 ~/ A
第3章 Koa2基础知识
6 q! Y& B1 v, h3 U' v( FNode服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
8 B" e b- A* \8 P# T: M `3-1 Koa-generator
6 g" l) D$ {0 F1 e3-2 Koa异步async# ~: a/ a( j+ N2 P
3-3 Koa中间件
: S$ w4 g9 p& H1 [3-4 koa路由和cookie
5 _( Q( j% E% Q7 X4 O- K1 @. @$ w* U' J) E
第4章 Mongoose和Redis基础5 m% m5 P6 l4 g' H# e7 c" v* W% N
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。...- ]3 `1 i5 Z% z! x: Z
4-1 mongoose（1）
: Y2 r" |1 ^" u: N6 n3 H6 D1 |' a4-2 mongoose（2）; e4 F7 G9 x) g* G3 x
4-3 Redis（1）
e$ k3 J, M* O/ s# ^5 ?4-4 Redis（2）
' ^0 O! y4 Y0 }. ^ Z, T: P
, X; S7 l4 U$ X$ s4 u% J第5章 Nuxt.js基础知识2 n3 [/ H: D. {8 X. I, h( v
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。...0 j9 z+ y. B" `3 c w% }0 e
5-1 Nuxt.js基础（1）
Q6 s; @7 d7 }: Y5-2 Nuxt.js基础（2）
' S# W! ^2 r& b9 d1 ~; m5-3 Nuxt.js基础（3）" M' j, }/ F" |2 Y2 P3 X" P
5-4 Nuxt.js基础（4）. j* { w$ R% U& \/ K/ B1 Y% ~
/ b5 o' C% G7 S. z* {0 O9 X第6章 实战准备
( z5 E, t+ F+ [( R: f7 x q+ ?工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。3 C- ?! V3 Q$ k/ J) Y% s4 m4 s* U5 p) W
6-1 环境准备与项目安装
5 i: v s9 x9 O7 T; \: A7 |9 x6-2 辅助工具安装与配置改装
; z: x+ l9 u4 L6 D6 a. m1 O; H& D# \* l
第7章 开发美团网首页
0 g8 G2 d# B* @/ P从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
# [3 x5 C) C9 C$ {, I# w7-1 需求分析 试看) Q* w' R* D6 n/ T' K% Z& H- V; V$ a$ O
7-2 首页Header开发-城市定位服务设计# `2 w' B* w) X
7-3 首页Header开发-头部引导导航设计
0 H; w: D! w- G+ `* L0 H7-4 首页Header开发-搜索界面设计$ d" ^: _- L5 Z0 Q# k. s
7-5 Bug修复4 w9 e9 S2 O1 v! M% M
7-6 首页搜索' {3 m6 X8 B& I6 q0 W; o
7-7 首页菜单（1）
, ^ }6 V. f+ c; P+ v3 J7-8 首页菜单（2）
' P7 f/ G. ]$ f6 E7-9 章节小结2 B# |1 i. v2 {- Y8 y. ^) {
7-10 Footer补充, q) S, U# _# b- H; ]' D
3 c; ]) U/ F' Q* u第8章 开发美团网首页-登录注册
9 z" q9 r0 V; H! V, G' J: Y从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全4 y5 @8 n: V: c
8-1 注册（1） i c2 P1 Z0 B+ s
8-2 注册（2）( L+ U' |. ]+ g4 _& b. J' N% a
8-3 注册（3）& H7 I3 w/ y' Q. l
8-4 注册（4）
8 {% _( m5 M7 i8-5 注册（5）3 {! B3 A! |' W. y+ c
8-6 注册（6）
" [9 X% |2 ]0 Q3 T: h: M8 Y8-7 注册（7） L7 N4 H# v4 m" ^# W. Y
8-8 注册&登录（1）
/ s' O2 I, L; M7 N8-9 注册&登录（2）& c& L$ S4 g) x2 z6 Y3 i: ?
# }0 G( D+ f3 r; @
第9章 开发美团网首页-Search搜索
. Z; d0 N h8 a0 `; Z" g只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
/ U4 c j- v A0 }9-1 城市服务8 Q+ }( E m4 Z5 K2 j
9-2 菜单数据0 ]3 P1 r$ h. R$ x: D+ S
9-3 Geo接口实现6 `7 o& W" V6 Y' W, c1 A9 f
9-4 Search接口实现（1）1 k( x/ x, R. O: e
9-5 Search接口实现（2）- ~" J+ Y0 p+ f' T/ q: F: ?8 E
8 c- N; s4 s* |) }第10章 切换城市页
- l4 p: I3 V6 r) |% f; t: Q+ V切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。2 d9 p2 \" j# E) ~0 r+ [8 j; W
10-1 切换城市（1）
9 e# D# W, w9 d% S I10-2 切换城市（2）
# p Y6 h3 U7 o# Q1 ]2 y& S10-3 切换城市（3）
8 e4 s7 ]0 s" o% z' u! v& K3 d9 B- G0 |5 C9 G7 f5 n3 v
第11章 美团网产品列表页# g; ~: H/ a7 _8 Z+ w
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。7 ?) V5 w* C3 a' u# k! F1 g4 _
11-1 页面设计（1）
5 L4 D" k G" e; k) X% {+ q11-2 页面设计（2）
/ [ @* T, }/ M) B- z9 e11-3 地图组件开发
2 l5 o% G# L: p& _; ^5 y11-4 入口文件编写（1）
% W9 F+ I. |, P K11-5 入口文件编写（2）
( F: D. S$ u. G' C11-6 页面调试
9 F- t% Q7 n$ ~% U8 D" r, Y9 e1 }7 Y; l3 A4 Z9 v$ B! k/ m
第12章 美团网产品详情页开发
! ]& `! Q) {& r9 f( b u) V' c' ?产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。7 u% ]8 b# d7 s' F9 G1 \
12-1 需求分析 试看% L% Q* d2 i5 Q; k' J+ D# A4 _
12-2 静态模板, w+ c0 }( M/ A8 b1 q
12-3 产品详情页入口-静态文件
" i! d: r$ s2 _12-4 产品详情页-接口
% d1 U& T: e+ J2 T& l) G7 ^' L8 Z# X6 X0 Y9 S6 a6 t0 [
第13章 购物车开发
# p! t: [* ]! C购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
3 |" x( h0 a" F& Y- F3 I* H1 m$ G* k13-1 购物车&订单-需求分析* _ e4 c, g1 w( F* H& p7 z
13-2 购物车&订单-页面创建
! Y1 v1 u! Y" P/ B13-3 购物车接口实现1 {3 C/ J1 ^& |
13-4 购物车调试
: F$ F/ u O, H. c+ h5 U9 Z: y) `5 x
第14章 订单页开发( O8 U k8 p6 L) Y! v) Q; S7 s
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。- y* Z2 i8 \% }& j
14-1 订单页面( x6 B# o) C( J% f5 l' R
14-2 订单接口
4 ^6 i4 S K1 O* |9 }" x14-3 订单调试/ W7 q( w5 X, I8 p- T% u
9 ^4 j' j4 s0 U. o9 y+ H% q
第15章 课程总结
0 ?$ p0 _+ l) }9 } [0 @对课程整体进行回顾与总结 b' g7 }+ q' `# e3 G
15-1 课程总结7 m6 @4 @' [8 Q; G0 W7 b' F" @% |
( h! w! `- q0 w9 T4 G% A0 }【下载地址】
! q" C! A4 g& P$ m1 D: g
5 w6 n0 I0 x7 y9 @( `9 s9 Y
3 b% i# O7 o+ n4 f* w( z# n2 r# t, \% K$ r7 Y7 W# U; k
|
|
[复制链接]
a
