express实现前后端通信上传图片,存储数据库(mysql)傻瓜教程(三)完结篇
终于完成了所有自己想要的功能(鼓励下自己),虽然还是很简陋,但是还是挺有满足感的,哈哈。
附上前两篇的链接:
进入正题,在第二篇里面已经完成了连接数据库,并且实现了对数据库的增删改查,下面咱们来实现上传的图片存储数据库,并且在第二次访问时返回这张上传的图片。
昨天遇到的问题是这样的,因为进入首页时候会读取模板(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=12
Checks 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("<img src='/upload/" + fName + "' />");
res.end(); }) }
});
});
就是在上传图片后,把图片的路径存储到数据库中,可以在第二次访问时返回。
前端的请求可以这样写:
$.get('/me', function(data) {
if (data !== null || data !== undefined) {
$("body").append($("<img src=" + data.UserPass + ">"))
}
});
直接在页面中append这张图片,src从返回的数据中获取。
好啦,现在大家可以重启express,上传一张图片后,在刷新页面,便可以看到刚刚上传的图片了!!
好了教程到此圆满结束了,自己的第一篇博客,写作过程中收获颇多,也请大家发现问题,多提意见,不胜感激,最后附上整个项目的源代码,点击下载,
解压后运行express的启动代码就好,运行不成功的先配置好数据库!!
set DEBUG=myapp & npm start
mac
DEBUG=myapp npm start
祝大家好运~
欢迎任何形式的转载,但请务必注明原文详细链接
express实现前后端通信上传图片,存储数据库(mysql)傻瓜教程(三)完结篇的更多相关文章
- Vue+Express实现前后端分离
先说明一下缘由,因为自己前段时间在实习,实习期间为了参与项目开发,粗略学习了下Vue.Vuex.Vue-Router,大致会一些基础的.这里也快要做毕业设计了,趁着放假回来的这两天,学习下Node的相 ...
- web——前后端通信原理
前端向后台传输数据: 传输方法:post get 区别: (1)get:用于从服务器获取数据,将参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看 ...
- web——前后端通信
前端向后台传输数据: 传输方法:post get 区别: (1)get:用于从服务器获取数据,将参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看 ...
- springboot 前后端分离开发 从零到整(三、登录以及登录状态的持续)
今天来写一下怎么登录和维持登录状态. 相信登录验证大家都比较熟悉,在Javaweb中一般保持登录状态都会用session.但如果是前后端分离的话,session的作用就没有那么明显了.对于前后端分离的 ...
- C++ protobuffer 前后端通信 简单应用
后端发送多个protobuffer消息到前端,前端用socket监听,如何区分消息类型呢? //定义心跳包 DseHeartbeat _DseHeartbeat; DseHeartbeat _DseH ...
- 前后端通信中使用Ajax与后台接口api交互(以登录功能为例)
一.查阅开发文档 首先,要做这个功能前,我们必须先查阅后台接口文档,了解使用登录接口时,需要提交哪些参数,并且接口使用返回的数据. 这里我使用了一个返回json格式数据的登录接口为例,讲解怎么使用Aj ...
- python 前后端分离 简单的数据库返回接口
1.使用node http-server 起本地服务器 或者打开nginx 直接用nginx的默认页面也可以 (用下面的html文件替换nginx下html文件夹下的index.html) http ...
- 3-4章 第3章 form表单组件与小程序前后端通信
View它相当于是一个点击触发一个事件,但是它的事件应该是相对来说可能是比较是偏向于页面上的一些展示,或者说是页面上的一些导航的一些跳转.Button它是一个标签, button是一个标签,一般去触发 ...
- 前后端通信—webSocket(支持跨域)
WebSocket 的介绍 WebSocket 是什么 WebSocket 是一种网络通信协议.RFC6455 定义了它的通信标准. WebSocket 是 HTML5 开始提供的一种在单个 TCP ...
随机推荐
- Distributed1:Linked Server 添加和删除
A linked server allows for access to distributed, heterogeneous queries against OLE DB data sources. ...
- lua中的数据类型
lobject.h: lobject.h: 其中使用GCObject表示的数据类型是需要lua 的gc记录的. lstate.h: lobject.h:
- C# 如何提取SaveFileDialog的保存路径
直接上代码 public TestOne() { InitializeComponent(); SaveFileDialog();//调用打开SaveFileDialog 保存对话框 } #regio ...
- File类使用小结
一.构造函数 File(String pathname):根据参数转换为抽象路径名创建File实例 File(String parent,String filename):根据parent和filen ...
- 百度sdk定位不成功,关闭定位
公司项目有用到百度地图,登录的时候需要定位一次,获取登录的地址信息,在手机无法连接外网的情况,也就无法访问百度定位服务器的时候,定位的回调函数要30秒以上才能返回结果,于是去仔细查百度api,发现没有 ...
- iOS开发之各种动画各种页面切面效果
因工作原因,有段时间没发表博客了,今天就发表篇博客给大家带来一些干货,切勿错过哦.今天所介绍的主题是关于动画的,在之前的博客中也有用到动画的地方,今天就好好的总结一下iOS开发中常用的动画.说道动画其 ...
- Openfire/XMPP学习之——一个简单的Smack样例
昨天讲了Openfire的搭建和配置,今天来讲一下Smack.如果对如何搭建和配置Openfire的,可以参考Openfire/XMPP学习之——Openfire的安装.配置. Smack是一个开源, ...
- 初试JqueryEasyUI(附Demo)
写在前面 准备 布局Layout 菜单树Tree 内容页Tabs 右键菜单Menu 表单Form 对话框Dialog 示例Demo下载 关于easyui不多说,对于我们这样没有美术功底的程序员来说,简 ...
- MySQL入门02-MySQL二进制版本快速部署
在上篇文章 MySQL入门01-MySQL源码安装 中,我们介绍了MySQL源码安装的方法. 源码安装虽然有着更加灵活和更加优化等诸多优势.但源码编译安装部署的过程相对复杂,而且整个过程所花费的时间很 ...
- 【Java基础】并发
Num1:同步访问共享的可变数据 关键字Synchronized可以保证在同一时刻,只有一个线程可以执行某一个方法,或者某一个代码块.. 同步不仅仅理解为互斥的方式,如果没有同步,一个线程的变化就不能 ...