重磅推荐

【产品特色】

【编辑推荐】

专为Node.js项目开发经验薄弱的初学者、进阶者和爱好者打造

详解许愿墙、博客管理系统和装修小程序三大商业案例的完整开发过程

快速上手：采用Node.js中流行的Express框架进行项目开发，方便快捷

技术新颖：不仅介绍传统的后端渲染架构，还介绍新近流行的前后端分离架构

注重实战：详解3个完整的商业项目案例开发中的需求分析、架构设计和代码编写

新颖独特：介绍了一种基于Express框架搭建的文件目录结构，提高项目开发效率

《Node.js Express Vue.js项目开发实战》精华内容：

安装和使用Express

许愿墙（Node.js Express art-template MySQL）

许愿墙后台管理系统（Node.js Express Vue.js MySQL）

博客管理系统（Node.js Express art-template Vue.js MySQL）

装修小程序管理系统（Node.js Express Vue.js MySQL）

Node.js部署

【内容简介】

《Node.js Express Vue.js项目开发实战》以项目开发为导向，介绍了基于Node.js的相关知识。书中首先介绍了Node.js中很流行的Express框架的安装与使用，然后详细介绍了许愿墙、博客管理系统和装修小程序管理系统3个实际项目的完整开发过程，*后介绍了Node.js的部署方法与工具。

《Node.js Express Vue.js项目开发实战》共6章。第1章介绍了Express的基础知识，包括Express的安装和使用、路由方法、请求对象Request的常用方法和属性、返回对象Response的常用方法和属性。第2~5章分别介绍了3个完整的商业项目案例的开发过程，展现了项目从需求分析到架构设计，再到代码编写的一整套完整流程。其中，第2章介绍了许愿墙项目的前台展示系统的开发；第3章介绍了许愿墙项目的后台管理系统的开发；第4章介绍了博客管理系统项目的前台展示系统和后台管理系统的开发；第5章介绍了装修小程序管理系统项目的前台展示系统和后台管理系统的开发。第6章介绍了Node.js的服务器部署方法和常用工具PM2的使用方法。

《Node.js Express Vue.js项目开发实战》内容通俗易懂，讲解图文并茂，非常适合有一定Node.js基础但缺乏实际项目开发经验的初学者、进阶者和爱好者阅读。另外，对于相关院校的学生和培训机构的学员而言，本书也是一本不可多得的实战指导书。

【作者简介】

张旭有7年多的互联网项目开发经验。擅长JavaScript、Node.js、PHP和Java等多门编程语言。精通各种前端页面展现框架，熟悉底层原理。对数据处理和性能优化有深入研究。长期从事全栈开发工作，有丰富的实战经验，擅长利用不同编程语言的优势完成相应的架构设计和业务开发。开发范围广泛，涉及PC端、H5、微信公众号、小程序和App等常见产品。

【媒体评论】

本书是一本不可多得的Node.js开发进阶读物，内容实用，可读性强，强烈推荐给想要提高Node.js项目开发水平的读者阅读。相信读者可以在作者的引领下很好地掌握书中的项目案例，快速提高独立开发完整商业项目的能力。

——智慧全景（北京）信息科技有限公司CEO 白帆

本书是一本Node.js实战类图书，内容翔实，案例真实。作者采用了Express框架进行项目开发，非常方便。读者可以拿来即用，将书中的项目案例稍加修改用到自己的项目中，推荐学习项目开发的读者阅读。

——资深程序员/博主 零度逍遥

本书对于有一定基础，但缺乏实战经验的Node.js全栈开发工程师来说可谓雪中送炭。书中介绍的3个商业项目案例非常典型，也很实用。读者系统地研读这几个项目案例的完整开发过程，并动手实践每一个案例，可以迅速提高自己的项目开发水平。

——无锡驰及信息科技有限公司CEO 邓亚运

【目录】

第1章安装和使用Express 1

1.1 安装Express 1

1.2 使用Express创建项目 1

1.3 Express路由 5

1.4 Express页面 9

1.5 请求对象Request 19

1.6 返回对象Response 27

第2章许愿墙（Node.js Express art-template MySQL） 33

2.1 需求分析 33

2.2 系统设计 34

2.3 前端页面分析 36

2.4 创建MySQL数据库表 36

2.5 创建项目 39

2.6 渲染许愿列表 45

2.7 添加许愿处理 47

第3章许愿墙后台管理系统（Node.js Express Vue.js MySQL） 50

3.1 需求分析 50

3.2 系统设计 52

3.3 前端页面分析 63

3.4 创建MySQL数据库表 67

3.5 创建项目 68

3.6 API接口开发 79

