简介这是一套面向前端与全栈开发者的H5商城系统实战源码适用于快速搭建跨平台移动端电商应用解决中小商家或开发者缺乏成熟商城底座、配置复杂、模块不全等痛点。资源包含345个文件主体为52个PHP后端逻辑文件如goods.php、orderpay.php、notify.php等、59个JS交互脚本、24个CSS样式文件及153个GIF动效资源覆盖网站配置、短信通知、微信/支付宝支付对接、商品与订单全生命周期管理、工单响应、分站运营及提现审核等核心功能模块.htaccess与SQL文件保障环境部署与数据初始化。压缩包仅13.62MB结构清晰、注释完整含多套UI组件备份如layui.css.bak、element.js.bak便于版本回溯与定制。已有264人学习下载可直接部署调试快速掌握H5商城的前后端协同逻辑与电商系统工程化实践路径。1. 项目概述与核心价值最近在整理过往项目资料时翻出了一个我几年前深度参与并重构过的H5商城系统源码。这套系统在当时是为一个中型电商项目定制的后来经过多次迭代和优化已经形成了一个功能相当完整、架构清晰的“全家桶”。考虑到现在仍有不少个人开发者、初创团队或是对全栈开发感兴趣的朋友在寻找一个能跑起来、能学明白、还能二次开发的商城项目我觉得是时候把它整理出来并附上详细的部署和二次开发教程了。这套源码的核心价值在于“完整”和“亲测”。它不是那种东拼西凑、只能看不能跑的演示Demo。从用户端H5页面、后台管理到服务器API、数据库设计乃至支付、短信、物流对接等核心业务模块都是完整且经过线上环境验证的。你拿到手后按照教程一步步操作就能在本地或自己的服务器上搭建出一个功能齐全的移动端商城。对于学习者你可以清晰地看到一个电商系统从前端到后端的数据流转和业务逻辑对于创业者你可以基于此快速搭建MVP最小可行产品节省大量从零开发的时间和成本。2. 技术栈选型与架构解析2.1 前后端分离的现代架构这套系统采用了典型的前后端分离架构这是目前中大型Web应用的主流选择。前后端通过定义良好的API接口进行通信职责清晰便于团队协作和独立部署。前端H5移动端基于Vue.js生态构建。选择Vue而非React或原生开发主要考虑到其渐进式、易上手的特点以及极其丰富的生态系统如Vant UI移动端组件库。我们使用Vue CLI创建项目配合Vue Router管理路由Vuex进行状态管理并采用Axios处理HTTP请求。这种组合能快速搭建出体验流畅、接近原生App的H5页面。后端API服务核心服务使用Node.js Koa2框架。为什么不选更流行的ExpressKoa2基于ES6的async/await以更优雅的方式处理异步避免了“回调地狱”中间件机制也更轻量、更符合现代编程思想。数据库方面选择了关系型数据库MySQL作为主存储用于存储用户、商品、订单等强关系型数据同时使用Redis作为缓存和会话存储极大提升热点数据如商品详情、首页配置的访问速度和并发处理能力。后台管理系统这是一个独立的SPA单页应用同样使用Vue.js开发但搭配了Element UI这套非常适合后台的桌面端组件库。它与前端H5共享同一个后端API服务确保了数据和管理逻辑的一致性。注意技术栈的选型是平衡了性能、开发效率、团队技能和社区活跃度的结果。对于初创项目不建议盲目追求最新最炫的技术稳定、可控、有成熟解决方案的栈才是首选。2.2 核心业务模块设计一个商城系统远不止展示商品和下单那么简单。其核心业务模块的设计直接决定了系统的稳定性和扩展性。用户中心模块除了基础的注册、登录支持密码、短信验证码、第三方授权登录还包含了用户资料管理、收货地址管理、账户安全绑定手机、修改密码等功能。这里的关键是令牌Token鉴权机制。用户登录成功后后端会生成一个JWTJSON Web Token返回给前端前端在后续请求的Header中携带此Token。后端通过验证Token的合法性和有效性来识别用户身份避免了传统的Session在分布式环境下的同步问题。商品模块这是电商的核心。设计上采用了分类品牌属性的SPU/SKU模型。SPUStandard Product Unit标准化产品单元定义了一组具有相同属性如iPhone 14的商品。SKUStock Keeping Unit库存量单位是SPU的具体化由特定的属性组合确定如iPhone 14 红色 256GB。这种设计能灵活应对商品的多规格、多属性需求。商品表结构设计时需要仔细考虑分类的无限级联、商品属性的可扩展性以及SKU与库存、价格的关联。购物车与订单模块购物车设计为用户登录后与账号绑定数据持久化在服务端。这样做的好处是多端同步用户换设备登录后购物车内容仍在。订单模块是最复杂的业务之一涉及状态机管理。一个订单从生成待支付到完成交易成功或关闭取消、超时中间可能经历支付中、已发货、已收货、退款中等多个状态。我们使用状态模式来管理订单生命周期每个状态对应特定的可操作集合和业务规则代码清晰且易于维护。支付与财务模块接入了主流的支付渠道如微信支付、支付宝支付。支付流程的设计要点是异步通知和幂等性处理。用户支付成功后支付平台会回调我们系统提供的通知接口。这个接口必须做好签名验证防止伪造请求并且处理逻辑要保证幂等即同一笔支付通知多次调用结果一致避免重复给用户加钱或发货。财务流水表会清晰记录每一笔资金的进出。营销与运营模块包括优惠券满减、折扣、无门槛、秒杀活动、拼团等功能。这些功能对高并发和数据库锁有很高要求。例如秒杀我们采用了“缓存预减库存 消息队列异步下单”的策略。秒杀开始前将商品库存加载到Redis中。用户抢购时先在Redis中预减库存快速返回结果。减库存成功的请求被放入消息队列如RabbitMQ由后台服务异步、串行地处理真正的创建订单、扣减数据库库存等耗时操作从而将数据库的压力降到最低。3. 本地环境搭建与项目启动3.1 开发环境准备工欲善其事必先利其器。在开始之前请确保你的电脑上已经安装好了以下基础软件这是项目能跑起来的先决条件。Node.js 与 npm/yarn后端服务和前端构建都依赖Node.js。建议安装LTS长期支持版比如16.x或18.x。安装完成后在命令行输入node -v和npm -v检查版本。国内用户建议立即配置npm淘宝镜像以加速依赖下载npm config set registry https://registry.npmmirror.com你也可以选择安装yarn作为包管理器速度更快。MySQL 数据库去MySQL官网下载安装包安装过程中记住你设置的root密码。安装完成后建议使用Navicat或MySQL Workbench这类图形化工具来管理数据库比命令行更直观。你需要创建一个新的数据库比如命名为h5_mall字符集选择utf8mb4以支持完整的Emoji表情。Redis从Redis官网下载Windows版本或使用Linux/Mac的包管理器安装。安装后启动Redis服务。Redis默认运行在6379端口无需密码。在生产环境务必设置密码代码编辑器Visual Studio Code (VSCode)是绝佳选择轻量且插件生态丰富。务必安装插件VeturVue语法高亮、ESLint代码规范、Prettier代码格式化、GitLens版本管理。3.2 源码获取与结构解析源码通常托管在Git代码仓库如GitHub、Gitee上。你可以通过git clone命令将项目下载到本地。git clone [你的仓库地址] h5-mall cd h5-mall项目根目录结构大致如下理解它有助于你快速定位代码h5-mall/ ├── server/ # 后端Node.js服务 │ ├── src/ │ │ ├── config/ # 配置文件数据库、Redis、JWT密钥等 │ │ ├── controller/ # 控制器处理请求和返回响应 │ │ ├── service/ # 业务逻辑层核心计算和处理 │ │ ├── model/ # 数据模型定义表结构和关系 │ │ ├── middleware/ # 中间件如权限验证、日志记录 │ │ └── router/ # 路由定义将URL映射到控制器 │ ├── package.json │ └── app.js # 应用入口文件 ├── client-h5/ # 前端H5项目 │ ├── src/ │ │ ├── api/ # 所有后端接口的封装 │ │ ├── assets/ # 静态资源图片、样式 │ │ ├── components/ # 公共Vue组件 │ │ ├── router/ # 前端路由 │ │ ├── store/ # Vuex状态管理 │ │ ├── views/ # 页面组件 │ │ └── main.js # 前端入口文件 │ └── package.json ├── admin/ # 后台管理系统项目结构类似client-h5 ├── database/ # 数据库SQL文件建表语句、初始数据 └── README.md # 项目说明文档3.3 后端服务启动与配置后端是整个系统的大脑我们先把它跑起来。安装依赖进入server目录运行npm install。这个过程可能会持续几分钟取决于网络速度。数据库初始化用你的数据库工具如Navicat连接MySQL然后运行database/init.sql文件。这个SQL文件会创建所有必要的表并可能插入一些测试数据如管理员账号、商品分类。配置文件修改找到server/src/config目录下的配置文件可能是dev.js或default.js。你需要修改以下几处关键配置// 示例配置 module.exports { database: { host: localhost, // 数据库地址 port: 3306, user: root, // 你的数据库用户名 password: your_password, // 你的数据库密码 database: h5_mall // 你创建的数据库名 }, redis: { host: localhost, port: 6379, // password: your_redis_password // 如果Redis有密码取消注释并填写 }, jwtSecret: your_super_secret_jwt_key, // 用于生成Token的密钥务必修改为一个复杂的随机字符串 // 微信支付、支付宝、短信等第三方服务的配置后续接入时再填写 };启动服务在server目录下运行npm run dev。如果看到类似Server is running on port 3000的日志说明后端API服务已经成功启动。此时你可以用Postman或浏览器访问http://localhost:3000/api/v1/health-check假设有这个健康检查接口来测试服务是否正常。实操心得配置文件里千万不要把敏感信息如密码、密钥直接提交到Git仓库最佳实践是创建一个config.example.js文件里面只写配置项的结构和说明而真正的配置config.js则被添加到.gitignore中。每个开发者在本地复制一份example文件并填写自己的配置。3.4 前端H5项目启动后端跑通后前端就相对简单了。安装依赖进入client-h5目录运行npm install。配置API地址前端需要知道后端服务的地址。通常这个配置在src/config目录下或src/api/request.js这样的请求封装文件中。找到baseURL或API_HOST这样的变量将其设置为你的后端服务地址例如http://localhost:3000。启动开发服务器运行npm run serve。Vue CLI会启动一个本地开发服务器并自动打开浏览器通常是http://localhost:8080。你会看到一个商城的H5首页。热重载功能让你修改代码后页面能即时刷新。按照同样的步骤进入admin目录安装依赖并运行即可启动后台管理系统。默认的登录账号密码通常在README.md或数据库初始化脚本中注明。至此一个完整的H5商城系统就在你的本地运行起来了。你可以从前端浏览商品、加入购物车、模拟下单同时在后台管理系统中管理商品、处理订单体验完整的闭环流程。4. 核心功能二次开发指南4.1 如何添加一个新的API接口假设我们要增加一个“用户签到”的功能这涉及到前后端联调是很好的学习案例。后端部分Node.js Koa2定义数据模型在server/src/model目录下可能需要新建或修改UserSign.js定义签到记录表的结构用户ID、签到日期、连续天数等。创建业务逻辑在server/src/service目录下创建signService.js。这里写核心逻辑检查用户今日是否已签到若未签到则创建记录、更新连续天数、增加积分等。// signService.js 示例 const { UserSign } require(../model); // 引入模型 class SignService { async doSign(userId) { const today new Date().toISOString().split(T)[0]; // 获取今日日期YYYY-MM-DD // 1. 查询今日是否已签到 const exist await UserSign.findOne({ where: { userId, signDate: today } }); if (exist) { throw new Error(今日已签到); } // 2. 查询昨日签到记录计算连续天数 const yesterday new Date(Date.now() - 86400000).toISOString().split(T)[0]; const lastSign await UserSign.findOne({ where: { userId, signDate: yesterday } }); const consecutiveDays lastSign ? lastSign.consecutiveDays 1 : 1; // 3. 创建今日签到记录 await UserSign.create({ userId, signDate: today, consecutiveDays }); // 4. 给用户增加积分假设10分 const user await User.findByPk(userId); user.points 10; await user.save(); return { consecutiveDays, pointsAdded: 10 }; } } module.exports new SignService();创建控制器在server/src/controller目录下创建signController.js。控制器负责接收请求、调用服务、处理响应和异常。// signController.js 示例 const signService require(../service/signService); class SignController { async sign(ctx) { const userId ctx.state.user.id; // 从JWT Token中获取当前用户ID try { const result await signService.doSign(userId); ctx.body { code: 200, message: 签到成功, data: result }; } catch (error) { ctx.body { code: 400, message: error.message }; } } } module.exports new SignController();注册路由在server/src/router目录下的某个路由文件如user.js中添加新路由。const Router require(koa-router); const router new Router({ prefix: /api/v1/user }); const signController require(../controller/signController); const authMiddleware require(../middleware/auth); // 引入鉴权中间件 // 签到接口需要用户登录携带有效Token router.post(/sign, authMiddleware, signController.sign); module.exports router;前端部分Vue.js封装API请求在client-h5/src/api目录下创建或修改user.js文件添加签到接口。// api/user.js import request from /utils/request; // 导入封装好的axios实例 export function userSign() { return request({ url: /user/sign, // 对应后端路由 method: post }); }在页面中调用在用户中心的Vue组件中引入API并调用。template div button clickhandleSign :disabledisSigned每日签到/button p连续签到 {{ consecutiveDays }} 天/p /div /template script import { userSign } from /api/user; export default { data() { return { isSigned: false, consecutiveDays: 0 }; }, methods: { async handleSign() { try { const res await userSign(); if (res.code 200) { this.$toast.success(签到成功积分10); this.isSigned true; this.consecutiveDays res.data.consecutiveDays; } else { this.$toast.fail(res.message); } } catch (error) { this.$toast.fail(网络错误); } } } }; /script通过这个完整的流程你就实现了一个新功能。关键在于理解MVC或分层架构的思想路由定义接口路径控制器调度服务处理业务模型操作数据。4.2 定制化页面与组件商城的前端页面主要由一个个Vue组件构成。假设你想修改商品详情页的样式或逻辑。定位文件在client-h5/src/views目录下找到商品详情页组件可能是GoodsDetail.vue。修改模板与样式在template部分调整HTML结构在style部分修改CSS。Vue的单文件组件让这一切非常直观。调整业务逻辑在script部分你可以修改数据获取方式created或mounted生命周期钩子中调用API、处理用户交互的方法等。复用组件如果你发现某个UI元素比如一个优惠券卡片在多处使用就应该把它抽离成公共组件。在src/components目录下新建一个CouponCard.vue文件通过props接收父组件传入的数据如优惠券信息通过events向父组件通信如点击使用。然后在需要的页面中引入并注册这个组件。注意事项修改前端页面时尤其是样式要特别注意移动端的适配。多使用Flex布局、百分比、vw/vh单位并利用Chrome开发者工具的移动设备模拟器进行测试确保在不同尺寸屏幕下显示正常。4.3 接入第三方服务以微信支付为例支付是商城的关键环节。接入微信支付H5版的大致流程如下申请与配置在微信支付商户平台申请开通H5支付获取商户号mchid、API密钥key等。在后端配置文件中填入这些信息。后端统一下单在后端创建一个支付服务如wxPayService。当用户提交订单时后端调用微信支付统一下单接口。核心步骤是按照微信要求的格式和顺序生成签名。签名算法通常是HMAC-SHA256必须完全正确一个参数顺序错误或遗漏都会导致失败。// 伪代码展示签名生成逻辑 const crypto require(crypto); function generateSign(params, key) { // 1. 参数按ASCII码从小到大排序 const sortedKeys Object.keys(params).sort(); let signStr ; for (let k of sortedKeys) { if (params[k] k ! sign) { // 跳过空值和sign本身 signStr ${k}${params[k]}; } } signStr key${key}; // 最后拼接API密钥 // 2. MD5或HMAC-SHA256加密并转为大写 return crypto.createHash(md5).update(signStr).digest(hex).toUpperCase(); }统一下单接口成功后微信会返回一个包含prepay_id的响应。后端需要再次生成一组支付参数包含appId,timeStamp,nonceStr,package,signType,paySign返回给前端。前端调起支付前端收到支付参数后使用微信JS-SDK需要先引入并配置的WeixinJSBridge.invoke(getBrandWCPayRequest, ...)或更现代的wx.chooseWXPay来调起支付窗口。处理支付结果用户支付完成后微信会异步通知到你在统一下单时设置的notify_url。这个回调接口的代码必须高效、幂等、安全。要验证回调签名防止伪造处理业务更新订单状态为已支付后必须返回一个格式为xmlreturn_code![CDATA[SUCCESS]]/return_code/xml的成功响应给微信否则微信会认为通知失败而反复重试。整个支付流程涉及前后端配合、加密签名和异步通信是调试的重点和难点。强烈建议先使用微信支付的沙箱环境进行测试。5. 部署上线与性能优化5.1 服务器环境准备与部署本地开发完成后最终需要部署到线上服务器。这里以一台Linux服务器如CentOS 7为例。服务器基础配置购买云服务器配置安全组开放必要端口如80-HTTP, 443-HTTPS, 22-SSH, 3306-MySQL, 6379-Redis生产环境建议只开放80/443/22数据库和Redis用内网访问或修改端口并设置IP白名单。通过SSH连接服务器更新系统并安装基础工具如Git, vim。安装运行环境Node.js建议使用nvm安装和管理多版本Node。MySQL Redis使用yum或apt包管理器安装并设置开机自启。务必修改默认密码进行安全加固。Nginx作为反向代理服务器和静态资源服务器。安装后配置站点。项目部署将代码上传到服务器如通过Git克隆。在服务器上运行npm install --production安装生产环境依赖只安装package.json中dependencies的包不安装devDependencies。修改生产环境配置文件如config/prod.js填入线上数据库、Redis、域名等配置。使用PM2进程管理器来启动和守护Node.js应用。PM2可以在应用崩溃时自动重启还能方便地查看日志和监控性能。npm install -g pm2 cd /path/to/your/server pm2 start app.js --name h5-mall-api pm2 save pm2 startup # 设置开机自启配置Nginx编辑Nginx配置文件如/etc/nginx/conf.d/mall.conf主要做两件事反向代理将域名如api.yourdomain.com的请求转发到Node.js服务如http://localhost:3000。托管前端静态文件将域名如www.yourdomain.com的根目录指向前端项目构建后的dist文件夹。# API服务反向代理 server { listen 80; server_name api.yourdomain.com; location / { proxy_pass http://localhost:3000; proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } # 前端H5静态文件服务 server { listen 80; server_name www.yourdomain.com; root /path/to/client-h5/dist; index index.html; location / { try_files $uri $uri/ /index.html; # 支持Vue Router的history模式 } # 配置静态资源缓存 location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ { expires 1y; add_header Cache-Control public, immutable; } }配置完成后运行nginx -t测试配置无误后systemctl reload nginx重载。5.2 前端项目构建与优化开发环境下的代码包含大量源码映射、未压缩的代码和调试信息不适合直接用于生产。需要构建。执行构建在前端项目目录下运行npm run build。Vue CLI会启动构建流程进行代码压缩、混淆、Tree Shaking移除未使用代码、分割代码块等优化最终在dist目录生成优化后的静态文件。构建优化配置在vue.config.js文件中可以进行深度优化开启Gzip压缩使用compression-webpack-plugin插件生成.gz文件Nginx配置后可以大幅减少传输体积。配置公共库CDN将vue,vuex,vue-router,axios等不常变动的库通过script标签从CDN引入并在webpack配置中声明为externals可以显著减小vendor包体积利用浏览器缓存。图片优化使用image-webpack-loader自动压缩图片。分析构建产物运行npm run build -- --report会生成一个分析报告report.html用浏览器打开可以直观看到各个模块的体积便于针对性地进行优化。5.3 性能与安全加固建议系统上线后性能和安全是生命线。性能方面数据库优化为高频查询的字段如user_id,goods_id,order_no建立索引。避免SELECT *只查询需要的字段。复杂查询注意分析执行计划。Redis缓存策略将热点数据如首页配置、商品分类、热门商品信息缓存到Redis并设置合理的过期时间。对于秒杀库存使用Redis的原子操作如DECR来保证一致性。接口防抖与限流对于短信验证码、登录等接口在后端增加限流如使用express-rate-limit中间件防止恶意刷接口。静态资源优化如前所述使用Nginx开启Gzip配置强缓存Cache-Control将图片、字体等上传至对象存储如阿里云OSS、腾讯云COS并通过CDN加速。安全方面SQL注入防护使用ORM如Sequelize或参数化查询绝对不要直接拼接SQL字符串。XSS跨站脚本防护对用户输入进行过滤和转义。Vue/React等框架默认提供了一定的XSS防护但服务端渲染或直接操作DOM时仍需谨慎。CSRF跨站请求伪造防护确保敏感操作如修改密码、下单使用POST等非简单请求并可考虑使用Token如从Cookie中读取并验证。敏感信息保护配置文件中的密钥、数据库密码等必须使用环境变量管理严禁写入代码。日志中不要记录密码、银行卡号等敏感信息。HTTPS强制购买SSL证书在Nginx中配置HTTPS并将HTTP请求重定向到HTTPS。这是现代网站的标配。6. 常见问题排查与调试技巧在实际开发和部署中你一定会遇到各种问题。这里记录一些典型问题的排查思路。6.1 前端常见问题页面空白控制台报错Uncaught SyntaxError或Failed to load resource可能原因构建后的静态资源路径错误。检查vue.config.js中的publicPath配置。如果项目部署在子路径如https://domain.com/mall/需要设置为/mall/。排查打开浏览器开发者工具的Network面板查看JS、CSS文件是否404。核对请求的URL与实际文件路径。接口请求报错404或Network Error可能原因前端请求的API地址baseURL配置错误后端服务未启动Nginx反向代理配置错误。排查首先在浏览器直接访问完整的API地址如http://api.yourdomain.com/api/v1/health看是否能通。如果不通检查服务器上Node服务是否在运行pm2 list检查Nginx配置和日志/var/log/nginx/error.log。H5页面在微信内无法调起支付或分享可能原因微信JS-SDK配置错误。需要后端提供签名signature给前端前端通过wx.config初始化。排查使用微信开发者工具或开启微信调试模式debug:true在控制台查看wx.config是否报错。确保用于签名的url是当前页面的完整URL不包含#及其后面部分且jsApiList中包含了需要使用的API如chooseWXPay,updateAppMessageShareData。6.2 后端常见问题数据库连接失败Access denied for user或Can‘t connect to MySQL server可能原因配置文件中数据库密码错误数据库用户权限不足如只能从localhost连接但服务器IP变了MySQL服务未启动服务器防火墙或云服务商安全组未开放3306端口。排查在服务器上使用命令行mysql -u root -p测试是否能连接。检查MySQL的user表确认用户的主机权限%表示任意主机。检查服务状态systemctl status mysqld。Redis连接失败Redis connection to 127.0.0.1:6379 failed可能原因Redis服务未启动Redis配置了密码但代码中未配置内存不足导致Redis崩溃。排查redis-cli ping看是否返回PONG。检查Redis配置文件redis.conf中的bind和requirepass设置。查看Redis日志。JWT Token验证失败可能原因前后端用于签名的密钥jwtSecret不一致Token已过期Token格式被篡改。排查检查后端生成Token和验证Token时使用的密钥是否完全相同。使用在线工具如jwt.io解码Token查看其中的exp过期时间字段。确保前端在请求头中正确携带了TokenAuthorization: Bearer token。6.3 部署与线上问题PM2应用频繁重启可能原因应用内存泄漏超出PM2默认内存限制后自动重启代码中有未捕获的异常导致进程退出。排查使用pm2 logs app_name查看应用日志寻找崩溃前的错误信息。使用pm2 monit监控内存和CPU使用情况。在代码中全局捕获Promise异常process.on(unhandledRejection, ...)和同步异常process.on(uncaughtException, ...)记录日志并优雅退出。服务器CPU或内存占用过高可能原因代码中存在低效循环或死循环数据库查询未加索引导致全表扫描被恶意爬虫或CC攻击。排查使用top命令查看哪个进程占用高。如果是Node进程可以使用Node.js性能分析工具如clinic.js或v8-profiler来生成火焰图定位热点函数。检查数据库慢查询日志。在Nginx层面设置请求频率限制屏蔽异常IP。上传文件失败或速度慢可能原因Nginx或后端服务对请求体大小有限制服务器带宽不足前端未做分片上传。排查调整Nginx配置client_max_body_size调整Koa的body解析中间件大小限制。对于大文件建议直接由前端上传至对象存储OSS/COS后端只负责返回上传凭证这样可以避免流量经过应用服务器提升性能和稳定性。调试是一个系统性工程核心思路是缩小范围、查看日志、复现问题。养成良好习惯在代码关键位置打日志使用winston,log4js等日志库区分不同级别善用开发者工具和服务器监控工具大部分问题都能迎刃而解。本文还有配套的精品资源点击获取