Node + Express + Mysql的CMS小結

因為之前用過上述的組合完成過很多系統，而這一次是為了實現一個幫助系統的靜態網頁發布。因為很久不寫，重點說遇到的幾個坑：

1、庫版本的問題

比如mysql連接數據庫一直報錯，因為系統重裝過，所以重新安裝了最新的Node和Mysql，結果死活連接不上，折騰了半天最后發現需要升級一個node-mysql，錯誤信息：

Error: ER_ACCESS_DENIED_ERROR: Access denied for user 'root'@'localhost'

參考鏈接：http://cnodejs.org/topic/5312077f17f534371d0558ef

使用的express是3.X，沒有升到最新的4.x，導致做圖片上傳的時候一直報錯，最后的處理辦法

// http://www.520ued.com/article/53e9863c3306f77043840c80  npm install connect-multiparty
// http://stackoverflow.com/questions/24610996/how-to-get-uploaded-file-in-node-js-express-app-using-angular-file-upload

// app.use(express.bodyParser());  
// 替換成下面的三行
app.use(express.json());
app.use(express.urlencoded());
app.use(require('connect-multiparty')());

 

2、百度UEditor的坑

 

a) 下載的坑：

因為需要使用的功能極其簡單，所以用的是umeditor，http://ueditor.baidu.com/website/umeditor.html

下載鏈接跳轉過去的，Mini版界面所有鏈接點擊會顯示403（禁止訪問），好在右上角‘更多歷史版本’可以前往百度雲進行下載

將解壓后的文件，統一放至umeditor文件夾，然后copy至工程的public目錄中，然后對umeditor.config.js進行修改

b) 代碼的坑

反正這種命名我是覺得有點不友好，上傳，你帶一個imageUploadUrl這樣跟下面二個參數有所區分，我第一眼瞅這個代碼的時候真的有點懵逼的感覺。

上傳用的iframe提交，但是chrome下會默認在前面加上<pre后面加上<audio，導致無法正常解析出json格式（官方網站的上傳示例也有此問題），以下為官方界面的截圖

后台返回也沒有問題啊，哪里出問題了， 我找到image.js這個源碼后發現這個開源的代碼質量確認不能算高，在chrome下時不時會有一些異常拋出。來看第186行的代碼：

uploadComplete: function(r){
    var me = this;
    try {
        var json = eval('('+r+')');
        Base.callback(me.editor, me.dialog, json.url, json.state);
    } catch (e){
        var lang = me.editor.getLang('image');
        Base.callback(me.editor, me.dialog, '', (lang && lang.uploadError) || 'Error!');
    }
},

直接用eval來解析后端返回的json，外層套了一個try catch，具體報什么錯也沒有詳細的描述。改進方法暫時就是用正則對{}前后替換為空字符串。

c) 上傳

網上搜索的很多，比如busbody、multiparty、formidable我一個都沒順利跑起來，最后自己擼了一個，有需要的童鞋可以參考一下

function uploadImageHandler(req, res) {
    var uploadPath = process.cwd() + "/public/uploads/";
     
    var fileItem = req.files.upfile;
    var tempPath = fileItem.path;
    var fileName = fileItem.name;
    var fileSize = fileItem.size;
 
    var ext = path.extname(fileName);
    var newFilename = (new Date() - 0) + ext;
  
    var inputStream = fs.createReadStream(tempPath);
    var outputStream = fs.createWriteStream(uploadPath + newFilename);
 
    inputStream.on('end', function() {
        fs.unlinkSync(tempPath);
      
        res.end(JSON.stringify({
            "originalName": fileName,
            "name": newFilename,
            "url": '/uploads/' + newFilename,
            "type": ext,
            "size": fileSize,
            "state": "SUCCESS"
        }));
    });
  
    inputStream.pipe(outputStream);
}

中間也遇到很多警告甚至報錯，因為時間關系沒有深入研究，這樣一個簡單的CMS，加上上面踩的坑，用了差不多一天半的時間，node還是比較適合這種比較輕量級的需求開發。

 

 

對Express做的開發做個簡單的小結：

1、參數獲取

路由上的參數，比如：test，通過req.params.test獲取

url上的參數，比如：http://xxx.com?from=x 通過req.query.from便可獲取參數from的值

post提交的參數，通過req.body.paramName可以獲取指定的paramName的值

2、ejs，暫時習慣用ejs還不太習慣jade

<%=%>取值，不要寫<%%>不然會導致死循環，last few gcs

3、隨着node的版本升級，buffer有幾個方法已經廢棄了  https://nodejs.org/api/buffer.html