标签:
终于完成了所有自己想要的功能(鼓励下自己),虽然还是很简陋,但是还是挺有满足感的,哈哈。
进入正题,在第二篇里面已经完成了连接数据库,并且实现了对数据库的增删改查,下面咱们来实现上传的图片存储数据库,并且在第二次访问时返回这张上传的图片。
昨天遇到的问题是这样的,因为进入首页时候会读取模板(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/:id
Checks 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 = newformidable.IncomingForm();
form.uploadDir= "./public/upload/temp/"; //改变临时目录
form.parse(req, function(error, fields, files) {for (var key infiles) {var file =files[key];var fName = (newDate()).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
mac
DEBUG=myapp npm start
祝大家好运~
标签: