摘要:作为一个有志向的前端,怎么能不搞搞全栈呢。。。地址欢迎大家多多交流前端技术啊,如果大家喜欢的话,请给我一个小小的哦
作为一个有志向的前端,怎么能不搞搞全(zhuang)栈(bi)呢。。。
说搞咱就搞啊,后端就用node,数据库就用mongodb,前端呢,呃,再搞个node的web框架express,思路搞定,开始搭建我们的环境,搭建之前还是先看看我们的目标和成果
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哦
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/95012.html
摘要:本使用创建本地服务器,在就能完成全部流程,并不需要线上服务器。路径要与后端接口一致。后端返回成功后,前端数据中对应的元素也要删掉,更新视图。控制器里拿一个方法出来说一下吧,完整的代码都在。读取操作完成后调用释放连接。 写在前面 本文只是本人学习过程的一个记录,并不是什么非常严谨的教程,希望和大家一起共同进步。也希望大家能指出我的问题。适合有一定基础,志在全栈的前端初学者学习,从点击按钮...
摘要:类比一下你有一个巨型停车场,里边分了不同的停车区集合,这里的,每个停车区可以停很多车下文提到的,相当于每个数据集合里边可以有很多张数据表。 Node.js利用mongoose连接mongodb数据库 Node.js连接mongodb数据库有很多种方法,通过mongoose模块引入是其中的一个方法 代码组织结构 |---|根目录 |---|---|connect.js(mongoose测...
摘要:类比一下你有一个巨型停车场,里边分了不同的停车区集合,这里的,每个停车区可以停很多车下文提到的,相当于每个数据集合里边可以有很多张数据表。 Node.js利用mongoose连接mongodb数据库 Node.js连接mongodb数据库有很多种方法,通过mongoose模块引入是其中的一个方法 代码组织结构 |---|根目录 |---|---|connect.js(mongoose测...
摘要:项目地址写在开头本文主要分享我如何使用对实现增删改查操作,感谢社区所有精品文章的帮助,以及的开源项目对我的启发。我们这个项目是建立一个班级学生管理系统,能够对学生的姓名及学号进行增删改查的操作。 项目地址:https://github.com/jrainlau/mongoose_cru... 写在开头 本文主要分享我如何使用express+mongoose对mongodb实现增删改查...
阅读 1317·2023-04-25 23:42
阅读 2639·2021-11-19 09:40
阅读 3496·2021-10-19 11:44
阅读 3492·2021-10-14 09:42
阅读 1838·2021-10-13 09:39
阅读 3775·2021-09-22 15:43
阅读 609·2019-08-30 15:54
阅读 1432·2019-08-26 13:32