node.js+express+bootstrap+ajax实现登录注册，商品增删改查
1 问题描述
想要实现对手表商品的管理功能，以及用户的登录和注册功能。
2 功能分析
调用数据库，在页面上实现手表商品的增删改查功能，以及登录注册功能。
3 系统设计
3.1 系统功能模块图
3.2 系统功能设计
3.3 数据库设计
用户表：
商品表：
4 系统实现
4.1 工程层次图
├─ /手表商品管理/ ··················· 项目所在目录
└─┬─ /models/ ······················· 数据库模块规则
├─ /node_modules/ ······················ 第三方模块
├─ /public/ ······················· 静态资源
├─ /img/ ······················图片
├─ /css/ ······················· 样式
├─ /login.css ······················· 登录界面样式
├─ /views/ ························ 页面文件夹
├─ /index.html ·······················首页
├─ /register.html ······················· 注册
├─ /login.html······················· 登录
├─ /edit.html ······················编辑、修改
├─ /new.html ······················· 添加
├─ /app.js·····················入口文件
├─ /router.js················ 路由设计
└─ /package.json
附录
路由设计：
请求URL 显示页面 请求的方法
/ /index.html get
/login /login.html get
/register /register.html get
/login / post
/register / post
/new /new.html get
/new / post
/edit /edit.html get
/edit / post
/delete / get
npm安装第三方包：
npm i -S art-template body-parser bootstrap jquery express express-art-template mongoose
入口文件app.js:创建服务器
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var router = require('./router.js');
var app = express();
app.use('/public/',express.static(path.join(__dirname,'./public/')));
app.use('/node_modules/', express.static(path.join(__dirname, './node_modules/')));
app.engine('html', require('express-art-template'))
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
// 把路由挂载到 app 中
app.use(router)
app.listen(3000, function () {
console.log('running...')
})
路由配置文件：router.js
var express = require('express');
var User = require('./models/user')
var router = express.Router();
var Good = require('./models/good');
router.get('/', function (req, res) {
Good.find(function (err, goods) {
if (err) {
return res.status(500).send('Server error.')
}
console.log(goods)
res.render('index.html', {
goods: goods
})
})
});
router.get('/login', function (req, res) {
res.render('login.html')
});
router.post('/login', function (req, res) {
var body = req.body
User.findOne({
email: body.email,
password: body.password
}, function (err, user) {
if (err) {
return res.status(500).json({
err_code: 500,
message: err.message
})
}
// 如果邮箱和密码匹配，则 user 是查询到的用户对象，否则就是 null
if (!user) {
return res.status(200).json({
err_code: 1,
message: 'Email or password is invalid.'
})
}
res.status(200).json({
err_code: 0,
message: 'OK'
})
})
});
router.get('/register', function (req, res) {
res.render('register.html')
});
router.post('/register', function (req, res) {
var body = req.body
User.findOne({
$or: [{
email: body.email
},
{
nickname: body.nickname
}
]
}, function (err, data) {
if (err) {
return res.status(500).json({
success: false,
message: '服务端错误'
})
}
if (data) {
// 邮箱或者昵称已存在
return res.status(200).json({
err_code: 1,
message: 'Email or nickname aleady exists.'
})
return res.send(`邮箱或者密码已存在，请重试`)
}
new User(body).save(function (err, user) {
if (err) {
return res.status(500).json({
err_code: 500,
message: 'Internal error.'
})
}
res.status(200).json({
err_code: 0,
message: 'OK'
})
// 服务端重定向只针对同步请求才有效，异步请求无效
// res.redirect('/')
})
})
});
router.get('/new', function (req, res) {
res.render('new.html')
});
/*
* 处理添加商品
*/
router.post('/new', function (req, res) {
var admin = new Good({
name: req.body.name,
brand: req.body.brand,
weight: req.body.weight,
price: req.body.price,
madeCity: req.body.madeCity
})
admin.save(function (err, ret) {
if (err) {
return res.status(500).send('Server error.')
}
res.redirect('/')
})
});
router.get('/edit', function (req, res) {
Good.findById(req.query.id, function (err, goods) {
if (err) {
return res.status(500).send('Server error.')
}
res.render('edit.html', {
goods: goods
})
})
})
/*
* 处理编辑学生
*/
router.post('/edit', function (req, res) {
Good.findByIdAndUpdate(req.body.id, {
name: req.body.name,
brand: req.body.brand,
weight: req.body.weight,
price: req.body.price,
madeCity: req.body.madeCity
}, function (err) {
if (err) {
return res.status(500).send('Server error.')
}
res.redirect('/')
})
})
/*
* 处理删除学生
*/
router.get('/delete', function (req, res) {
Good.findByIdAndRemove(req.query.id, function (err) {
if (err) {
return res.status(500).send('Server error.')
}
res.redirect('/')
})
})
module.exports = router;
模块设计文件：
用户模块：user.js
var mongoose = require('mongoose')
// 连接数据库
mongoose.connect('mongodb://localhost/goods', { useMongoClient: true })
var Schema = mongoose.Schema
var userSchema = new Schema({
email: {
type: String,
required: true
},
nickname: {
type: String,
required: true
},
password: {
type: String,
required: true
},
tel :{
type:Number,
require:true
},
QQ :{
type:String
},
age :{
type:Number,
default:20
},
gender: {
type: Number,
enum: [-1, 0, 1],
default: -1
},
});
module.exports = mongoose.model('User', userSchema)
商品模块：good.js
var mongoose = require('mongoose')
// 连接数据库
mongoose.connect('mongodb://localhost/goods', { useMongoClient: true })
var Schema = mongoose.Schema
var goodSchema = new Schema({
name: {
type: String,
required: true
},
brand: {
type: String,
required: true
},
weight: {
type: Number,
required: true
},
price: {
type: Number,
required: true
},
madeCity:{
type:String,
require:true
}
});
module.exports = mongoose.model('Good', goodSchema)
首页：index.html
Document
登录页面：login.html
Document
注册页面：register.html
Document
用户注册
编辑页面：
Dashboard Template for Bootstrap
修改商品
添加页面：new.html
Dashboard Template for Bootstrap
添加商品