小项目总述
今天要跟大家分享的是node + mongodb 结合的一个小项目:轮播图无限轮播,前端展示的是一个轮播图,用了插件swipper,后台可以对前端轮播图展示内容的控制,实现了增删改,具体页面展示如下图所示:
前端:
路径: http://localhost:5000/web/
页面内容:
后台:
路径:http://localhost:5000/back
=>http://localhost:5000/back/s_list
页面内容:
开启小项目
- 用
express
脚手架搭建工程
- 安装
epxress
生成器:npm install -g express-generator
- 初始化一个
express
工程:epxress carousel
然后删除自带的文件夹,同时添加新的文件夹成下图所示:
- 配置静态访问资源
- 配置模板引擎
node 要渲染页面需要和 模板引擎 结合在一起,否则不能识别要渲染的页面。模板引擎赋予了页面骨架新的生命,允许写骨架的时候像js的语法那样动态书写:
模板引擎有很多种,常见的有ejs,nunjucks。ejs模板引擎的后缀是.ejs,nunjucks引擎的后缀是.html。为了方便,在这个小项目中,我是用的是nunjucks。
- 提前写好前端和后端页面:用的插件是swipper,cdn方法(从swipper自己的服务器上加载需要的文件),后端用的bootstrap,比较快一些
- 将页面放入views文件夹中,静态样式,图片等文件放入public中。
- 配置路由文件,路由是单独的一个部分,为了后期的可维护性需要抽离出来,放入routes文件夹。
mongoose在项目中的应用
mongoose的主要思想是 “创建模式对象+实例+文档”,这三者之间的关系是这样的:
在model文件夹中创建dogs.js,表示dog模型,左边的模式对象和实例都写在此文件中,右边的文档在路径中,api请求过来的时候再去做些文档的处理操作。这样做的好处是提高了开发效率还有代码的可维护性,是模块化思想的应用。
在此次小项目中,具体做法是:
- 在model文件夹中创建轮播图模型的Sowing.js文件
import mongoose from "mongoose";
mongoose.connect("mongodb://localhost/frist",{useNewUrlParser:true});
mongoose.connection.on('open',()=>{
console.log("数据库连接成功!")
})
//创建一个模式对象
const sowingSchema = mongoose.Schema({
//图片名称
image_title:{type:String,required:true},
//图片链接
image_url:{type:String,required:true},
})
//创建一个模式对象的实例
const Sowings = mongoose.model("sowings",sowingSchema);
export default Sowings;
- 路径的api请求中增加(用到了fomidable来读取请求数据,但是这个不重要):
import Sowing from "./../models/Sowing"
router.post("/sowing/api/add",(req,res,next)=>{
//准备formidable前期工作
let form = new formidable.IncomingForm();
form.uploadDir = config.uploadsRouter;
//保持扩展名
form.keepExtensions = true;
//解析请求
form.parse(req,(err,fields,files)=>{
let body = fields;
let i_url = basename(files.image_url.path);
body.image_url = i_url;
const sowing = new Sowing({
image_title : body.image_title,
image_url : body.image_url,
})
//保存数据
sowing.save((err,result)=>{
if(err){
return next(err);
}
res.json({
status:200,
result:"添加轮播图成功!"
})
})
})
})
- 路径的api请求中修改:
import Sowing from "./../models/Sowing"
router.post("/sowing/api/edit",(req,res,next)=>{
//准备formidable前期工作
let form = new formidable.IncomingForm();
form.uploadDir = config.uploadsRouter;
//保持扩展名
form.keepExtensions = true;
//解析请求
form.parse(req,(err,fields,files)=>{
let body = fields;
Sowing.findById(body.id,(err,sowing)=>{
if(err){
return next(err);
}
let i_url = basename(files.image_url.path);
sowing.image_title = body.image_title;
sowing.image_url = i_url;
sowing.save((err,result)=>{
if(err){
return next(err);
}
res.json({
status:200,
result:"更改成功!"
})
})
})
})
})
- 路径的api请求中删除:
import Sowing from "./../models/Sowing"
router.get("/sowing/del/:sowingId",(req,res,next)=>{
Sowing.deleteOne({_id:req.params.sowingId},(err,result)=>{
if(err){
return next(err);
}
res.json({
status:200,
result:"删除成功!"
})
})
})