摘要:学习新技术最快捷的方式就是做项目。利用了来避免回调地狱,使得代码能够更好的被读懂和维护。
学习新技术最快捷的方式就是做项目。这两天我写了个基于express和MongoDB的Web登录功能
先看看效果 技术选择Node.js
MongoDB
express
mongoose
Bootstrap
其中MongoDB的简单使用可以看我上一篇博文
项目目录. ├── database │ ├── entity.js //实体Entity │ ├── model.js //模型Model │ └── schema.js //骨架Schema ├── package.json ├── public │ ├── home.html //主页 │ ├── login.html //登陆页 │ ├── register.html //注册页 │ └── source │ ├── login.css │ ├── login.less │ └── reset.css ├── routes │ ├── home.js //主页路由 │ ├── login.js //登录路由 │ ├── login_process.js //登录POST处理 │ ├── register.js //注册路由 │ └── register_process.js //注册POST处理 └── server └── index.js //入口文件实现思路
进入登陆页面
点击登录按钮并利用POST方法提交
提交的数据传给后台与数据库取出的数据进行匹配按情况分配路由
路由index.js
app.use("/", loginRouter); app.use("/login_process", loginProcessRouter); app.use("/home", homeRouter); app.use("/register", registerRouter); app.use("/register_process", registerProcessRouter);
在入口文件中分配路由
login.js
var express = require("express"); var app = express(); var path = require("path"); var router = express.Router(); router.get("/", function (req, res) { res.sendFile(path.join(__dirname, "../public", "login.html")); }); module.exports = router;
简单说明一下,当浏览器的地址栏变为localhost:3000/的时候,渲染login.html
login_process.js
var express = require("express"); var path = require("path"); var bodyParser = require("body-parser"); var app = express(); var router = express.Router(); var UserModel = require("../database/model"); var UserEntity = require("../database/entity"); var urlencodedParser = bodyParser.urlencoded({ extended: false }); router.post("/", urlencodedParser, function (req, res) { response = { username: req.body.username, password: req.body.password }; var input_username = response.username; var input_password = response.password; function getUser() { var user; user = UserModel.findOne({ USERNAME: input_username }) .exec() .then(function (result) { return result; }) .error(function (error) { return "Promise Error:" + error; }) return user; } getUser() .then(function(result){ if(result === null) { res.redirect("/"); } else if (input_username === result.USERNAME || input_password === result.PASSWORD) { console.log("true"); res.redirect("/home"); } else { console.log("false"); res.redirect("/"); } }) .error(function(error){ return "Promise Error:" + error; }) }); 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/18982.html
摘要:学习新技术最快捷的方式就是做项目。利用了来避免回调地狱,使得代码能够更好的被读懂和维护。 学习新技术最快捷的方式就是做项目。这两天我写了个基于express和MongoDB的Web登录功能 先看看效果 showImg(https://segmentfault.com/img/bVKL5W?w=320&h=403); 技术选择 Node.js MongoDB express mongo...
摘要:学习新技术最快捷的方式就是做项目。利用了来避免回调地狱,使得代码能够更好的被读懂和维护。 学习新技术最快捷的方式就是做项目。这两天我写了个基于express和MongoDB的Web登录功能 先看看效果 showImg(https://segmentfault.com/img/bVKL5W?w=320&h=403); 技术选择 Node.js MongoDB express mongo...
摘要:利用中间件实现异步请求,实现两个用户角色实时通信。目前还未深入了解的一些概念。往后会写更多的前后台联通的项目。删除分组会连同组内的所有图片一起删除。算是对自己上次用写后台的一个强化,项目文章在这里。后来一直没动,前些日子才把后续的完善。 欢迎访问我的个人网站:http://www.neroht.com/ 刚学vue和react时,利用业余时间写的关于这两个框架的训练,都相对简单,有的...
阅读 2566·2021-09-06 15:02
阅读 3196·2021-09-02 10:18
阅读 2818·2019-08-30 15:44
阅读 682·2019-08-30 15:43
阅读 1944·2019-08-30 14:08
阅读 2755·2019-08-30 13:16
阅读 1392·2019-08-26 13:52
阅读 927·2019-08-26 12:21