后台管理系统实践——Vue.js+Express.js（微课视频版）

本书是一本兼顾前后端开发的技术教程，完全模拟了企业实际开发项目的环境，详细阐述了功能需求的设计过程、业务实现过程，以及在实际开发时可能会遇到的情况。本书以目前流行的Express.js框架、MySQL数据库和Vue框架为核心，以真实开发项目的流程为主线，从顶层设计的视角介绍系统细节，结合在实际开发中普遍存在的功能需求进行代码实战。

本书以如何设计后台管理系统为主线，穿插前后端不同技术栈的核心知识点，引导读者渐进式地学习Express.js MySQL Vue.js，达到从0到1完成一个完整项目。Express.js是基于Node.js的Web服务器框架，具有快速、开放和极简的特点。MySQL是一个具有高性能、可靠性和灵活性的久经大型企业考验的数据库管理系统。Vue.js则是目前最流行的前端框架之一。基于Express.js MySQL Vue.js，能够让我们在应对不同的业务场景时游刃有余，运用自如。
本书共18章，分为Node.js篇、Vue.js篇和上线篇。Node.js篇（第1~9章）系统性地讲述了MySQL、Node.js和Express.js框架知识点，从设计字段、实现功能及测试接口的角度对常见的系统功能模块进行了详细地讲解。Vue.js篇（第10~16章）从Vue.js的核心知识点出发，结合ElementPlus组件库由浅及深地构建系统页面。上线篇（第17章和第18章）详细阐述了如何配置服务器和域名，并最终实现项目上线。本书示例代码丰富，注重实践和整体性，同时提供视频讲解，帮助读者深入掌握重点和难点。
本书即适合初学者入门，对已从事前后端领域的开发者也具有参考价值，同时还可作为高等院校和培训机构的专业教材。

王鸿盛，一个从四线小县城走出来的程序员、全栈开发工程师、网络工程师。主攻前端方向。阿里云社区博客专家，CSDN论坛知名前端领域博主，BiliBili平台前端领域优秀创作者。长期担任中大型项目设计与研发顾问，曾参与设计与开发多个地区政府集约化平台、政府门户网站等市政项目。

随着社会高度信息化和数字化的不断发展，不少中小企业也在这股信息化潮流中纷纷转换为使用信息化系统作为日常的管理平台，一个好的系统能够在减少管理成本的同时为企业高效赋能。

通常来讲，企业的系统主要从3种途径获取，一种是根据企业自身情况招聘开发人员进行自研； 另一种是从定制系统的厂商购买； 最后一种是从大厂购买SaaS系统，而大部分中小企业普遍面临两种情况，从定制系统的厂商购买系统年费太高，从大厂购买SaaS系统则不符合企业个性化的需求。面对这些情况，自研系统就变成了中小企业的首选。对于程序员来讲，开发管理系统也占据了目前招聘市场中较大的岗位比重。

一个完整的系统开发流程包括功能需求设计、数据库设计、后端功能实现、前端页面设计与开发等多个阶段，可谓处处皆是细节。笔者的Web生涯从写需求的程序员到担任项目经理，到如今成为统筹企业内部系统开发的项目总监，历经了多个中大型的复杂企业管理系统项目的开发，所以笔者想通过本书将一个完整的系统开发流程以简单、通俗的形式分享给广大读者。

本书以目前流行的Express.js框架、MySQL数据库和Vue.js框架为核心，以真实开发项目的流程为主线，从顶层设计的视角介绍系统细节，结合在实际开发中普遍存在的功能需求问题进行代码实战。读者可以通过阅读本书，了解在实际开发中应注意的细节，学习常用的开发工具和掌握多种不同的技术栈，知晓前后端之间的数据是如何流动的。笔者希望通过本书，能够为已经在前、后端领域工作的读者早日成为全栈工程师提供帮助，也希望本书能够为即将入职开发岗位的读者提供一份清晰、完善的开发指南。

本书主要内容

第1章主要介绍数据库技术的发展历程、数据具备的复杂化和多样化特性及如何处理数据。

第2章主要讲解不同的数据模型和后关系型阶段数据库的基本要求，介绍MySQL等多种主流的数据库管理系统、SQL语言基本语法，最后使用不同的方式创建数据库。

第3章首先介绍功能模块的设计过程，然后介绍如何根据功能需求设计数据库的字段，最后实现从0设计用户模块数据表。

第4章主要介绍Node.js的底层机制、常用的3种包管理器工具、Express.js框架的路由和处理程序、测试工具Postman，并介绍注册和登录功能应注意的细节，最后使用Express.js框架实现注册和登录功能。

