利用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');
        }
    })
})

 

 

 

关于商品管理界面的讲解请看第二篇