express 转发java接口_[Java教程]express实现前后端通信上传图片，存储数据库（mysql）傻瓜教程（三）完结篇...

[Java教程]express实现前后端通信上传图片，存储数据库(mysql)傻瓜教程(三)完结篇

0 2015-12-10 16:00:08

终于完成了所有自己想要的功能(鼓励下自己)，虽然还是很简陋，但是还是挺有满足感的，哈哈。

进入正题，在第二篇里面已经完成了连接数据库，并且实现了对数据库的增删改查，下面咱们来实现上传的图片存储数据库，并且在第二次访问时返回这张上传的图片。

昨天遇到的问题是这样的，因为进入首页时候会读取模板(routes/index.js)，代码如下：router.get('/', function(req, res) { res.render('index', { title: '孟星魂', });});

所以在此路由下无法再获取数据(因为第二次访问页面的时候要从数据库请求图片的路径)，咱们就只能在发送一个请求来获取数据，所以要使用中间件，路由中间件的用法http://www.expressjs.com.cn/guide/using-middleware.html#middleware.router。

这里的中间件用法如下(也是问题所在，官网上并没有写清楚如何在前端发送请求的格式)router.get('/:id', function(req, res) { if (req.params.id === "me") { //dosomething }})

前端发送请求是这样：$.get('/me', function(data) { //do something });

(是不是很简单，但就是没有文档说明，哭哭哭)，express获取参数有三种方法：Checks route params (req.params), ex: /user/:idChecks query string params (req.query), ex: ?id=12Checks urlencoded body params (req.body), ex: id=

1、例如：127.0.0.1:3000/index，这种情况下，我们为了得到index，我们可以通过使用req.params.index得到(咱们的例子用的就是这种方法)，通过这种方法我们就可以很好的处理Node中的路由处理问题，同时利用这点可以非常方便的实现MVC模式；

2、例如：127.0.0.1:3000/index?id=12，这种情况下，这种方式是获取客户端get方式传递过来的值，通过使用req.query.id就可以获得，类似于PHP的get方法；

3、例如：127.0.0.1:3000/index，然后post了一个id=2的值，这种方式是获取客户端post过来的数据，可以通过req.body.id获取，类似于PHP的post方法；

接下来往get请求中添加回调，主要是访问数据库，查询有没有图片的路径，然后添加到页面中，代码如下：

router.get('/:id', function(req, res) { //创建一个connection if (req.params.id === "me") { var connection = mysql.createConnection({ host: '127.0.0.1', user: 'root', password: '111', port: '3306', database: 'nodesample', }); connection.connect(function(err) { if (err) { console.log('[query] - :' + err); return; } console.log('[connection connect] succeed!'); }); //执行SQL语句 var userGetSql = 'SELECT * FROM userinfo'; //查 connection.query(userGetSql, function(err, result) { if (err) { console.log('[SELECT ERROR] - ', err.message); return; } if (result[0] !== undefined) { res.send(result[0]) } console.log('--------------------------SELECT----------------------------'); console.log(result); console.log('-----------------------------------------------------------------\n\n'); }); //关闭connection connection.end(function(err) { if (err) { return; } console.log('[connection end] succeed!'); }); }})

这里咱们查询已经建立好的userinfo表，返回的result就是数据库中的所有数据，命令行里可以看到打印，这里只返回第一条数据，在实际应用中应该还会传递一个用户的id过来，用来匹配数据库中的数据，在上传时也会匹配这个id，如果出现相同则会更新掉这条数据，

这些就需要大家自己来动手搞定了，现在保证userinfo表是空的，下次上传的时候保证会读到这条数据。

图片上传的代码修改如下：router.post('/', function(req, res) { // console.log(res); // res.send(req.body); var form = new formidable.IncomingForm(); form.uploadDir = "./public/upload/temp/"; //改变临时目录 form.parse(req, function(error, fields, files) { for (var key in files) { var file = files[key]; var fName = (new Date()).getTime(); switch (file.type) { case "image/jpeg": fName = fName + ".jpg"; break; case "image/png": fName = fName + ".png"; break; default: fName = fName + ".png"; break; } console.log(file, file.size); var uploadDir = "./public/upload/" + fName; fs.rename(file.path, uploadDir, function(err) { if (err) { res.write(err + "\n"); res.end(); } var connection = mysql.createConnection({ host: '127.0.0.1', user: 'root', password: '111', port: '3306', database: 'nodesample', }); connection.connect(); var userAddSql = 'INSERT INTO userinfo(Id,UserName,UserPass) VALUES(0,?,?)'; var userAddSql_Params = ['path', "/upload/" + fName]; //增 connection.query(userAddSql, userAddSql_Params, function(err, result) { if (err) { console.log('[INSERT ERROR] - ', err.message); return; } console.log('--------------------------INSERT----------------------------'); //console.log('INSERT ID:',result.insertId); console.log('INSERT ID:', result); console.log('-----------------------------------------------------------------\n\n'); }); connection.end(); res.write(""); res.end(); }) } });});

就是在上传图片后，把图片的路径存储到数据库中，可以在第二次访问时返回。

前端的请求可以这样写：$.get('/me', function(data) { if (data !== null || data !== undefined) { $("body").append($("")) } });

直接在页面中append这张图片，src从返回的数据中获取。

好啦，现在大家可以重启express，上传一张图片后，在刷新页面，便可以看到刚刚上传的图片了！！

好了教程到此圆满结束了，自己的第一篇博客，写作过程中收获颇多，也请大家发现问题，多提意见，不胜感激，最后附上整个项目的源代码，点击下载,

解压后运行express的启动代码就好,运行不成功的先配置好数据库！！set DEBUG=myapp & npm start

macDEBUG=myapp npm start

祝大家好运~

本文网址：http://www.shaoqun.com/a/166524.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

MYSQL

0