前几天花了3天时间，搭建、开发了一个包含客户端、cms、server端的项目，也因着以前有php的开发经验，以及sql的设计和应用能力，倒也没遇到什么阻碍。至于项目结构搭建（架构），也是共通的，以模块化、便于协作、扩展为前提。而构建工具的搭建，也只是nodejs的server端稍陌生，掌握了思路，也就简单了。
一、技术栈
vue全家桶 ＋ element-ui ＋ axios ＋ sass ＋ webpack ＋ ES6/ES7 + nodejs(express) + mongodb(mongoose)
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中间件，将post/update的数据转换成对象，可通过其extened属性来设置；在取req数据时，使用req.body.paramsName而非get方法中的req.query。
ES6/7： 因babel的存在（和polyfill的补充），可以更好的使用ES6/7的特性；如结构解析、rest、promise、模块管理、async／await、symbol、set等。同时由于nodejs为事件循环机制，通过使用async／await，来获取返回结果，其虽为同步语法，但并非真正的同步，不会影响并发（nodejs的优势）。
Express：是由路由和中间件构成一个的 web 开发框架，从本质上来说，一个 Express 应用就是在调用各种中间件。其中的中间件为：function (req, res, next) {... // next(); 执行下一个中间件}。
mongodb：一种文档型数据库，相对稳定的关系型数据库来说，在一致性等可能保证不足，不适合金融业务。（摘录）
二、项目结构
结构图
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框架搭建的服务端，对client\\cms 的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编译解析的方式，视项目需要而定。
2.6、upload
为文件、图片上传后的存放位置，使用express的静态服务器方法进行处理，可通过http进行访问。