利用nodejs實現商品管理系統（一）

1、界面分類：用戶登陸界面，商品管理界面（包含商品編輯，建立，刪除，列表界面）

功能實現：1.用戶輸入用戶名與密碼，經過加密，與數據庫校驗，若是正確，則跳轉到商品管理界面，不然一直停留在用戶界面。

2.商品管理界面。涉及到路由跳轉，圖片上傳，信息存儲到數據庫以及數據庫將信息實時反映到界面。

2、實現的界面效果以下：

用戶登陸界面：

用戶商品管理界面

增長商品界面：

修改與刪除

文件構建：

 

 

3、html，css的編寫

這裏不會特別講解，值得注意一點，設置頭部和左側欄爲公共頁面部分，將此分離開來編寫，接着在其他ejs相應位置導入<%- include public/header.ejs%>，<%- include public/aslideleft.ejs%>便可。

 

 

4、技術點講解：

1、用戶登陸界面：

1.登陸與退出

2.路由的跳轉

3.密碼加密與數據庫的校驗

 

 第一步：開始配置好路由。在終端本身的文件目錄上輸入命令npm  install express --save。接着在app.js頁面敲上相應的代碼。

var express=require('express');
var app=new express();  /*實例化*/
app.get('/',function(req,res){
    res.send('index');
});
app.get('/login',function(req,res){
    res.send('login');
});
app.listen(3003,'127.0.0.1');

第二步：跳轉到相應的路由須要渲染相應的界面，這時使用ejs模板引擎。

 終端輸入命令 npm  install ejs --save

在app.js頁面上輸入

app.set('view engine','ejs');//使用模板引擎，此時默認在view這個目錄上尋找相應的渲染頁面。

此時路由配置中使用res.render('')渲染頁面

//登陸
app.get('/login',function(req,res){
    res.render('login');//在view目錄下找到login.ejs文件來渲染。
})

可是此時會發現ejs上的css文件沒法渲染頁面（相應的css文件在public目錄下），須要配置public文件爲靜態資源目錄。

app.use(express.static('public'));

 

 第三步：將用戶輸入的用戶名與密碼提交，而後與數據庫進行校驗，校驗成功進行路由跳轉。

3.1在本地電腦終端開啓mongodb，建立productmanage數據庫，增長用戶信息。

 mongod --dbpath D:\mongoData #開啓mongodb服務 這是我我的放置mongodb文件的目錄

開啓mongodb客戶端：在相應的文件目錄下，輸入命令mongo

接着在mongodb客戶端輸入用戶數據
>use productmanage
>db.user.insert({'username':'admin,'password':'123456','status':1})

 

在login.ejs界面上，查看提交用到form表單，使用post提交，路由跳轉到doLogin

<form class="form-horizontal" action="/doLogin" method="post">

獲取提交的數據，使用body-parser模塊。

var bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

此時/doLogin路由就能夠獲取本地提交的數據了。

接着鏈接數據庫，使用mongodb模塊

在終端輸入npm install mongodb --save 下載模塊

在app.js中引入mongodb

var MongoClient=require('mongodb').MongoClient;//引入模塊
var DbUrl='mongodb://localhost:27017/productmanage';  /*建立鏈接*/
var ObjectID = require('mongodb').ObjectID;

將用戶的用戶名與數據庫的進行比較

DB.find('user',{
        username:username,
        password:password
    },function(err,data){
        if(data.length>0){
            console.log('登陸成功');

        }else{
            //console.log('登陸失敗');
            res.send("<script>alert('登陸失敗');location.href='/login'</script>");
        }
    })

 

3.2聯繫實際，咱們須要使用session來保存用戶信息。

3.2.1安裝express-session

npm install exprss-session --save

3.2.2引入express-session

var session = require("express-session")

3.2.3.配置中間件

app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: true,
    cookie: {
        maxAge:1000*60*30
    },
    rolling:true
}))

3.2.4保存用戶信息

req.session.userinfo=data[0]

 

3.3自定義中間件，判斷登陸狀態。

此時注意：若是沒有登陸成功，是不能夠進入product界面，因此咱們要使用中間件的next()這種屬性。

app.use(function(req,res,next){
   if(req.url=='/login' || req.url=='/doLogin'){
       next();
   }else{
       if(req.session.userinfo&&req.session.userinfo.username!=''){   /*判斷有沒有登陸*/
           app.locals['userinfo']=req.session.userinfo;   /*app.locals能夠配置全局變量  能夠在任何模板裏面使用*/
           next();
       }else{
           res.redirect('/login')
       }
   }

})

3.4使用md5對密碼進行加密，在終端輸入npm install md5-node --save

var md5=require('md5-node'); /*md5加密*/

最後整理獲得

app.post('/doLogin',function(req,res){
    var username=req.body.username;
    var password=md5(req.body.password);  /*要對用戶輸入的密碼加密*/
    //1.獲取數據
    //2.鏈接數據庫查詢數據
    DB.find('user',{
        username:username,
        password:password
    },function(err,data){
        if(data.length>0){
            console.log('登陸成功');
            //保存用戶信息
            req.session.userinfo=data[0];
            res.redirect('/product');  /*登陸成功跳轉到商品列表*/
        }else{
            //console.log('登陸失敗');
            res.send("<script>alert('登陸失敗');location.href='/login'</script>");
        }
    })



})

 

 

第四步：登陸退出，記得銷燬session，回到登陸界面

app.get('/loginOut',function(req,res){
    //銷燬session
    req.session.destroy(function(err){
        if(err){
            console.log(err);
        }else{
            res.redirect('/login');
        }
    })
})

 

 

 

關於商品管理界面的講解請看第二篇