Express实现前端后端通信上传图片之存储数据库,
分类:计算机网络

在上篇小说给大家介绍了express完结前端后端通信上传图片之存款和储蓄数据库(mysql)傻瓜教程(一)

在前面二个那个坑里摸爬滚打已经一年多了,终于下定狠心写下团结第一篇博客(固然内容原创居少,算是个结合内容),开头使用express的案由是因为自身想测量检验接收下前端上传图片并回到,达成图片上传。后端各位大大们又都比较忙,不能了,只可以自身上了(哎,都是逼出来的)。

数据库如标题,使用开源的mysql为底蕴,小编是下载的解压版本(自行百度就有,用百度下载的就行),配置进度//www.jb51.net/article/76206.htm,本身在安装进度中,对于配置my.ini文件着实找了遥远的教程,所以贴上自个儿的my.ini文件

  此教程适合未有接触过node的web前端开拓,连忙营造筑组织调的框架,基于express4.x。

[mysqld]
basedir="D:/MySql" 
datadir="D:/MySql/data" 
port = 3306
socket = "/tmp/mysql.sock"
[client] 
password = 
port = 3306
socket = "/tmp/mysql.sock"
default-character-set = utf8 

  首先安装express ,,安装进程中央直属机关接回车到底就ok了。

  能够见见自家的mysql是安装在Mysql文件夹下的,大家能够遵循本身的路子进行改造。

  安装完结后,继续安装express的选用骨架,生成私下认可项目

  然后在bin文件夹下运转

$ npm install express-generator -g 
mysqld -install

  (-g代表全局安装,下一次能够直接行使,不用再行安装)

  安装mysql服务,然后运维服务。

  接着在myapp文件夹下直接运维express,项目目录就一贯生成了 

net start mysql

图片 1

  上边的配置mysql教程链接中有navicat for mysql的下载地址(是mysql的可视化工具),还也有注册的消息,不想打命令行的同桌能够下载使用,越发有助于些。

    然后装置具备依赖包:

  率先次登录数据库

$ npm install 
mysql -uroot -p

  运行那么些动用(MacOS 或 Linux 平台):

直白回车,未有密码。

$ DEBUG=myapp npm start 

(ps:笔者在选用中手动填入数据库时,输入汉语时会有乱码难题,设计方案如下:右键一个数据库,然后选用数据库属性,修改字符集为utf8格式,整理选用第贰个就行,如图:
        )

  Windows 平台使用如下命令:

  下边就要动用node连接数据库了。各位看官可以泡杯茶继续~。

> set DEBUG=myapp & npm start 

  felixge/node-mysql是三个纯nodejs的用javascript完成的多少个MySQL客户端程序。felixge/node-mysql封装了Nodejs对MySQL的基本操作,百分之百MIT公共许可证。

图片 2

  项目地址:

   看到那么些页面时,大家早已达成了根基的门类创设,继续往上增加自身的代码就可以了。(到那部后大家可以把public目录下的公文夹修改为团结垂怜的格式,比方:js,css,只是叁个渠道而已)

  在类型中安装node-mysql,步入明天树立好的myapp文件夹,运转:

   接下来我们就可以把温馨的页面增加到项目里面了,可是express到当下自身只发现能够加载jade模板和ejs。大家不用担忧还要从新学习jade,这里,能够一贯用工具把html转化为jade模板,能够令你手中已有个别项目一向抬高进去,jade模板在express的加载方法:http://www.expressjs.com.cn/guide/using-template-engines.html。其实jade的写法真的很简短,大家看一下api基本就会上手了,学习地点点这里。(项目里早已合併了jade,不用再行设置)

npm install mysql

    今后我们开垦宗旨的app.js

  接下去进行测验,把官方网址的例证修改下,放到大家的品种里面,修改routes/index.js,重启express

图片 3

var express = require('express');
var router = express.Router();var mysql = require('mysql'); //调用MySQL模块
router.get('/', function(req, res) {
 res.render('index', {
 title: '孟星魂'
 });
 //创建一个connection
 var connection = mysql.createConnection({
 host: '127.0.0.1', //主机
 user: 'root', //MySQL认证用户名
 password: '111', //MySQL认证用户密码,没有测试没有密码时为空是否能登陆,不能的话设置下登陆密码
 port: '3306', //端口号
 database: 'nodesample'
 });
 //创建一个connection
 connection.connect(function(err) {
 if (err) {
 console.log('[query] - :' + err);
 return;
 }
 console.log('[connection connect] succeed!');
 });
 //执行SQL语句
 connection.query('SELECT 1 + 1 AS solution', function(err, rows, fields) {
 if (err) {
 console.log('[query] - :' + err);
 return;
 }
 console.log('The solution is: ', rows[0].solution);
 });
 //关闭connection
 connection.end(function(err) {
 if (err) {
 return;
 }
 console.log('[connection end] succeed!');
 });
});
module.exports = router;

