前几天花了 3 天时间, 搭建开发了一个包含客户端 cmsserver 端的项目, 也因着以前有 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(putpatch 即 update) 时, 需要将 content-type 由 application/json => application/x-www-form-urlencoded; 转换方法有多种:
awindow.URLSearchParams(存在兼容性);
bQs.stringify(): 将对象转换成 url 的形式
tips: 如果服务端为 nodejs, 可使用 body-parse 中间件, 将 post/update 的数据转换成对象, 可通过其 extened 属性来设置; 在取 req 数据时, 使用 req.body.paramsName 而非 get 方法中的 req.query
ES6/7: 因 babel 的存在 (和 polyfill 的补充), 可以更好的使用 ES6/7 的特性; 如结构解析 restpromise 模块管理 async/awaitsymbolset 等同时由于 nodejs 为事件循环机制, 通过使用 async/await, 来获取返回结果, 其虽为同步语法, 但并非真正的同步, 不会影响并发 (nodejs 的优势)
Express: 是由路由和中间件构成一个的 web 开发框架, 从本质上来说, 一个 Express 应用就是在调用各种中间件其中的中间件为: function (req, res, next) {... // next(); 执行下一个中间件}
mongodb: 一种文档型数据库, 相对稳定的关系型数据库来说, 在一致性等可能保证不足, 不适合金融业务 (摘录)
二项目结构
结构图
2.1buildcms-build
分别为 clientcms 在 devproduction 环境下的 webpack 配置其中 dev 环境下的几个重要的中间件介绍如下:
webpack-hot-middleware: 模块热加载;
webpack-dev-middleware: 将编译后的内容存入内存中;
http-proxy-middleware: 实现接口代理, 可在本地环境下, 跨域访问其他接口: 如 Rap api 之类;
connect-history-api-fallback: 可控制刷新时, 如果路由不存在, 则访问前端路由
2.2 clientcms
分别为客户端 CMS 的源码, 其子目录如图所示, 相应的文件夹内容为:
api: 保存接口 api 和 axios 的封装, 在这里将处理统一的请求超时等错误, 对接口名称进行统一管理;
assets: 保存样式, reset.sCSScommon.scssstyle.scss, 其中的 style.scss 中保存着统一变量 (如 $mainBgColor$mainFontColor$mainBorderColor$designWidth 等)minxinfunction 等;
components: 公共组件库;
libs:utils.jspreload.js 等工具函数插件等;
router: 路由;(路由的按需加载等以前整理过, 不赘述);
store:vuex;(vuex 的模块化也整理过了, 不赘述);
views:vue 业务组件
2.3config
各生产环境下的 webpack 区别化配置信息及本地开发路由代理配置信息
2.4public
cms: 为 CMS 在 production 环境下的编译生成, 当 nodejs server 端捕获到 / cms/* 的路径时 (cms 页面刷新时产生), 导向该文件夹;
main: 为 client 在 production 环境下的编译生成, 当 nodejs server 端捕获到 / pages/* 的路径时 (client 页面刷新时产生), 导向该文件夹;
2.5server
通过 nodejs 的 express 框架搭建的服务端, 对 client\cms 的 api 及页面访问提供数据和文件等资源服务
controller: 处理业务, 包括 res 的数据校验格式化处理等;
models: 数据库操作集合; 包含 schememodel 等的声明定义等;
libs:utilsmsg(errorMsgcode 等) 等公共插件工具函数的统一管理;
router:express 的路由, 分为 api 接口 cms 的页面响应 client 的页面响应等
db.js: 数据库的管理 (连接等)
app.js: 服务器的静态服务 cookiesession 等配置和监听;
index.js: 注册 babel 及 babel 解析的相应配置, 包括忽略. babelrc 文件 commonjs 编译异步支持等; 加载执行 app; 通过 node ./server/index.js 运行服务端该方法为一种较为简单的编译方法, 使得支持 ES6/7, 当然也可以通过 webpack 解析得到 nodejs 的执行脚本, 但需注意在 webpack 中设置 target: node 属性, 这样编译生成的脚本 node 才能运行在实施 ssr 的时候, 可使用 webpack 编译解析的方式, 视项目需要而定
2.6upload
为文件图片上传后的存放位置, 使用 express 的静态服务器方法进行处理, 可通过 http 进行访问
来源: http://www.bubuko.com/infodetail-2496475.html