作为一个有志向的前端,怎么能不搞搞全(zhuang)栈(bi)呢。。。
说搞咱就搞啊,后端就用node,数据库就用mongodb,前端呢,呃,再搞个node的web框架express,思路搞定,开始搭建我们的环境,搭建之前还是先看看我们的目标和成果
项目的目标和成果
1.下载mongodb
mongodb官网: https://www.mongodb.com/downl...
下载好代码好,进入bin文件夹,启动./mongod,再新打开一个terminal(终端),启动./mongo
至此我们的数据库已经搭建完毕,我迫不及待的想进行增(zhuang)删(bi)改(da)查(fa)了。这时候有的同学就有疑问了,你这上面不是mongoose吗,跟mongodb有啥关系啊,看下图,简单来说,我moogoose可以随意蹂躏你mongodb里面的数据,
2.搭建数据结构
首先先来连接一下我们的数据库,其次我们来定义一下数据结构,再搞个model(mongoose里面叫document)
// 数据库连接
var uuid = require('node-uuid');
var mongoose = require('mongoose');
mongoose.connect('mongodb://127.0.0.1:27017/mart');
var db = mongoose.connection;
db.on('error', console.error.bind(console, 'connection error:'));
db.once('open', function() {
console.log('we are connected');
});
// Schema定义数据的数据结构
var ProductSchema = mongoose.Schema({
id: {
type: String,
default: uuid.v1
},
name: String,
price: Number,
url: String
});
// Schema只是定义了数据结构,而对数据的处理需要model去实现
var Product = mongoose.model('Product', ProductSchema);
module.exports = Product;
3.建立前端的页面、路由和请求的接口
node+express的搭建这里就不详细介绍,对于大家来说洒洒水啊
var express = require('express');
var path = require('path');
var router = require('./routes');
var bodyParser = require('body-parser');
var app = express();
// view engine set
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())
// 托管静态文件
app.use(express.static('public'));
app.use('/', router);
var server = app.listen(3000, function () {
var host = server.address().address;
var port = server.address().port;
console.log('Example app listening at http://%s:%s', host, port);
});
定义增删改查的接口类型和路由跳转,由于偷懒,就先把接口和路由写在一起了
var express = require('express');
var router = express.Router();
var productModel = require('../mongoose');
router.get('/', function(req, res) {
res.redirect('/list');
})
router.get('/list', function(req, res) {
var list = [];
productModel.find(function(err, products) {
list = products;
res.render('list', {
list
})
});
})
// 添加商品
router.post('/admin/add/product', function(req, res) {
var item = req.body;
var product = new productModel(req.body);
product.save(function(err) {
res.send({
code: 'success',
data:{}
})
});
})
// 编辑商品
router.post('/admin/edit/product', function(req, res) {
var item = req.body;
console.log(item);
productModel.update({_id: item.id}, item, function(err) {
res.send({
code: 'success',
data:{}
})
});
})
// 删除商品
router.post('/admin/delete/product', function(req, res) {
console.log(req.body.id);
productModel.findByIdAndRemove({_id: req.body.id}, {},
function() {
res.send({
code: 'success',
data:{}
})
}
)
})
// 搜索商品
router.get('/list/search', function(req, res) {
var list = [],
price = {};
if (req.query.price1) price.$gte = req.query.price1;
if (req.query.price2) price.$lte = req.query.price2;
productModel.find({
price
}, function(err, products) {
list = products;
res.render('list', {
list
})
});
})
module.exports = router;
mongoose具体怎么操作数据库的,大家可以去查看官网的API哈,http://mongoosejs.com/
结语
我们简单的全栈之旅就结束了,是不是灰常的简单,大家的心情是不是灰常的激动(我现在TMD是一个全栈了,2333333333),具体的操作放在github上,本文只是提供一个简单的思路。
github地址: https://github.com/warplan/no...
欢迎大家多多交流前端技术啊,如果大家喜欢的话,请给我一个小小的star哦