这门课解决什么工作场景

很多上班族和转行者在学完前端和后端的基础语法后，都会卡在同一个瓶颈：能写出静态页面，也能用框架写出简单的接口，但不知道怎么把两者拼成一个能跑通真实业务的完整系统。这门以美团网为业务原型的实战课，解决的就是前后端分离开发中的串联问题。它不是教你某个框架的零碎语法，而是带你走通一个生活服务类电商网站的核心闭环：从首页多级分类展示、商家列表筛选，到最终的在线支付接入。对于想做全栈开发、或者需要独立负责业务模块的人来说，这种把 Vue2 前端与 Python Flask 后端对接联调的经验，正是日常工作中最吃紧的环节。

适合什么基础与建议先看的模块

这门资料不适合完全零基础的人。你需要对 HTML、CSS 有基本了解，能看懂简单的 Python 逻辑，最好已经写过一两个 Vue 的页面组件或 Flask 的测试接口。如果你连变量循环都吃力，建议先补基础再来看。对于符合基础要求的读者，建议不要按顺序一节节看，而是先看项目演示与环境搭建这两块，对最终要做成什么样有整体认知。接着直接跳到美团主页和美食页面的数据获取部分，这是前后端联调最密集的区域。重点观察前端怎么发请求、后端怎么查数据库并返回数据、前端拿到数据后怎么渲染到页面，把这套数据流转机制吃透，比单纯敲代码更有价值。

资料怎么用与学完能做什么

这套资料是视频演示形式，配合练习时一定要自己搭环境跑通。建议准备一个代码编辑器，跟着视频把前端项目和后端接口分别在本地跑起来。遇到数据库建表和接口联调部分，先暂停视频自己试着写，卡住了再对照视频里的写法找问题。支付功能那块涉及第三方接口调用，如果不想用真实账号，可以用沙箱环境模拟，但配置流程一定要自己走一遍。学完这套资料，你应该能独立完成一个带分类导航、列表筛选、详情展示和支付闭环的小型 Web 应用。无论是去公司接手前后端分离项目的业务模块，还是自己接外包做个生活服务类的小网站，这套从数据库设计到前端展示再到支付串联的完整经验，都能作为你的底气。


本课程采用step by step方式的项目实战课程，通过项目实战，可是学员通过模拟美团网的实现，了解如何将Vue2、jQuery、Python、Flask结合起来，实现一个完整的Web应用，同时，还学习如何将真实的支付功能嵌入在Web应用中。

课程目录

*   01 准备工作/

  *   01 项目演示.mp4 03:47

  *   02 开发环境搭建.mp4 03:56

*   02 美团主页/

  *   01 从数据库中获取美团分类信息.mp4 17:31

  *   02 在美团首页显示分类信息.mp4 07:04

  *   03 从数据库中获取美食子分类.mp4 06:03

  *   04 在首页显示美食详细分类.mp4 13:20

*   03 美食页面/

  *   01 准备美食静态页面路由.mp4 03:45

  *   02 在美食页面显示分类信息.mp4 04:16

  *   03 从数据库中获取区域信息.mp4 04:23

  *   04 让美食页面显示区域信息.mp4 03:16

  *   05 从数据库中获取店铺信息.mp4 04:46

  *   06 在美食页面显示店铺信息.mp4 02:36

  *   07 根据美食分类过滤店铺.mp4 06:08

  *   08 在前端页面显示与美食分类相关的店铺.mp4 05:48

  *   09 在前端页面显示与区域相关的店铺.mp4 06:11

  *   10 按商品价格排序.mp4 09:49

*   04 注册与登录/

  *   01 用户注册.mp4 13:19

  *   02 用户登录.mp4 08:28

  *   03 通过Session获取用户登录状态.mp4 03:40

*   05 店铺页面/

  *   01 在店铺页面显示店铺信息.mp4 20:44

  *   02 显示店铺的优惠促销信息.mp4 11:29

  *   03 显示店铺评论信息.mp4 07:17

*   06 套餐页面/

  *   01 在页面上显示套餐信息以及设置套餐购买数量.mp4 17:00

  *   02 显示该店铺的其他优惠信息.mp4 04:00

  *   03 显示套餐的细节.mp4 07:59

  *   04 显示店铺推荐信息.mp4 07:23

  *   05 在店铺页面显示店铺介绍.mp4 05:40

*   07 订单与支付/

  *   01 将订单保存到数据库中.mp4 17:21

  *   02 在订单页面显示用户昵称.mp4 06:57

  *   03 在订单页面显示订单信息.mp4 06:26

  *   04 微信支付要准备的数据以及支付流程.mp4 16:43

  *   05 编写支付核心类WXPay.mp4 29:08

  *   06 编写创建订单的路由.mp4 15:52

  *   07 查询支付订单状态.mp4 14:01

  *   08 显示支付二维码.mp4 10:52

*   08 个人中心/

  *   01 修改用户名和密码.mp4 05:17

  *   02 显示店铺的优惠促销信息.mp4 11:29

  *   03 显示订单详情（项目完结）.mp4 07:01