菜单

js之利用express搭建简易论坛_node

2020年3月13日 - www.2138.com

自从node-js出现之后,不只是java,php等后端语言可以操作数据库,进行内容的增删改查,javascript简本语言同样具备了该项技能,而且在node下,js具备了很强的操作性和代码的阅读性,让晦涩难懂的代码变得更加的清晰了,下面我简单介绍javascript如何操作数据库进行登录注册功能的实现。

一、应用生成器

首先,页面部分就直接省略了,我们默认已经安装数据库了,开始从注登录说起。

使用上节学习到express的知识,我们也可以从0开始,一步步把系统搭建起来。不过express中还有一个应用生成器,使用这个应用生成器可以快速的创建一个应用的框架,然后我们再在这个框架中完善我们需要的内容。首先安装应用生成器:

exports.login =function{ var username=req.body.uname; var pwd=req.body.psd; var sql="select * from student where username=? and password=?"; var con=dbcon.getCon(); con.query(sql,[username,pwd], function  { if{ if{ res.json; }else{ res.json } }else{ console.log })};
$npm install -g express-generator 

首先,点击登录按钮,我们跳转到登录页面,通过获取到用户输入的input值,通过下标的方法取得输入的username和pwd的值,通过连接数据库,判断回调函数返回的状态值,如果成功,给予提示用户注册成功,紧接着进行页面的跳转,如果出现异常,给出提示,并相应的跳转到错误页面,在此处我们可以使用try{}catch(){}方法进行拦截,打印出具体的错误信息。

运行express --version若能正常输出版本号,则安装成功。

紧接着,我们再来讲一下注册的操作,顾名思义,注册就是将原本不存在于数据库的用户资料通过数据库的insert语句插入数据库中,道理和登录有些类似,首先,我们需要输入需要注册的信息,然后获取到这些信息,然后再发送一个异步请求验证数据库是否有这些资料,如果没有的话就直接创建这些资料。下面我们使用代码来说明这些原理。

我们的论坛名称可以为node_express_forum,然后使用express创建一个框架:

exports.regists=function(req,res,name,password){ var sql="insert into stuinfo values" conn.query(sql,[name,password],function{ if(result.affectedRows==1){ req.session.name=name; res.sendfile } })}exports.login=login;
$express node_express_forum

首先,我们将注册这个方法进行封装,然后通过node的exports进行导出,便于被调用,在这个方法里面,通过占位符的方法插入username和password,然后通过数据库,将获取的参数值进行插入,通过回调函数状态码的判断,确认插入成功,并在成功之后将我们注册成功的session显示在页面作为标识。

运行后,生成器会在这个目录下生成几个目录和文件:

以上就是js简单的登录注册的代码,其中涉及到的知识点不只是上述提到的,还包括了数据库的基本知识,了解基本的sql查询语句,并能通过js成功连接数据库。我们始终相信万丈高楼平地起,只要去哦们一步一个脚印,总有一天,可以成为自己乃至别人眼中的高手。

 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 

以上这篇js操作数据库实现注册和登陆的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

已经生成成功。进入到这个目录:

$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。

二、准备工作

基本框架已经创建好了,现在开始我们论坛的准备工作。这里我们的准备工作有3个:模板引擎,模型,数据库,路由。

2.1 模板引擎

express里默认使用的模板引擎是jade,不过我们也可以选择其他的模板引擎,我这里选择了ejs,因为感觉ejs更像是个html文件,方便维护,当然,每个人都有自己的喜好。

$npm install ejs --save-dev 

然后在app.js中修改模板引擎:

app.set; // 原为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, title, content, createtime reply表的字段有: id, pid, content,
createtime

2.4 路由

上节我们是使用app.use()app.get()等方式来实现路由,同时,express还提供了express.Router类来创建模块化。可挂载的路由。Router
实例是一个完整的中间件和路由系统,因此常称其为一个 “mini-app”。

在routes/user.js中(这里我将其users.js改为了user.js):

var express = require;var router = express.Router(); // 实例化router// 定义主页的路由router.get('/', function { res.render('index', { title: 'user' }); // 加载index.ejs模板并传递数据给模板});router.get('/reg', function { res.render('index', { title: 'reg' });});module.exports = router; 

然后在app.js中加载路由模块:

var user = require;//...app.use;

这样就可以访问/user和

三、注册与登录

我们论坛的功能:注册、登录、发布主题和回复主题。这4个功能的实现都需要连接数据库。

3.1 数据库连接

引入mysql模块,然后使用mysql.createPool()创建连接:

$npm install mysql --save-dev

在models目录下创建db.js,其他需要操作数据库的,首先引入db.js:

var mysql = require;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 { res.render; // 加载reg.ejs模板});

在views目录下创建reg.ejs:

  注册   .tip{color: #f00;}     回到首页 注册 已有帐号? 点击登录  

运行程序,并用浏览器访问127.0.0.1:3000

然后再在routes/user.js中创建一个reg的post方式的路由用来处理提交过来的数据,post方式过来的数据并不能使用req.query变量获取,而应该使用req.body

// routes/user.js// post方式router.post('/reg', function { var username = req.body.username || '', password = req.body.password || '', password2 = req.body.password2 || ''; if{ res.render('reg', {errmsg:'密码不一致'}); return; } var password_hash = user_m.hash, // 对密码进行加密 regtime = parseInt; // 数据库处理});

凡是设计到数据库处理的,我们都将其放到models中。这里,我们在models中创建一个user.js:

// models/user.jsvar pool = require, // 连接数据库 crypto = require; // 对密码进行加密module.exports = { // 对字符串进行sha1加密 hash : function{ return crypto.createHmac.update; }, // 注册 // 因数据库操作是异步操作,则需要传入回调函数来对结果进行处理,而不能使用return的方式 reg : function(username, password, regtime, cb){ pool.getConnection(function{ if throw err; // 首先检测用户名是否存在 connection.query('SELECT `id` FROM `user` WHERE `username`=?', [username], function{ if throw err; // 若用户名已存在,则直接回调 if{ cb; connection.release(); }else{ // 否则将信息插入到数据库中 var params = {username:username, password:password, regtime:regtime}; connection.query('INSERT INTO `user` SET ?', params, function{ if throw err; cb; connection.release(); // 接下来connection已经无法使用,它已经被返回到连接池中 }) } }) }); }}

我们将检测用户名和插入数据两个功能放到一起处理了,实际应用中,最好是在用户提交数据之前就对用户名进行检测。注册功能的model写好之后,就可以调用了,承接上面的代码,从数据库处理接着编写。

// routes/user.jsvar user_m = require; // 引入model// post方式router.post('/reg', function { // 与上面的代码一样 // 数据库处理 user_m.reg(username, password_hash, regtime, function{ if{ res.render('reg', {errmsg:'用户名已存在'}); // 重新加载注册模板,并提示用户名已存在 }else if{ // 注册成功 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{ if throw err; connection.query('SELECT `id` FROM `user` WHERE `username`=? AND `password`=?', [username, password], function throw err; cb; connection.release(); // 接下来connection已经无法使用,它已经被返回到连接池中 }) }); }}

最后在routes/user.js中添加上登录的路由:

// routes/user.js // 进入到登录页面router.get('/login', function { res.render;});// 处理登录请求router.post('/login', function { var username = req.body.username || '', password = req.body.password || ''; var password_hash = user_m.hash; user_m.login(username, password_hash, function{ if{ // console.log; // 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 = requireapp.use(session({ secret: 'wenzi', // 建议使用 128 个字符的随机字符串 cookie: { maxAge: 60*60*1000 }, // 设置时间 resave : false, saveUninitialized : true}));

设置完成后,就可以使用session保存数据了。以登录成功后保存数据为例:

user_m.login(username, password_hash, function{ if{ // 将数据保存到名为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{ // 如果session中存在,则说明已经登录 if{ res.locals.user = { uid : req.session.user.uid, username : req.session.user.username } }else{ res.locals.user = {}; } next

然后在模板中就可以使用user变量了:

四、首页及详情页

我们在首页能够展示主题列表并能发表主题,点击链接进入详情页后能该主题进行回复。当然发表主题和对主题进行回复都是在已经登录的状态进行的。

4.1 首页

在models目录创建list.js,从数据库中获取主题列表:

// models/list.jsvar pool = require;module.exports = { // 获取首页的主题 getIndexList : function{ pool.getConnection(function{ if throw err; // 连表查询,获取到作者的用户名 connection.query('SELECT `list`.*, username FROM `list`, `user` WHERE `list`.`uid`=`user`.`id`', function throw err; cb; connection.release(); // 接下来connection已经无法使用,它已经被返回到连接池中 }) }); }}

在routes中的index.js中调用getIndexList获取数据,并调用index.ejs模板:

// routes/index.jsvar list_m = require;router.get('/', function { list_m.getIndexList{ res.render('index', { data:result }); // 选择index模板并传递数据 })});

在views/index.ejs创建首页模板:

列表
标题 作者 创建时间

4.2 发表主题

我们在首页上添加了可以输入标题和内容的两个输入窗口,可以使用ajax的方式提交数据。

 var running = false; $.on{ if return; running = true; $; var title = $; content = $.val(); if{ $.text; return; } $.text; $.ajax({ url : '/list/addtopic', // 提交接口 data : {title:title, content:content}, dataType : 'json', type : 'get' }).done{ if{ var html = '<tr><td><a href="https://www.jb51.net/article/'+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>'; $; $; $.val.text; } running = false; }) })

这里的提交接口是/list/addtopic,因此我们需要再创建一个这样的路由:在routes目录下创建list.js:

// routes/list.jsrouter.get('/addtopic', function{ // 在登录状态下可以添加主题 if{ var title = req.query.title, content = req.query.content, uid = req.session.user.uid, createtime = parseInt; var params = {uid:uid, title:title, content:content, createtime:createtime}; list_m.addTopic(params, function{ // console.log; if{ 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{ pool.getConnection(function{ if throw err; connection.query('INSERT INTO `list` SET ?', params, function throw err; cb; connection.release(); // 接下来connection已经无法使用,它已经被返回到连接池中 }) });}

4.3 详情页

在首页列表中,可以看到,我们将详情页的链接设置为了/list/1.html的方式,也可以设置成其他的方式,只要设置好路由就行。

// routes/list.js// http://127.0.0.1:3000/list/1.htmlrouter.get('/:pid.html', function { var pid = req.params.pid || 1; console.log;

在详情页中需要获取到这个主题的详细信息和对这个主题的回复,因此在list_m中:

// models/list.js// 根据id查询主题的详情信息getListById : function{ pool.getConnection(function{ if throw err; connection.query('SELECT * FROM `list` WHERE `id`=?', [id], function throw err; cb; connection.release(); // 接下来connection已经无法使用,它已经被返回到连接池中 }) });},// 某主题的回复getReplyById : function{ pool.getConnection(function{ if throw err; connection.query('SELECT * FROM `reply` WHERE `pid`=?', [pid], function throw err; cb; connection.release(); // 接下来connection已经无法使用,它已经被返回到连接池中 }) });}

然后在路由中进行调用,这里使用async简单的控制了下两个异步的流程问题:

// http://127.0.0.1:3000/list/1.htmlrouter.get('/:pid.html', function { var pid = req.params.pid || 1; async.parallel{ list_m.getListById{ callback }, function{ list_m.getReplyById{ callback }, ], function{ // console.log; // res.json; res.render('list', { data:results }); }) });

稍微解释下async.parallel的功能,下节我们会详细的讲解。
async.parallel([f1, f2, f3,…, fn], fb);
是f1到fn所有的异步都执行完了就会执行fb函数。这里我们是主题的详情和对主题的回复都请求完成了,就可以调用模板渲染。

// views/list.ejs返回到首页详情标题:  评论     

对主题的回复功能可以自己实现一下。

总结

写着写着就发现篇幅这么大了,而且充斥了大量的代码,需要我们细心的理解。下面给出详细的示例代码,大家可以下载学习,希望本文的内容对大家能有所帮助。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图