〖课程介绍〗:
这是一门前端全栈课程，课程中采用了许多新的技术，结合包括Vue2.5、Koa2、MongoDB、Redis等多种前后端技术完成了美团网的开发。课程从新技术的基础讲解入手，通过细致的项目开发过程，带你开发一个美团网PC网页版，同学们通过这门课程的学习可以掌握更全面的项目架构，迅速提升，达到高级工程师的水平。
〖课程目录〗:
-
第1章 课程导学 试看1 节 | 15分钟
-
这门课主讲以Vue SSR+Koa2全栈技术为目标，最终实现美团网项目。本章节旨在告诉大家我们会用到哪些技能、教学方法、课程内容分布、学习方法等。备注：我们会涉及Vue2.5、Nuxt、Koa2、element-ui、Mongodb等
-
收起列表
-
视频：1-1 课程导学 (14:56)试看
-
第2章 Vue基础知识12 节 | 179分钟
-
整个SSR部分都是用的Vue框架，需要给初级用户讲解Vue的基础语法，不会让他们在学习实战的时候感到迷茫，这个章节会通过vue-cli搭建一个简单的demo，让大家快速的掌握Vue的基础应用，即使他没有学习过。
-
收起列表
-
视频：2-1 概述&脚手架 (11:02)
-
视频：2-2 模板语法（1） (16:00)
-
视频：2-3 模板语法（2） (20:18)
-
视频：2-4 样式与遍历 (19:40)
-
视频：2-5 事件 (15:42)
-
视频：2-6 组件（1） (12:50)
-
视频：2-7 组件（2） (12:55)
-
视频：2-8 路由基础 (22:08)
-
视频：2-9 Vuex基础用例（1） (18:41)
-
视频：2-10 Vuex基础用例（2） (09:52)
-
视频：2-11 Vuex高级用例（1） (15:51)
-
视频：2-12 Vuex高级用例（2） (03:55)
-
第3章 Koa2基础知识4 节 | 62分钟
-
Node服务是全栈的核心，异步操作是为了提高并发数，koa2最大的特色就是灵活、轻巧，这都要归功于中间件机制。路由、数据库连接都是中间件的一种，通过这个章节的学习让大家掌握服务端开发基本技能。
-
收起列表
-
视频：3-1 Koa-generator (08:41)
-
视频：3-2 Koa异步async (16:45)
-
视频：3-3 Koa中间件 (25:42)
-
视频：3-4 koa路由和cookie (10:27)
-
第4章 Mongoose和Redis基础4 节 | 64分钟
-
mongoose是mongodb的对象模型管理工具，使用mongoose可以更简单的操作mongodb数据库，通过可视化工具的robo 3t的介绍，任何数据库操作都可以直观的感受到，非常利于数据库操作的学习。redis是服务端开发必备的工具之一，通过本章的学习可以快速掌握常用redis命令以及在node中的应用。…
-
收起列表
-
视频：4-1 mongoose（1） (19:39)
-
视频：4-2 mongoose（2） (21:19)
-
视频：4-3 Redis（1） (11:41)
-
视频：4-4 Redis（2） (10:20)
-
第5章 Nuxt.js基础知识4 节 | 81分钟
-
Nuxt是Vue实现SSR最好的方案，我们整个项目都是基于Nuxt框架来实现的，我们需要了解如何通过脚手架快速初始化一个工程项目，熟悉每个目录的含义，知道如何配置各个页面的视图、模板、异步获取数据等。这个章节让学员快速掌握Nuxt本身的知识点，为实战做好准备。…
-
收起列表
-
视频：5-1 Nuxt.js基础（1） (17:01)
-
视频：5-2 Nuxt.js基础（2） (20:45)
-
视频：5-3 Nuxt.js基础（3） (28:52)
-
视频：5-4 Nuxt.js基础（4） (13:25)
-
第6章 实战准备2 节 | 25分钟
-
工程搭建使用Nuxt脚手架快速搭建工程，这块是通用的，所有学员都可以直接应用到自己的项目。
-
收起列表
-
视频：6-1 环境准备与项目安装 (11:19)
-
视频：6-2 辅助工具安装与配置改装 (13:05)
-
第7章 开发美团网首页 试看10 节 | 135分钟
-
从需求分析到设计思路讲述再通过手把手的引导实现首页设计，在功能上包括城市定位服务，头部引导导航，搜索等。
-
收起列表
-
视频：7-1 需求分析 (18:51)试看
-
视频：7-2 首页Header开发-城市定位服务设计 (19:16)
-
视频：7-3 首页Header开发-头部引导导航设计 (11:13)
-
视频：7-4 首页Header开发-搜索界面设计 (27:20)
-
视频：7-5 Bug修复 (01:50)
-
视频：7-6 首页搜索 (14:29)
-
视频：7-7 首页菜单（1） (14:07)
-
视频：7-8 首页菜单（2） (20:13)
-
视频：7-9 章节小结 (04:26)
-
视频：7-10 Footer补充 (02:13)
-
第8章 开发美团网首页-登录注册9 节 | 127分钟
-
从静态页面实现到真实的业务逻辑，一步一步带领大家实现注册、登录、退出，其中还用到了第三方RTMP服务，在技术上mongodb，passport,redis一应俱全
-
收起列表
-
视频：8-1 注册（1） (23:26)
-
视频：8-2 注册（2） (21:05)
-
视频：8-3 注册（3） (09:02)
-
视频：8-4 注册（4） (10:35)
-
视频：8-5 注册（5） (18:12)
-
视频：8-6 注册（6） (08:01)
-
视频：8-7 注册（7） (13:38)
-
视频：8-8 注册&登录（1） (11:40)
-
视频：8-9 注册&登录（2） (10:36)
-
第9章 开发美团网首页-Search搜索5 节 | 87分钟
-
只用7个模板dom节点实现复杂的搜索框，一改传统的dom结构设计，充分利用组件设计特性，让业务做到极致。除了交互，也使用了搜索、推荐等真实的线上数据服务，为大家提供真实的体验。
-
收起列表
-
视频：9-1 城市服务 (23:06)
-
视频：9-2 菜单数据 (12:45)
-
视频：9-3 Geo接口实现 (07:58)
-
视频：9-4 Search接口实现（1） (29:33)
-
视频：9-5 Search接口实现（2） (13:27)
-
第10章 切换城市页3 节 | 48分钟
-
切换城市页的难点是如何把复杂的数据内容利用数据结构设计、Vue语法并使用最简单的DOM结构完成开发。整个页面介绍了如何自定义常用的级联操作、远程搜索、中文转拼音等内容，精彩不可错过。
-
收起列表
-
视频：10-1 切换城市（1） (28:34)
-
视频：10-2 切换城市（2） (12:09)
-
视频：10-3 切换城市（3） (06:42)
-
第11章 美团网产品列表页6 节 | 77分钟
-
点击产品列表可以进入到产品详情页，详情页也有类似的推荐列表和地图服务，我们会在搜索页的时候考虑好接口的复用，重点内容在于数据结构的设计和接口的复用设计能力。
-
收起列表
-
视频：11-1 页面设计（1） (14:39)
-
视频：11-2 页面设计（2） (13:29)
-
视频：11-3 地图组件开发 (14:30)
-
视频：11-4 入口文件编写（1） (10:36)
-
视频：11-5 入口文件编写（2） (15:36)
-
视频：11-6 页面调试 (08:04)
-
第12章 美团网产品详情页开发 试看4 节 | 51分钟
-
产品详情页有购买入口，点进去进入到订单页，点击支付进入到支付页，购买完成进入到订单详情页。这块涉及较复杂的后端接口设计和数据库操作。学员可以进一步掌握真实的开发场景。
-
收起列表
-
视频：12-1 需求分析 (17:44)试看
-
视频：12-2 静态模板 (12:07)
-
视频：12-3 产品详情页入口-静态文件 (10:29)
-
视频：12-4 产品详情页-接口 (10:33)
-
第13章 购物车开发4 节 | 60分钟
-
购物车难点在于数据库的设计、是于订单相融合的一个页面，在前端页面交互上的难点是element-ui对于表格的数据绑定
-
收起列表
-
视频：13-1 购物车&订单-需求分析 (11:36)
-
视频：13-2 购物车&订单-页面创建 (21:07)
-
视频：13-3 购物车接口实现 (11:22)
-
视频：13-4 购物车调试 (15:12)
-
第14章 订单页开发3 节 | 30分钟
-
订单页是对整个产品的最后呈现页面，是课程完整性的一部分，难点在于数据库设计，前端页面无难点。
-
收起列表
-
视频：14-1 订单页面 (08:20)
-
视频：14-2 订单接口 (15:30)
-
视频：14-3 订单调试 (05:31)
-
第15章 课程总结1 节 | 10分钟
-
对课程整体进行回顾与总结
-
收起列表
-
视频：15-1 课程总结 (09:14)
-
第16章 直播视频《前端人的危机如何破解》7 节 | 85分钟
-
互联网寒冬下，前端人如何学习？
-
收起列表
-
视频：16-1 《前端人的危机如何破解》- 内容安排 (11:26)
-
视频：16-2 《前端人的危机如何破解》- 如何学习（入门级） (13:46)
-
视频：16-3 《前端人的危机如何破解》- 如何面试（入门级） (20:35)
-
视频：16-4 《前端人的危机如何破解》-如何晋升（入门级） (09:29)
-
视频：16-5 《前端人的危机如何破解》-如何学习（中高级） (10:47)
-
视频：16-6 《前端人的危机如何破解》- 如何晋升（中高级） (12:28)
-
视频：16-7 《前端人的危机如何破解》- 如何晋升（中高级） (06:21)
有需要联系v；加客服窗口的联系方式
摘要：本文深入探讨了使用Vue全家桶、SSR和Koa2技术全栈开发美团网的实践过程。文章从技术选型、项目架构、开发流程和性能优化四个方面进行了详细阐述，旨在为全栈开发者提供有益的参考和借鉴。
1、技术选型
在开发美团网时，我们选择了Vue全家桶作为前端框架，其包括Vue.js、Vuex、Vue Router等核心库，以及Element UI、Axios等周边库。Vue全家桶以其简洁的语法、高效的性能和丰富的生态，成为了当前前端开发的主流选择。
在服务端，我们采用了SSR（服务器端渲染）技术，结合Koa2框架，实现了前后端的分离。SSR技术能够提高页面加载速度，提升用户体验，同时也有利于搜索引擎优化（SEO）。
此外，我们还使用了Node.js作为服务器端运行环境，它具有高性能、轻量级的特点，能够满足美团网高并发、高负载的需求。
2、项目架构
美团网的项目架构采用了前后端分离的设计，前端负责展示和交互，后端负责数据处理和业务逻辑。具体来说，前端使用Vue全家桶构建单页面应用（SPA），后端使用Koa2框架搭建RESTful API。
在项目架构中，我们采用了模块化设计，将业务逻辑、数据接口、工具类等模块进行分离，便于代码管理和维护。同时，我们还引入了Docker容器化技术，实现了环境的标准化和自动化部署。
此外，我们还构建了持续集成/持续部署（CI/CD）流程，确保项目在开发、测试和上线过程中的稳定性和可靠性。
3、开发流程
在开发过程中，我们遵循敏捷开发模式，将项目划分为多个迭代周期，每个周期完成一部分功能。在迭代周期内，我们采用TDD（测试驱动开发）和ATDD（验收测试驱动开发）相结合的方式，确保代码质量和功能完整性。
为了提高开发效率，我们引入了Git版本控制工具，实现了代码的版本管理和多人协作。同时，我们还使用了Jenkins等自动化工具，实现了自动化测试、构建和部署。
在项目上线后，我们持续关注用户反馈，对产品进行优化和迭代，确保美团网始终保持良好的用户体验。
4、性能优化
为了提高美团网的性能，我们在多个方面进行了优化。首先，在客户端，我们采用了懒加载、代码分割等技术，减少页面加载时间。其次，在服务器端，我们优化了数据库查询、缓存策略等，提高数据处理效率。
此外，我们还关注了网络优化，通过CDN加速、图片压缩等技术，降低网络延迟。同时，我们还对代码进行了性能分析和优化，提高了代码执行效率。
在性能监控方面，我们使用了New Relic、Grafana等工具，实时监控美团网的性能指标，及时发现并解决问题。
总结：
本文详细介绍了使用Vue全家桶、SSR和Koa2技术全栈开发美团网的实践过程。通过技术选型、项目架构、开发流程和性能优化四个方面的阐述，为全栈开发者提供了有益的参考和借鉴。
本文由nayona.cn整理
联系我们
关注公众号
微信扫一扫
支付宝扫一扫
