成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Node.js基于express搭建注冊(cè)登錄功能

lcodecorex / 1102人閱讀

摘要:學(xué)習(xí)新技術(shù)最快捷的方式就是做項(xiàng)目。利用了來(lái)避免回調(diào)地獄,使得代碼能夠更好的被讀懂和維護(hù)。

學(xué)習(xí)新技術(shù)最快捷的方式就是做項(xiàng)目。這兩天我寫(xiě)了個(gè)基于express和MongoDB的Web登錄功能

先看看效果

技術(shù)選擇

Node.js

MongoDB

express

mongoose

Bootstrap

其中MongoDB的簡(jiǎn)單使用可以看我上一篇博文

項(xiàng)目目錄
.
├── database 
│?? ├── entity.js //實(shí)體Entity
│?? ├── model.js //模型Model
│?? └── schema.js //骨架Schema
├── package.json
├── public
│?? ├── home.html //主頁(yè)
│?? ├── login.html //登陸頁(yè)
│?? ├── register.html //注冊(cè)頁(yè)
│?? └── source
│??     ├── login.css
│??     ├── login.less
│??     └── reset.css
├── routes
│?? ├── home.js //主頁(yè)路由
│?? ├── login.js //登錄路由
│?? ├── login_process.js //登錄POST處理
│?? ├── register.js //注冊(cè)路由
│?? └── register_process.js //注冊(cè)POST處理
└── server
    └── index.js //入口文件
    
實(shí)現(xiàn)思路

進(jìn)入登陸頁(yè)面

點(diǎn)擊登錄按鈕并利用POST方法提交

提交的數(shù)據(jù)傳給后臺(tái)與數(shù)據(jù)庫(kù)取出的數(shù)據(jù)進(jìn)行匹配按情況分配路由

路由

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;

簡(jiǎn)單說(shuō)明一下,當(dāng)瀏覽器的地址欄變?yōu)閘ocalhost:3000/的時(shí)候,渲染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文件內(nèi),我們接收到了前端頁(yè)面POST過(guò)來(lái)的數(shù)據(jù),并利用mongoose的Model來(lái)查詢數(shù)據(jù)庫(kù)與之比較。利用了Promise來(lái)避免回調(diào)地獄,使得代碼能夠更好的被讀懂和維護(hù)。

注:Model模型,是經(jīng)過(guò)Schema構(gòu)造來(lái)的,除了Schema定義的數(shù)據(jù)庫(kù)骨架以外,還具有數(shù)據(jù)庫(kù)行為模型,他相當(dāng)于管理數(shù)據(jù)庫(kù)屬性、行為的類

不足

這畢竟只是個(gè)小demo,有很多不完善的地方,就在這里列出來(lái),以便日后補(bǔ)上

前端輸入提示不友好

沒(méi)有利用session和cookie進(jìn)行登錄攔截

就寫(xiě)到這里,祝大家have a nice day ;)

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/50574.html

相關(guān)文章

  • Node.js基于express搭建注冊(cè)登錄功能

    摘要:學(xué)習(xí)新技術(shù)最快捷的方式就是做項(xiàng)目。利用了來(lái)避免回調(diào)地獄,使得代碼能夠更好的被讀懂和維護(hù)。 學(xué)習(xí)新技術(shù)最快捷的方式就是做項(xiàng)目。這兩天我寫(xiě)了個(gè)基于express和MongoDB的Web登錄功能 先看看效果 showImg(https://segmentfault.com/img/bVKL5W?w=320&h=403); 技術(shù)選擇 Node.js MongoDB express mongo...

    李濤 評(píng)論0 收藏0
  • Node.js基于express搭建注冊(cè)登錄功能

    摘要:學(xué)習(xí)新技術(shù)最快捷的方式就是做項(xiàng)目。利用了來(lái)避免回調(diào)地獄,使得代碼能夠更好的被讀懂和維護(hù)。 學(xué)習(xí)新技術(shù)最快捷的方式就是做項(xiàng)目。這兩天我寫(xiě)了個(gè)基于express和MongoDB的Web登錄功能 先看看效果 showImg(https://segmentfault.com/img/bVKL5W?w=320&h=403); 技術(shù)選擇 Node.js MongoDB express mongo...

    MartinDai 評(píng)論0 收藏0
  • 一些基于React、Vue、Node.js、MongoDB技術(shù)棧的實(shí)踐項(xiàng)目

    摘要:利用中間件實(shí)現(xiàn)異步請(qǐng)求,實(shí)現(xiàn)兩個(gè)用戶角色實(shí)時(shí)通信。目前還未深入了解的一些概念。往后會(huì)寫(xiě)更多的前后臺(tái)聯(lián)通的項(xiàng)目。刪除分組會(huì)連同組內(nèi)的所有圖片一起刪除。算是對(duì)自己上次用寫(xiě)后臺(tái)的一個(gè)強(qiáng)化,項(xiàng)目文章在這里。后來(lái)一直沒(méi)動(dòng),前些日子才把后續(xù)的完善。 歡迎訪問(wèn)我的個(gè)人網(wǎng)站:http://www.neroht.com/? 剛學(xué)vue和react時(shí),利用業(yè)余時(shí)間寫(xiě)的關(guān)于這兩個(gè)框架的訓(xùn)練,都相對(duì)簡(jiǎn)單,有的...

    tangr206 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<