第4章博客管理系统（Node.js Express art-template Vue.js MySQL） 114

4.1 前台展示系统需求分析 114

4.2 前台展示系统设计 117

4.3 前台展示系统的前端页面分析 123

4.4 前台展示系统创建MySQL数据库表 129

4.5 前台展示系统创建项目 134

4.6 前台展示系统的渲染页面 143

4.7 后台管理系统需求分析 156

4.8 后台管理系统设计 160

4.9 后台管理系统的前端页面分析 177

4.10 后台管理系统创建MySQL数据库表 183

4.11 后台管理系统创建项目 185

4.12 API接口开发 198

第5章装修小程序管理系统（Node.js Express Vue.js MySQL） 249

5.1 前台展示系统需求分析 249

5.2 前台展示系统设计 251

5.3 小程序前端页面分析 257

5.4 前台展示系统创建MySQL数据库表 259

5.5 前台展示系统创建项目 268

5.6 前台展示系统的API接口开发 277

5.7 后台管理系统需求分析 293

5.8 后台管理系统设计 299

5.9 后台管理系统的前端页面分析 329

5.11 后台管理系统创建项目 342

5.12 后台管理系统的API接口开发 359

第6章 Node.js部署 448

6.1 安装Node.js 448

6.2 提取项目代码 449

6.3 启动项目 450

6.4 进程管理工具PM2 450

【前言】

一直以来，用于后端开发的主流语言是Java、PHP和Python等；而Node.js的出现让JavaScript的身影出现在了后端开发中，这使得前后端使用同一种语言并统一模型的梦想得以实现。

Node.js不是一种独立的语言，而是一个基于Chrome V8引擎的JavaScript运行环境，其底层语言仍是JavaScript。Node.js可以方便地搭建响应速度快、易于扩展的网络应用。它使用事件驱动、非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。使用Node.js可以让用户花*的硬件成本，追求更高的并发效率和处理性能。具体而言，Node.js具有以下几个特性：

事件驱动：JavaScript是一种事件驱动编程语言，事件发生时调用的回调函数可以在捕获事件处进行编写，这样可以让代码容易编写和维护。
非阻塞：在非阻塞模式下，一个线程永远在执行计算操作，这个线程所使用的CPU核心利用率永远是100%，使得效率大大提高，节省资源。
异步I/O：也称非阻塞式I/O，针对所有的I/O操作均不采用阻塞策略。当线程遇到I/O操作时，不会以阻塞方式等待I/O操作的完成或数据的返回，而只是将I/O请求发送给操作系统，继续执行下一条语句。当操作系统完成I/O操作时，以事件的形式通知执行I/O操作的线程，线程会在特定时间处理这个事件。
高并发能力：js并不会为每个客户的连接创建一个新的线程，而仅仅使用一个线程。当有用户连接时，就触发一个内部事件，通过非阻塞I/O和事件驱动机制，让Node.js程序宏观上也是并行的。
社区活跃：js的社区在不断地壮大，其包的数量在快速增加，质量也在不断提升。*主要的是很多包都简单灵巧，方便用户使用和快速开发。

《Node.js Express Vue.js项目开发实战》编写目的

实践对于学习知识的重要性不言而喻。只有理论知识而没有实践不可能真正完成一个项目的开发。基于此笔者编写了本书。

《Node.js Express Vue.js项目开发实战》专为Node.js项目经验薄弱的初学者、进阶者和爱好者打造，旨在让他们掌握Node.js的相关知识和技能，并能进行项目实战开发。本书从实际项目开发入手，详细讲解了3个项目案例的完整开发过程，让读者可以快速巩固所学的理论知识，并能结合理论知识完成实际的商业项目。

当您认真、系统地学习完本书内容之后，将会发现自己已经成为一名真正的Node.js程序员，已经能够实打实地开发实际项目了。

《Node.js Express Vue.js项目开发实战》特色

快速上手：本书采用js中*流行的框架Express进行项目开发，让读者能够快速熟悉并使用Express框架。
技术新颖：本书不仅讲解了传统的后端渲染架构，还提供了业内新近流行的前后端分离架构，让读者能够深入了解架构知识，跟上技术发展的步伐。
注重实战：本书采用实际的商业项目作为案例，逐一讲解项目开发中的需求分析、架构设计和代码编写等知识，让读者能够在实战中掌握知识，提升项目经验。
新颖独特：本书在项目开发中提供了一种基于Express框架搭建的文件目录结构，读者可以根据此结构快速、高效地开发出新的商业项目。

《Node.js Express Vue.js项目开发实战》内容

