Node写博客--前台分类导航展示和内容添加管理

最新推荐文章于 2022-11-04 15:17:41 发布

幽幽幽幽古溪

最新推荐文章于 2022-11-04 15:17:41 发布

阅读量377

点赞数

分类专栏： Node-Blog

本文链接：https://blog.csdn.net/u011693964/article/details/81870969

版权

Node-Blog 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

1.将主页面中的main.js中的首页，改变成根据分类增加导航页的页面

var express = require('express');
var router =express.Router();

var Category=require('../models/Category');//引入分类信息

router.get('/',function(req,res,next) {
    //读取所有的分类信息
    Category.find().then(function (categories) {
        res.render('main/index',{ //第二个参数分配模板
            userInfo:req.userInfo,
            categories:categories
        });//渲染当前views下面的index.html页面
    });
});

module.exports = router;

2.将主页中的main/index.html中的导航页面换成

<nav>
    <div class="menu">
        <a href="/" class="focus">首页</a>

        {%for category in categories%}
        <a href="/">{{category.name}}</a>
        {%endfor%}

    </div>
</nav>

3.在views/admin文件夹layout.html中增加内容管理导航栏

<li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">分类管理 <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/admin/content">内容首页</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="/admin/content/add">添加内容</a></li>
                    </ul>
                </li>

4.在admin.js中增加内容首页，并新增一个content_index.html页面

/*
* 内容首页
* */
router.get('/content',function (req,res) {
    res.render('admin/content_index',{
        userInfo:req.userInfo
    })
});
/*
* 内容添加页面
* */
router.get('/content/add',function (req,res) {
    //获得数据库里所有的分类选项，在content_add.html页面中，选择分类时，展示出来
    Category.find().sort({_id:-1}).then(function (categories) {
        res.render('admin/content_add',{
            userInfo:req.userInfo,
            categories:categories
        });
    });

});

5.content_index.html页面将与分类首页相似

{%extends 'layout.html' %}
{% block main%}
<ol class="breadcrumb">
    <li><a href="/">管理首页</a></li>
    <li><span>内容列表</span></a></li>
