从0到1学习node(七)之express搭建简易论坛 总索引： 从0到1学习node系列总索引我们需要搭建的这个简易的论坛主要的功能有：注册、登录、发布主题、回复主题。下面我们来一步步地讲解这个系统是如何实现的。 1. 应用生成器 # 使用上节学习到express的知识，我们也可以从0开始，一步步把系统搭建起来。不过express中还有一个应用生成器，使用这个应用生成器可以快速的创建一个应用的框架，然后我们再在这个框架中完善我们需要的内容。首先安装应用生成器：$npm install -g express-generator 运行express --version若能正常输出版本号，则安装成功。我们的论坛名称可以为node_express_forum，然后使用express创建一个框架：$express node_express_forum 运行后，生成器会在这个目录下生成几个目录和文件： create : node_express_forum create : node_express_forum/package.json create : node_express_forum/app.js create : node_express_forum/public create : node_express_forum/public/javascri create : node_express_forum/public/images create : node_express_forum/public/styleshe create : node_express_forum/public/styleshe create : node_express_forum/routes create : node_express_forum/routes/index.js create : node_express_forum/routes/users.js create : node_express_forum/views create : node_express_forum/views/index.jad create : node_express_forum/views/layout.ja create : node_express_forum/views/error.jad create : node_express_forum/bin create : node_express_forum/bin/www install dependencies: $ cd node_express_forum && npm install run the app: $ DEBUG=node-express-form:* npm start 已经生成成功。进入到这个目录：$cd node_express_forum 我们来看下生成的这个框架，方便知道后面怎么进行填充。. ├── app.js ├── package.json // 依赖的模块 ├── bin │ └── www ├── public // 静态文件目录 │ ├── images │ ├── javascripts │ └── stylesheets │ └── style.css ├── routes // 路由，相当于控制器 │ ├── index.js │ └── users.js └── views // 视图 ├── error.jade ├── index.jade └── layout.jade 打开package.json后，我们看到还需要再安装几个模块才能运行：$npm install --save-dev 好了，到现在框架已搭建完毕，我们来运行一下：$npm start 然后在浏览器中输入127.0.0.1:3000，就可以看到了：Express Welcome to Express。 2. 准备工作 # 基本框架已经创建好了，现在开始我们论坛的准备工作。这里我们的准备工作有3个：模板引擎，模型，数据库，路由。 2.1 模板引擎 # express里默认使用的模板引擎是jade，不过我们也可以选择其他的模板引擎，我这里选择了ejs，因为感觉ejs更像是个html文件，方便维护，当然，每个人都有自己的喜好。$npm install ejs --save-dev 然后在app.js中修改模板引擎：app.set('view engine', 'ejs'); // 原为jade，现改为ejs 这里我会将views目录中的.jade文件清空，后续使用.ejs编写模板。 2.2 模型 # 这里我们说的模型是指MVC中的M，主要是进行数据库的连接和操作。创建models目录用来存放文件。 2.3 数据库 # 我们使用mysql数据库来存放数据，数据库名称可以叫做forum。里面有3张表：user, list, reply。 user表（用户）的字段有： id, username, password, regtime list表（主题）的字段有： id, uid(用户id), title, content, createtime reply表（回复）的字段有： id, pid(主题id), uid(用户id), content, createtime 2.4 路由 # 上节我们是使用app.use()或app.get()等方式来实现路由，同时，express还提供了express.Router类来创建模块化。可挂载的路由。Router 实例是一个完整的中间件和路由系统，因此常称其为一个 “mini-app”。在routes/user.js中（这里我将其users.js改为了user.js）：var express = require('express'); var router = express.Router(); // 实例化router // 定义主页的路由 router.get('/', function(req, res, next) { res.render('index', { title: 'user' }); // 加载index.ejs模板并传递数据给模板 }); router.get('/reg', function(req, res, next) { res.render('index', { title: 'reg' }); }); module.exports = router; 然后在app.js中加载路由模块：var user = require('./routes/user'); //... app.use('/user', user); 这样就可以访问/user和/user/reg页面了。如果需要增加其他的路由，则依照此方式创建添加即可。 3. 注册与登录 # 我们论坛的功能：注册、登录、发布主题和回复主题。这4个功能的实现都需要连接数据库。 3.1 数据库连接 # 引入mysql模块，然后使用mysql.createPool()创建连接：$npm install mysql --save-dev 在models目录下创建db.js，其他需要操作数据库的，首先引入db.js:var mysql = require('mysql'); var pool = mysql.createPool({ host : '127.0.0.1', user : 'root', password : '123', database : 'forum' }); module.exports = pool; 3.2 注册功能 # 注册功能的流程我们非常熟悉了： 加载注册页面； 用户输入数据后提交； 处理表单数据然后进行数据库操作 我们在routes/user.js中创建一个reg的get方式的路由用来加载注册页面：// routes/user.js // get方式 router.get('/reg', function(req, res, next) { res.render('reg', { errmsg:'' }); // 加载reg.ejs模板 }); 在views目录下创建reg.ejs： 注册 .tip{color: #f00;} 回到首页 注册 * 用  户  名： 密  码： 重复密码： 已有帐号？ 点击登录 运行程序，并用浏览器访问127.0.0.1:3000/user/reg，注册页面就出来了。然后再在routes/user.js中创建一个reg的post方式的路由用来处理提交过来的数据，post方式过来的数据并不能使用req.query变量获取，而应该使用req.body：// routes/user.js // post方式 router.post('/reg', function(req, res, next) { var username = req.body.username || '', password = req.body.password || '', password2 = req.body.password2 || ''; if(password!=password2){ res.render('reg', {errmsg:'密码不一致'}); return; } var password_hash = user_m.hash(password), // 对密码进行加密 regtime = parseInt(Date.now()/1000); // 数据库处理 }); 凡是设计到数据库处理的，我们都将其放到models中。这里，我们在models中创建一个user.js：// models/user.js var pool = require('./db'), // 连接数据库 crypto = require('crypto'); // 对密码进行加密 module.exports = { // 对字符串进行sha1加密 hash : function(str){ return crypto.createHmac('sha1', str).update('love').digest('hex'); }, // 注册 // 因数据库操作是异步操作，则需要传入回调函数来对结果进行处理，而不能使用return的方式 reg : function(username, password, regtime, cb){ pool.getConnection(function(err, connection){ if(err) throw err; // 首先检测用户名是否存在 connection.query('SELECT `id` FROM `user` WHERE `username`=?', [username], function(err, sele_res){ if(err) throw err; // 若用户名已存在，则直接回调 if(sele_res.length){ cb({isExisted:true}); connection.release(); }else{ // 否则将信息插入到数据库中 var params = {username:username, password:password, regtime:regtime}; connection.query('INSERT INTO `user` SET ?', params, function(err, insert_res){ if(err) throw err; cb(insert_res); connection.release(); // 接下来connection已经无法使用，它已经被返回到连接池中 }) } }) }); } } 我们将检测用户名和插入数据两个功能放到一起处理了，实际应用中，最好是在用户提交数据之前就对用户名进行检测。注册功能的model写好之后，就可以调用了，承接上面的代码，从数据库处理接着编写。// routes/user.js var user_m = require('../models/user'); // 引入model // post方式 router.post('/reg', function(req, res, next) { // 与上面的代码一样 // 数据库处理 user_m.reg(username, password_hash, regtime, function(result){ if(result.isExisted){ res.render('reg', {errmsg:'用户名已存在'}); // 重新加载注册模板，并提示用户名已存在 }else if(result.affectedRows){ // 注册成功 res.redirect('/'); }else{ // console.log('登录失败'); res.render('reg', {errmsg:'注册失败，请重新尝试'}); } }); }); 页面若跳转到首页，则说明注册成功了，查看下数据库是否将数据正确的插入了。到这里，注册功能完成了，完成了吗？还没呢，我们这里注册完成后仅仅是跳转到了首页，还缺少的操作是： 若直接跳转到首页，则默认是已经登录了，这里就需要记录用户的登录状态； 若不跳转到首页，则注册成功后要跳转到登录页面让用户登录 我们这里使用第1种方式，稍后讲解如何记录用户的登录状态。 3.2 登录功能 # 登录过程与注册是非常类似的，而且比注册还要简单，只需要查询数据库中是否存在对应的用户名和密码即可。首先编写一个登录页面：// views/login.ejs 登录 .tip{color: #f00;} 回到首页 登录 * 用户名： 密 码： 还没帐号？点击注册 然后在model/user.js中添加上对数据库的登录操作：module.exports = { // ... // 登录 login : function(username, password, cb){ pool.getConnection(function(err, connection){ if(err) throw err; connection.query('SELECT `id` FROM `user` WHERE `username`=? AND `password`=?', [username, password], function(err, result){ if(err) throw err; cb(result); connection.release(); // 接下来connection已经无法使用，它已经被返回到连接池中 }) }); } } 最后在routes/user.js中添加上登录的路由：// routes/user.js // 进入到登录页面 router.get('/login', function(req, res, next) { res.render('login', {errmsg:''}); }); // 处理登录请求 router.post('/login', function(req, res, next) { var username = req.body.username || '', password = req.body.password || ''; var password_hash = user_m.hash(password); user_m.login(username, password_hash, function(result){ if(result.length){ // console.log( req.session ); // req.session.user = { // uid : result[0].id, // username : username // } // res.redirect('/'); res.send('登录成功'); }else{ // console.log('登录失败'); res.render('login', {errmsg:'用户名或密码错误'}); } }); }); 登录功能也编写好了。 3.3 保存登录状态 # 我们通常是使用session来保存用户的登录状态，express框架没有对session处理的功能，需要我们引入额外的模块express-session：$npm install express-session --save-dev 然后在app.js中引用：var session = require('express-session') app.use(session({ secret: 'wenzi', // 建议使用 128 个字符的随机字符串 cookie: { maxAge: 60*60*1000 }, // 设置时间 resave : false, saveUninitialized : true })); 设置完成后，就可以使用session保存数据了。以登录成功后保存数据为例：user_m.login(username, password_hash, function(result){ if(result.length){ // 将数据保存到名为user的session中 req.session.user = { uid : result[0].id, username : username } res.redirect('/'); }else{ // console.log('登录失败'); res.render('login', {errmsg:'用户名或密码错误'}); } }); 还有一个问题：如何把session中的数据传递给模板呢，比如没有登录时，显示“注册，登录”连接，登录后显示“用户名，登录”信息。在app.js中添加：app.use(function(req, res, next){ // 如果session中存在，则说明已经登录 if( req.session.user ){ res.locals.user = { uid : req.session.user.uid, username : req.session.user.username } }else{ res.locals.user = {}; } next(); }) 然后在模板中就可以使用user变量了： 4. 首页及详情页 # 我们在首页能够展示主题列表并能发表主题，点击链接进入详情页后能该主题进行回复。当然发表主题和对主题进行回复都是在已经登录的状态进行的。 4.1 首页 # 在models目录创建list.js，从数据库中获取主题列表：// models/list.js var pool = require('./db'); module.exports = { // 获取首页的主题 getIndexList : function(cb){ pool.getConnection(function(err, connection){ if(err) throw err; // 连表查询，获取到作者的用户名 connection.query('SELECT `list`.*, username FROM `list`, `user` WHERE `list`.`uid`=`user`.`id`', function(err, result){ if(err) throw err; cb(result); connection.release(); // 接下来connection已经无法使用，它已经被返回到连接池中 }) }); } } 在routes中的index.js中调用getIndexList获取数据，并调用index.ejs模板：// routes/index.js var list_m = require('../models/list'); router.get('/', function(req, res, next) { list_m.getIndexList(function(result){ res.render('index', { data:result }); // 选择index模板并传递数据 }) }); 在views/index.ejs创建首页模板：列表 标题 作者 创建时间 展示数据完毕。 4.2 发表主题 # 我们在首页上添加了可以输入标题和内容的两个输入窗口，可以使用ajax的方式提交数据。 var running = false; $('.submit').on('click', function(){ if(running) return; running = true; $('.tip').text(''); var title = $('.add .title').val(); content = $('.add .content').val(); if(!title || !content){ $('.tip').text('*输入不能为空'); return; } $('.tip').text('数据正在提交中...'); $.ajax({ url : '/list/addtopic', // 提交接口 data : {title:title, content:content}, dataType : 'json', type : 'get' }).done(function(result){ if(result.code==0){ var html = ''+result.data.title+''+result.data.author+''+result.data.createtime+''; $('table').append(html); $('.tip').text(''); $('.title, .content').val(''); }else{ $('.tip').text('添加失败'); } running = false; }) }) 这里的提交接口是/list/addtopic，因此我们需要再创建一个这样的路由：在routes目录下创建list.js：// routes/list.js router.get('/addtopic', function(req, res){ // 在登录状态下可以添加主题 if(req.session.user){ var title = req.query.title, content = req.query.content, uid = req.session.user.uid, createtime = parseInt(Date.now()/1000); var params = {uid:uid, title:title, content:content, createtime:createtime}; list_m.addTopic(params, function(result){ // console.log(result); if(result.affectedRows){ res.json({code:0, msg:'添加成功', data:{url:'/list/'+result.insertId+'.html', title:title, author:req.session.user.username, createtime:createtime}}); }else{ res.json({code:2, msg:'添加失败，请重新尝试'}) } }); }else{ res.json({code:1, msg:'您还未登录'}) } }) 这里用到了list_m.addTopic，因此需要在models/list.js中添加 addTopic 方法：// models/list.js /* 添加主题 uid, title, content, createtime */ addTopic : function(params, cb){ pool.getConnection(function(err, connection){ if(err) throw err; connection.query('INSERT INTO `list` SET ?', params, function(err, result){ if(err) throw err; cb(result); connection.release(); // 接下来connection已经无法使用，它已经被返回到连接池中 }) }); } 4.3 详情页 # 在首页列表中，可以看到，我们将详情页的链接设置为了/list/1.html的方式，也可以设置成其他的方式（比如 /list?pid=1 等），只要设置好路由就行。// routes/list.js // http://127.0.0.1:3000/list/1.html router.get('/:pid.html', function(req, res) { var pid = req.params.pid || 1; console.log(pid); }); 在详情页中需要获取到这个主题的详细信息和对这个主题的回复，因此在list_m中：// models/list.js // 根据id查询主题的详情信息 getListById : function(id, cb){ pool.getConnection(function(err, connection){ if(err) throw err; connection.query('SELECT * FROM `list` WHERE `id`=?', [id], function(err, result){ if(err) throw err; cb(result); connection.release(); // 接下来connection已经无法使用，它已经被返回到连接池中 }) }); }, // 某主题的回复 getReplyById : function(pid, cb){ pool.getConnection(function(err, connection){ if(err) throw err; connection.query('SELECT * FROM `reply` WHERE `pid`=?', [pid], function(err, result){ if(err) throw err; cb(result); connection.release(); // 接下来connection已经无法使用，它已经被返回到连接池中 }) }); } 然后在路由中进行调用，这里使用async简单的控制了下两个异步的流程问题：// http://127.0.0.1:3000/list/1.html router.get('/:pid.html', function(req, res) { var pid = req.params.pid || 1; async.parallel([ function(callback){ list_m.getListById(pid, function(result){ callback(null, result[0]); }) }, function(callback){ list_m.getReplyById(pid, function(result){ callback(null, result); }) }, ], function(err, results){ // console.log( results ); // res.json(results); res.render('list', { data:results }); }) }); 稍微解释下async.parallel的功能，下节我们会详细的讲解。 async.parallel([f1, f2, f3,..., fn], fb); 是f1到fn所有的异步都执行完了就会执行fb函数。这里我们是主题的详情和对主题的回复都请求完成了，就可以调用模板渲染。// views/list.ejs返回到首页 详情 标题： 评论

