利用nodejs实现商品管理系统(一)
一、界面分类:用户登录界面,商品管理界面(包含商品编辑,创建,删除,列表界面)
功能实现:1.用户输入用户名与密码,通过加密,与数据库校验,如果正确,则跳转到商品管理界面,否则一直停留在用户界面。
2.商品管理界面。涉及到路由跳转,图片上传,信息存储到数据库以及数据库将信息实时反映到界面。
二、实现的界面效果如下:
用户登录界面:
用户商品管理界面
增加商品界面:
修改与删除
文件构建:
三、html,css的编写
这里不会特别讲解,值得注意一点,设置头部和左侧栏为公共页面部分,将此分离开来编写,接着在其余ejs相应位置导入<%- include public/header.ejs%>,<%- include public/aslideleft.ejs%>即可。
四、技术点讲解:
一、用户登录界面:
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来保存用户信息。
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');
}
})
})
关于商品管理界面的讲解请看第二篇
利用nodejs实现商品管理系统(一)的更多相关文章
- 利用nodejs实现商品管理系统(二)
下面实现商品管理系统 第一步:对应的ejs与数据交换的编写格式. 商品列表界面product.ejs <% for(var i=0;i<list.length;i++){%> < ...
- 利用nodejs实现登录并转码视频(原创)
nodejs的出现让前端人员可以使用js打造后台,也许哪天就真的摆脱了对java或者php的依赖了. 今天跟大家分享一个利用nodejs接受前端post请求,并实现视频转码的这样一个例子.视频转码用到 ...
- 利用Nodejs快速构建应用原型
利用Nodejs快速构建应用原型 开发一个应用往往需要快速的构建原型,然后在此基础上设计和改进,前端可能立马能看到效果,但是后端业务逻辑不会那么快,这个时候其实我们需要额只是一些模拟数据,所以不需要真 ...
- windows下利用nodejs压缩.min文件
利用nodejs中的npm工具,压缩文件,必须在node环境下 压缩js文件 1.在全局中安装uglify-js模块 npm install uglify-js -g 2.可以直接使用uglifyjs ...
- 利用 nodeJS 搭建一个简单的Web服务器(转)
下面的代码演示如何利用 nodeJS 搭建一个简单的Web服务器: 1. 文件 WebServer.js: //-------------------------------------------- ...
- 利用 nodejs 解析 m3u8 格式文件,并下 ts 合并为 mp4
利用 nodejs 解析 m3u8 格式文件,并下 ts 合并为 mp4 以前看视频的时候,直接找到 video标签,查看视频地址,然后下载下来.. 后来发现,好多 video 标签打开元素审查,如下 ...
- 利用nodejs+phantomjs+casperjs采集淘宝商品的价格
因为一些业务需求需要采集淘宝店铺商品的销售价格,但是淘宝详情页面的价格显示是通过js动态调用显示的.所以就没法通过普通的获取页面html然后通过正则或者xpath的方式获取到想到的信息了. 所幸我们现 ...
- nodejs之express框架商品管理系统登录功能
1.该系统主要使用express.body-parser.express-session.ejs.mongodb-connect . npm install express --save npm in ...
- 利用solr实现商品的搜索功能
后期补充: 为什么要用solr服务,为什么要用luncence? 问题提出:当我们访问购物网站的时候,我们可以根据我们随意所想的内容输入关键字就可以查询出相关的内容,这是怎么做到呢?这些随意的数据 ...
随机推荐
- sqlserver ceiling函数用法
ceiling函数返回大于或等于所给数字表达式的最小整数. floor函数返回小于或等于所给数字表达式的最大整数. eg: select ceiling(4.42) ---5select CEILIN ...
- android-ndk-r7b编译环境Cygwin工具搭建及配置(转)
开发android ndk 的时候需要一个编译工具编译c程序,ndk需要linux下编译,所以win环境下提供Cygwin模拟linux编译C android-ndk 较低版本的这个工具的配置网上很多 ...
- javascript字面量
在JavaScript里面,字面量包括:字符串字面量(string literal ).数组字面量(array literal)和对象字面量(object literal),另外还有函数字面量(fun ...
- HDU 6103
题意: 求最长的两个不相交的子序列,dis <= m : 分析: 当时二分了答案,暴力匹配,TLE了,然后考虑了,O(n^2)预处理出所有区间 dis,然后答案是所有dis中>=m的最长长 ...
- serlvet配置xml和@WebServlet
简单介绍 XML元素不仅是大小写敏感的,而且它们还对出现在其他元素中的次序敏感.例如,XML头必须是文件中的第一项,DOCTYPE声明必须是第二项,而web-app元素必须是第三项.在web-app元 ...
- PAT (Basic Level) Practise (中文)-1040. 有几个PAT(25)
1040. 有几个PAT(25) http://www.patest.cn/contests/pat-b-practise/1040 字符串APPAPT中包含了两个单词“PAT”,其中第一个P ...
- SQL Error: 1064, SQLState: 42000 You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version
-- ::, WARN [org.hibernate.util.JDBCExceptionReporter:] - SQL Error: , SQLState: -- ::, ERROR [org.h ...
- SpringBoot非官方教程 | 第十一篇:springboot集成swagger2,构建优雅的Restful API
转载请标明出处: 原文首发于:https://www.fangzhipeng.com/springboot/2017/07/11/springboot-swagger2/ 本文出自方志朋的博客 swa ...
- 菜鸟笔记 -- Chapter 6.1 面向对象概述
6.1 面向对象概述 在程序开发的初期人们使用结构化开发语言,但是随着时间的流逝,软件的规模越来越庞大,结构化语言的弊端逐渐暴露出来,开发周期被无限制拖延,产品质量也不尽如人意,人们终于发现结构化语言 ...
- oracle行长度大小和页行数修改
行长度展示长度: /*查询长度*/ SQL> show linesize; /*查询行长度大小*/linesize 100SQL> set linesize200; /*修改行长 ...