第2章 技术选型与开发环境搭建

《微信小程序电商实战（前后端分离架构）》第2章技术选型与开发环境搭建本章目录01前后端分离架构设计理念02主流技术栈对比与选型03开发环境搭建实战04项目初始化与连通验证05常见问题排查与解决方案06本章总结与课后任务COURSECONTENTOVERVIEW为什么需要技术选型与环境搭建？工欲善其事合适的工具和环境是高效开发的前提，好的工具能让开发事半功倍。技术栈决定上限直接影响项目的性能、可维护性和未来的扩展性，选择需谨慎。统一环境协作避免因环境差异导致的“在我机器上能运行”问题，保障团队效率。本章目标从0到1搭建标准开发环境，为后续实战项目打下坚实基础。前后端分离架构设计理念传统单体架构vs前后端分离架构对比核心思想前端负责视图展示和交互，后端负责数据处理与业务逻辑，两者通过标准化API接口通信。核心优势开发效率高前后端团队并行开发，互不干扰，缩短周期。维护成本低职责边界清晰，便于快速定位和修复问题。用户体验好专注交互与视觉优化，实现更流畅的体验。扩展性强便于微服务化改造，从容应对业务复杂度提升。现代Web开发的主流架构模式·提升系统灵活性与迭代速度主流技术栈对比（前端）技术栈特点适用场景备注微信小程序