第6章介绍了Node.js部署的相关知识，包括如何安装Node.js环境、如何提取项目代码，以及如何使用Node.js进程管理工具PM2等。

读者对象

对js感兴趣的各类开发人员；
有一定js基础但没有项目经验的初学者与进阶者；
有一定js基础，想要实际开发项目的开发人员；
高校及培训机构的老师和学生；
正在进行毕业设计的学生。

配套资源获取

《Node.js Express Vue.js项目开发实战》涉及的所有源代码文件等配套资源需要读者自行下载，请到华章公司的网站（www.hzbook.com）搜索本书，即可在本书页面上找到相关下载链接。

Node.js学习资源

JavaScript教程：http://www.w3school.com.cn/js/index.asp；
js官网：https://nodejs.org；
js官方文档：https://nodejs.org/en/docs/；
Express官网：http://expressjs.com；
js中文社区：https://cnodejs.org。

《Node.js Express Vue.js项目开发实战》作者

《Node.js Express Vue.js项目开发实战》由张旭编写。在写作过程中，笔者竭尽所能将本书写好，力图为读者呈现一本易学、实用的图书，但因水平所限，仍难免有疏漏和不妥之处，敬请广大读者指正。您在阅读本书时若有疑问或任何建议，都可以通过以下方式联系我们。hzbook2017@163.com。

【免费在线读】

第1章安装和使用Express

Express是一个精简、灵活的Node.js的Web应用程序开发框架，为Web和移动应用程序提供了一组强大的功能。它是Node.js中*流行的Web开发框架，被大多数开发人员所使用。使用Express可以快速地开发一个Web应用，其他的开发框架也都是基于Express构建的。

1.1 安装Express

要安装Express，首先要具备Node.js环境，也就是说你已经安装了Node.js。

安装Express非常简单，使用Node.js的配套工具npm命令即可安装：

$ npm install -g express-generator

npm命令运行完毕，再运行命令：

$ express --version

如果能够看到Express的版本号，证明Express已经安装成功。截至本书写完，Express*的版本号是4.16.0。

$ express --version

$ 4.16.0

其实这里安装的是一个应用生成器工具——express-generator ，通过它可以快速创建一个应用的骨架，为快速创建Node.js项目提供便利。

1.2 使用Express创建项目

在安装完Express之后，就可以使用Express命令来创建一个新的项目了。

1.2.1 创建项目

使用Express创建项目非常简单，具体步骤如下：

（1）按WIN R键打开“运行”对话框，输入cmd命令，单击“确定”按钮打开命令行窗口，如图1-1所示。

图1-1 命令行窗口

（2）进入工作目录，可以自定义一个工作目录，如下：

$ e:

$ cd express/code

（3）执行，创建一个名为hello的Express项目：

$ express hello

（4）此时可以看到它会自动执行，图1-2代表创建成功。

图1-2 Express创建hello项目

（5）创建成功之后会在code目录下出现一个名叫hello的目录，进入hello目录，然后安装依赖包：

$ cd hello

$ npm install

（6）安装完毕之后，执行命令启动应用：

$ npm start

（7）应用启动后，在浏览器中输入http://localhost:3000/ 网址就可以看到名叫hello的这个应用了，如图1-3所示。

图1-3 Express默认应用启动界面

1.2.2 Express项目结构分析

项目正常启动后，我们用开发工具打开hello项目看一下它的目录结构，如图1-4所示。

图1-4 Express默认应用的目录结构

项目结构不太复杂是不是？相比较其他语言的框架来说很轻量，这也是Node.js快速开发的一个特色。

目录结构中的文件及其作用如表1-1所示。

表1-1 Express默认应用中的文件及其作用

目录名/文件名	类型	作用
bin	目录	服务器脚本默认目录
bin/www.js	文件	服务器默认脚本，即启动服务脚本
node_modules	目录	依赖包安装目录，用于存放依赖包
public	目录	静态资源目录，用于存放静态资源
routes	目录	路由目录，用于存放路由文件
routes/index.js	文件	首页路由文件
routes/users.js	文件	用户路由文件
views	目录	页面目录，用于存放页面文件
views/error.jade	文件	错误页面
views/index.jade	文件	首页
views/layout.jade	文件	页面共用布局
app.js	文件	应用主文件
package.json	文件	项目配置文件
package-lock.json	文件	锁定的项目配置文件

1.2.3 应用主文件app.js

app.js文件相当于项目启动的主入口文件，有一些公共方法和服务器配置等信息。代码分析如下：

var createError = require('http-errors'); // http错误处理模块

var express = require('express'); // 引入Express

var path = require('path'); // 引入path

var cookieParser = require('cookie-parser'); // 引入cookie处理对象

