前言
曾几何时,你有没有想过一个前端工程师的未来是什么样的?这个时候你是不是会想到了一个词”前端架构师“,那么一个合格的前端架构只会前端OK吗?那当然不行,你必须具备全栈的能力,这样才能扩大个人的形象力,才能升职加薪,才能迎娶白富美,才能走向人生巅峰…
最近我在写一些后端的项目,发现重复工作太多,尤其是框架部分,然后这就抽空整理了前后端的架子,主要是用的Vue,Express,数据存储用的Mysql,当然如果有其他需要,也可以直接切换到sqlite、postgres或者mssql。
先献上项目github
项目
项目以todolist为🌰,简单的实现了前后端的CURD。
后端技术栈
前端技术栈
项目结构
先看项目架构,client为前端结构,server为后端结构
1 | |-- express-vue-web-slush |
代码介绍
前端代码就不多说,一眼就能看出是vue-cli生成的结构,不一样的地方就是前端编写的代码是以Vue Class的形式编写的,具体细节请见从react转职到vue开发的项目准备
然后这里主要描述一下后端代码。
热更新
开发环境必需品,我们使用的是nodemon,在项目根目录添加nodemon.json
:
1 | { |
ignore
忽略 node_modules 和 前端代码文件夹src/client 的js文件变更,ignore以外的js文件变更nodemon.json会重启node项目。
这里为了方便,我写了一个脚本,同时启动前后端项目,如下:
1 | import * as childProcess from 'child_process'; |
前端用vue-cli的vue-cli-service
命令启动。
后端用nodemon
执行babel-node命令启动
。
然后这前后端项目由node子进程启动,然后我们在package.json里添加script。
1 | { |
server.babel.config.js
为后端的bable编译配置。
项目配置
所谓的项目配置呢,说的就是与业务没有关系的系统配置,比如你的日志监控配置、数据库信息配置等等
首先,在项目里面新建配置文件,config.properties
,比如我这里使用的是Mysql,内容如下:
1 | [mysql] |
在项目启动之前,我们使用properties对其进行解析,在我们的server/initialize
新建properties.js
,对配置文件进行解析:
1 | import properties from 'properties'; |
然后在项目启动之前,初始化mysql,在server/initialize
文件夹新建文件index.js
1 | import loadProperties from './properties'; |
这里我们数据持久化用的sequelize,依赖注入用的awilix,我们下文描述。
初始化所有配置后,我们在项目启动之前执行initialize,如下:
1 | import express from 'express'; |
数据持久化
作为前端,对数据持久化这个词没什么概念,这里简单介绍一下,首先数据分为两种状态,一种是瞬时状态,一种是持久状态,而瞬时状态的数据一般是存在内存中,还没有永久保存的数据,一旦我们服务器挂了,那么这些数据将会丢失,而持久状态的数据呢,就是已经落到硬盘上面的数据,比如mysql、mongodb的数据,是保存在硬盘里的,就算服务器挂了,我们重启服务,还是可以获取到数据的,所以数据持久化的作用就是将我们的内存中的数据,保存在mysql或者其他数据库中。
我们数据持久化是用的sequelize,它可以帮我们对接mysql,让我们快速的对数据进行CURD。
下面我们在server/initialize
文件夹新建sequelize.js
,方便我们在项目初始化的时候连接:
1 | import Sequelize from 'sequelize'; |
initSequelize的入参config,来源于我们的config.properties
,在项目启动之前执行连接。
然后,我们需要对应数据库的每个表建立我们的Model,以todolist为例,在service/models
,新建文件ItemModel.js
:
1 | export default function(sequelize, DataTypes) { |
然后在service/models
,新建index.js
,用来导入models文件夹下的所有model:
1 | import fs from 'fs'; |
这个installModel
也是在我们项目初始化的时候执行的。
model初始化完了之后,我们就可以定义我们的Dao层,使用model了。
依赖注入
依赖注入(DI)是反转控制(IOC)的最常用的方式。最早听说这个概念的相信大多数都是来源于Spring,反转控制最大的作用的帮我们创建我们所需要是实例,而不需要我们手动创建,而且实例的创建的依赖我们也不需要关心,全都由IOC帮我们管理,大大的降低了我们代码之间的耦合性。
这里用的依赖注入是awilix,首先我们创建容器,在server/container
,下新建index.js
:
1 | import * as awilix from 'awilix'; |
然后在我们项目初始化的时候,用awilix-express初始化我们后端的router,如下:
1 | import { loadControllers, scopePerRequest } from 'awilix-express'; |
然后,我们可以在server/api
下新建我们的controller,这里新建一个TodoApi.js
:
1 | import { route, GET, POST } from 'awilix-express'; |
这里可以看到构造函数的入参注入了Service层的todoService
实例,然后可以直接使用。
然后,我们要搞定我们的Service层和Dao层,这也是在项目初始化的时候,告诉IOC我们所有Service和Dao文件:
1 | import container from './container'; |
然后我们可以在services和daos文件夹下肆无忌惮的新建service文件和dao文件了,这里我们新建一个TodoService.js
:
1 |
|
然后,新建一个Dao,ItemDao.js
,用来对接ItemModel,也就是mysql的Item表:
1 | import BaseDao from './base'; |
然后搞一个BaseDao,封装一些数据库的常用操作,代码太长,就不贴了,详情见代码库。
关于事务
所谓事务呢,简单的比较好理解,比如我们执行了两条SQL,用来新增两条数据,当第一条执行成功了,第二条没执行成功,这个时候我们执行事务的回滚,那么第一条成功的记录也将会被取消。
然后呢,我们这里为了也满足事务,我们可以按需使用中间件,为请求注入事务,然后所以在这个请求下执行的增删改的SQL,都使用这个事务,如下中间件:
1 | import { asValue } from 'awilix'; |
然后当我们需要提交事务的时候,我们可以使用IOC注入transaction,例如,我们在TodoService.js中使用事务
1 |
|
其他
当我们需要在Service层或者Dao层使用到当前的请求对象怎么办呢,这个时候我们需要在IOC中为每一条请求注入request和response,如下中间件:
1 | import { asValue } from 'awilix'; |
然后在项目初始化的时候,使用该中间件:
1 | import express from 'express'; |
关于部署
使用pm2,简单实现部署,在项目根目录新建pm2.json
1 | { |
这个时候,我们需要把客户端和服务端编译到dist目录,然后将服务端的静态资源目录指向客户端目录,如下:
1 | app.use(express.static(path.resolve(__dirname, '../client'))); |
添加vue-cli的配置文件vue.config.js
:
1 | const path = require('path'); |
在package.json中添加如下script:
1 | { |
执行build命令,清理dist目录,同时编译前后端代码到dist目录下,然后npm run start
,pm2启动dist/server/main.js
;
到此为止,部署完成。
结束
发现自己挂羊头卖狗肉,竟然全在写后端。。。好吧,我承认我本来就是想写后端的,但是我还是觉得作为一个前端工程师,Nodejs应该是在这条路上走下去的必备技能,加油~。