原生框架官方支持，性能好，API丰富，学习成本低微信生态内的应用开发本章选择uni-app跨平台，一套代码多端运行（小程序、App、H5）需要同时开发多端应用的项目学习成本稍高，可能有平台兼容性问题Taro类React语法，支持多端编译，社区活跃熟悉React的开发者，需要跨平台开发组件生态相对原生稍弱主流技术栈对比（后端）技术栈核心特点适用场景综合评价Node.js(Express/Koa)轻量高效，JS全栈开发，适合I/O密集型应用，开发效率极高。快速开发、中小型项目、API服务、即时通讯。★本章推荐SpringBootJava生态成熟，功能强大，企业级标准，稳定性高，生态完善。大型项目、复杂业务逻辑、高并发、团队熟悉Java环境。学习曲线较陡，开发效率相对较低Python(Django/Flask)语法简洁，开发效率高，数据处理与AI分析能力强。数据处理、机器学习结合、脚本工具、轻量级Web应用。性能相对较弱，不适合超高并发场景主流数据库对比数据库类型核心特点适用场景备注MongoDBNoSQL(文档型)灵活易扩展，适合存储非结构化/半结构化数据，开发效率高用户数据、商品信息、日志、内容管理本章推荐MySQLSQL(关系型)事务支持强，成熟稳定，数据一致性好订单系统、支付系统等强一致性要求场景需预设计表结构Redis内存数据库高性能，支持多种数据结构（字符串、哈希、列表等）缓存、会话存储、计数器、实时排行榜辅助数据库开发环境搭建-软件清单Node.jsJavaScript运行环境，用于后端开发和前端构建。微信开发者工具小程序开发、调试、预览的官方IDE。VSCode轻量级、功能强大的代码编辑器，推荐用于后端代码编写。MongoDB本章选用的数据库服务，文档型数据库。Git版本控制工具，用于团队协作和代码管理。Postman(可选)API调试工具，方便测试后端接口。请确保所有必装软件已正确安装并配置环境变量开发环境搭建-Node.js安装1.下载安装包访问官网，推荐下载LTS（长期支持）版本以确保稳定性。2.执行安装运行下载的安装包，无需复杂配置，一路点击Next即可完成安装。3.验证安装打开终端，输入以下命令，若输出版本号则成功：node-vnpm-v注意：建议安装LTS版本以保证开发环境的稳定性，避免使用最新的Current版本带来的兼容性问题。Node.js是运行在服务端的JavaScript，是现代前端开发的基础环境。开发环境搭建-微信开发者工具安装1.下载工具访问微信开放平台官网，下载对应版本的安装包。2.安装程序根据操作系统（Windows/macOS）运行安装包，完成安装。3.扫码登录打开开发者工具，使用微信扫码授权登录，进入开发界面。注意事项：首次登录需要拥有小程序账号的开发权限。如果尚未拥有账号，可以先申请一个测试号进行学习和开发测试。开发环境搭建-MongoDB安装01下载安装包访问MongoDB官网下载社区版安装包，选择对应操作系统版本。02运行安装选择“Complete”完整安装，建议勾选安装MongoDBCompass可视化工具。03配置环境变量将MongoDB安装目录下的bin文件夹路径添加到系统PATH变量中。04验证安装终端输入mongo--version或mongod--version，输出版本信息即成功。提示：安装过程中若遇到权限问题，请以管理员身份运行安装程序。项目初始化-后端项目（Express）关键命令操作创建并进入文件夹：mkdirmini-express&&cd$_初始化NPM项目：npminit-y安装Express框架：npminstallexpress创建入口文件：touchapp.js启动服务：nodeapp.js核心代码(app.js)constexpress=require('express');constapp=express();constport=3000;//定义路由app.get('/',(req,res)=>{res.send('HelloWorld!');});//启动服务app.listen(port,()=>{console.log(`Serverrunningonhttp://localhost:${port}`);});提示：启动服务后，在浏览器访问http://localhost:3000即可看到HelloWorld响应。项目初始化-小程序项目打开工具打开微信开发者工具，点击“+新小程序项目”填写信息项目名称：自定义|目录：选择空文件夹|AppID：测试号配置服务选择“不使用云服务”，点击“创建”按钮创建成功自动生成默认Demo页面与标准目录结构微信开发者工具创建项目界面示例前后端连通验证后端(app.js)-添加API接口//新增一个API接口app.get('/api/hello',(req,res)=>{res.json({message:'HellofromServer!'});});前端(index.js)-调用接口Page({onLoad:function(){wx.request({url:'http://localhost:3000/api/hello',success:(res)=>{console.log(res.data);}});}});关键配置：在微信开发者工具右上角“详情”中，勾选“不校验合法域名、web-view、TLS版本及HTTPS证书”注意事项：此配置仅用于开发环境，上线发布前必须在微信公众平台配置合法的HTTPS域名。常见问题排查-端口占用问题现象启动后端服务时控制台报错，提示端口已被占用：Error:listenEADDRINUSE:addressalreadyinuse:::3000排查方法找到占用指定端口（如3000）的进程ID(PID)：Windows:netstat-ano|findstr"3000"Mac/Linux:lsof-i:3000解决方法1.根据排查结果获取PID，执行强制结束命令：Windows:taskkill/F/PID<PID>Mac/Linux:kill-9<PID>2.临时方案：修改后端代码配置，将服务启动在其他未被占用的端口（如3001）。常见问题排查-跨域问题问题现象小程序控制台报错：“跨域请求被阻止”No'Access-Control-Allow-Origin'header...产生原因浏览器的同源策略(Same-OriginPolicy)限制。小程序遵循此安全策略，禁止从一个域名请求另一个域名的资源。解决方法开发环境：微信开发者工具中勾选“不校验合法域名”。生产环境(Express示例)：//安装依赖npminstallcors//使用中间件app.use(cors());本章总结架构理解掌握了前后端分离架构的核心思想与优势，明确了开发边界。技术选型学会对比和选择适合项目的前端、后端及数据库技术栈。环境搭建成功搭建了包含Node.js、微信开发者工具、MongoDB的完整环境。项目初始化完成前后端项目初始化，编写了第一个接口和页面。连通验证实现了小程序前端与Node.js后端的首次API通信，打通数据链路。问题排查掌握了开发中常见的端口占用和跨域问题的排查与解决方法。课后实操：搭建首个小程序电商项目骨架任务步骤TaskSteps环境搭建安装Node.js、微信开发者工具及MongoDB，确保环境完整。后端开发初始化Express项目，编写返回模拟商品列表的API接口。前端开发创建小程序项目，调用后端API，在首页展示商品列表。连通验证调试前后端通信，