moa-frontend基于 jQuery + bootstrap 的前端框架
基于 jQuery + bootstrap 的前端框架。
技術(shù)棧
express
jade
bootstrap
bootstraptable
jquery
gulp
nginx
前后端分離實(shí)踐
前端：moa-frontend
public下面的采用nginx做反向代理
其他的采用express+jade精簡(jiǎn)代碼（ajax與后端交互）
后端：moa-api
Install
npm install npm start
Features
經(jīng)典的 jQuery + bootstrap 簡(jiǎn)單易用
響應(yīng)式，兼容移動(dòng)端和pc端
expressjs + jade 代碼極簡(jiǎn)，功能強(qiáng)大
自動(dòng)掛載路由，在routes目錄創(chuàng)建js文件會(huì)被自動(dòng)識(shí)別，無(wú)需在app.js里配置
代碼變動(dòng)，自動(dòng)重啟服務(wù)器
支持log4js日志
內(nèi)置simditor和七牛上傳圖片
內(nèi)置uploadify文件上傳
使用gulp構(gòu)建
Configuration
nginx
復(fù)制config/nginx.example.conf為config/nginx.conf
修改config/nginx.conf相關(guān)端口配置
執(zhí)行
gulp nginx
說(shuō)明
實(shí)際端口8000
前端端口3010
api端口3005
simditor_qn
復(fù)制config/simditor_qn.example.conf為config/simditor_qn.conf
module.exports = {
path: '/simditor/upload',
fileKey: 'file',
multer:{
dest: 'uploads/'
},
qn:{
accessKey: 'xxx',
secretKey: 'yyy',
bucket: 'mengxiaoban',
origin: 'http://{bucket}.u.qiniudn.com',
// timeout: 3600000, // default rpc timeout: one hour, optional
// if your app outside of China, please set `uploadURL` to `http://up.qiniug.com/`
// uploadURL: 'http://up.qiniu.com/',
},
url:function(result){
return "http://img.mengxiaoban.cn/" + result.hash;
}
}
說(shuō)明
path 是simditor里使用的上傳路徑
fileKey 是上傳后，路由里req獲取的字段名稱
multer是express里multer中間件的配置
qn是qn這個(gè)node模塊的配置
url是最終圖片地址，可以自己定義
Tasks
npm start啟動(dòng)服務(wù)器gulp routes打印路由gulp kp停止服務(wù)器gulp nginx啟動(dòng)nginx服務(wù)器gulp跑測(cè)試，依賴gulp watch和gulp mocha