var logger = require('morgan'); // 引入日志模块

var indexRouter = require('./routes/index'); // 引入路由目录中的index.js文件

var usersRouter = require('./routes/users'); // 引入路由目录中的users.js文件

var app = express(); // 创建Express应用

app.set('views', path.join(__dirname, 'views')); // 定义页面目录

app.set('view engine', 'jade'); // 定义页面模板引擎

app.use(logger('dev')); // 定义日志打印级别

app.use(express.json()); // 定义JSON格式处理数据

// 定义使用urlencode处理数据及querystring模块解析数据

app.use(express.urlencoded({ extended: false }));

app.use(cookieParser()); // 定义使用cookie处理对象

// 定义静态资源目录public

app.use(express.static(path.join(__dirname, 'public')));

app.use('/', indexRouter); // 定义指向index.js的路由

app.use('/users', usersRouter); // 定义指向users.js的路由

// 定义404错误处理

app.use(function(req, res, next) {

next(createError(404));

});

// 定义其他错误处理

app.use(function(err, req, res, next) {

// 设置locals，只在开发环境生效

res.locals.message = err.message;

res.locals.error = req.app.get('env') === 'development' ? err : {};

res.status(err.status || 500); // 返回错误http状态码

res.render('error'); // 渲染错误页面

});

module.exports = app;

1.3 Express路由

接触到一款框架，首先要熟悉的就是它的路由。路由是指应用程序的端点（URI）如何响应客户端请求。通俗来说，就是定义什么路径来访问。

1.3.1 GET请求路由

在Express中定义路由特别简单。首先来看一下routes目录中的index.js路由文件，也就是首页路由文件，它是一个GET请求路由，如下：

var express = require('express'); // 引入Express

var router = express.Router(); // 引入Express路由对象

//首页路由

router.get('/', function(req, res, next) {

res.render('index', { title: 'Express' });

});

module.exports = router; // 导出路由

首页路由文件很简单，其中也只定义了一个根目录的路由。

将其中的代码：

res.render('index', { title: 'Express' });

更换成如下代码：

res.render('index', { title: Hello});

保存文件，重新运行npm start命令，用浏览器打开http://localhost:3000查看效果，因为在浏览器地址栏中输入地址发送的请求默认是GET请求，所以可以得到如图1-5所示的结果。

可以看到，之前的Express被换成了Hello。

前面的一段代码定义了首页的路由，这个路由定义的是GET请求，请求的是“/”路径，也就是根路径。接着后面跟着一个方法，当用户发送GET请求根路径的时候，就进入这个方法中，在这个方法中可以进行一些对请求的操作。

图1-5 将Express更改成Hello的运行效果

Express默认的首页方法中使用了res.render()方法，该方法的作用是渲染页面。其*个参数就是页面的文件名，这里对应的就是views目录中的index.jade文件；第二个参数是传入到页面文件的对象，可以将数据渲染到页面上。

1.3.2 自定义路由

分析过首页路由之后，可以试着自己写一个路由。在index.js路由文件中添加如下代码：

// 定义一个GET请求“/world”的路由，执行方法

router.get('/world', function(req, res, next) {

res.render('index', { title: 'Hello World' }); // 渲染index页面

});

将项目重新启动，打开浏览器请求地址http://localhost:3000/world，会看到新的页面，如图1-6所示。

图1-6 Hello World路由演示效果

新定义的路由生效了，是不是很简单呢？

但是每次更改过路由文件都要重新启动项目才会生效，如此，开发效率不太高。在这里，给大家推荐一个工具——nodemon，其安装方式也是利用npm命令：

npm install -g nodemon

安装完成之后，修改项目根目录中的package.json文件，将其中的

"scripts": {

"start": "node ./bin/www"

修改成：

"scripts": {

"start": "nodemon ./bin/www" // 使用nodemon运行

然后再执行npm start命令启动项目，这样在路由文件被更改并保存之后，会自动重启项目，并可以立刻在浏览器中看到更改后的运行结果。

1.3.3 其他请求方式的路由

HTTP请求方式除了GET之外，还有POST、PUT等其他方式。类似于GET请求的路由编写方式，其他请求方式也换成相应的router方法，如下：

// POST请求方式

router.post('/world', function(req, res, next) {

res.render('index', { title: 'Hello World' }); // 渲染index页面

});

// PUT请求方式

router.put('/world', function(req, res, next) {

res.render('index', { title: 'Hello World' }); // 渲染index页面

});

// DELETE请求方式

router.delete('/world', function(req, res, next) {

res.render('index', { title: 'Hello World' }); // 渲染index页面

});

大家可以自己尝试一下相应的请求方式。