从0到1学习node(八)之异步控制工具async 总索引： 从0到1学习node系列总索引我们在编写异步程序时，最头痛的就是不知道结果什么时候返回给我们，然后执行后面的操作，很多时候只能把后面的操作放到返回成功的函数里，或者使用计数器等方法。比较典型的两个就是：后面的操作需要依赖上一个异步操作的结果；多个异步操作并行执行，都执行完成后再执行接下来的操作。这两个操作中，第一个异步的程序我们可能会写成这样：db.select(SQL1, function(res1){ db.delete(SQL2, function(res2){ db.insert(SQL3, function(res3){ // ... }) }) }); 将后面的操作写到执行成功后的回调函数里。第2个并行的异步操作，可以使用计数器的方法，每个异步调用成功时，计数器加1，当所有的异步都调用成功后，再接着执行：var count = 0; var success = function(){ count++; if(count>=3){ console.log('执行完毕...'); } } var select = function(){ db.select(sql, function(res){ success(); }) } var select2 = function(){ db.select(sql, function(res){ success(); }) } var select3 = function(){ db.select(sql, function(res){ success(); }) } select(); select2(); select3(); 这些编写方式非常麻烦，而且代码逻辑比较混乱，调试起来也很不方便。那么就要用到异步控制的利器async了。 1. 介绍 # async的作用是进行流程的控制，而且提供了非常多的方法可供调用。这些方法可以分为三大类： 集合类（Collections） 流程控制类（Control Flow） 工具类（Utils） 下面我们从这三个分类里分别挑出几个方法进行讲解。 2. 函数介绍 # async中提供了非常多的方法可供使用，我们仅仅是讲解其中几个比较有代表性的，其他的可以访问官方文档：http://caolan.github.io/async/docs.html。 2.1 集合类 # 集合类中的方法主要有some, 'map', 'each', 'every'等，这些方法是对数组或组合进行某个相同的操作后，统一执行回调函数。我们以map为例，map对集合中的每一个元素，执行某个相同的异步操作，得到结果。所有的结果将汇总到最终的callback里。使用方法，map接收三个参数，分别是： 参数名称 类型 说明 coll iteratee callback Array | Iterable | Object function function 需要处理数组，集合或其他可迭代的类型 迭代方法，用来对集合中的每一项进行处理。该方法接收两个参数(item, callback)；item为集合中的每一项, callback为回调函数。callback需要带有err(有时可能为null)和处理后的数据，callback(err, data) 最终回调函数，当集合处理完毕后调用此函数，传递两个参数err和result，result为之前处理后的所有的结果的集合 注意：中间处理函数iteratee对coll中的每一项都是并发处理的，因此并不能保证iteratee按照顺序完成。不过，如果coll是个数组，最后的结果集results会按照coll中的顺序排列；如果coll是个集合（Object）类型，results会是数组类型，结果将大致按照coll的键的顺序排列（但是不同在不同的JavaScript引擎中会有可能发生变化）。我们来举个例子，使用map获取几个文件中的内容：var files = ['./file/cnode_1.txt', './file/cnode_2.txt', './file/cnode_3.txt']; // 读取文件内容 // 第1个参数 文件名称列表的数组 // 第2个参数 传入数组中的每一项和回调函数 // 第3个参数 results为所有结果的集合 async.map(files, function(file, cb){ fs.readFile(file, 'utf-8', function(err, data){ cb(err, data); }) }, function(err, results){ console.log( results ); }) 而且，如果中间的处理函数比较大，不想写在map中，也可以单独写成一个函数，然后传递进去，不过参数传递还是要符合规则的：var files = ['./file/cnode_1.txt', './file/cnode_2.txt', './file/cnode_3.txt']; var read = function(file, cb){ fs.readFile(file, 'utf-8', function(err, data){ cb(err, data); }) } async.map(files, read, function(err, result){ console.log( result ); }) 这里还有一个mapLimit，可以传递一个参数limit，用来限制并发的数量：mapLimit(coll, limit, iteratee, callbackopt)：// 并发数量为2 async.mapLimit(files, 2, read, function(err, result){ console.log( result ); }) 同时，集合类中还有其他的方法，我们也稍微了解下： each : 与map类似，但是最后的回调函数里没有results，each只循环不负责处理结果 every : 中间处理函数iteratee的参数(err, boolean)需要传递一个boolean值，若所有选项的结果都为true，则results为true some : 与every类似，只是只要其中一个选项的结果为true，则results为true filter : 对coll进行筛选，筛选出结果为true的结果 reject : 与filter正好相反，筛选出结果为false的结果 concat : 将每个异步操作的结果合并为一个数组 2.2 流程控制类 # 上面的集合类是对一个集合进行相同的处理，集合中的每一项都处理完后，再对结果进行回调处理。而多个回调方法执行时，则需要对这几个回调方法进行控制了。多个回调方法执行时，通常有这么几个流程： 串行且无关联，即执行完一个后再依次执行下一个，且相互之间无数据交互，都执行完后，再执行最后的回调函数。可以使用async.series 串行且有关联，即执行完一个后再依次执行下一个，且上一个回调函数的结果会作为下一个回调函数的参数。可以使用async.waterfall 并行，这几个回调函数同时并发执行，都执行完成后，再执行最后的回调函数。可以使用async.parallel 当然还有其他更复杂的流程，这里也只聊上面的三种情况。async.series，async.waterfall和async.parallel的语法都是一样的：async.Method(coll, function(err, results){ }) 其中coll既可以是数组，也可以是json格式的，而且results的类型与coll对应。串行且无关联async.series：// 串行且无关联，数组格式 async.series([ function(cb){ getAllList(function(result){ cb(null, result); }); }, function(cb){ getAllUser(function(result){ cb(null, result); }); } ], function(err, result){ console.log(result); }) 同时串行的异步可以是json格式的：// 串行且无关联，json个数 async.series({ one: function(cb){ getAllList(function(result){ cb(null, result); }); }, two: function(cb){ getAllUser(function(result){ cb(null, result); }); } }, function(err, result){ console.log(result); }) 串行且有关联async.waterfall：// 串行且上一个结果作为下一个的参数 async.waterfall([ function(cb){ getListById(1, function(result){ cb(null, result); }); }, function(params, cb){ console.log(params); getAllUser(function(result){ cb(null, result); }); } ], function(err, result){ console.log(result); }) 并行async.parallel：// 并行，getAllList与getAllUser同时执行 async.parallel([ function(cb){ getAllList(function(result){ cb(null, result); }); }, function(cb){ getAllUser(function(result){ cb(null, result); }); } ], function(err, result){ console.log(result); }) 关于并行的异步操作，这里还有一个async.parallelLimit，限制并发的数量：// 并发数量为2 async.parallelLimit([ iteratee1, iteratee2, iteratee3, ... ], 2, function(err, results){ }) 2.3 工具类 # async中也提供了不少的工具方法可供使用，比如async.log可以输出回调方法中的值，第1个参数为函数，后面的参数为传递给函数的参数：var hello = function(name, callback) { setTimeout(function() { callback(null, 'hello ' + name); }, 1000); }; // 将'world'传递给hello方法 async.log(hello, 'world'); // 'hello world' 这里面还有apply, dir, timeout等方法。 3. 总结 # 使用async控制异步流程非常的方便，而且也可以在前端使用，比如可以操作多个ajax请求等。

ci框架在去掉index.php时导致404的解决方案 ci框架的URL中默认是带有index.php的，通常我们会去掉这个index.php，不过按照官方的方法，有时会导致只能访问首页，其他控制器全部为404。这里我们就说下解决方案，可以按照步骤分别进行检查。我的安装环境是wampserver。 打开wampserver\wamp\bin\apache\apache2.4.9\conf\httpd.conf文件，将mod_rewrite.so模块打开（去掉前面的#）；同时把AllowOverride None修改为AllowOverride All； 重启wampserver服务器； 在项目的根目录下创建.htaccess文件，将以下的代码粘贴到文件中并保存； RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*)$ index.php/$1 [L] 刷新浏览器，看看是否可以正常访问了。在官方文档的讨论中，有人表示需要把RewriteRule ^(.*)$ index.php/$1 [L]修改为RewriteRule ^(.*)$ index.php?$1 [L]，但是，经过我的测试，发现没什么区别，都能访问。

多说评论系统宣布将要关闭 多说在官方网站上正式宣布http://dev.duoshuo.com/threads/58d10f50e9a8cb4433fd5c5d： 因公司业务调整，非常遗憾的向大家宣布多说项目即将关闭。 我们将于2017年6月1日正式关停服务，在此之前您可以通过后台的数据导出功能导出自己站点的评论数据。 对此给您造成的不便，我们深表歉意，感谢您的一路相伴。 曾经我们在使用多说这个评论系统时，发现多说会时不时的出现一些问题，比如评论没有加载出来，用户头像加载失败，头像链接不支持https等。当我们在官方论坛上提意见、吐槽，希望官网能够有所改进时，多说却要关停服务了。抛开对多说的各种不舍，再看看市面上其他的第三方评论系统。搜狐的畅言是需要ICP备案才能使用的，disqus被墙了，等等。本人博客是用jekyll+pages搭建的静态博客，使用的就是多说评论系统，如果找不到其他合适的第三方评论系统的话，可能就会切换到wordpress这种博客上了。

第一次使用vue构建一个上传图片表单 这篇博客也不知道起个什么名字比较好，毕竟刚开始学习vue，很多还不是很熟悉，一直在慢慢摸索中；之前也习惯了用jQuery写js代码，思维逻辑也要有个转换的过程。 1. 转变思维 # 使用vue编写代码，首先要做的就是转换思维，vue是一个数据驱动的框架，我们只需要操作数据，数据变化后，vue会自动改变DOM结构，而jQuery是直接操作DOM的。比如刚开始写的代码中犯的错误，有一个页面中的input标签是并列多个的，而且name属性的值是自增的，那么我就用v-for循环下，把index填充进去就行了，删除的时候根据index再进行删除。于是代码是这样的：html: ${index}. delete add js:var app = new Vue({ el: '#app', delimiters : ['${', '}'], data: { username : [1, 2, 3] // 只要数组的下标，因此数值无所谓 }, methods : { // 添加选项 add : function(){ this.username.push(1); }, // 删除当前选项 del : function(e){ var index = e.target.getAttribute('index'); // 获取所在位置然后删除 this.username.splice(index, 1); } } }) 我们先在输入框中输入不同的内容，然后删除中间的某个选项。[demo1]结果发现，被删除的永远是最后一个。这是为什么呢，我也是删除数组了呀？我是看了官方文档后才明白：用户往输入框内输入的内容只保存在了DOM中，而我们是用vue中的username的下标渲染的出来的DOM元素，我们并没有保存用户输入的内容。当我们删除了其中的某一项时，username发生变化，导致DOM重新渲染，渲染后，最后一项就没有了。那么怎么修改才能真正的实现删除某一项呢？我们只需要把用户输入的内容保存到username数组中即可：html: ${index}. delete add js:var app = new Vue({ el: '#app', delimiters : ['${', '}'], data: { username : ['wenzi', 'xxxx', 'yyyy'] // 只要数组的下标，因此数值无所谓 }, methods : { // 添加选项 add : function(){ this.username.push(''); // 新添加的输入框为空 }, // 删除当前选项 del : function(e){ var index = e.target.getAttribute('index'); // 获取所在位置然后删除 this.username.splice(index, 1); } } }) 再来看下效果：[demo2] 2. 上传图片 # 刚开始时，使用的jQuery的插件fileupload，功能很全，当我为file标签绑定上change事件后，然后再调用该插件进行图片上传，总是会出现意想不到的bug，比如我先对图片格式进行限制，只能上传png格式的图片，可是有时候jpg格式的也能上传上去；png格式的图片，英文名称无法上传，先传个中文名称，然后就可以再上传英文呢名称的了。后来发现html5下的formData属性，能非常方便的上传图片，而且同时还能上传其他的参数，一小段代码即可搞定：// 上传图片，绑定change事件 uppic : function(e){ var file = e.target.files[0]; // 每次只允许上传一张图片，因此只取[0] // 判断图片格式 if( file.type!='image/png' ){ alert('图片格式不正确'); e.target.files.length = 0; $(e.target).val(''); return false; } // 使用formData组装数据 var formData = new FormData(); formData.append('pic', $(e.target)[0].files[0]); // 文件数据 formData.append('flag', '1'); // 其他的一些参数 $.ajax({// ajax上传 url: 'xxxxx.php', type: 'POST', cache: false, data: formData, processData: false, contentType: false }).done(function(result) { console.log('上传完成'); }); } 3. 总结 # 现在也是刚开始学习vue，代码肯定比较烂，最重要的还是转变思维吧！