这几行定义的是express的路由,我们能够总结领悟下路由的功能,http://www.expressjs.com.cn/guide/routing.html,那点拾分关键,必须要精晓,不是很难,应该能够神速掌握。

 展开页面后,命令符突显效果如下:

   比方以后你展开页面,对应user.js里面包车型客车代码一看就会精晓。(展开这么些页面时发出了get央浼)

 测量检验成功!!,上边建立测验数据库

   上面大家先不急着上传图片,先测量试验下前端发送的post和get央浼。 

CREATE DATABASE IF NOT EXISTS nodesample CHARACTER SET UTF8;
USE nodesample;
SET FOREIGN_KEY_CHECKS=0;
DROP TABLE IF EXISTS `userinfo`;
CREATE TABLE `userinfo` (
 `Id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键',
 `UserName` varchar(64) NOT NULL COMMENT '用户名',
 `UserPass` varchar(64) NOT NULL COMMENT '用户密码',
 PRIMARY KEY (`Id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='用户信息表';

   以post乞请为例,我们把layout.jade修改成上边包车型地铁标准

  这段代码能够平昔在navicat里面运转,点击工具,console,粘贴,回车就好了。
  接下去往数据库中增多一条数据,修改routes/index.js,如下

doctype html
html
 head
 title= title
 link(rel='stylesheet', href='/css/style.css')
 script(type="text/javascript", src="/js/jquery.js")
 script(type="text/javascript", src="/js/index.js")
 body
 block content 
var express = require('express');
var router = express.Router();
var mysql = require('mysql'); //调用MySQL模块
router.get('/', function(req, res) {
 res.render('index', {
 title: '孟星魂'
 });
 //创建一个connection
 var connection = mysql.createConnection({
 host: '127.0.0.1', //主机
 user: 'root', //MySQL认证用户名
 password: '111', //MySQL认证用户密码
 port: '3306', //端口号
 database: 'nodesample'
 });
 //创建一个connection
 connection.connect(function(err) {
 if (err) {
 console.log('[query] - :' + err);
 return;
 }
 console.log('[connection connect] succeed!');
 });
 //执行SQL语句
 var userAddSql = 'INSERT INTO userinfo(Id,UserName,UserPass) VALUES(0,?,?)';
 var userAddSql_Params = ['Wilson', 'abcd'];
 //增
 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('-----------------------------------------------------------------nn');
 });
 //关闭connection
 connection.end(function(err) {
 if (err) {
 return;
 }
 console.log('[connection end] succeed!');
 });
});

  在public/js下新建个index.js,加载jquery(只是为了简写的ajax)有人也许会问为啥会未有public路线,因为Express 内置的 express.static 能够实惠地托管静态文件,比方图片、CSS、JavaScript 文件等,详细内容点这里,对应app.js的内容为 app.use(express.static(path.join(__dirname, 'public')));

module.exports = router;

除非这么才具读取到文件。

  重启express,刷新页面,命令符呈现:

  下边初叶修改js代码,public/js/index.js内写个最基础的ajax乞求就好了,这里发送乞求的门道为"/",正是往主页发送央求(路由必得求清楚,路由自然要明了,路由必然要明了!!)

  数据库呈现:

$(document).ready(function() 
{ 
$.post('/',
 {num: '12345678'
},
 function(data) 
{  
 console.log(data) 
 });
}) 

  好了,今后大家已经可以操作数据库了,基本的一部分操作请仿效,增加和删除改查里面都有介绍。

   然后在routes/index.js里面修改

   前面应该是介绍大家上传的图片存款和储蓄数据库的,但遭遇了一部分坑,才减轻,最理想的留在明天~,
  首即使路由的主题材料,主页央浼了模版,那一年是力不能够支在往前端发送数据的,所以会用到express的中间件,我们晚安~。

var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
 res.render('index', { title: 'Express' });
});
router.post('/', function(req, res) { 
 res.send(req.body.num);
});
module.exports = router; 

