NodeJs——(16)用Nodejs 4.X版本,制作一个微博网站(多图,详细步骤)(已完成)
来源:互联网 发布:淘宝保证金是什么 编辑:程序博客网 时间:2024/06/08 17:52
博文已完成,版本号v1.0
范例网址已移除,请下载源码(下载后需要自行设置mysql)
附完整源代码下载链接(0积分下载):http://download.csdn.net/detail/qq20004604/9638269
v1.01
订正一个数据库查询重复内容的bug,在最后的models/blog.js里面
v1.02
订正一个加载博客时,无法显示”加载中“的bug;并且更改加载条件,改为调用定时器
v1.03
修复因为1.02版本而导致的登录、注册无法正常进行。解决办法是将主页的逻辑拆分出来,分拆为blog.js和index.js
【0】涉及到的框架、引擎、数据库:
① express 4.X
② jade
③ mysql 5.7.x
注:
①内容较长,我会尽力把整个框架、结构、顺序、思考方式说明白。
②基础是《node.js开发指南》这本书,作者:BYVoid。但他书的版本较老,很多东西现在已经无法应用,故进行更新,使用目前普遍的express 4.x版本(原书似乎是2.X版本),mysql(原书是mongodb),jade(原书是ejs)
【1】基本需求:
①有首页;
②支持注册;
③支持登录、登出;
④可以发表博客,发表的博客可以保存到数据库;
⑤可以查看博客,博客从数据库中读取,为了简化,这里设置为查看所有人的博客;
⑥查看博客时,初始查看的数量有限,但可以无限加载新的博客,直到查看完全部博客;
⑦一定程度上实现多语言(即可以切换显示的语言版本),但由于复杂度所限,因此只部分实现(但框架已建立好,可以通过继续完善代码实现整体的国际化);
⑧根据登录状态,对可以访问的页面进行控制(某些允许某些禁止)
【2】前后端交互的简单过程:
【3】关于客户端请求的几种情况(涉及到数据库的)
【4】npm
npm是包管理器,在新版本里是默认安装好的,可以输入:
npm -v
来查看npm的版本
【5】express框架:
首先安装基础的express框架,他是封装好的web开发框架,里面包含了:
①路由控制、
②log显示、
③解析客户端请求、
④cookies解析、
⑤静态文件的控制
等多种功能。
安装前注:
①有的人只需要简单的
npm install -g express
npm install -g express-generator
就可以愉快的跑起express了,有的人就像向我一样苦逼,尝试各种办法,最后勉强可以用。
如果在这两行命令后,输入(V是大写的)
express -V
会返回版本号,那么直接跳到最后来看,如果不是这样,可以参考我写的记录来安装。
或者直接看后面的终极解决方案
②express设置全局方法:
ln -s /usr/nodejs4.4.7/node-v4.4.7-linux-x64/bin/express /usr/local/bin/express
其他需要全局的方法,理论上同理,即将nodejs安装目录下的bin文件夹下的模块,映射到/usr/local/bin/同名文件即可
③express命令可以使用的人:
输入:
express -t jade myblog
效果是建立一个文件夹名为myblog的文件夹,里面会有一些文件。
正常如下图:
cd myblog
npm install
这时,npm会根据package.json来安装一些东西。
按提示输入:
SET DEBUG=myblog:*
npm start
可以启动项目。
本机的话,通过访问http://127.0.0.1:3000/ 来查看效果
服务器的话,访问其公网ip,端口是3000
查看package.json
"scripts": { "start": "node ./bin/www"},
这条属性告诉我们,需要通过bin文件夹下的www来启动,这也就是上面npm start命令的作用。
www文件应该是设置自启动的,然而我这里并不需要。但若直接启动app.js是启动不了的,因为在www文件里面,设置了端口是3000,他是通过www文件来启动监听的。
解决办法:
在app.js里面,在最后一行代码之前,添加:
app.listen(80);
于是,便可以通过app.js来启动服务器了。
访问效果如图:
假如如果像我一样倒霉,无法用express命令,打开npm也特别慢,可以先找个系统,将这些文件下载好,然后将这些文件复制到不可以用express命令的linux系统下面。
或者看最后的终极解决方案
ps:
如果npm很慢的话,可以考虑装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后在npm install这一步,使用cnpm install来替代
————————分割线————————
④超级终极解决方案:
我传一个装好express的压缩包,直接解压缩后就可以用。
链接:
http://download.csdn.net/detail/qq20004604/9587054
⑤另一个启动方法
即不通过app.js来启动;
在之前④的基础上,打开app.js,删除
app.listen(80);
打开package.json,将
"start":"node ./app.js"
改回
start":"node ./bin/www"
然后
cd bin
vi www
将
var port =normalizePort(process.env.PORT||'3000');
修改为
var port =normalizePort(process.env.PORT||'80');
然后
cd ..
npm start
启动成功,可以直接访问地址来访问页面
【6】把启动的app.js放在后台运行,并且在操作端解除控制后依然可以运行
原本使用npm start的地方,输入
nohup npm start&
即可
【7】app.js之解释
app.js可以说是一切的根本,因此请看注释,解释了每行代码的作用:
var express = require('express'); //这个模块在node_modules文件夹中var path = require('path'); //nodejs自带的,路径相关var favicon = require('serve-favicon'); //node_modules文件夹中var logger = require('morgan'); //日志相关,node_modules文件夹中,具体看第19行代码var cookieParser = require('cookie-parser');//node_modules文件夹中,用来解析cookie的,被express所调用var bodyParser = require('body-parser'); //用于解析请求体的(应该),被express所调用var routes = require('./routes/index'); //这里是默认的路由,路径是routes/index.jsvar users = require('./routes/users'); //这里是默认的路由,路径是routes/users.js//关于路由的更多内容看下面的app.use('/', routes);和app.use('/users', users);的注释var app = express(); //生成一个express的实例//设置模板引擎app.set('views', path.join(__dirname, 'views')); //__dirname表示绝对路径//console.log(__dirname) //可以取消这一行注释,然后看看__dirname的效果app.set('view engine', 'jade'); //表示express是使用jade格式的模板的//下面这行代码是设置左上角的小图标的,将其命名为favicon.ico并放在public文件夹下,如果有的话,取消这行注释//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));app.use(logger('dev')); //设置日志显示,如果不需要的话可以注释掉这行代码,建议练手的时候不要注释掉//可替换参数有default,combined,common,short,tiny,dev(相对tiny有染色)。可以自己试试效果,默认是devapp.use(bodyParser.json()); //解析客户端的请求,通常是通过post发送的内容app.use(bodyParser.urlencoded({extended: false})); //另一种解析方式,具体不太明白(如果上面解析失败的话会通过这个来)app.use(cookieParser()); //cookies的解析app.use(express.static(path.join(__dirname, 'public'))); //普通静态html文件、js文件、css文件,都放在public文件夹下,可以直接通过url来访问//路由的处理app.use('/', routes); //假如访问的网址是根目录,例如http://121.41.66.68/,交给routes这个js文件来处理,具体请查看routesapp.use('/users', users); //假如访问的是/users这样的路径,那么交给users这个js文件来处理,具体略//我们最后要对这个路由进行处理,让他按照我们想要的方式来做//这里对非法路径进行处理的,next表示这是一个中间件(即执行完他之后,还会执行下一个,而不是直接在这里结束了)//如果上面没有静态文件(29行)、没有找到被路由处理的文件(32,33行),就会交给这个来处理。app.use(function (req, res, next) { var err = new Error('Not Found'); err.status = 404; next(err); //由下面的2个app.use中的一个来处理(一般是第一个,除非第一个被注释)});//原注释说是会对错误进行加亮处理//这部分和下面的区别在于,这部分会将错误信息暴露给用户,而下面的不会,因此注释掉这部分//if (app.get('env') === 'development') {// app.use(function (err, req, res, next) {// res.status(err.status || 500);// res.render('error', {// message: err.message,// error: err// });// });//}// production error handler// no stacktraces leaked to userapp.use(function (err, req, res, next) { res.status(err.status || 500); res.render('error', { //这里的error指调用views下的error模板 message: err.message, error: {} });});//这是我自行添加的,用于显示服务器启动的时间console.log("Server start at :" + new Date());//导出app,在./bin/www里会被调用module.exports = app;
【8】页面关系结构
请忽略文件名的大小写问题(手动微笑)
因此,首先有三个需要我们自定义的路由:
①当访问根/时,输出index;
②当访问/login时,输出login
③当访问/reg时,输出reg
其他可能的路由:
④后续可能添加的页面,暂缺;
⑤不符合要求的页面,输出404(express已经完成)
【9】index页面需要包含的功能:
【10】index的路由:
查看app.js中的代码:
app.use('/', routes);
这部分代码已经说明了,当访问根的时候,交给routes来处理;
再次查看导入routes的地方:
var routes = require('./routes/index');
说明负责这部分的文件是routes文件夹的index文件
这时打开index.js,
router.get('/', function(req, res, next) { res.render('index', { title: 'Express' });});
这部分代码,表示当访问根的 ’/’ 页面时,由index这个引擎模板来处理,模板中的title变量,其值为Express。
————————————————————————
代码说明:
router.get('/'
以上这段代码是在路由基础上进行二段捕获url的,举例:
①假如在app.js里,
app.use('/',
然后在路由的处理里,是
outer.get('/'
那么最终针对的url是/
②假如在app.js里,
app.use('/test',
然后在路由的处理里,是
outer.get('/'
那么最终针对的url是/test
③假如在app.js里,
app.use('/,
然后在路由的处理里,是
outer.get('/test'
那么最终针对的url依然是/test
④假如在app.js里,
app.use('/testA,
然后在路由的处理里,是
outer.get('/testB'
那么最终针对的url是/testA/testB
⑤捕获优先度说明:
首先根据app.js中的app.use出现顺序决定,假如②和③同时出现,那么看②和③在app.js中的代码谁先出现,就交给谁来处理;
再不调用next()方法的情况下,只会被最先出现的那个处理;
如果第一个调用了next()方法,那么第一个处理完后会执行第二个的
————————————————————————
index.js代码说明:
var express = require('express'); //调用expressvar router = express.Router(); //生成express的Router方法的一个实例//处理函数router.get('/', function (req, res, next) { //捕获根url res.render('index', {title: 'Express'}); //res.render方法渲染一个引擎模板, //第二个参数是一个对象,对象里的变量可以在引擎中使用, //第三个参数是回调函数,提供两个参数,分别是err和html,err是错误,html是渲染后的页面。如果使用这个回调函数,那么将不会自动响应,即要用户自己写返回html的命令});module.exports = router;
注意,被引擎渲染的文件,默认是在myblog/views文件夹下
【11】使用Bootstrap界面
让我们自己设计界面不是不可以,不过太麻烦,因此我和原书保持一致,使用Twitter Bootstrap风格的页面。
下载他的压缩包文件,并解压缩他,
将css文件放在项目myblog/public/stylesheets下;
将img文件夹直接复制粘贴在myblog/public下;
将js文件放在myblog/public/javascripts下,
我的Bootstrap的版本是v2.3.2
另外,下载jquery,命名为jq.js,放在myblog/public/javascripts下
【12】index.jade说明
下来我们就要修改jade文件了,如果不知道怎么使用的话,可以看我的博客:
http://blog.csdn.net/qq20004604/article/details/51773574
extends layoutblock content h1= title p Welcome to #{title}
第一行的extends layout表示他导入的layout模板(即layout.jade)
block content表示以下这部分将套入layout的content位置
内容略。
这时候再过去看layout.jade
doctype htmlhtml head title= title link(rel='stylesheet', href='/stylesheets/style.css') body block content
他导入的是style.css这个样式表,页面的title是变量title
上面的index.jade中的内容将导入这里的block content区域(因为变量名一样,会对应替换)。
其结构大概如下:
然后我们根据自己实际需求来改造:
直接给出代码:
首先在stylesheets文件夹下创建一个blog.css文件,内里样式为:
body { padding-top: 60px; padding-botom: 40px;}#textarea { resize: none; width: 300px; height: 100px; cursor: text;}#postBlog { position: relative; left: 20px; vertical-align: top;}#clearBlog { position: relative; left: -90px; top: 27px; width: 110px; height: 44px;}.myalert { position: absolute;}.displayNONE { display: none;}#scrollToFoot { border: 1px solid #ccc; text-align: center; font-size: 18px; padding: 20px 0;}fotter p { margin-top: 40px; padding-top: 20px; border-top: 1px solid #aaa; font-size: 18px;}.row { color: #555;}
其次是layout.jade
doctype htmlhtml head title MyBlog By qq20004604 link(rel='stylesheet', href='./stylesheets/bootstrap.min.css') link(rel='stylesheet', href='./stylesheets/bootstrap-responsive.min.css') link(rel='stylesheet', href='./stylesheets/blog.css') script(type="text/javascript",src='javascripts/jq.js') script(type="text/javascript",src='javascripts/bootstrap.min.js') script(type="text/javascript",src='javascripts/blog.js') body div.navbar.navbar-fixed-top div.navbar-inner div.container a.btn.btn-navbar(data-toggle="collapse",data-target=".nav-collapse") span.icon-bar span.icon-bar span.icon-bar a.brand(href="/") MyBlog div.nav-collapse ul.nav li a(href="/") 首页 li a(href="/logout") 登出 li a(href="/login") 登入 li a(href="/reg") 注册 li a(href="/language") 切换语言 div#contrainer.container block content hr fotter p 作者:王冬 QQ:20004604
效果如图:
然后是index.jade:
extends layoutblock content div.hero-unit h1 我的博客 p 这个是基于Nodejs作为后台,jade作为模板来,使用了Express作为框架 br br //这部分暂时用1替代,后续会被更新 if(1) br br a.btn.btn-primary.btn-large(href="/login") 登录 a.btn.btn-large(href="/reg") 立即注册 else textarea#textarea.uneditable-input button#postBlog.btn.btn-large 提交微博 button#clearBlog.btn.btn-large 清空 div#submitError.alert.alert-error.displayNONE.myalert div#submitSuccess.alert.alert-success.displayNONE div.row.content div.span4 h2 烟雨江南说 p 当欲望没有了枷锁,就没有了向前的路 p 只有转左,或者向右 p 左边是地狱,右边也是地狱 div.span4 h2 烟雨江南说 p 那些都是极好极好的 p 可是我偏偏不喜欢 div.span4 h2 烟雨江南说 p 我不怕傻 p 只怕 p 遇不到 p 可以让我变傻的人 div.span4 h2 烟雨江南说 p 人在年轻的时候总会有些莫名的坚持, p 并且以此感动着自己, p 却时常会在不经意间让真正重要的东西从指间流走。 div.span4 h2 烟雨江南说 p 记忆真是一种奇怪的东西, p 有时候会涤荡所有的苦难,只留下温情, p 有时候却磨灭掉曾有的欢乐,唯剩下苍白和丑陋。 div.span4 h2 烟雨江南说 p 那存在的,都是幻影。 p 那永恒的,终将毁灭。 p 世界万物,缤纷色彩,都是被蒙蔽的人心罢了。 div.span4 h2 烟雨江南说 p 诸神以真相示人,而世人却视而不见 div.span4 h2 烟雨江南说 p 只有绵羊会向狮子要求平等, p 而狮子们从来不会这样想。 div.span4 h2 烟雨江南说 p 愿迷途的旅人,从此得享安息。 p 因理想而不朽,因归返而救赎。 div#scrollToFoot 滚动到底部然后加载内容
效果如图:
但此时,上面的页面切换目前还都是无效状态;
滚动然后加载内容,也正处于无效状态;
注册和登录按钮,点击后也无法正常跳转;
我们需要依次解决这些问题。
【13】登录页面
接下来我们添加登录页面的路由和模板。
路由,打开app.js,在
app.use('/', routes); app.use('/users', users);
之前添加
var reg = require('./routes/reg');var login = require('./routes/login');
之后添加:
app.use('/reg', reg); //注册的,reg.js来处理app.use('/login', login); //登录的,login来处理
这样的话,就添加了注册和登录页面的路由了,但目前,我们还缺其具体文件和代码。
进入routes文件夹,创建reg.js和login.js
reg.js
var express = require('express'); //调用express模块var router = express.Router(); //调用模块的Router方法router.get('/', function (req, res, next) { res.render('reg')});module.exports = router;
login.js
var express = require('express'); //调用express模块var router = express.Router(); //调用模块的Router方法router.get('/', function (req, res, next) { res.render('login')});module.exports = router;
现在又缺模板文件了。
进入views文件夹,创建reg.jade和login.jade
reg.jade
extends layoutblock content form.form-horizontal(method="post") fieldset legend 注册 div.control-group label.control-label(for="username") 用户名 div.controls input.input-xlarge#username(type="text",name="username") p.help-block 你的账户名称,用于登录和提示 div.control-group label.control-label(for="password") 口令 div.controls input.input-xlarge#password(type="password",name="password") div.control-group label.control-label(for="password-repeat") 重复输入口令 div.controls input.input-xlarge#password-repeat(type="password",name="password-repeat") div.form-actions button.btn.btn-priamry(type="submit") 注册
login.jade
extends layoutblock content form.form-horizontal(method='post') fieldset legend 登录 div.control-group label.control-label(for='username') 用户名 div.controls input.input-xlarge#username(name='username',type='text') div.control-group label.control-label(for='password') 密码 div.controls input.input-xlarge#password(name='password',type='password') div.form-actions button.btn.btn-primary(type="submit") 登录
这个时候,注册和登录页面已经可以访问了(虽然还没有添加逻辑)
【14】在和MySQL交互之前的准备工作
首页、注册、登录页面的页面布局已经做完,下来我们需要完成注册和登录功能。
注册功能的流程:
第①和②略过;
第③步由js完成,因此要对reg.jade进行修改,同时也需要添加处理登录逻辑的js代码;
第④步在第③步验证一致后发起ajax请求,和第③步一并完成;
第⑤步由后端完成,具体流程为:
第⑥步是ajax请求的回调函数,在屏幕上提示不同的内容。
也可以通过服务器重定位,推送一个提示注册成功的页面。
第③步修改:
reg.jade
extends layoutblock content script(type="text/javascript",src='javascripts/reg.js') div.form-horizontal fieldset legend 注册 div.control-group label.control-label(for="username") 用户名 div.controls input.input-xlarge#username(type="text",name="username") p.help-block#tips 你的账户名称,用于登录和提示 p.help-block.displayNONE#usrname-error 用户名不能为空 p.help-block.displayNONE#error-alert div.control-group label.control-label(for="password") 口令 div.controls input.input-xlarge#password(type="password",name="password") p.help-block.displayNONE#pw-error 密码不能为空 div.control-group label.control-label(for="password-repeat") 重复输入口令 div.controls input.input-xlarge#password-repeat(type="password",name="password-repeat") p.help-block.displayNONE#pw-rp-error 两次密码需要一致 div.form-actions button.btn.btn-priamry#submit-button 注册
在这里,取消掉原生的表单提交功能,更改为用ajax发起请求。
注册页面的逻辑单独写在一个js里面,因此在public/javascripts下创建文件:
reg.js
$(document).ready(function () { var time = 0; //用于计时 $("#submit-button").click(function () { //获取账号密码 var name = $("#username").val(); var pw = $("#password").val(); var pwRepeat = $("#password-repeat").val(); //未输入账号名 if (name.length === 0) { $("#username").parent().parent().addClass("error"); $("#usrname-error").removeClass("displayNONE"); $("#tips").addClass("displayNONE"); setTimeout(function () { $("#username").parent().parent().removeClass("error"); $("#usrname-error").addClass("displayNONE"); $("#tips").removeClass("displayNONE"); }, 2000); return; } //密码为空 if (pw.length === 0) { $("#password").parent().parent().addClass("error"); $("#pw-error").removeClass("displayNONE"); setTimeout(function () { $("#password").parent().parent().removeClass("error"); $("#pw-error").addClass("displayNONE"); }, 2000); return; } //密码不相同 if (pw !== pwRepeat) { $("#pw-rp-error").parent().parent().addClass("error"); $("#pw-rp-error").removeClass("displayNONE"); setTimeout(function () { $("#pw-rp-error").parent().parent().removeClass("error"); $("#pw-rp-error").addClass("displayNONE"); }, 2000); return; } var obj = { name: name, password: pw }; //防止连续点击,先禁用提交按钮,防止重复提交 if (new Date() - time < 3000) { return; } //发起请求前,更新提交时间, time = new Date(); //发起请求,回调内容是一个对象,注册成功会有success,注册失败会有error属性 $.post("/reg", obj, function (data) { if ("error" in data) { $("#error-alert").removeClass("displayNONE") $("#error-alert").text(data.error); $("#error-alert").parent().parent().addClass("error"); setTimeout(function () { $("#error-alert").addClass("displayNONE") $("#error-alert").parent().parent().removeClass("error"); }, 2000) time = 0; //注册失败,清空time计时,允许再次提交 } else if ("success" in data) { location.href = data.success; //注册成功则重定向 } }) })})
这里的验证逻辑很简单:
①账号不能为空;
②密码不能为空;
③两次密码应该相同;
为了简化,目前只设置这么多,不考虑例如最短密码长度、最长密码长度、密码需要由字母、数字、特殊符号混合的情况
打开blog.css,添加这样一个样式,用于隐藏某些暂时不需要显示的内容:
.displayNONE { display: none;}
【15】和MySQL交互
这里采用连接池的模式和MySQL交互;
①毫无疑问,我们首先应该安装MySQL模块;
进入项目的根目录,输入
npm install mysql
等待出现以下画面就表示装好了:
②在项目的根目录下面创建文件夹models,这个文件夹用于保存各种类模型
并在其中新建db.js
ar mysql = require("mysql"); //调用nodejs和mysql交互的模块;var pool = mysql.createPool({ //创建连接池 host: '127.0.0.1', //表示本地的数据库 user: 'root', //账号 password: '123456', //密码 port: '3306', //默认端口 database: 'blog' //库名})var db = {};db.con = function (callback) { //callback是回调函数,连接建立后的connection作为其参数 pool.getConnection(function (err, connection) { //创建一个链接 if (err) { //对异常进行处理 throw err; //抛出异常 } else { callback(connection); //如果正常的话,执行回调函数(即请求),具体请求在回调函数中写 } connection.release(); //释放连接 })}module.exports = db;
这段代码做了这些事
我们该如何使用呢,很简单。
①生成一个db的实例;
②调用db的con方法,将请求写在回调函数之中,请求对象是回调函数的参数;
③例如:
我们打开routes/reg.js,将代码修改为如下样子:
var express = require('express'); //调用express模块var router = express.Router(); //调用模块的Router方法var db = require('../models/db');router.get('/', function (req, res, next) { res.render('reg')});router.post('/', function (req, res, next) { //当路由捕捉到url为/reg的post请求时,会执行以下函数 db.con(function (connect) { //db是我们导入的对象,connect是数据库的连接,此时数据库连接无错误,是一个正常的连接 //这是我们自定义的回调函数 connect.query("SELECT 1 + 1 AS solution", function (err, result) { //这里是一个对数据库的请求 if (err) { //假如请求出错,抛出异常 throw err; return; } console.log(result); //控制台输出结果 res.send({ //将结果作为对象的error属性发送给客户端 error: result }); }) //执行完回调函数后,会跳回db的con方法,执行接下来的属性(即释放连接) })})module.exports = router;
这些代码做了一件事,在用户发起reg请求时,将查询结果(返回);
还记不记得我们在注册页面的js回调函数,假如返回值有error属性,那么他会将error属性显示出来;
当然,由于并不能显示对象(error属性是一个对象),因此显示出来的是这样的
这只是一个测试用的代码,但通过这样的方法,说明我们的前后端交互是走通了的
【16】封装涉及到user的代码
初步考虑,我们现在要注册,因此应该写一个向MySQL插入项的方法;
那是否我们就应该直接将这部分代码直接写在reg.js里面呢?
显然是不好的,这种做法违背了OOP的思想——封装;
简单来说,我们应该将用户视为一个类:
①至少包含两个方法:注册(reg)、查询(login);
②至少包含两个属性:用户名(username)、密码(password)。
因此,新建user.js,放置于models文件夹内。
内容如下:
var db = require('./db')function User(user) { // 这是一个User类,传递的参数是一个对象,这个对象可以具有两个属性,分别是name和password this.name = user.name; // 如果传递的user不是空,那么将其赋值给User类的实例的name属性 this.password = user.password; // 同上,赋给password属性}// 这个是插入方法User.prototype.save = function (callback) { var self = this if (this.name.length == 0 || this.password.length == 0) { //如果在没账号/密码的情况下就调用插入方法,则提示错误并返回 console.log("You can't save user information without NAME or PASSWORD!"); return callback("You can't save user information without NAME or PASSWORD!"); } db.con(function (connect) { // 数据库的表名为user,字段名为name和password connect.query("INSERT INTO user(name,password) VALUES (?,?)", [self.name, self.password], function (err, result) { // 上面的两个问号,表示第二个参数的self.name和self.password依次被替换到问号的位置; // 需要注意的是: // ①必须以数组形式依次排列; // ②必须是字符串形式(不能是number) if (err) { //如果出错,那么错误信息作为回调函数的参数返回 console.log("INSERT name:" + self.name + ", password:" + self.password + " error, the err information is " + err); return callback(err); } callback(null, result); //如果正常执行,那么第一个参数为null(无错误),第二个参数为返回的结果 }) })}// 这个是查询方法User.prototype.get = function (callback) { var self = this; if (this.name.length == 0) { //如果在没账号/密码的情况下就调用插入方法,则提示错误并返回 console.log("You can't select user information without NAME!"); return callback("You can't select user information without NAME!"); } var selectResult; db.con(function (connect) { connect.query('SELECT * FROM user WHERE name = ?', [self.name], function (err, result) { if (err) { //报错 console.log("select name:" + self.name + " error, the err information is " + err); return callback(err); } //注意,这里返回的是带账号和密码的,另外,理论上是有可能有多个元素的,但由于在注册时,用户名限制了重复,因此只会返回一个 selectResult = result; //这里的result是一个数组,只包含一个元素(或者是空) if (selectResult.length) { //查询到的话,数组是有元素的(即length > 0) return callback(null, selectResult[0]) //这里的selectResult就是user对象,包含name和password属性 } else { return callback(null, null); //如果查询不到,两个参数都为空 } }) })}module.exports = User;
这个封装好的User类满足了我们的需求,下来需要在reg里面调用这个类。
下面是修改后的routes/reg.js的代码
var express = require('express'); // 调用express模块var router = express.Router(); // 调用模块的Router方法var User = require('../models/user'); // 调用刚才封装好的user类var crypto = require("crypto"); // 这个是加密用,nodejs本身提供router.get('/', function (req, res, next) { res.render('reg')});router.post('/', function (req, res, next) { //当路由捕捉到url为/reg的post请求时,会执行以下函数 // 获取md5这个对象;(表示调用这个对象的方法,加密的形式是MD5); var md5 = crypto.createHash('md5'); // 调用md5的update方法,update的第一个参数是被处理的内容,第二个是可选的,但如果要对中文进行处理,那么就需要加上'utf-8'这个参数; // 因此,我们的密码其实可以支持中文(理论上) // digest指的是以什么形式进行编码,这里选择了base64,除此之外,还有hex(十六进制)、binary(二进制)这两种方法; var password = md5.update(req.body.password, 'utf-8').digest('base64'); var newUser = new User({ //生成一个User的实例,并赋给他name和passowrd属性 name: req.body.name, password: password //这里的password是加密过的(存储在数据库里也是加密过后的形式) }) newUser.save(function (err, result) { //do something })})module.exports = router;
这部分并没有完成,之所以这样,是因为还欠缺一个东西,那就是登录状态的设置。
【17】登录状态和session
如何确定一个人是否在登录中?
有两个办法:①cookie;②session;
简单来说,他们之间的区别在于:
cookie保存在客户端,session保存在服务器端;
顺便补一个Cookie、LocalStorage和SessionStorage之间区别的链接:
http://jerryzou.com/posts/cookie-and-web-storage/
注意,这里的SessionStorage和session并不是同一个东西,前者保存在浏览器端,后者保存在服务器端。
再补一个express使用cookie和session的文章:
http://wiki.jikexueyuan.com/project/node-lessons/cookie-session.html
由于cookie可以在本地被修改,因此用cookie来保存用户状态是不安全的。
这里采用session来保存用户状态。
在高版本的express里(4.x及以上),cookie和session等模块并不直接包含在express里了,因此我们要安装express-session。
在项目的根目录输入:
npm install express-session
安装好后如图:
打开app.js,在
var app = express();
后添加如下代码:
//sessionvar session = require('express-session');app.use(session({ secret: 'recommend 128 bytes random string', cookie: {maxAge: 3600 * 1000}}))
这种设置表示:
①默认session存储在内存中(默认设置,效果是重启后session失效);
②最大有效时间(过期时间)是3600秒;
然后重新打开reg.js,在原先的空白处,添加以下代码:
if (user) { //如果第二个参数存在,说明用户名重复了,返回提示 return res.send({ error: "Username already exists." }); } if (err) { //如果报错,返回报错信息 console.log(err); return res.send({ error: err }); } //此时说明无重复无报错,可以将用户信息存入到数据库之中 newUser.save(function (err, result) { if (err) { //如果存入时报错 return res.send({ error: err }); } //以上,done //存储成功后返回还有点问题,需要搞明白 req.session.user = { name: this.name, password: this.password }; req.session.success = "注册成功!"; //添加session的注册成功信息 res.send({ //发送一个对象,属性为success,值为/ success: "/" }) return; })
但此时还没结束,我们需要对数据库进行操作:(建议用数据库软件完成)
先建立一个库,库名为blog
在库中建立一个表,表名为user;
表中有三个字段:
①第一个为id,类型为int,自动增量,不允许为空;
②第二个为name,类型为varchar,长度为255,字符集为utf8,不允许为空;
③第三个为password,类型为varchar,长度为255,字符集为utf8,不允许为空;
于是,注册流程已经走通,用户可以顺利注册了
账号和密码用软件创建时设置如图:
【18】设置登录状态
在之前,已经可以通过session保存用户了,下来,需要根据session的记录,区分用户登录和未登录的状态。
简单来说,有两种情况:
①session中的user属性为空,用户未登录;
②session中的user属性不为空,用户已登录,登录人士为user的name属性;
为了简化,这里并没有对同时登录的检测(避免一个账号在两个地方登录)。
而在访问页面时,应该检测登录状态:
①假如已经登录,那么就不应该显示登录窗口、注册窗口,以及发表微博相关的内容;
②假如还没有登录,那么就不应该显示登出的按钮;
为了完成这个目的,那么应该在引擎渲染时进行检查,最笨的做法是,将变量设置于res.render的第二个参数的属性之中:
打开layout.jade,将代码如下修改:
doctype htmlhtml head title MyBlog By qq20004604 link(rel='stylesheet', href='./stylesheets/bootstrap.min.css') link(rel='stylesheet', href='./stylesheets/bootstrap-responsive.min.css') link(rel='stylesheet', href='./stylesheets/blog.css') script(type="text/javascript",src='javascripts/jq.js') script(type="text/javascript",src='javascripts/bootstrap.min.js') script(type="text/javascript",src='javascripts/blog.js') body div.navbar.navbar-fixed-top div.navbar-inner div.container a.btn.btn-navbar(data-toggle="collapse",data-target=".nav-collapse") span.icon-bar span.icon-bar span.icon-bar a.brand(href="/") MyBlog div.nav-collapse ul.nav li a(href="/") 首页 //以下是修改后的部分 if(user()) li a(href="/logout") 登出 else li a(href="/login") 登入 li a(href="/reg") 注册 li a(href="/language") 切换语言 div#contrainer.container block content hr fotter p 作者:王冬 QQ:20004604
打开index.jade
extends layoutblock content div.hero-unit h1 我的博客 p 这个是基于Nodejs作为后台,jade作为模板来,使用了Express作为框架 br br //修改以下部分 if(!user()) br br a.btn.btn-primary.btn-large(href="/login") 登录 a.btn.btn-large(href="/reg") 立即注册 else textarea#textarea.uneditable-input button#postBlog.btn.btn-large 提交微博 button#clearBlog.btn.btn-large 清空 div#submitError.alert.alert-error.displayNONE.myalert div#submitSuccess.alert.alert-success.displayNONE div.row.content div.span4 h2 烟雨江南说 p 当欲望没有了枷锁,就没有了向前的路 p 只有转左,或者向右 p 左边是地狱,右边也是地狱 div.span4 h2 烟雨江南说 p 那些都是极好极好的 p 可是我偏偏不喜欢 div.span4 h2 烟雨江南说 p 我不怕傻 p 只怕 p 遇不到 p 可以让我变傻的人 div.span4 h2 烟雨江南说 p 人在年轻的时候总会有些莫名的坚持, p 并且以此感动着自己, p 却时常会在不经意间让真正重要的东西从指间流走。 div.span4 h2 烟雨江南说 p 记忆真是一种奇怪的东西, p 有时候会涤荡所有的苦难,只留下温情, p 有时候却磨灭掉曾有的欢乐,唯剩下苍白和丑陋。 div.span4 h2 烟雨江南说 p 那存在的,都是幻影。 p 那永恒的,终将毁灭。 p 世界万物,缤纷色彩,都是被蒙蔽的人心罢了。 div.span4 h2 烟雨江南说 p 诸神以真相示人,而世人却视而不见 div.span4 h2 烟雨江南说 p 只有绵羊会向狮子要求平等, p 而狮子们从来不会这样想。 div.span4 h2 烟雨江南说 p 愿迷途的旅人,从此得享安息。 p 因理想而不朽,因归返而救赎。 div#scrollToFoot 滚动到底部然后加载内容
打开routes/index.js,将代码如下修改:
var express = require('express'); //调用expressvar router = express.Router(); //生成express的Router方法的一个实例//处理函数router.get('/', function (req, res, next) { //捕获根url res.render('index', { user: function () { //user将读取session的属性,然后给予不同的返回值 if (req.session.user) return req.session.user; else return null; } }); //res.render方法渲染一个引擎模板, //第二个参数是一个对象,对象里的变量可以在引擎中使用, //第三个参数是回调函数,提供两个参数,分别是err和html,err是错误,html是渲染后的页面。如果使用这个回调函数,那么将不会自动响应,即要用户自己写返回html的命令});module.exports = router;
代码解释:
①在之前的代码中,我们如果注册成功,那么会将user属性设置在session之中;
②而在index.js里,会传递一个变量,那就是user;
③这个user会读取session的user属性,由于session默认的属性是没有user的,因此返回值为null(空),而注册成功后,返回值则为user(不为空);
④在layout.jade中,会执行这个user函数。假如未登录,user为空,那么执行else语句(显示登入和注册标签);否则显示登出标签;
⑤在index.jade中,同样执行,假如未登录,显示登录、注册按钮;假如已经登录了,显示输入微博的窗口和提交按钮;
于是,登录后的页面是这样的:
但是这种行为个人觉得比较傻,并且也不利于做多语言扩展,因此换一种方式。
【19】动态视图助手和多语言支持
关于动态视图助手的说明请看我之前的博客:
http://blog.csdn.net/qq20004604/article/details/51934991
简单来说,使用动态视图助手时,我们可以在引擎渲染的时候,直接调用视图助手中的变量;
首先在models下面建立language.js文件,内容如下
function internation() {}internation.prototype.languagePacks = { zh_cn: { index: { title: "我的博客", description: "这个是基于Nodejs作为后台,jade作为模板来,使用了Express作为框架", login: "登录", regNow: "立即注册", submit: "提交微博", emptyInput: "清空" }, layout: { title: "MyBlog By qq20004604", topTitle: "MyBlog", indexButton: "首页", logout: "登出", login: "登入", reg: "注册", language: "切换语言", foot: "作者:王冬 QQ:20004604" } }, eng: { index: { title: "My blog", description: "I use NodeJS, Express, and MySQL to design this site.", login: "Login", regNow: "Reg", submit: "Submit", emptyInput: "Clear" }, layout: { title: "MyBlog By qq20004604", topTitle: "MyBlog", indexButton: "Index", logout: "Logout", login: "Login", reg: "Reg", language: "Language", foot: "I'm WangDong, you can contact me with QQ:20004604" } }}//如果有语言设置,则设置为对应的语言,否则,设置为中文;internation.prototype.getPacks = function (setting) { if (!setting) { return this.languagePacks["zh_cn"] } if (setting in this.languagePacks) { return this.languagePacks[setting]; } else { return this.languagePacks["zh_cn"] }}internation.prototype.set = function (app) { var self = this; app.use(function (req, res, next) { //这个是示例,定义一个动态视图助手变量 //如果有语言设置,则设置为对应的语言,否则,设置为中文; res.locals = self.getPacks(req.session.language) //下面两个因为要调用req和res,所以特殊设置 res.locals.user = function () { if ('session' in req && 'user' in req.session) return req.session.user; else return null; }; //这里不能用error这个变量名 res.locals.err = function () { //如果session不存在,或者session中没有err属性 if (!'session' in req || !'err' in req.session) return null; //返回空 //否则返回err,并将session中的err重置为空(因此只返回一次) var err = req.session.err; req.session.err = null; return err; }; //注册成功的提示 res.locals.success = function () { //原理同err if (!'session' in req || !'success' in req.session) return null; var success = req.session.success; req.session.success = null; return success; } next(); })}module.exports = internation;
在以上代码中,程序做了以下事情:
①创建一个语言包,他包含中文和英文两种;
②设置了一个方法,他可以根据session的language属性来决定获取哪个语言包;
但也有一定缺陷:
①假如在zh_cn的index中有一条test属性,他有一个对应的字符串;但在eng中相应的位置不存在,那么切换为eng时,这里就会显示错误;
②调用的时候,需要通过例如index.title这样的形式来调用
然后我们将这个模块加入到我们的代码之中;
打开app.js,在之前添加的关于session的代码后面,添加如下代码:
var language = require('./models/language'); //多语言var internation = new language();internation.set(app);
修改layout.jade
octype htmlhtml head title #{layout.title} link(rel='stylesheet', href='./stylesheets/bootstrap.min.css') link(rel='stylesheet', href='./stylesheets/bootstrap-responsive.min.css') link(rel='stylesheet', href='./stylesheets/blog.css') script(type="text/javascript",src='javascripts/jq.js') script(type="text/javascript",src='javascripts/bootstrap.min.js') script(type="text/javascript",src='javascripts/blog.js') body div.navbar.navbar-fixed-top div.navbar-inner div.container a.btn.btn-navbar(data-toggle="collapse",data-target=".nav-collapse") span.icon-bar span.icon-bar span.icon-bar a.brand(href="/") #{layout.topTitle} div.nav-collapse ul.nav li a(href="/") #{layout.indexButton} //以下是修改后的部分 if(user()) li a(href="/logout") #{layout.logout} else li a(href="/login") #{layout.login} li a(href="/reg") #{layout.reg} li a(href="/language") #{layout.language} div#contrainer.container block content hr fotter p #{layout.foot}
重新访问页面,我们会发现页面跟以前并没有什么区别,说明我们的语言包已经正常运行了。
【20】添加语言切换功能;
根据我们之前的代码,语言切换很简单,只需要在session添加属性即可;
首先,设置路由,routes文件夹下新建language.js
var express = require('express'); //调用expressvar router = express.Router(); //生成express的Router方法的一个实例//处理函数router.get('/', function (req, res, next) { //捕获根url if (!('language' in req.session) || req.session.language === 'zh_cn') req.session.language = 'eng'; //更改属性 else req.session.language = 'zh_cn'; res.redirect('/'); //重定向});module.exports = router;
在app.js的路由代码附近添加如下代码:
var lan = require('./routes/language');app.use('/language', lan); //切换语言的
重启程序,然后进入首页点击切换语言,页面顶端变为如下状态:
此时如果再次点击‘Language’,那么页面又会切回中文;
我们顺便修改layout.jade文件为:
doctype htmlhtml head title #{layout.title} link(rel='stylesheet', href='./stylesheets/bootstrap.min.css') link(rel='stylesheet', href='./stylesheets/bootstrap-responsive.min.css') link(rel='stylesheet', href='./stylesheets/blog.css') script(type="text/javascript",src='javascripts/jq.js') script(type="text/javascript",src='javascripts/bootstrap.min.js') script(type="text/javascript",src='javascripts/blog.js') body div.navbar.navbar-fixed-top div.navbar-inner div.container a.btn.btn-navbar(data-toggle="collapse",data-target=".nav-collapse") span.icon-bar span.icon-bar span.icon-bar a.brand(href="/") #{layout.topTitle} div.nav-collapse ul.nav li a(href="/") #{layout.indexButton} //以下是修改后的部分 if(user()) li a(href="/logout") #{layout.logout} else li a(href="/login") #{layout.login} li a(href="/reg") #{layout.reg} li a(href="/language") #{layout.language} div#contrainer.container block content hr fotter p #{layout.foot}
再修改routes/index.js为:
var express = require('express'); //调用expressvar router = express.Router(); //生成express的Router方法的一个实例//处理函数router.get('/', function (req, res, next) { //捕获根url res.render('index');});module.exports = router;
【21】登录功能的完成
与注册(reg.js)功能的代码类似,
首先在models的语言包中分别添加如下属性:
message: { reg_success: "注册成功!", reg_fail: "注册失败!", login_success: "登录成功!", login_fail: "登录失败", errorName: "用户名不存在", errorPW: "密码错误!"}
和
message: { reg_success: "Reg Success!", reg_fail: "Reg Failed!", login_success: "Login Success!", login_fail: "Login Failed!", errorName: "The username is not exists.", errorPW: "Error Password!"}
打开routes/login.js文件
将代码修改如下:
var express = require('express'); //调用express模块var router = express.Router(); //调用模块的Router方法var User = require('../models/user'); // 调用刚才封装好的user类var crypto = require("crypto"); // 这个是加密用,nodejs本身提供router.get('/', function (req, res, next) { res.render('login')});router.post('/', function (req, res, next) { var md5 = crypto.createHash('md5'); var password = md5.update(req.body.password, 'utf-8').digest('base64'); var newUser = new User({ //生成一个User的实例,并赋给他name和passowrd属性 name: req.body.name }) newUser.get(function (err, user) { if (!user) { //用户名不存在 return res.send({errorName: res.locals.message.errorName}); } else if (user) { //如果第二个参数存在,说明用户名重复了,那么监测密码是否相同 if (user.password === password) { //密码正确,登录成功 req.session.user = user; req.session.success = res.locals.message.login_success; return res.send({success: '/'}); } else { return res.send({errorPW: res.locals.message.errorPW}); } } else if (err) { //如果报错,返回报错信息 console.log(err); return res.send({ error: err }); } })})module.exports = router;
修改login.jade
xtends layoutblock content script(type="text/javascript",src='javascripts/login.js') div.form-horizontal fieldset legend 登录 div.control-group label.control-label(for='username') 用户名 div.controls input.input-xlarge#username(name='username',type='text') p.help-block.displayNONE#name-alert div.control-group label.control-label(for='password') 密码 div.controls input.input-xlarge#password(name='password',type='password') p.help-block.displayNONE#pw-alert div.form-actions button.btn.btn-primary#submit 登录
在public/javascripts下新建login.js,内容如下:
$(document).ready(function () { var time = 0; $("#submit").click(function () { var user = { name: $("#username").val(), password: $("#password").val() } //禁止用户名、密码为空 if (user.name.length === 0) { $("#name-alert").text("用户名不能为空"); return; } else if (user.password.length === 0) { $("#pw-alert").text("密码不能为空"); return; } if (new Date() - time < 3000) return time = new Date(); //发起ajax请求 $.post("login", user, function (data) { if ("errorName" in data) { $("#name-alert").removeClass("displayNONE") $("#name-alert").text(data.errorName); $("#name-alert").parent().parent().addClass("error"); setTimeout(function () { $("#name-alert").addClass("displayNONE") $("#name-alert").parent().parent().removeClass("error"); }, 2000) time = 0; } else if ("errorPW" in data) { // $("#pw-alert").removeClass("displayNONE") $("#pw-alert").text(data.errorPW); $("#pw-alert").parent().parent().addClass("error"); setTimeout(function () { $("#pw-alert").addClass("displayNONE") $("#pw-alert").parent().parent().removeClass("error"); }, 2000) time = 0; } else if ("success" in data) { location.href = data.success; //注册成功则重定向 } }) })})
于是,登录相关的内容算是做完了(但没有做多语言);
【22】登出功能的完成
相比较登录,登出功能就要简单的多,只需要将session的user属性重置为null即可。
在app.js的路由代码附近添加以下代码:
var logout = require('./routes/logout');app.use('/logout', logout); //登出
在routes文件夹下新建logout.js,代码非常简单:
var express = require('express'); //调用express模块var router = express.Router(); //调用模块的Router方法//登出只需要清空session的user属性即可router.get('/', function (req, res, next) { req.session.user = null; res.redirect('/');})module.exports = router;
【23】清点需求
重新打开我们之前的需求表:
①有首页;
②支持注册;
③支持登录、登出;
④可以发表博客,发表的博客可以保存到数据库;
⑤可以查看博客,博客从数据库中读取,为了简化,这里设置为查看所有人的博客;
⑥查看博客时,初始查看的数量有限,但可以无限加载新的博客,直到查看完全部博客;
⑦一定程度上实现多语言(即可以切换显示的语言版本),但由于复杂度所限,因此只部分实现(但框架已建立好,可以通过继续完善代码实现整体的国际化);
⑧根据登录状态,对可以访问的页面进行控制(某些允许某些禁止)
红色部分是已经完成的,蓝色部分是尚未完成的。
下来,我们的任务是完成④⑤⑥这三项。
【24】博客的发表
在登录之后,我们会在首页看到一个文本输入框,还有提交和清空按钮;
但目前尚没有逻辑,需要进行添加,打开public\javascripts\blog.js,添加如下代码:
$(document).ready(function () { //根据url,设置高亮 if (window.location.pathname === '/') { $(".nav-collapse .nav li:first-child").addClass("active"); } else if (window.location.pathname === '/login') { $(".nav-collapse .nav li:nth-child(2)").addClass("active"); } else if (window.location.pathname === '/reg') { $(".nav-collapse .nav li:nth-child(3)").addClass("active"); } //清空输入框 $("#clearBlog").click(function () { $("#textarea").val(""); }) var lastSubmit = null; var timeer = null; var successSubmit = null; //防止连续点击 function ErrorAlert() { if (new Date() - lastSubmit < 3000) { clearTimeout(timeer); } lastSubmit = new Date(); timeer = setTimeout(function () { $("#submitError").addClass("displayNONE"); }, 3000); } //提交输入框 $("#postBlog").click(function () { //防止重复发表,因此需要间隔10秒 if (successSubmit && new Date() - successSubmit < 10000) { //这里是警告提示,防止连续发送消息 $("#submitError").text("你发的太快了,喝喝茶吧!距离下次可以发送消息的时间还有:" + (new Date() - successSubmit).toFixed(0) + " 秒。"); $("#submitError").removeClass("displayNONE"); //防止连续点击 ErrorAlert() return; } var text = $("#textarea").val(); if (text.length === 0) { //禁止发送空内容 $("#submitError").text("请填写输入内容"); $("#submitError").removeClass("displayNONE"); //防止连续点击 ErrorAlert() return; } var length = 0; //获取输入长度,英文字母为1,中文汉字为2 for (var i = 0; i < text.length; i++) { if (text[i].match(/[^\x00-\xff]/ig) != null) length += 2; else length += 1; } if (length > 255) { $("#submitError").text("字符长度过长,限制字符长度为255个字节,你的文本长度为" + length + "个字节"); $("#submitError").removeClass("displayNONE"); ErrorAlert() return; } //先清除输入框再提交 $("#textarea").val(""); successSubmit = new Date(); $.post('/post', {text: text}, function (item) { if (item.code == 500) { successSubmit = 0; $("#submitError").text(item.data); $("#submitError").removeClass("displayNONE");setTimeout(function () { $("#submitError").addClass("displayNONE");}, 3000); } else if (item.code == 200) { $("#submitSuccess").text(item.data); $("#submitSuccess").removeClass("displayNONE"); setTimeout(function () { $("#submitSuccess").addClass("displayNONE"); }, 3000); } }) })})
这段代码做了以下事:
①根据当前的url,给对应的标签高亮;
②点击清空按钮,会清除输入框的内容;
③点击提交按钮,会验证输入框内字符串的长度,禁止发送空内容和超过255字节长度的内容;
④当成功发出post请求后,禁止在短时间内连续发送post请求;当发送失败后,取消禁止状态,可以立刻再次发送
⑤验证通过后,将消息内容以post请求发送到服务器,并清空输入框;
⑥返回值有两种,一种是code属性为200,一种为500;前者为发送成功,发出提示消息;后者发送失败,提示失败原因。
接下来首先要在MySQL里创建一张表,用于保存发送的文本内容;
表名为text,字符类型为utf8,表项如下:
id为自动增量;
user为发表这个博客的用户;
text博客的内容;
ctime为博客的创建时间;
然后在routes文件夹下新建post.js
var express = require('express'); //调用express模块var router = express.Router(); //调用模块的Router方法var db = require('../models/db')//给原生的Date添加一个方法,传递的参数是格式Date.prototype.Format = function (fmt) { //author: meizz var obj = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "H+": this.getHours(), //小时 "m+": this.getMinutes(), //分 "s+": this.getSeconds(), //秒 "q+": Math.floor((this.getMonth() + 3) / 3), //季度 "S": this.getMilliseconds() //毫秒 }; if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length)); for (var key in obj) if (new RegExp("(" + key + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (obj[key]) : (("00" + obj[key]).substr(("" + obj[key]).length))); console.log(fmt); return fmt; //返回值是格式化好之后的时间}function BlogSubmit(user) { this.user = user.name; this.text = user.text; this.time = new Date().Format("yyyy-MM-dd HH:mm:ss");}//存储文本内容BlogSubmit.prototype.save = function (callback) { var self = this; console.log(self.user); db.con(function (connect) { connect.query("INSERT INTO text(user,text,ctime) VALUES (?,?,?)", [self.user, self.text, self.time], function (err, result) { if (err) { console.log("INSERT text user:" + self.user + ", text:" + self.text + ", ctime: " + self.time + " error, the err information is " + err); return callback(err); } callback(null, result); }) })}router.post('/', function (req, res, next) { //如果不登录是不能发表的(这个是为了防止登录过期,但是页面还保持在登录时的情况) if (!req.session.user) { req.session.err = "请登录"; //因为这里,需要修改layout.jade return res.redirect('/login'); } //console.log(req.session.user); //登录后值为(示例) //{ Id: 23, // username: '1', // userpassword: 'xMpCOKC5I4INzFCab3WEmw==' } var blog = new BlogSubmit({ name: req.session.user.name, text: req.body.text }) blog.save(function (err, result) { if (err) { return res.send({ code: 500, data: "错误描述" + err }) } return res.send({ code: 200, data: "成功发表!" }) })})module.exports = router;
这部分代码干了以下几件事:
①给Date()添加了一个方法,用于格式化日期;
②创建了一个BlogSubmit的类,传递的参数是一个对象,他有name属性和text属性,会将其值传递给这个类的实例的user属性和text属性中。同时,会在创建这个类的时候获取当前时间。于是,text表的三项内容有了;
③给BlogSubmit类添加了一个方法,这个方法的作用是将这个类的实例的属性,存储在MySQL之中;
④由于表限制text中必须保存内容,因此假如用户通过其他方法直接发起一个post请求,也是不可能成功的(会报错);
⑤保存的前提是用户已登录,未登录的时候发表(比如登录过期)会提示错误。
⑥无论成功或者失败,都会给用户返回一个对象,成功的code属性为200,失败的为500;
最后不要忘记在app.js里添加路由:
var postBlog = require('./routes/post');app.use('/post', postBlog); //提交博客
此时发表博客,会提示:
查看数据库,数据库对应的表是有内容的,说明成功发表了。
【25】博客的加载
博客要满足这些功能;
①初始加载一些博客内容;
②当滚动条拖到最下面的时候,发起ajax请求,取得更多博客内容;
③将博客内容添加到最下方;
④当读取完所有内容时,提示无新博客;
首先,在路由之中添加:
app.use('/loadblog', users); //用户主页,users来处理
将博客的发送交给user来处理;
将以下代码添加进models/blog.js
//读取文本内容(读取所有的),从第count条偏移量开始取9条BlogSubmit.prototype.getAll = function (count, callback) { var self = this; db.con(function (connect) { //第一次查询数据库还有多少数据 connect.query("SELECT count(*) FROM text", null, function (err, result) { if (err) { console.log("SELECT * FROM text limit :" + count + ", 9 error, the err information is " + err); return callback(err); } //console.log(result[0]['count(*)']); //这个是查询出来的值 //只有当请求数据的编号(已经查询到多少个),小于最大数据量的时候,才会从数据库内读取数据 if (Number(count) < result[0]['count(*)']) { connect.query("SELECT * FROM text limit ?,9", [Number(count)], function (err, result) { if (err) { console.log("SELECT * FROM blogtext limit :" + count + ", 9 error, the err information is " + err); return callback(err); } result.offset = Number(count) + result.length; callback(null, result); }) } else { callback(null, null); } }) })}
修改routes/users.js
var express = require('express');var router = express.Router();var BlogSubmit = require("../models/blog");/* GET users listing. */router.get('/', function (req, res, next) { res.send('respond with a resource');});router.get('/:count', function (req, res, next) { var blog = new BlogSubmit({ username: null, text: null }) blog.getAll(req.params.count, function (err, result) { if (err) { res.send({ code: 500, data: "错误描述" + err }) } else if (result === null) { //空数据 res.send({ code: 501, data: "服务器已经没有更多数据了" }) } else { res.send({code: 200, data: result, offset: result.offset}); } })});module.exports = router;
修改public/javascripts/blog.js,添加以下内容:(此处有bug,请参照【27】的方式修改)
var lastLoad = 0; //初始时间设置为0 var lastLoadCount = 0; //偏移量,防止读取到重复数据 var loadingBlog = null; //加载用的定时器 //加载更多的内容 function loadMoreContent() { //控制加载间隔,时间差大于2秒,且当前不处于加载中 if (new Date() - lastLoad > 2000 && $("#scrollToFoot").innerHTML !== "加载中~~~") { lastLoad = new Date(); $("#scrollToFoot")[0].innerHTML = "加载中~~~"; //设置重置,假如超时10秒,那么允许再次提交 setTimeout(function () { if ($("#scrollToFoot").innerHTML === "加载中~~~") { $("#scrollToFoot").text("加载失败"); } }, 10000); $.get('/loadblog/' + lastLoadCount, function (obj) { console.log(obj); //这里假设item的格式: if (obj.code === 500) { $("#scrollToFoot").text("加载失败"); } else if (obj.code === 501) { //加载完毕 $("#scrollToFoot").text(obj.data); lastLoad = new Date() + 10000000; //禁止继续请求 clearInterval(loadingBlog); } else { obj.data.forEach(function (item) { $("#content").append('<div class="span4"><h2>' + item.user + '说</h2>' + '<p>' + item.text + '</p></div>'); }) $("#scrollToFoot").innerHTML = "滚动到底部然后加载内容"; lastLoadCount += obj.offset; } }) } } //加载完毕时,加载一次内容 loadMoreContent(); //向下滚动时加载内容 loadingBlog = setInterval(function () { if ($(document).height() - $(window).scrollTop() - $(window).height() < 200) { loadMoreContent(); } }, 100);
修改index.jade中的
div.row.content
为:
div.row.content#content
到目前为止,可以自动无限加载博客了。
【26】路由控制
现在,就差最后一步了。
毫无疑问,在用户未登录的时候,应该禁止掉用户发送只有登录过的用户才可以做的事情;而用户在登录之后,也应该禁止掉用户在非登录情况下才能做的事情;
前者典型是登出,而后者典型是登录和注册。
比如这样就是不对的
解决办法,利用“路由中间件”来解决问题,这就是我们在router.get之类的函数中,第二个参数的第三个参数next;
所谓路由中间件,首先要理解请求;
假如有一个url为/reg的post请求,当他遇见router.post(‘/reg’,xxxxx)时,执行完这行代码的回调函数后便停止了。
假如我们需要他被两段这样的代码来先后处理,那么显然是不可行的,路由会自动结束请求。
这个时候在第一段代码最后执行回调函数中的第三个参数next,那么就会继续执行第二段代码。
更具体的请看我的博客:
http://blog.csdn.net/qq20004604/article/details/51817625
打开app.js,在之前所有路由代码之前,添加以下代码:
//路由的处理app.use('/login', checkNotLogin);app.use('/reg', checkNotLogin);//必须在已登录情况下才能访问app.use('/logout', checkLogin);//未登录检测(已登录情况下执行)function checkNotLogin(req, res, next) { if (req.session.user) { req.session.err = "已登录,请不要重复登录"; return res.redirect('/'); } next();}//已登录检测(未登录情况下执行)function checkLogin(req, res, next) { if (!req.session.user) { req.session.err = "你还没有登录,请登录"; return res.redirect('/login'); } next();}
此时重启nodejs程序,登录博客,然后url地址输入/reg,会有以下提示
这说明,我们的路由权限控制已经顺利完成了。
这篇博客的总体结构也基本完成了。
虽然还有很多需要修补的问题,但那已经是下一篇博客的故事了。
【27】bug修复
之前因为更改为定时刷新之后,只有当处于首页时,js才能正常自行;
当进入登录、注册页时,由于无法找到#textarea这个dom,因此会报错,导致代码无法正常运行。
因此,将blog.js分拆,新建一个index.js在public\javascripts目录下,代码分拆后结果如下:
blog.js
$(document).ready(function () { //根据url,设置高亮 if (window.location.pathname === '/') { $(".nav-collapse .nav li:first-child").addClass("active"); } else if (window.location.pathname === '/login') { $(".nav-collapse .nav li:nth-child(2)").addClass("active"); } else if (window.location.pathname === '/reg') { $(".nav-collapse .nav li:nth-child(3)").addClass("active"); }})
index.js
$(document).ready(function () { //清空输入框 $("#clearBlog").click(function () { $("#textarea").val(""); }) var lastSubmit = null; var timeer = null; var successSubmit = null; //防止连续点击 function ErrorAlert() { if (new Date() - lastSubmit < 3000) { clearTimeout(timeer); } lastSubmit = new Date(); timeer = setTimeout(function () { $("#submitError").addClass("displayNONE"); }, 3000); } //提交输入框 $("#postBlog").click(function () { //防止重复发表,因此需要间隔10秒 if (successSubmit && new Date() - successSubmit < 10000) { //这里是警告提示,防止连续发送消息 $("#submitError").text("你发的太快了,喝喝茶吧!距离下次可以发送消息的时间还有:" + (10 - (new Date() - successSubmit) / 1000).toFixed(0) + " 秒。"); $("#submitSuccess").addClass("displayNONE"); $("#submitError").removeClass("displayNONE"); //防止连续点击 ErrorAlert() return; } var text = $("#textarea").val(); if (text.length === 0) { //禁止发送空内容 $("#submitError").text("请填写输入内容"); $("#submitError").removeClass("displayNONE"); //防止连续点击 ErrorAlert() return; } var length = 0; //获取输入长度,英文字母为1,中文汉字为2 for (var i = 0; i < text.length; i++) { if (text[i].match(/[^\x00-\xff]/ig) != null) length += 2; else length += 1; } if (length > 255) { $("#submitError").text("字符长度过长,限制字符长度为255个字节,你的文本长度为" + length + "个字节"); $("#submitError").removeClass("displayNONE"); ErrorAlert() return; } //先清除输入框再提交 $("#textarea").val(""); successSubmit = new Date(); $.post('/post', {text: text}, function (item) { console.log(item); if (item.code == 403) { location.href = item.data; } else if (item.code == 500) { successSubmit = 0; $("#submitError").text(item.data); $("#submitError").removeClass("displayNONE"); setTimeout(function () { $("#submitError").addClass("displayNONE"); }, 3000); } else if (item.code == 200) { $("#submitSuccess").text(item.data); $("#submitError").addClass("displayNONE"); $("#submitSuccess").removeClass("displayNONE"); setTimeout(function () { $("#submitSuccess").addClass("displayNONE"); }, 3000); } }) }) var lastLoad = 0; //初始时间设置为0 var lastLoadCount = 0; //偏移量,防止读取到重复数据 var loadingBlog = null; //加载用的定时器 //加载更多的内容 function loadMoreContent() { //控制加载间隔,时间差大于2秒,且当前不处于加载中 if (new Date() - lastLoad > 2000 && $("#scrollToFoot").innerHTML !== "加载中~~~") { lastLoad = new Date(); $("#scrollToFoot")[0].innerHTML = "加载中~~~"; //设置重置,假如超时10秒,那么允许再次提交 setTimeout(function () { if ($("#scrollToFoot").innerHTML === "加载中~~~") { $("#scrollToFoot").text("加载失败"); } }, 10000); $.get('/loadblog/' + lastLoadCount, function (obj) { console.log(obj); //这里假设item的格式: if (obj.code === 500) { $("#scrollToFoot").text("加载失败"); } else if (obj.code === 501) { //加载完毕 $("#scrollToFoot").text(obj.data); lastLoad = new Date() + 10000000; //禁止继续请求 clearInterval(loadingBlog); } else { obj.data.forEach(function (item) { $("#content").append('<div class="span4"><h2>' + item.user + '说</h2>' + '<p>' + item.text + '</p></div>'); }) $("#scrollToFoot").innerHTML = "滚动到底部然后加载内容"; lastLoadCount += obj.offset; } }) } } //加载完毕时,加载一次内容 loadMoreContent(); //向下滚动时加载内容 loadingBlog = setInterval(function () { if ($(document).height() - $(window).scrollTop() - $(window).height() < 200) { loadMoreContent(); } }, 100);})
- NodeJs——(16)用Nodejs 4.X版本,制作一个微博网站(多图,详细步骤)(已完成)
- NodeJs——(16)用Nodejs 4.X版本,制作一个微博网站(多图,详细步骤)
- NodeJS入门(一)---nodejs详细安装步骤
- NodeJS入门(一)---nodejs详细安装步骤
- NodeJS入门(一)---nodejs详细安装步骤
- Mac 安装 nodejs (图文详细步骤)
- nodejs开发微博网站(一)
- MEVN 架构(MongoDB + Express + Vue + NODEJS)制作网站
- nodejs开发微博网站(二)--mongoDB数据库
- NodeJS入门---nodejs详细安装步骤
- 实战学习NodeJS建站(5)—nodejs 访问 redis
- NodeJS制作爬虫全过程(续)
- ubuntu 安装nodejs 4.X版本以上
- Linux下Nodejs安装(完整详细)
- Linux下Nodejs安装(完整详细)
- Linux下Nodejs安装(完整详细)
- Linux下Nodejs安装(完整详细)
- Linux下Nodejs安装(完整详细)
- HDU4349->Lucas定理
- DPI和PPI区别
- Service的使用(四)前台服务与AIDL
- Chromium为视频标签<video>创建播放器的过程分析
- Android SQLiteDatabase的使用
- NodeJs——(16)用Nodejs 4.X版本,制作一个微博网站(多图,详细步骤)(已完成)
- POJ 2253 Frogger
- xml序列化到本地以及使用Pull解析xml
- 平面最近点对问题求解
- JSON和JSONP
- dip和px区别联系 产生的根源和设计时的影响如何?是否屏幕密度的决定原因?
- 基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步(一)
- Android一行命令上传你的项目到Jcenter/Maven
- 如何做个好员工(转载)