因为之前用过上述的组合完成过很多系统,而这一次是为了实现一个帮助系统的静态网页发布。因为很久不写,重点说遇到的几个坑:

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

Node + Express + Mysql的CMS小结的更多相关文章

  1. node+express+mysql 实现登陆注册

    基于 node.express.mysql 实现的登录注册. 1.`首先在终端中 安装 node .` 2.`通过npm install express -g 命令全局安装 express`. 3.` ...

  2. 应用node+express+mysql 实现简单的增删改查

    记录下来备忘 1.准备好webstrom编辑器,编辑器调整字体大小等在file->settings->editor下设置 注册码 来源网上: 2017.2.27更新 选择“license ...

  3. node+express+mysql实现简单的数据增删改查

    前提 电脑已经安装了node,express,mysql. 实现步骤 1.新建数据库表 附数据表结构: 2.创建exprss项目 express -e myapp  新建一个以ejs为模板的expre ...

  4. 教务管理系统(node+express+mysql)

    模块拆分 现在将教务系统拆分成九个模块: 教务系统教师业务:师资管理.教学计划管理.排课管理 教务系统学生业务:考试管理.毕业生管理.学生综合测评 信息查询:自习室查询.课程表查询 考试系统:实现学生 ...

  5. 一个 "开箱即用" 个人博客全栈系统项目!vue+node+express+mysql+sequlize+uniapp

    " MG'Blog " 一个 "开箱即用" 个人博客全栈系统项目! 探索本项目的源码 » 前台预览 · 管理端预览 v1.0.2 小程序预览 v1.0.2 介绍 ...

  6. node express+mysql搭建简易API服务—body-parser中间件

    最近用express搭建了一个简单的RESTful风格的API服务,数据库使用mysql,主要用于获取数据库数据,模糊搜索等. 需要用到的模块: express:这个都很熟悉了: body-parse ...

  7. Node+Express+MySql实现简单增删改查和登录

    var express = require('express'); var mysql = require('mysql'); var app = express(); var bodyParser ...

  8. Node + Express + MySQL 接口开发完整案例

    https://blog.csdn.net/u013216976/article/details/85273770 https://github.com/Apache-Ra/node-express- ...

  9. 电商网站项目Angular+Bootstrap+Node+Express+Mysql

    1.登陆 2.注册 3.主页 4.购物车 5.管理中心 6.文件上传 代码: https://github.com/Carol0311/min_Shop.git 后期会持续进行功能更新以及开发阶段遇到 ...

随机推荐

  1. 网页中的JavaScript

    变量的声明和赋值 var count;定义变量 count = 5;赋值 var” - 用于声明变量的关键字 “count” - 变量名 同时声明和赋值变量 var count = 10; 声明多个变 ...

  2. easyui combobox onSelect事件

    easyui combobox 没有onchange事件,只有onSelect事件 1 $(function () { $('#Select6').combobox({ onSelect: funct ...

  3. 关于使用tracert命令检测网络问题

    tracert命令是一个电脑网络工具-Windows命令行界面程序和内建命令,运行该命令后可以显示本机IP到达目标IP所经过的路由器IP地址,和响应的延迟信息! 在windows操作系统中,点击“开始 ...

  4. jQueryEasyUI

    jQueryEasyUI 编辑 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者 ...

  5. Ubuntu和Windows的交互工具---Samba环境配置

    Samba软件安装 使用源代码安装samba,在终端输入如下指令: #sudo apt-get install samba #sudo apt-get install smbclient #sudo ...

  6. Windows Phone 8.1 新特性 - 控件之应用程序栏

    2014年4月3日的微软Build 2014 大会上,Windows Phone 8.1 正式发布.相较于Windows Phone 8,不论从用户还是开发者的角度,都产生了很大的变化.接下来我们会用 ...

  7. mysql 语句执行顺序问题

    今天在写程序的时候,做分页查找时无意中,将计算数据库查询数量的语句,放到了limit之中,导致出现了bug. 所以发现以下问题: select count(1) from table limit 0, ...

  8. Swing Note

                                      2. Swing容器:   内容窗格.分层窗格.玻璃窗格和一个可选的菜单条.(这四个同时包含在根窗格里)(请分别向其中添加组件)   ...

  9. poj 1936 All in All

    All in All Time Limit: 1000 MS Memory Limit: 30000 KB 64-bit integer IO format: %I64d , %I64u   Java ...

  10. 46 个非常有用的 PHP 代码片段

    在编写代码的时候有个神奇的工具总是好的!下面这里收集了 40+ PHP 代码片段,可以帮助你开发 PHP 项目. 这些 PHP 片段对于 PHP 初学者也非常有帮助,非常容易学习,让我们开始学习吧- ...