node+express+mysql+Vue（一）
项目后端架构搭建
技术栈
- 语言node.js
- 框架express
- 数据库mysql
开发环境及工具
node.js 菜鸟教程
mysql 菜鸟教程
nodemon --node http服务热更新
postman --接口本地测试工具
开始
项目使用的是Express框架，从初始化一个Express项目开始。
1.初始化一个Express项目
在Express框架的官方文档中，是通过生成器工具express-generator快速生成了一个Express应用，相关步骤如下：
- 安装Express生成器:
npm install -g express-generator - 初始化一个Express应用`express express_server
目录结构概览
目录结构简介
- app.js应用的初始化文件，包括引入应用程序的基础依赖项、设置视图即view的引擎目录以及模板、设置静态资源路径、配置通用的中间件、引入路由和一些错误处理中间件等。
- package.json应用的配置文件，文件内包含程序的基础信息、启动脚本和依赖包等。
- bin/www应用的启动文件，文件内包含引用要启动的应用、设置应用监听的端口和启动http服务等。
- public/**应用的静态资源文件目录，该目录下的文件资源不需要经过文件映射就可以直接访问。
- routes/**应用的路由文件，这些路由文件中设置的接口最终会以指定的HTTP请求方式暴露给用户，并在用户请求之后将结果返回。
- views应用的视图文件，在app.js中设置好视图引擎和模板之后，该目录即为应用视图的根目录，然后路由文件就会根据app.js中的设置加载并渲染该目录下的视图文件。
前面安装了nodemon,修改package.json 启动脚本命令
2.启动应用
npm install安装项目依赖包- node bin/www 或者npm start 启动http服务
应用默认监听的端口是3000，然后访问localhost:3000
文件详解
(1) app.js文件详解
以下是初始化的Express应用中的已经做了一些注释说明后的app.js文件中的代码：
// 引入依赖包
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
// 引入路由文件
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
// 创建应用实例
var app = express();
// 设置视图目录和模板引擎
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// 以下皆为注册中间件
// 内置中间件
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
// 路由中间件
app.use('/', indexRouter);
app.use('/users', usersRouter);
// 404错误处理中间件
app.use(function(req, res, next) {
next(createError(404));
});
// 错误处理中间件
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
// 导出app实例对象
module.exports = app;
(2)bin/wwww文件的内容就是创建HTTP服务，监听端口和错误
(3)router/**详解
router/**包含了路由文件，每个路由文件中包含了不同HTTP请求对用的路由以及逻辑处理函数，此处以router/index.js文件为例，以下是index.js文件的代码：
(4)view/**详解
view/**主要存放应用的页面，以view/index.jade为例，代码如下：
3.改进
在实际开发中，我们项目的路由文件的数目会因项目复杂度而不同，当项目足够复杂时，我们需要引入的路由文件和需要注册的路由就会更多，同时除了应用本身的404和错误处理中间件之外，还可能根据实际需求新增我们自定义的中间件，如果这些初始化的代码都放置于app.js中，无疑，app.js文件会越来越大越来越臃肿，这并不是一个很好的选择。同时路由和路由对应的处理函数在一个文件中，这样的处理不够优雅，不便于维护，所以进行路由分离显得很有必要性。当然，这个应用只是生成器工具初始化的一个简单脚手架，并不是最终的样子。 下面遵循mvc设计来抽离路由层，模型-视图-控制器。
- M层 模型是对象及数据结构的实现，通常包含数据库的操作
- V层 视图表示用户界面，在网站中通常就是html的组织结构、
- C层 控制器用来处理用户请求和数据流、复杂模型、将输出传递给视图层
对应的，在Node中的MVC框架，处理流程应该是以下步骤：
- 1.服务端收到客户端的请求
- 2.客户端的路由层去匹配对应的路由页面
- 3.匹配到相应的路由之后调用对应的controller（即对应的逻辑处理函数），controller接收到请求之后，向model层取用数据
- 4.这里model层对数据库的操作 写在server文件夹下，将操作结果返回给controller
- 5.controller层把结果返给view层，view层收到controller层返回的数据之后，根据相应的视图模板和数据组装之后，返回一个渲染过的页面
- 6.服务端将上一步的结果返回给客户端
!（5,6这个过程把页面的渲染放在了服务器端处理，这里我是用了Vue框架+elementui，第四步返回数据后页面的渲染放在了浏览器）
抽离路由层
路由层的工作是根据请求路径匹配相应的路由然后调用相应的controller，原先路由的使用混在app.js文件中
! 注：routes(app)需要在创建应用实例之后，即var app = express()之后。
同时，删除app.js中的// app.use('/', indexRouter)。
抽离controller层
先，在根目录下创建controller/index.js，在index.js中编写如下代码，思路：把每个页面的业务逻辑单独写在一个js文件里，index.js文件引入他们，封装成对象暴露出去
处理M层
先，在根目录下创建server/index.js，在index.js中编写如下代码，思路：把每个页面的数据结构和对数据库操作单独写在一个js文件里，index.js文件引入他们，封装成对象暴露出去
4.express-mysql-session 和express-session 的安装
浅谈session,cookie,sessionStorage,localStorage的区别及应用场景
登录注册页面的时候，需要对用户是否已登录过进行处理，这里采用session存储的方式。把sessionId可以存到内存中，不足的是加入突然断电，就会失去保存的sessionId，所以这里存到mysql数据库中。
express-mysql-session
express-session
express-session的使用得依赖cookie,还需要安装cookie-parser
cookie-parser
小结
至此，我们对生成器工具express-generator生成的Express应用的改造完毕，并且接下来初始化自己的应用可以不再使用express-generator，可以根据自己的需求，参照以上修改，进行项目初始化搭建。 完整后再上传项目地址。
