nodejs项目总结

前几天花了3天时间，搭建、开发了一个包含客户端、cms、server端的项目，也因着以前有php的开发经验，以及sql的设计和应用能力，倒也没遇到什么阻碍。至于项目结构搭建（架构），也是共通的，以模块化、便于协作、扩展为前提。而构建工具的搭建，也只是nodejs的server端稍陌生，掌握了思路，也就简单了。

一、技术栈

vue全家桶 ＋ element-ui ＋ axios ＋ sass ＋ webpack ＋ ES6/ES7 + nodejs(express) + mongodb(mongoose) ＋ sentry

element-ui：用来搭建CMS UI。

axios：服务端数据请求使用axios，而非vue-resource(已停止维护)。根据restful api的定义，使用其get/post/put/delete/(patch未使用)方法。在进行post和update（put、patch即update）时，需要将 content-type 由 ‘application/json’ 转换成 ‘application/x-www-form-urlencoded’；转换方法有多种：

• a、window.URLSearchParams：存在兼容性问题；
• b、Qs.stringify()：将对象转换成url的形式。

tips：服务端如何获取数据呢？如果服务端为nodejs，可使用body-parse中间件。可通过其extened属性来设置，将post/update的数据转换成对象；在取req数据时，需使用req.body.paramsName而非get方法中的req.query.paramsName。

ES6/7： 因babel的存在，可以更好的使用ES6/7的特性；如结构解析、rest、promise、模块管理、async／await、symbol、set等。同时由于nodejs为事件循环机制，通过使用async／await，来获取返回结果，其虽为同步语法，但并非真正的同步，不会影响并发（nodejs的优势）。可通过try{}catch{}来捕获await失败的error（async／await的实质为promise的封装，遇到reject的情况，可使用catch来捕获），代码如下：

try {
    let admin = await adminModel.findOne({username})
    // 依次验证是否存在管理员和密码，然后将admin_id存入session中（登录机制）
    if (!admin) {
        rst.error = error.adminNotExist
    } else if (encryption(password).toString() != admin.password.toString()) {
        rst.error = error.passwordError
    } else {
        req.session.admin_id = admin['_id'];
        rst.success = true
    }
} catch(err) {
    rst.error = error.default
    Raven.captureException(err);
}

Express：是由路由和中间件构成一个的 web 开发框架，从本质上来说，一个 Express 应用就是在调用各种中间件。其中间件为函数：function (req, res, next) {... // next(); 执行下一个中间件}，如：

// 当访问cms的api，获取列表信息时，需要先验证是否已登陆，如此才能获取信息，否则访问失败
router.get('/api/cms/album', adminCtrl.checkLoginState, albumCtrl.findAlbum)
checkLoginState: async (req, res, next) => {
    ...
    // 如果验证成功则跳入下一个中间件，否则返回
    if (rst.success) {
        next()
    } else {
        resCallback(res, rst)
    }
}

mongodb：一种文档型数据库，相对稳定的关系型数据库来说，在一致性等可能保证不足，不适合金融业务。mongoose的两个关键方法：Schema：定义属性的类型和默认值等；model：相当于schema的实例，我将其视为为一个文档，对应关系型数据库中的表。

二、目录结构

结构图

2.1、build、cms-build

分别为client、cms在dev、production环境下的webpack配置。其中dev环境下的几个重要的中间件介绍如下：

• webpack-hot-middleware：模块热加载；
• webpack-dev-middleware：将编译后的内容存入内存中；
• http-proxy-middleware：实现接口代理，可在本地环境下，跨域访问其他接口：如Rap api之类；
• connect-history-api-fallback：可控制刷新时，如果路由不存在，则访问前端路由。

2.2、 client、cms

分别为客户端、CMS 的源码，其子目录如图所示，相应的文件夹内容为：

• api：保存接口api和axios的封装，在这里将处理统一的请求超时等错误，对接口名称进行统一管理；
• assets：保存样式，reset.scss、common.scss、style.scss，其中的style.scss中保存着统一变量（如$mainBgColor、$mainFontColor、$mainBorderColor、$designWidth等）、minxin、function等；
• components：公共组件库；
• libs：utils.js、preload.js等工具函数、插件等；
• router：路由；（路由的按需加载等以前整理过，不赘述）；
• store：vuex；（vuex的模块化也整理过了，不赘述）；
• views：vue业务组件。

2.3、config

各生产环境下的webpack区别化配置信息及本地开发路由代理配置信息。

2.4、public

cms：为CMS 在production环境下的编译生成，当nodejs server端捕获到/cms/*的路径时（cms页面刷新时产生），导向该文件夹；

main：为client 在production环境下的编译生成，当nodejs server端捕获到/pages/*的路径时（client页面刷新时产生），导向该文件夹；

2.5、server

通过nodejs的express框架搭建的服务端，对clientcms 的api及页面访问提供数据和文件等资源服务。

• **controller: **处理业务，包括res的数据校验、格式化处理等；
• models：数据库操作集合；包含scheme、model等的声明、定义等；
• libs：utils、msg（errorMsg、code等）等公共插件、工具函数的统一管理；
• router：express的路由，分为api、cms 的页面响应、client的页面响应等
• db.js：数据库的管理（连接等）
• app.js：服务器的静态服务、cookie、session等配置和监听；
• index.js：注册babel及babel解析的相应配置，包括忽略.babelrc文件、commonjs编译、异步支持等；加载执行app；通过node ./server/index.js运行服务端。该方法为一种较为简单的编译方法，使得支持ES6/7，当然也可以通过webpack解析得到nodejs的执行脚本，但需注意在webpack中设置target: 'node'属性，这样编译生成的脚本node才能运行。在实施ssr的时候，可使用webpack编译解析的方式，视项目需要而定。如下：

// index.js
require('babel-core/register')({
    babelrc: 'false',
    presets: ['stage-3', 'env'],
    plugins: [
        'transform-runtime',
        "transform-async-to-generator",
        "transform-es2015-modules-commonjs"
    ]
});
require('./app.js');

2.6、upload

为文件、图片上传后的存放位置，使用express的静态服务器方法进行处理，可通过http进行访问。