這篇文章主要介紹了node.js之利用express搭建簡易論壇的示例分析,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)建站是一家專注網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、微信小程序開發(fā)、電子商務(wù)建設(shè)、網(wǎng)絡(luò)推廣、移動(dòng)互聯(lián)開發(fā)、研究、服務(wù)為一體的技術(shù)型公司。公司成立10余年以來,已經(jīng)為上1000家成都三輪攪拌車各業(yè)的企業(yè)公司提供互聯(lián)網(wǎng)服務(wù)?,F(xiàn)在,服務(wù)的上1000家客戶與我們一路同行,見證我們的成長;未來,我們一起分享成功的喜悅。
一、應(yīng)用生成器
使用上節(jié)學(xué)習(xí)到express的知識(shí),我們也可以從0開始,一步步把系統(tǒng)搭建起來。不過express中還有一個(gè)應(yīng)用生成器,使用這個(gè)應(yīng)用生成器可以快速的創(chuàng)建一個(gè)應(yīng)用的框架,然后我們?cè)僭谶@個(gè)框架中完善我們需要的內(nèi)容。
首先安裝應(yīng)用生成器:
$npm install -g express-generator
運(yùn)行express --version
若能正常輸出版本號(hào),則安裝成功。
我們的論壇名稱可以為node_express_forum,然后使用express創(chuàng)建一個(gè)框架:
$express node_express_forum
運(yùn)行后,生成器會(huì)在這個(gè)目錄下生成幾個(gè)目錄和文件:
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
已經(jīng)生成成功。進(jìn)入到這個(gè)目錄:
$cd node_express_forum
我們來看下生成的這個(gè)框架,方便知道后面怎么進(jìn)行填充。
. ├── app.js ├── package.json // 依賴的模塊 ├── bin │ └── www ├── public // 靜態(tài)文件目錄 │ ├── images │ ├── javascripts │ └── stylesheets │ └── style.css ├── routes // 路由,相當(dāng)于控制器 │ ├── index.js │ └── users.js └── views // 視圖 ├── error.jade ├── index.jade └── layout.jade
打開package.json后,我們看到還需要再安裝幾個(gè)模塊才能運(yùn)行:
$npm install --save-dev
好了,到現(xiàn)在框架已搭建完畢,我們來運(yùn)行一下:
$npm start
然后在瀏覽器中輸入127.0.0.1:3000,就可以看到了:Express Welcome to Express。
二、準(zhǔn)備工作
基本框架已經(jīng)創(chuàng)建好了,現(xiàn)在開始我們論壇的準(zhǔn)備工作。這里我們的準(zhǔn)備工作有3個(gè):模板引擎,模型,數(shù)據(jù)庫,路由。
2.1 模板引擎
express里默認(rèn)使用的模板引擎是jade,不過我們也可以選擇其他的模板引擎,我這里選擇了ejs,因?yàn)楦杏Xejs更像是個(gè)html文件,方便維護(hù),當(dāng)然,每個(gè)人都有自己的喜好。
$npm install ejs --save-dev
然后在app.js中修改模板引擎:
app.set('view engine', 'ejs'); // 原為jade,現(xiàn)改為ejs
這里我會(huì)將views目錄中的.jade文件清空,后續(xù)使用.ejs編寫模板。
2.2 模型
這里我們說的模型是指MVC中的M,主要是進(jìn)行數(shù)據(jù)庫的連接和操作。創(chuàng)建models目錄用來存放文件。
2.3 數(shù)據(jù)庫
我們使用MySQL數(shù)據(jù)庫來存放數(shù)據(jù),數(shù)據(jù)庫名稱可以叫做forum。里面有3張表:user, list, reply。
user表(用戶)的字段有: id, username, password, regtime
list表(主題)的字段有: id, uid(用戶id), title, content, createtime
reply表(回復(fù))的字段有: id, pid(主題id), uid(用戶id), content, createtime
2.4 路由
上節(jié)我們是使用app.use()
或app.get()
等方式來實(shí)現(xiàn)路由,同時(shí),express還提供了express.Router
類來創(chuàng)建模塊化??蓲燧d的路由。Router 實(shí)例是一個(gè)完整的中間件和路由系統(tǒng),因此常稱其為一個(gè) “mini-app”。
在routes/user.js中(這里我將其users.js改為了user.js):
var express = require('express'); var router = express.Router(); // 實(shí)例化router // 定義主頁的路由 router.get('/', function(req, res, next) { res.render('index', { title: 'user' }); // 加載index.ejs模板并傳遞數(shù)據(jù)給模板 }); 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頁面了。如果需要增加其他的路由,則依照此方式創(chuàng)建添加即可。
三、注冊(cè)與登錄
我們論壇的功能:注冊(cè)、登錄、發(fā)布主題和回復(fù)主題。這4個(gè)功能的實(shí)現(xiàn)都需要連接數(shù)據(jù)庫。
3.1 數(shù)據(jù)庫連接
引入mysql模塊,然后使用mysql.createPool()
創(chuàng)建連接:
$npm install mysql --save-dev
在models目錄下創(chuàng)建db.js,其他需要操作數(shù)據(jù)庫的,首先引入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 注冊(cè)功能
注冊(cè)功能的流程我們非常熟悉了:
加載注冊(cè)頁面;
用戶輸入數(shù)據(jù)后提交;
處理表單數(shù)據(jù)然后進(jìn)行數(shù)據(jù)庫操作
我們?cè)趓outes/user.js中創(chuàng)建一個(gè)reg的get方式的路由用來加載注冊(cè)頁面:
// routes/user.js // get方式 router.get('/reg', function(req, res, next) { res.render('reg', { errmsg:'' }); // 加載reg.ejs模板 });
在views目錄下創(chuàng)建reg.ejs:
<!DOCTYPE html> <html> <head> <title>注冊(cè)</title> <link rel='stylesheet' href='/stylesheets/style.css' /> <style type="text/css"> .tip{color: #f00;} </style> </head> <body> <div class="container"> <p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回到首頁</a></p> <h2>注冊(cè)</h2> <form action="/user/reg/" method="post"> <% if(errmsg){ %> <p class="tip">*<%= errmsg %></p> <% } %> <p>用 戶 名: <input type="text" name="username" required="required"></p> <p>密  碼: <input type="password" name="password" required="required"></p> <p>重復(fù)密碼: <input type="password" name="password2" required="required"></p> <p><input type="submit" name="submit" value="submit"></p> </form> <p>已有帳號(hào)? <a href="/user/login" rel="external nofollow" >點(diǎn)擊登錄</a></p> </div> </body> </html>
運(yùn)行程序,并用瀏覽器訪問127.0.0.1:3000/user/reg,注冊(cè)頁面就出來了。
然后再在routes/user.js中創(chuàng)建一個(gè)reg的post方式的路由用來處理提交過來的數(shù)據(jù),post方式過來的數(shù)據(jù)并不能使用req.query
變量獲取,而應(yīng)該使用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), // 對(duì)密碼進(jìn)行加密 regtime = parseInt(Date.now()/1000); // 數(shù)據(jù)庫處理 });
凡是設(shè)計(jì)到數(shù)據(jù)庫處理的,我們都將其放到models中。這里,我們?cè)趍odels中創(chuàng)建一個(gè)user.js:
// models/user.js var pool = require('./db'), // 連接數(shù)據(jù)庫 crypto = require('crypto'); // 對(duì)密碼進(jìn)行加密 module.exports = { // 對(duì)字符串進(jìn)行sha1加密 hash : function(str){ return crypto.createHmac('sha1', str).update('love').digest('hex'); }, // 注冊(cè) // 因數(shù)據(jù)庫操作是異步操作,則需要傳入回調(diào)函數(shù)來對(duì)結(jié)果進(jìn)行處理,而不能使用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; // 若用戶名已存在,則直接回調(diào) if(sele_res.length){ cb({isExisted:true}); connection.release(); }else{ // 否則將信息插入到數(shù)據(jù)庫中 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已經(jīng)無法使用,它已經(jīng)被返回到連接池中 }) } }) }); } }
我們將檢測用戶名和插入數(shù)據(jù)兩個(gè)功能放到一起處理了,實(shí)際應(yīng)用中,最好是在用戶提交數(shù)據(jù)之前就對(duì)用戶名進(jìn)行檢測。注冊(cè)功能的model寫好之后,就可以調(diào)用了,承接上面的代碼,從數(shù)據(jù)庫處理接著編寫。
// routes/user.js var user_m = require('../models/user'); // 引入model // post方式 router.post('/reg', function(req, res, next) { // 與上面的代碼一樣 // 數(shù)據(jù)庫處理 user_m.reg(username, password_hash, regtime, function(result){ if(result.isExisted){ res.render('reg', {errmsg:'用戶名已存在'}); // 重新加載注冊(cè)模板,并提示用戶名已存在 }else if(result.affectedRows){ // 注冊(cè)成功 res.redirect('/'); }else{ // console.log('登錄失敗'); res.render('reg', {errmsg:'注冊(cè)失敗,請(qǐng)重新嘗試'}); } }); });
頁面若跳轉(zhuǎn)到首頁,則說明注冊(cè)成功了,查看下數(shù)據(jù)庫是否將數(shù)據(jù)正確的插入了。
到這里,注冊(cè)功能完成了,完成了嗎?還沒呢,我們這里注冊(cè)完成后僅僅是跳轉(zhuǎn)到了首頁,還缺少的操作是:
若直接跳轉(zhuǎn)到首頁,則默認(rèn)是已經(jīng)登錄了,這里就需要記錄用戶的登錄狀態(tài);
若不跳轉(zhuǎn)到首頁,則注冊(cè)成功后要跳轉(zhuǎn)到登錄頁面讓用戶登錄
我們這里使用第1種方式,稍后講解如何記錄用戶的登錄狀態(tài)。
3.2 登錄功能
登錄過程與注冊(cè)是非常類似的,而且比注冊(cè)還要簡單,只需要查詢數(shù)據(jù)庫中是否存在對(duì)應(yīng)的用戶名和密碼即可。
首先編寫一個(gè)登錄頁面:
// views/login.ejs <!DOCTYPE html> <html> <head> <title>登錄</title> <link rel='stylesheet' href='/stylesheets/style.css' /> <style type="text/css"> .tip{color: #f00;} </style> </head> <body> <div class="container"> <p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >回到首頁</a></p> <h2>登錄</h2> <form action="/user/login/" method="post"> <% if(errmsg){ %> <p class="tip">*<%= errmsg %></p> <% } %> <p>用戶名: <input type="text" name="username" required="required"></p> <p>密 碼: <input type="password" name="password" required="required"></p> <p><input type="submit" name="submit" value="submit"></p> </form> <p>還沒帳號(hào)?<a href="/user/reg" rel="external nofollow" >點(diǎn)擊注冊(cè)</a></p> </div> </body> </html>
然后在model/user.js中添加上對(duì)數(shù)據(jù)庫的登錄操作:
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已經(jīng)無法使用,它已經(jīng)被返回到連接池中 }) }); } }
最后在routes/user.js中添加上登錄的路由:
// routes/user.js // 進(jìn)入到登錄頁面 router.get('/login', function(req, res, next) { res.render('login', {errmsg:''}); }); // 處理登錄請(qǐng)求 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:'用戶名或密碼錯(cuò)誤'}); } }); });
登錄功能也編寫好了。
3.3 保存登錄狀態(tài)
我們通常是使用session來保存用戶的登錄狀態(tài),express框架沒有對(duì)session處理的功能,需要我們引入額外的模塊express-session:
$npm install express-session --save-dev
然后在app.js中引用:
var session = require('express-session') app.use(session({ secret: 'wenzi', // 建議使用 128 個(gè)字符的隨機(jī)字符串 cookie: { maxAge: 60*60*1000 }, // 設(shè)置時(shí)間 resave : false, saveUninitialized : true }));
設(shè)置完成后,就可以使用session保存數(shù)據(jù)了。以登錄成功后保存數(shù)據(jù)為例:
user_m.login(username, password_hash, function(result){ if(result.length){ // 將數(shù)據(jù)保存到名為user的session中 req.session.user = { uid : result[0].id, username : username } res.redirect('/'); }else{ // console.log('登錄失敗'); res.render('login', {errmsg:'用戶名或密碼錯(cuò)誤'}); } });
還有一個(gè)問題:如何把session中的數(shù)據(jù)傳遞給模板呢,比如沒有登錄時(shí),顯示“注冊(cè),登錄”連接,登錄后顯示“用戶名,登錄”信息。
在app.js中添加:
app.use(function(req, res, next){ // 如果session中存在,則說明已經(jīng)登錄 if( req.session.user ){ res.locals.user = { uid : req.session.user.uid, username : req.session.user.username } }else{ res.locals.user = {}; } next(); })
然后在模板中就可以使用user變量了:
<% if(user.uid){ %> <!-- 登錄狀態(tài)下 --> <% }else{ %> <!-- 非登錄狀態(tài)下 --> <% } %>
四、首頁及詳情頁
我們?cè)谑醉撃軌蛘故局黝}列表并能發(fā)表主題,點(diǎn)擊鏈接進(jìn)入詳情頁后能該主題進(jìn)行回復(fù)。當(dāng)然發(fā)表主題和對(duì)主題進(jìn)行回復(fù)都是在已經(jīng)登錄的狀態(tài)進(jìn)行的。
4.1 首頁
在models目錄創(chuàng)建list.js,從數(shù)據(jù)庫中獲取主題列表:
// 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已經(jīng)無法使用,它已經(jīng)被返回到連接池中 }) }); } }
在routes中的index.js中調(diào)用getIndexList獲取數(shù)據(jù),并調(diào)用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模板并傳遞數(shù)據(jù) }) });
在views/index.ejs創(chuàng)建首頁模板:
<h2>列表</h2> <table> <tr> <td>標(biāo)題</td> <td>作者</td> <td>創(chuàng)建時(shí)間</td> </tr> <% for(var i=0, len=data.length; i<len; i++) { %> <tr> <td><a href="/list/<%=data[i].id %>.html" rel="external nofollow" title="<%=data[i].title %>"><%=data[i].title %></a></td> <td><%=data[i].username %></td> <td><%=data[i].createtime %></td> </tr> <% } %> </table> <% if(user.username){ %> <!-- 在登錄狀態(tài)展示輸入框 --> <div class="add"> <p><input type="text" class="title"></p> <textarea class="content" cols="100" rows="10"></textarea> <p><input type="button" class="submit" value="提交"><span class="tip"></span></p> </div> <% }%>
展示數(shù)據(jù)完畢。
4.2 發(fā)表主題
我們?cè)谑醉撋咸砑恿丝梢暂斎霕?biāo)題和內(nèi)容的兩個(gè)輸入窗口,可以使用ajax的方式提交數(shù)據(jù)。
<script type="text/javascript" src="http://mat1.gtimg.com/libs/jquery/1.12.0/jquery.min.js"></script> <script type="text/javascript"> 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('數(shù)據(jù)正在提交中...'); $.ajax({ url : '/list/addtopic', // 提交接口 data : {title:title, content:content}, dataType : 'json', type : 'get' }).done(function(result){ if(result.code==0){ var html = '<tr><td><a href="'+result.data.url+'" rel="external nofollow" title="'+result.data.title+'">'+result.data.title+'</a></td><td>'+result.data.author+'</td><td>'+result.data.createtime+'</td></tr>'; $('table').append(html); $('.tip').text(''); $('.title, .content').val(''); }else{ $('.tip').text('添加失敗'); } running = false; }) }) </script>
這里的提交接口是/list/addtopic,因此我們需要再創(chuàng)建一個(gè)這樣的路由:在routes目錄下創(chuàng)建list.js:
// routes/list.js router.get('/addtopic', function(req, res){ // 在登錄狀態(tài)下可以添加主題 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:'添加失敗,請(qǐng)重新嘗試'}) } }); }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已經(jīng)無法使用,它已經(jīng)被返回到連接池中 }) }); }
4.3 詳情頁
在首頁列表中,可以看到,我們將詳情頁的鏈接設(shè)置為了/list/1.html的方式,也可以設(shè)置成其他的方式(比如 /list?pid=1 等),只要設(shè)置好路由就行。
// 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); });
在詳情頁中需要獲取到這個(gè)主題的詳細(xì)信息和對(duì)這個(gè)主題的回復(fù),因此在list_m中:
// models/list.js // 根據(jù)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已經(jīng)無法使用,它已經(jīng)被返回到連接池中 }) }); }, // 某主題的回復(fù) 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已經(jīng)無法使用,它已經(jīng)被返回到連接池中 }) }); }
然后在路由中進(jìn)行調(diào)用,這里使用async簡單的控制了下兩個(gè)異步的流程問題:
// 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
的功能,下節(jié)我們會(huì)詳細(xì)的講解。 async.parallel([f1, f2, f3,…, fn], fb);
是f1到fn所有的異步都執(zhí)行完了就會(huì)執(zhí)行fb函數(shù)。這里我們是主題的詳情和對(duì)主題的回復(fù)都請(qǐng)求完成了,就可以調(diào)用模板渲染。
// views/list.ejs <p><a href="/" rel="external nofollow" rel="external nofollow" rel="external nofollow" >返回到首頁</a></p> <h2>詳情</h2> <p>標(biāo)題: <%=data[0].title %></p> <div><%=data[0].content %></div> <div class="reply"> <h3>評(píng)論</h3> <div class="reply_con"> <table> <% for(var i=0, len=data[1].length; i<len; i++) { %> <tr> <td><%=(i+1) %></td> <td><%=data[1][i].content %></td> <td><%=data[1][i].createtime %></td> </tr> <% } %> </table> </div> </div>
對(duì)主題的回復(fù)功能可以自己實(shí)現(xiàn)一下。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“node.js之利用express搭建簡易論壇的示例分析”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
網(wǎng)站題目:node.js之利用express搭建簡易論壇的示例分析
URL地址:http://aaarwkj.com/article42/ihhghc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站維護(hù)、網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、小程序開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)