基于nodejs于mongodb，ejs实现的博客上
基于nodejs于mongodb，ejs实现的博客上，前台
- 项目准备
- 项目思路
- 实现功能
- 封装mongodb的增删改查
- 实现下首页接口
- 文章详情接口
- 发布评论接口
- 总结
项目准备
本次博客是基于express框架来实现的，主要功能包括查看文章，评论以及后台管理的发布博客，评论审核等功能。首先必须得有node，可以自行去官网下载，无脑下一步即可，而且要有mongodb的数据库才行，推荐下载社区版，菜鸟教程就有教怎么安装，然后安装相应的脚手架，可以自行安装，也可以手动安装
这里我才用的是直接干撸几个相关的配置，直接npm 即可
项目思路
这里我们要思考下怎么布局，以及数据为什么。
首先博客得有文章，而且得有相应的评论，这里我们初始化俩个数据库集合。这里如果有不了解mongodb数据库的建议先学习下数据库操作
其次是我们要有俩个大功能，一个是查看文章以及评论文章，一个是后台管理
查看文章又得分为查看多个列表，以及文章详情部分，后台管理又分为登录以及管理模块，所以我们大致分为4个页面来实现此博客系统。
实现功能
接下来就是我们的代码实现了，这里我才用的是ejs渲染模板，和vue的v-for有些类似比较容易操作渲染页面。直接采用bootstrap来弄现成的结构，毕竟🐀🐀是cv工程师，然后就是初始化我们的express了，这里我都写上了注释，由于我们采用的是ejs来渲染页面，这里把index改为false不直接访问我们的index.html
// 引入express模块
const express = require('express')
// 初始化express模块的app
const app = express()// 引入body-parser模块
const bodyParser = require('body-parser')
// 初始化urlencoded解析器
const urlencodedParser = bodyParser.urlencoded({extended: false
})// 引入cookie-parser模块
const cookieParser = require('cookie-parser')
// 为请求添加中间件：解析cookie
app.use(cookieParser())// 处理静态文件请求
app.use(express.static('./static', {index: false
}))
封装mongodb的增删改查
要是每次调用数据库都得重写那可太浪费了，所以我们封装一下
直接上代码让大家引入，这个是我当时以菜鸟教程的方法封装的，npm i mongodb，然后再导出他。
// es6封装
const mongodb = require('mongodb')
const MongoClient = mongodb.MongoClient
const ObjectId = mongodb.ObjectId
var url = "mongodb://localhost:27017"
class mongoControl{constructor(dbName,collectionName){this.dbName=dbNamethis.collectionName=collectionName}find(whereStr,callback){MongoClient.connect(url,(error,db)=>{if(error){callback(error)return}var dbo=db.db(this.dbName)dbo.collection(this.collectionName).find(whereStr).toArray((err,result)=>{callback(err,result)db.close()})})}insert(docs,callback){MongoClient.connect(url,(error,db)=>{if(error) throw errorvar dbo=db.db(this.dbName)dbo.collection(this.collectionName).insertMany(docs,(error,result)=>{callback(error,result)db.close()})})}update(whereStr,newData,callback){MongoClient.connect(url,(error,db)=>{if(error) throw errorvar dbo=db.db(this.dbName)dbo.collection(this.collectionName).updateMany(whereStr,{$set:newData},(error,result)=>{callback(error,result)db.close()})})}delete(whereStr,callback){MongoClient.connect(url,(error,db)=>{if(error) throw errorvar dbo=db.db(this.dbName)dbo.collection(this.collectionName).deleteMany(whereStr,(error,result)=>{callback(error,result)db.close()})})}// 通过_id来删除deleteById(_id,callback){var whereStr={_id:ObjectId(_id)}this.delete(whereStr,callback)}// 通过_id来查找findById(_id,callback){var whereStr={_id:ObjectId(_id)}this.find(whereStr,callback)}// 通过_id来更新updateById(_id,newData,callback){var whereStr={_id:ObjectId(_id)}this.update(whereStr,newData,callback)}
}exports.mongoControl=mongoControl
这样我们就封装好了，然后直接引入到我们的index,js来引入，并且初始化我们刚刚写的俩个数据库集合。
//引入自己写的mongoControl方法
const mongoControl = require('./dbc').mongoControl
// 初始化文章表
var page = new mongoControl('blog', 'page')
// 初始化存储评论的集合
var comment = new mongoControl('blog', 'comment')
实现下首页接口
首页我们采用ejs来进行渲染，通过刚刚写的操作数据库的方法来查找数据，直接查找所有数据，注这里的result是数组，所以我们的ejs可以用foreach方法来遍历生成数据
// 首页接口
app.get('/', (req, res) => {// 在page数据库里查找所有文章page.find({}, (error, result) => {// ejs渲染json文章数据到页面上ejs.renderFile('./ejs.tpl/index.ejs', {result: result}, (err, str) => {res.send(str)})})
})
放index.ejs代码,这里的<%%>是ejs的写法，可以自行查看文档，简单易懂，有点类似vue里的插值语法。
<% result.forEach(function(e){ %><li class="list-group-item"><a href="/p?_id=<%= e._id%>"><h3><%= e.title%>h3>a><p>日期:<%= e.date%>p><p><%= e.intro%>p>li><%})%>
接下来放下咱们的页面瞅瞅，这里你可以自定义写代码，写页头页脚等，和html没有什么差别的。就是可以动态渲染，同样可以引用外部js，css文件，但是注意引入的路径问题，这里我要说下，你可以把你的js，css，img等文件放在你的static文件夹里，由于我们刚开始会use他的，所以可以看见他们，路径的话可以就把这个ejs文件当成static里的一级文件来进行查找，这里我有可能说的不好，可以自行查找相应文章。
这里的数据是我提前插入的，如果你不嫌累可以用cmd来插入你的数据，也可以用可视化工来插入数据，但是我们既然已经生成了我们的mongoControl方法，就可以用这个来插入数据。然后直接node test.js即可插入数据，test.js就是这个文件，这里使用了moment，不用再自己苦苦写data方法了直接用，初步用法也很简单，可以查看官网文档
const mongoControl=require('./dbc').mongoControl
var page=new mongoControl('blog','page')
var comment=new mongoControl('blog','comment')
const moment=require('moment')
// page.insert([{
// sort:'js',
// title:'东百十年往事',
// intro:'话说当年一篇混战，胡歌杀马特团长',
// date:moment().format('YYYY-MM-DD HH:mm'),
// author:'wss',
// content:'呃让龙湖豪杰天下熙熙攘攘。胡歌叱诧风云，谍战生死交投让人久久不能忘怀。'
// }],()=>{})comment.insert([{fid:'',content:'要不是你长得帅我才不评论',date:moment().format('YYYY-MM-DD HH:mm'),author:'kk@qq.com'
}],()=>{})
文章详情接口
我们在首页接口上已经用了a标签，直接点击跳转到我们的路径即可。
上代码，同样注释我已经喂到嘴里了，这里的评论下面我会再说下，由于每个文章都会有对应的评论，所以我们给文章定义一个fid，令它为文章的_id,这个_id是mongodb数据库给我们自动生成的，不会重复，相当于我们的身份证一样。当进入文章列表时就在评论集合找到对应文章id的评论并进行展示，这里的state是状态，后台会审核，不会让第一时间就渲染到页面上。
// 文章浏览页面接口
app.get('/p', (req, res) => {// 获取前端传入的_idvar _id = req.query._id// console.log(_id)// 根据_id查询文章page.findById(_id, (error, result) => {// 如果没有这篇文章则传404if (result.length == 0) {res.status(404).send('欢迎进去花园')return}// 根据文章的_id来查询评论var data = result[0] //id查询肯定只返回一条// 查询评论 通过查询fid来查询数据，fid为文章的_idcomment.find({fid: _id,state:1}, (error, result) => {// 渲染页面ejs.renderFile('./ejs.tpl/page.ejs', {data: data,result:result}, (err, str) => {res.send(str)})})})
})
同样采用ejs来进行渲染
<a href="/"><h1>首页h1>a><div class="page-header"><h1> <%= data.title%><small><%= data.intro%>small>h1>div><p>分类：<button class="btn btn-primary" type="button"><%= data.sort%> <span class="badge">span>button>p><p>作者：<%= data.author%>p><p>日期：<%= data.date%>p><div class="well"><%=data.content%>div><div><h3>评论h3><% result.forEach(function(e){ %><span class="badge">span><div class="panel panel-default"><div class="panel-body"><%= e.content %>div><div class="panel-footer"><p><%= e.author %>p><p><%= e.date %>p>div>div><% })%>div>
并且我们既然有评论展示就得有发布评论
发布评论接口
先上代码，同样也写了大量注释，这里的接口写在了文章详情页面上，下面放
req.body获取表单传递的数据，req.query获取url参数，可以使用谷歌的network来看，调试工具还是比较重要的，一个非空的判断，一个数据库的插入，一个重定向会页面。
// 评论发布 前台用户提交评论接口
app.post('/submitComment',urlencodedParser,(req,res)=>{// 获取携带在url中的文章_idvar _id=req.query._id// 获取评论内容 email,contentvar {email,content} = req.body// console.log(_id,email,content)// 简单的表单验证：不允许为空if(!_id){res.status(500).send('不允许评论')return}if(!email ||!content){res.status(500).send('不允许发表空评论或不使用email')return}// 操作评论数据库comment.insert([{fid:_id,content:content,author:email,date:moment().format('YYYY-MM-DD HH:mm'),state:0}],(error,result)=>{// 如果数据库操作失败则传500if(error){res.status(500).send('什么评论把我的服务器弄崩了')return}// 重定向回这个文章界面，并且刷新评论res.redirect('/p?_id='+_id)})
})
这里用form表单来传递数据，这里的url参数是通过ejs来渲染的，是通过上一个接口’/p’来渲染的。
<ul class="page-header"><h3>我也想发表评论评论h3><form action="/submitComment?_id=<%= data._id%>" method="post"><div class="form-group"><label for="exampleInputEmail1">你的邮箱label><input type="email" class="form-control" id="exampleInputEmail1" name="email"placeholder="Email">div><div class="form-group"><textarea class="form-control" rows="3" name="content" placeholder="评论内容">textarea>div>div><button type="submit" class="btn btn-default">提交button>form>
总结
这里先完成了前台功能，后台管理过后会出，先看下大致结构，之后会给大家再说后台管理的。
喜欢的来个三连，感谢你的观看，想要源码直接说。
1,前台提供用户浏览的接口||-- <get> '/' 提供首页||-- <get> 'p' 提供某一篇文章浏览||-- <post> '/submitComment' 用户提交评论2，后台提供给管理者管理数据||-- <get> '/admin/' 后台管理首页||-- <get> '/admin/login' 管理员登录界面||-- <post> '/admin/login' 登录接口||-- <post> '/admin/uploadPage' 管理员提交文章||-- <get> '/admin/getComment' 获取评论||-- <get> '/admin/passComment' 通过某一个评论||-- <get> '/admin/noPassComment' 不通过某一个评论
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！