NodeJS博客实战18_博客内容的添加功能实现

左手的ㄟ右手 2022-05-27 08:05 267阅读 0赞

源码地址：[https://github.com/RidingACodeToStray/Nodejs\_blog][https_github.com_RidingACodeToStray_Nodejs_blog]

1，主要功能

1）博客内容的添加

2）博客内容添加页面展示分类列表

3）博客列表展示关联分类

2，实现思路

1）创建博客内容的结构表，并在表中关联category表

2）添加博客内容页面读取category表并展示出来

3）博客列表展示使用populate方法关系category表

3.代码展示：

1）创建content表并关联Category模型

schemas/content.js

//定义数据库表存储结构
    
    //引入moogoose模块操作数据库
    var mongoose = require('mongoose');
    
    //定义用户表结构（字段和类型）,并暴露出去
    module.exports = new mongoose.Schema({
    	//关联字段 - 分类的id
    	category:{
    		type:mongoose.Schema.Types.ObjectId,
    		//引用
    		ref:'Category'
    	},
    
    	title:String,
    
    	//简介
    	desciption:{
    		type:String,
    		default: ''
    	},
    	//内容
    	content: {
    		type:String,
    		default:''
    	}
    });

2)创建Content模型

models/Content.js

//创建一个Category的模型类
    //实际操作的是操作通过操作模型类来对数据库操作（类似于tp里面的模型）
    var mongoose = require('mongoose');
    var ContentSchema = require('../schemas/content.js');
    
    module.exports = mongoose.model('Content',ContentSchema)

3）内容展示列表，内容添加和内容保存

routers/admin.js

//内容首页
    router.get('/content',function(req,res){
    	//limit()限制获取的用户条数
    	//skip()忽略数据的查询
    	var page = Number(req.query.page) || 1;
    	var limit = 2;
    	var pages = 0;
    	Content.count().then(function(count){
    		//计算总页数向上取整
    		pages = Math.ceil(count / limit);
    		//page取值不能超过pages，去总页数和page中的最小值
    		page = Math.min(page,pages);
    		//page取值不能小于1
    		page = Math.max(page,1);
    		var skip = (page -1 ) * limit;
    		//从数据中读取所有的用户数据
    		//sort排序1表示升序-1表示降序
    		//populate关联category的信息
    		Content.find().sort({_id:-1}).limit(limit).skip(skip).populate('category').then(function(contents){
    			res.render('admin/content_index',{
    				userInfo:req.userInfo,
    				contents:contents,
    				page:page,
    				count:count,
    				pages:pages,
    				limit:limit
    			});
    		});	
    	})
    })
    //内容添加
    router.get('/content/add',function(req,res){
    	Category.find().sort({_id:-1}).then(function(categories){
    		res.render('admin/content_add',{
    			userInfo:req.userInfo,
    			categories:categories
    		})
    	})
    	
    })
    //内容保存
    router.post('/content/add',function(req,res){
    	// console.log(req.body);
    	// 验证
    	if (req.body.title == '') {
    		res.render('admin/error',{
    			userInfo:req.userInfo,
    			message:'标题不能为空'
    		})
    		return;
    	}
    	if (req.body.content == '') {
    		res.render('admin/error',{
    			userInfo:req.userInfo,
    			message:'内容不能为空'
    		})
    		return;
    	}
    	//保存
    	new Content({
    		category:req.body.category,
    		title:req.body.title,
    		desc:req.body.desc,
    		content:req.body.content
    	}).save().then(function(){
    		res.render('admin/success',{
    			userInfo:req.userInfo,
    			message:'内容保存成功',
    			url:'/admin/content'
    		})
    		return;
    	})
    })

4）内容列表展示页面

views/admin/category\_index.html

{% extends 'layout.html' %}
    
    {% block main %}
    	<div class="a-userNav">
    		<span><a href="/">管理首页</a></span>
    		<span> / </span>
    		<span>分类列表</span>
    	</div>
    	<div style="padding-left: 50px;text-align: right;margin-right: 10px;">
    		<a href="/admin/category/add">添加分类</a>
    		</div>
    	<table class="a-userTable">
    	<thead>
    		<tr>
    			<th>ID</th>
    			<th>分类名称</th>
    			<th>操作</th>
    		</tr>
    	</thead>
    	<tbody>
    		{% for category in categories %}
    		<tr>
    			<td>{
       {category._id.toString()}}</td>
    			<td>{
       {category.name}}</td>
    			<td>
    					<a href="/admin/category/edit?id={
       {category._id.toString()}}">修改</a>
    					<a href="/admin/category/delete?id={
       {category._id.toString()}}">删除</a>
    			</td>
    		</tr>
    		{% endfor %}
    	</tbody>
    	</table>
    		<div class="a-page">
    		<span><a href="/admin/category?page={
       {page-1}}">上一页</a></span>
    		<span class="a-pageInfo">
    			当前第{
       {page}}页，每页{
       {limit}}条，共{
       {pages}}页{
       {count}}条数据
    		</span>
    		<span><a href="/admin/category?page={
       {page+1}}">下一页</a></span>
    	</div>
    {% endblock %}

5）内容添加页面

views/admin/content\_add.html

{% extends 'layout.html' %}
    
    {% block main %}
    	<div class="a-userNav">
    		<span><a href="/">管理首页</a></span>
    		<span> / </span>
    		<span>内容添加</span>
    	</div>
    	<form style="padding-left: 50px;margin-top: 20px;" method="post">
    		<div>
    			<label for="category">分        类:</label>
    			<select name="category" id="category" style="width: 200px;">
    				{% for category in categories %}
    				<option value="{
       {category.id}}">{
       {category.name}}</option>
    				{% endfor %}
    			</select>
    		</div>
    		<div>
    			<label for="title">内容标题:</label>
    			<input type="text" name="title" id="title" style="width: 200px;">
    		</div>
    		<div>
    			<label for="desc">简        介:</label>
    			<input type="desc" name="desc" id="desc" style="width: 200px;">
    		</div>
    		<div>
    			<label for="content" style="vertical-align: top;">内        容:</label>
    			<textarea type="content" name="content" id="content" style="width: 200px;" rows="4"></textarea>
    		</div>
    		<button type="submit">提交</button>
    	</form>
    {% endblock %}

[https_github.com_RidingACodeToStray_Nodejs_blog]: https://github.com/RidingACodeToStray/Nodejs_blog