您可能感兴趣的稿子:

  • SQL二〇〇五Express中程导弹入ACCESS数据库的三种艺术
  • 浅析node连接数据库(express+mysql)
  • Express完成前端后端通讯上传图片之存款和储蓄数据库(mysql)傻瓜式教程(一)

  在此监听首页的post诉求,req.body.num表示发送过来的数量,大家能够间接打印下req,看看个中含有了何等内容,加深明白(修改完文件后记得重启express)。

图片 4

  那时候在调控桃园就足以阅览再次来到的数量了。

  未来大家早就足以使用node接收前端发送的哀告了(是或不是灰长快乐!!),下边举行大家的侧重点,上传图片。

  因为是测量试验接口,集团的种类要同盟低版本浏览器,全部plupload.js就出台了(不是本人不想用h5的不二诀窍)。官方网站,下载后如图,就足足了。(记得在layout.jade里面加载)

图片 5

  把index.js修改成上面包车型客车表率,那是个专门的学业的官方网站络传事例,不清楚的在官方网站看下api,很好驾驭(其实看变量名字也都能领悟~)

$(document).ready(function() {
 var uploader = new plupload.Uploader({
 runtimes: 'html5,flash,silverlight,html4',
 browse_button: 'pickfiles', // you can pass an id...
 container: document.getElementById('container'), // ... or DOM Element itself
 url: '/',
 flash_swf_url: '../js/Moxie.swf',
 silverlight_xap_url: '../js/Moxie.xap',
 filters: {
 max_file_size: '10mb',
 mime_types: [{
 title: "Image files",
 extensions: "jpg,gif,png"
 }, {
 title: "Zip files",
 extensions: "zip"
 }]
 },
 init: {
 PostInit: function() {
 document.getElementById('filelist').innerHTML = '';
 document.getElementById('uploadfiles').onclick = function() {
 uploader.start();
 return false;
 };
 },
 FilesAdded: function(up, files) {
 plupload.each(files, function(file) {
 document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
 });
 },
 UploadProgress: function(up, file) {
 document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '' + file.percent + "%";
 },
 Error: function(up, err) {
 document.getElementById('console').appendChild(document.createTextNode("nError #" + err.code + ": " + err.message));
 },
 FileUploaded: function(up, file, info) { // Called when file has finished uploading 
 $("body").append($(info.response)) 
 },
 UploadComplete: function(up, file) {
 }
 }
 });
 uploader.init();
}) 

  index.jade修改成上面包车型地铁模范,首借使加多上传点击的因素,加多了多少个按键而已(不要嫌弃它的确是非常丑--)

extends layout
block content
 h1= title
 p Welcome to #{title}
 #filelist
 #container
 a#pickfiles select files
 a#uploadfiles upload files 

  这里大家要用到的外表模块是FelixGeisendörfer开辟的node-formidable模块。它对深入分析上传的文书数量做了很好的肤浅。 其实简单,管理文件上传“正是”管理POST数据 —— 不过,麻烦的是在切实的拍卖细节,所以,这里运用现有的方案更合适点。  

  安装formidable模块。

npm install formidable 

  修改routes/index.js

var express = require('express');
var router = express.Router();
var fs = require('fs');
var formidable = require("formidable");
/* GET home page. */
router.get('/', function(req, res) {
 res.render('index', {
 title: '孟星魂'
 });
});
router.post('/', function(req, res) {
 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();
 }
 //res.write("upload image:<br/>");
 res.write("<img src='/upload/" + fName + "' />");
 res.end();
 })
 }
 });
});

module.exports = router;

   此时亟需在public出手动新建文件夹upload以及上面包车型客车temp文件夹。

   先把公文上传到不经常文件夹,再经过fs重命名移动到内定的目录就可以。

  fs.rename即重命名,可是fs.rename不可能夸磁盘移动文件,所以大家须要钦定上传的权且目录要和末段目录在一样磁盘下。

  res.write正是往前端重回的多少,这里自个儿直接回到二个img标签,并加多上传文书的门径,前端只要把标签append到页面中就ok了。

  完毕前端图片上传功效!!

  明日进行到这里,后日进展教学node连接数据库的操作。

您或者感兴趣的篇章:

  • SQL二〇〇七Express中程导弹入ACCESS数据库的二种艺术
  • 浅析node连接数据库(express+mysql)
  • Express完毕前端后端通信上传图片之存款和储蓄数据库(mysql)傻瓜式教程(二)

本文由正版必中一肖图发布于计算机网络,转载请注明出处:Express实现前端后端通信上传图片之存储数据库,

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文