NodeJS博客实战15_博客分类的添加

以你之姓@ 2022-05-28 07:59 277阅读 0赞

源码地址：https://github.com/RidingACodeToStray/Nodejs\_blog

主要功能：

1）在后台管理页面添加分类管理页面

2）点击添加分类可以跳转到表单页面

3）填写分类添加提交后台对分类进行非空验证

4）将分类存入mongo数据库

5）添加成功或者失败则跳转到成功或失败页面并提供跳转连接

实现思路：

1）首先要定义分类category的数据库结构，定义在schemas文件夹下命名为catgory.js，只有一个字段name；

2）在Model文件夹下创建category的模型类用于操作数据库

3）前端构建好category页面，添加成功页面，和失败页面

4）在后台router/admin.js对分类进行验证和保存

看代码：

router/admin.js：

//分类管理
    router.get('/category',function(req,res){
    	res.render('admin/category_index',{
    		userInfo:req.userInfo
    	})
    })
    //分类添加
    router.get('/category/add',function(req,res){
    	res.render('admin/category_add',{
    		userInfo:req.userInfo
    	})
    })
    //分类的保存
    router.post('/category/add',function(req,res){
    	var name = req.body.name || '';
    	if(name == ''){
    		res.render('admin/error',{
    			userInfo:req.userInfo,
    			message:"名称不能为空"
    		});
    		return;
    	}
    	//数据库中是否已经存在同名名称
    	Category.findOne({
    		name:name
    	}).then(function(res){
    		if(res){
    			res.render('admin/error',{
    				userInfo:req.userInfo,
    				message:'分类已经存在'
    			})
    			return Promise.reject(); //不在执行then方法
    		}else{
    			//若数据库中不存在该分类
    			return new Category({
    				name:name
    			}).save();
    		}
    	}).then(function(rs){
    		res.render('admin/success',{
    			userInfo:req.userInfo,
    			message:'分类保存成功',
    			url:'/admin/category'
    		})
    	})
    })

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>
    			<th>是否是管理员</th>
    		</tr>
    	</thead>
    	<tbody>
    
    	</tbody>
    	</table>
    	{% include 'page.html' %}
    {% endblock %}

views/admin/category\_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 style="display: inline-block;">
    			<label for="name">分类名称:</label>
    			<input type="text" name="name" id="name">
    		</div>
    		<button type="submit" style="display: inline-block;">提交</button>
    	</form>
    {% endblock %}

views/admin/success.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;margin-top: 20px;">
    		<p>成功提示:<span>{
       {message}}</span></p>
    		<div>
    			<a href="{
       {url}}">点击跳转</a>
    		</div>
    	</div>
    {% endblock %}

views/adminerror.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;margin-top: 20px;">
    		<p>错误提示:<span>{
       {message}}</span></p>
    		<div>
    			{% if url %}
    			<a href="{
       {url}}">点击跳转</a>
    			{% else %}
    			<a href="javascript:window.history.back()">返回上一步</a>
    			{% endif %}
    		</div>
    	</div>
    {% endblock %}