第5章从用户管理模块的功能需求出发，逐步实现修改用户基础信息的需求，并介绍使用Multer中间件实现上传图片的方法，最后介绍表格分页组件的逻辑并进行实现。

第6章从产品管理模块的功能需求出发，讲解如何设计产品的字段，并对产品从入库到出库流程应有的功能进行实现。

第7章主要介绍系统在不同场景下的埋点操作，设计和实现不同模块的埋点接口。

第8章主要介绍使用Postman、Apifox和Swagger三种不同的方式实现接口文档。

第9章主要介绍代码仓库和Git的安装，使用可视化工具Sourcetree将后端代码上传至代码仓库。

第10章主要介绍HTML、CSS和JavaScript的基础语法，并介绍jQuery、Bootstrap和Sass框架，最后讨论前端模块化、组件化、工程化性质和MVC、MVVM两种前端架构。

第11章主要介绍Vue.js框架的渐进式、声明式代码、组件化、响应式等多种特点，并实现创建Vue项目，最后分析项目的脚手架。

第12章首先介绍Vue.js的路由模块并结合路由创建Vue.js组件； 其次介绍UI组件库Element Plus，并使用其创建表单； 最后介绍TypeScript的常用语法并进行实践。

第13章主要讲解页面在布局、样式和颜色方面应注意的要点，最后使用卡片组件完成登录和注册页面。

第14章从前后端数据交互技术发展的角度介绍AJAX、ES6的Promise和async await、Axios的内容及基础语法，使用Axios在前端二次封装登录和注册功能接口，并在前端页面完成接口的调用，实现登录和注册功能。

第15章介绍如何构建系统的基本布局，使用UI组件封装全局组件面包屑。在完成个人模块功能的同时介绍Vue.js全家桶生态中的状态管理器Pinia，实现父子组件之间的数据联动。最后实现用户模块的页面和功能需求，并使用hooks对模块的代码进行优化。

第16章主要介绍如何实现产品模块从入库、审核到出库的完整流程，还介绍开源的可视化图表库ECharts，并从企业权限的角度通过动态路由表等方法实现不同部门之间和部门内部的功能划分。

第17章主要介绍服务器的参数、购买服务器的流程、购买域名、域名备案和解析、SSL证书等内容，还介绍宝塔面板的安装与环境配置。

第18章主要介绍在宝塔面板实现项目上线服务器的过程。

阅读建议

本书是一本兼顾前后端开发的技术教程，完全模拟了企业实际开发项目的环境，详细阐述了功能需求的设计过程、业务实现过程，以及在实际开发时可能会遇到的情况。适合高等院校计算机专业的学生、老师、即将入职或已在职的前后端工程师、企业项目经理等人士阅读； 即使是没有使用过Node.js、MySQL、Vue.js等技术栈的读者，本书也能够作为一本快速上手的开发教程； 对前后端数据交互感兴趣的读者可通过本书了解完整的前后端开发流程。

有前端开发基础的读者，可通过阅读第1～9章学习和了解后端开发内容，并可通过阅读第10～16章巩固和补充前端知识； 具有后端开发基础的读者，可直接阅读第10～16章了解和学习前端开发过程，并可通过阅读第1～9章补充项目开发流程和数据库设计知识； 建议完全没有实际开发经验的读者从头开始按照顺序详细阅读每章节的内容。

在学习本书时，书中的所有代码均可通过手写的形式进行测试，书中提供了完整的测试流程，方便读者在手写接口时对照响应结果。由于时间仓促，书中可能会出现一些疏漏，如果读者发现任何错误，请及时反馈给笔者。

资源下载提示

素材(源码)等资源： 扫描目录上方的二维码下载。

视频等资源： 扫描封底的文泉云盘防盗码，再扫描书中相应章节的二维码，可以在线学习。

致谢

本书的诞生，要感谢很多与之直接或间接相关的人，下面的致谢不分先后。

首先感谢清华大学出版社赵佳霓编辑的信任，使我在自己擅长的领域有机会来完成本书。在写作的过程中，赵佳霓编辑全程热心的指导给予了我极大的鼓励。再次向赵佳霓编辑由衷地表示感谢！

其次感谢在开发路上一直保持技术交流的朋友——周向阳。他为本书在代码层面提供了宝贵的意见，同时还细心地帮助检查语句并修改错误。

感谢我的好友李晏清，在我写书最辛苦的期间一直支持着我。没有你，我可能不会在哔哩哔哩上录制视频课，更不可能写出这样一本书。

最后感谢我的家人，在我写作期间给予的理解和支持，使我能全身心地投入到写作工作中。

王鸿盛2024年4月