资讯专栏INFORMATION COLUMN

Node.js基于express搭建注册登录功能

lcodecorex / 1165人阅读

摘要:学习新技术最快捷的方式就是做项目。利用了来避免回调地狱,使得代码能够更好的被读懂和维护。

学习新技术最快捷的方式就是做项目。这两天我写了个基于express和MongoDB的Web登录功能

先看看效果

技术选择

Node.js

MongoDB

express

mongoose

Bootstrap

其中MongoDB的简单使用可以看我上一篇博文

项目目录

</>复制代码

  1. .
  2. ├── database
  3. │   ├── entity.js //实体Entity
  4. │   ├── model.js //模型Model
  5. │   └── schema.js //骨架Schema
  6. ├── package.json
  7. ├── public
  8. │   ├── home.html //主页
  9. │   ├── login.html //登陆页
  10. │   ├── register.html //注册页
  11. │   └── source
  12. │   ├── login.css
  13. │   ├── login.less
  14. │   └── reset.css
  15. ├── routes
  16. │   ├── home.js //主页路由
  17. │   ├── login.js //登录路由
  18. │   ├── login_process.js //登录POST处理
  19. │   ├── register.js //注册路由
  20. │   └── register_process.js //注册POST处理
  21. └── server
  22. └── index.js //入口文件
实现思路

进入登陆页面

点击登录按钮并利用POST方法提交

提交的数据传给后台与数据库取出的数据进行匹配按情况分配路由

路由

index.js

</>复制代码

  1. app.use("/", loginRouter);
  2. app.use("/login_process", loginProcessRouter);
  3. app.use("/home", homeRouter);
  4. app.use("/register", registerRouter);
  5. app.use("/register_process", registerProcessRouter);

在入口文件中分配路由

login.js

</>复制代码

  1. var express = require("express");
  2. var app = express();
  3. var path = require("path");
  4. var router = express.Router();
  5. router.get("/", function (req, res) {
  6. res.sendFile(path.join(__dirname, "../public", "login.html"));
  7. });
  8. module.exports = router;

简单说明一下,当浏览器的地址栏变为localhost:3000/的时候,渲染login.html

login_process.js

</>复制代码

  1. var express = require("express");
  2. var path = require("path");
  3. var bodyParser = require("body-parser");
  4. var app = express();
  5. var router = express.Router();
  6. var UserModel = require("../database/model");
  7. var UserEntity = require("../database/entity");
  8. var urlencodedParser = bodyParser.urlencoded({ extended: false });
  9. router.post("/", urlencodedParser, function (req, res) {
  10. response = {
  11. username: req.body.username,
  12. password: req.body.password
  13. };
  14. var input_username = response.username;
  15. var input_password = response.password;
  16. function getUser() {
  17. var user;
  18. user = UserModel.findOne({ USERNAME: input_username })
  19. .exec()
  20. .then(function (result) {
  21. return result;
  22. })
  23. .error(function (error) {
  24. return "Promise Error:" + error;
  25. })
  26. return user;
  27. }
  28. getUser()
  29. .then(function(result){
  30. if(result === null) {
  31. res.redirect("/");
  32. } else if (input_username === result.USERNAME || input_password === result.PASSWORD) {
  33. console.log("true");
  34. res.redirect("/home");
  35. } else {
  36. console.log("false");
  37. res.redirect("/");
  38. }
  39. })
  40. .error(function(error){
  41. return "Promise Error:" + error;
  42. })
  43. });
  44. module.exports = router;

在login_process.js文件内,我们接收到了前端页面POST过来的数据,并利用mongoose的Model来查询数据库与之比较。利用了Promise来避免回调地狱,使得代码能够更好的被读懂和维护。

注:Model模型,是经过Schema构造来的,除了Schema定义的数据库骨架以外,还具有数据库行为模型,他相当于管理数据库属性、行为的类

不足

这毕竟只是个小demo,有很多不完善的地方,就在这里列出来,以便日后补上

前端输入提示不友好

没有利用session和cookie进行登录拦截

就写到这里,祝大家have a nice day ;)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50574.html

相关文章

  • Node.js基于express搭建注册登录功能

    摘要:学习新技术最快捷的方式就是做项目。利用了来避免回调地狱,使得代码能够更好的被读懂和维护。 学习新技术最快捷的方式就是做项目。这两天我写了个基于express和MongoDB的Web登录功能 先看看效果 showImg(https://segmentfault.com/img/bVKL5W?w=320&h=403); 技术选择 Node.js MongoDB express mongo...

    李涛 评论0 收藏0
  • Node.js基于express搭建注册登录功能

    摘要:学习新技术最快捷的方式就是做项目。利用了来避免回调地狱,使得代码能够更好的被读懂和维护。 学习新技术最快捷的方式就是做项目。这两天我写了个基于express和MongoDB的Web登录功能 先看看效果 showImg(https://segmentfault.com/img/bVKL5W?w=320&h=403); 技术选择 Node.js MongoDB express mongo...

    MartinDai 评论0 收藏0
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目

    摘要:利用中间件实现异步请求,实现两个用户角色实时通信。目前还未深入了解的一些概念。往后会写更多的前后台联通的项目。删除分组会连同组内的所有图片一起删除。算是对自己上次用写后台的一个强化,项目文章在这里。后来一直没动,前些日子才把后续的完善。 欢迎访问我的个人网站:http://www.neroht.com/ 刚学vue和react时,利用业余时间写的关于这两个框架的训练,都相对简单,有的...

    tangr206 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<