Nodejs&express+mongodb完成簡單使用者登入(即Nodejs入門)

來源:互聯網
上載者:User

標籤:style   blog   http   io   ar   color   os   使用   sp   

剛瞭解nodejs,發現nodejs配置起來不複雜,但也有很多需要注意的地方,今天就記錄一下,以後也可拿出來看看.

要完成這個簡單的樣本,從零開始,走三步就行了.

一.搭建開發環境

二.建立項目(express)

三.編碼

我是屬於技術類的人,廢話無多.

一.搭建開發環境

  1. nodejs

    1.1 安裝

      到官方網站下載最新版本 http://www.nodejs.org/, 下載之後,安裝,一路 next

    1.2 配置 path 

      把上面安裝的目錄配置到環境變數中,方便以後用命令列的方式使用node.exe.

      比如我的 node.exe 在 "H:\Program Files\nodejs\node.exe", 在環境變數最開始加上 "H:\Program Files\nodejs\;"

  2. mongodb

    2.1 安裝

      http://www.mongodb.org/downloads 下載, 建議下載 zip 版,開發的時候,不需要安裝,直接解壓就可以用了.

    2.2 使用命令列方式啟動 mongodb,      

      >mongod 127.0.0.1:27017 --dbpath  D:\mongodb\dbone    //D:\mongodb\dbone mongodb和dbone檔案夾要自己先建立好, 另外, --dbpath 參數值中間不能有空格

二.建立項目(express)

  1 安裝全域外掛程式

    >nmp install -g express          //自動下載 express 外掛程式

    >nmp install -g express-generator    //express 在命令列中的工具

  2. 添加項目

    >express -e myproject 

    >cd myproject   

    >npm install  //讓npm根據 package.json 自動下載依賴包

    >npm install mongo && npm install express-mongo  //下載 mongodb 支援包

    

三.編碼

  1.修改模版規則

    app.js 中

    

app.set(‘view engine‘, ‘ejs‘);

    修改成:

app.engine(‘html‘, require(‘ejs‘).__express);app.set(‘view engine‘, ‘html‘);

  把 /views/ 中的檔案尾碼改成 *.html

  2..添加頁面(又稱視圖)

    index.html 點擊"登入" 跳轉到 login.html, 登入功之後,跳轉到 welcome.html, 在 welcome.html 點擊登出之後跳轉到 login.html

    /views/login.html

<!DOCTYPE html><html>  <head>    <title><%= title %></title>    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />  </head>  <body>    <h1><%= title %></h1>    <form method="post">        使用者名稱:<input type="text" name="userid" id="userid"/><br/>        密  碼:<input type="password" name="password" id="password"/><br/>        <input type="submit" value="登入"/>        <input type="reset" value="重設"/>    </form>  </body></html>

    /views/welcome.html

<!DOCTYPE html><html>  <head>    <title><%= title %></title>    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />  </head>  <body>    <h1><%= title %></h1>    <p>歡迎光臨: <%= userid %></p>    <h1><a href="/logout">登出</a></h1>  </body></html>

    修改 /views/index.html

<!DOCTYPE html><html>  <head>    <title><%= title %></title>    <link rel=‘stylesheet‘ href=‘/stylesheets/style.css‘ />  </head>  <body>    <h1><%= title %></h1>    <p>Welcome to <%= title %></p>    <h1><a href="/login">登入</a></h1>  </body></html>

    3.添加 model

      添加 /routes/models.js

var mongo = require(‘mongoose‘);var Schema = mongo.Schema;var UserSchema = new Schema({    userid: String,    name: String,    password: String});exports.User = mongo.model(‘User‘, UserSchema);

    4.修改路由

    修改 /routes/index.js

var express = require(‘express‘);var router = express.Router();var mongo = require(‘mongoose‘); //var models = require(‘./models‘); //引入 model var User = models.User;mongo.connect(‘mongodb://192.168.199.9:8888/logindb‘); //串連資料庫/* GET home page. */router.get(‘/‘, function(req, res) {  res.render(‘index‘, { title: ‘Express‘ });});router.get(‘/login‘, function(req, res) { //轉到登入頁面  res.render(‘login‘, { title: ‘登入‘ });});router.post(‘/login‘, function(req, res) { //處理登入請求    var query_doc = { userid: req.body.userid, password: req.body.password };    User.count(query_doc, function(err, doc){        if(doc == 1){//驗證成功,轉到 歡迎頁面            res.redirect(‘/welcome?userid=‘ + query_doc.userid);        }else{            res.redirect(‘/login‘);        }            });    });router.get(‘/logout‘, function(req, res) {//登出,轉到登入頁面  res.redirect(‘/login‘);});router.get(‘/welcome‘, function(req, res) {//歡迎頁面    var userid = req.query.userid;    res.render(‘welcome‘, { title: ‘‘, userid: userid});});module.exports = router;

  5.運行

    5.1.啟動 app.js

    >node app

    5.2 用瀏覽器訪問 http://localhost:3000/

提示:

  1.項目如果要支援中文,檔案的編碼要使用 utf-8,否則有亂碼

  2.如果修改了源檔案,想馬上看到效果,建議安裝外掛程式 supervisor

    >npm install -g supervisor  //npm 自動下載外掛程式

    >supervisor app  //安裝外掛程式後啟動網站的方式(原來是 node app)

  3.如果配置不成功,個人可以提供遠程協助.

    3.1 TeamView: [email protected]

    3.2 QQ : [email protected] 

      驗證訊息: nodejs+mongodb

原始碼下載

Nodejs&express+mongodb完成簡單使用者登入(即Nodejs入門)

相關文章
阿里云产品大规模降价
  • 最高幅度達59%,平均降幅23%
  • 核心產品降價
  • 多地區降價
undefined. /
透過 Discord 與我們聯繫
  • 安全、匿名的群聊,不受干擾
  • 隨時了解活動、活動、新產品等訊息
  • 支持您的所有問題
undefined. /
免費試用
  • 開啟從ECS到大數據的免費試用之旅
  • 只需三步 輕鬆上雲
  • 免費試用ECS t5 1C1G
undefined. /

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.