</ol>
<h3>内容列表</h3>
<table class="table table-hover table-striped">

    <tr>
        <th>ID</th>
        <th>分类名称</th>
        <th>操作</th>
    </tr>
    {% for content in contents%}
    <tr>
        <td>{{content._id.toString()}}</td>
        <td>{{content.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 %}
</table>

<!--把另外一个页面通过引用的形式，包含子集的方式包含进来-->
{%include 'page.html'%}

{% endblock %}

6.新增content_add.html内容添加页面

{%extends 'layout.html' %}
{% block main%}
<ol class="breadcrumb">
    <li><a href="/">管理首页</a></li>
    <li><span>内容添加</span></a></li>
</ol>
<h3>内容添加</h3>

<form role="form" method="post"> <!--以post方式提交，则需要在admin.js中真假一个post路由-->
    <div class="form-group"> <!--下拉分类-->
        <label for="category">分类:</label>
        <select name="category" id="category" class="form-control">
            {%for category in categories%}
            <option value="{{category.id}}">{{category.name}}</option>
            {%endfor%}
        </select>

    </div>


    <div class="form-group">
        <label for="title">标题:</label>
        <input type="text" class="form-control" id="title" placeholder="请输入内容标题" name="title">
    </div>
    <div class="form-group">
        <label for="title">简介:</label>
        <textarea name="description" id="description" class="form-control" rows="5" placeholder="请输入简介"></textarea>
    </div>
    <div class="form-group">
        <label for="content">内容:</label>
        <textarea name="content" id="content" class="form-control" rows="10" placeholder="请输入简介"></textarea>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

{% endblock %}

7.增加内容的表结构，在schmas文件夹下新增contents.js文件的表结构

//连接数据库
var mongoose=require('mongoose');

//内容的表结构
module.exports = new mongoose.Schema({
    //像是一个字符串，我们最好存储的时候采用引用
    //关联字段 - 内容分类的ID
    category:{
        //类型
        type:mongoose.Schema.Types.ObjectId,
        //引用,引用另外一张表的模型
        ref:'Category'
    },
    //分类标题
    title:String,

    //简介
    description:{
        type:String,
        default:''
    },
    //内容
    content:{
        type:String,
        default:''
    }
});

8.在models文件夹下面新增Content.js模型

var mongoose=require('mongoose');//记载模块
//将刚刚定义好的表结构加载进来
var contentsSchema = require('../schemas/contents');

module.exports = mongoose.model('Content',usersSchema);//创建模型类，将模型暴露出去

9.在admin,js中增加路由，内容保存

var Content=require('../models/Content');//加载内容模型

/*
* 内容保存
* */
router.post('/content/add',function (req,res) {
    //做一个验证
    if(req.body.category==''){
        res.render('admin/error',{
            userInfo:req.userInfo,
            message:'内容分类不能为空'
        });
        return;
    }
    if(req.body.title==''){
        res.render('admin/error',{
            userInfo:req.userInfo,
            message:'标题不能为空'
        });
        return;
    }
    //保存数据到数据库
    new Content({
        category:req.body.category,
        title:req.body.title,
        description:req.body.description,
        content:req.body.content
    }).save().then(function (rs) {
        res.render('admin/error',{
            userInfo:req.userInfo,
            message:'内容保存成功'
        });
    });
});

10.修改admin.js中的内容首页，增加分页信息

/*
* 内容首页
* */
router.get('/content',function (req,res) {
    var page = Number(req.query.page || 1);//实际过程中需要判定page是否为数值
    //对page的取值进行一个限制
    var limit =10;
    var pages=0;
    //获取数据库中的数据记录的总条数
    Content.count().then(function (count) {
        //计算总页数
        pages=Math.ceil(count/limit);//向上取整
        //取值不能超过pages
        page=Math.min(page,pages);
        //取值不能小于1
        page=Math.max(page,1);

        var skip = (page-1)*limit;

        /*sort()
        *  1:升序
        * -1:降序
        *
        * populate()关联的就是另外一个数据表
        * */
        Content.find().sort({_id:-1}).limit(limit).skip(skip).populate('category').then(function (contents) {
            res.render('admin/content_index',{
                userInfo:req.userInfo,
                contents:contents,

                count:count,
                page:page,
                pages:pages,
                limit:limit
            })
        });
    });
});

修改前端页面content_index.html

{%extends 'layout.html' %}
{% block main%}
<ol class="breadcrumb">
    <li><a href="/">管理首页</a></li>
    <li><span>内容列表</span></a></li>
</ol>
<h3>内容列表</h3>
<table class="table table-hover table-striped">

    <tr>
        <th>ID</th>
        <th>分类名称</th>
        <th>标题</th>
        <th>操作</th>
    </tr>
    {% for content in contents%}
    <tr>
        <td>{{content._id.toString()}}</td>
        <td>{{content.category.name}}</td>
        <td>{{content.title}}</td>
        <td>
            <a href="/admin/content/edit?id={{content._id.toString()}}">修改</a> |
            <a href="/admin/content/delete?id={{content._id.toString()}}">删除</a>
        </td>
    </tr>
    {% endfor %}
</table>

<!--把另外一个页面通过引用的形式，包含子集的方式包含进来-->
{%include 'page.html'%}

{% endblock %}

11.修改内容content

(1)在admin.js中增加修改内容

/*
* 修改内容
* */
router.get('/content/edit',function (req,res) {
    var id=req.query.id||'';

    var categories=[];//数据库调用赋值

    Category.find().sort({_id:-1}).then(function (rs) {

        categories=rs;

        return Content.findOne({
            _id:id
        }).populate('category');
    }).then(function (content) {
        if(!content){
            res.render('admin/error',{
                userInfo:req.userInfo,
                message:'指定内容不存在'
            });
            return Promise.reject();
        }else{
            res.render('admin/content_edit',{
                userInfo:req.userInfo,
                categories:categories,
                content:content
            })
        }
    });

});

/*
* 保存修改内容
* */
router.post('/content/edit',function (req,res) {
    var id=req.query.id || '';
    //做一个验证
    if(req.body.category==''){
        res.render('admin/error',{
            userInfo:req.userInfo,
            message:'内容分类不能为空'
        });
        return;
    }
    if(req.body.title==''){
        res.render('admin/error',{
            userInfo:req.userInfo,
            message:'标题不能为空'
        });
        return;
    }
   Content.update({
       _id:id
   },{
       category:req.body.category,
       title:req.body.title,
       description:req.body.description,
       content:req.body.content
   }).then(function () {
       res.render('admin/success',{
           userInfo:req.userInfo,
           message:'内容保存成功',
           url:'/admin/content/edit?id='+ id
       });
   });
});

（2）在content_edit.html中增加修改页面

{%extends 'layout.html' %}
{% block main%}
<ol class="breadcrumb">
    <li><a href="/">管理首页</a></li>
    <li><span>内容添加</span></a></li>
</ol>
<h3>内容修改 - {{content.title}}</h3>

<form role="form" method="post"> <!--以post方式提交，则需要在admin.js中真假一个post路由-->
    <div class="form-group"> <!--下拉分类显示不出来的原因是因为没有加载该数据库-->
        <label for="category">分类:</label>
        <select name="category" id="category" class="form-control">
            {%for category in categories%}
                {%if content.category._id_toString()==category._id.toString()%}<!--判断当前内容的分类-->
                     <option value="{{category.id}}" selected>{{category.name}}</option>
                {%else%}
                    <option value="{{category.id}}">{{category.name}}</option>
                {%endif%}
            {%endfor%}
        </select>

    </div>


    <div class="form-group">
        <label for="title">标题:</label>
        <input type="text" value="{{content.title}}" class="form-control" id="title" placeholder="请输入内容标题" name="title">
    </div>
    <div class="form-group">
        <label for="description">简介:</label>
        <textarea name="description" id="description" class="form-control" rows="5" placeholder="请输入简介">{{content.description}}</textarea>
    </div>
    <div class="form-group">
        <label for="content">内容:</label>
        <textarea name="content" id="content" class="form-control" rows="10" placeholder="请输入简介">{{content.content}}</textarea>
    </div>
    <button type="submit" class="btn btn-default">提交</button>
</form>

{% endblock %}

12.内容的删除，在admin.js中

/*
* 内容删除
* */
router.get('/content/delete',function (req,res) {
    var id=req.query.id||'';

    Content.remove({
        _id:id
    }).then(function () {
        res.render('admin/success',{
            userInfo:req.userInfo,
            message:'删除成功',
            url:'/admin/content'
        })
    })
});

幽幽幽幽古溪

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Node写博客--前台分类导航展示和内容添加管理

1.将主页面中的main.js中的首页，改变成根据分类增加导航页的页面var express = require('express');var router =express.Router();var Category=require('../models/Category');//引入分类信息router.get('/',function(req,res,next) { ...
复制链接

扫一扫