夺命雷公狗---node.js---21之项目的构建在node+express+mongo的博客项目6之数据的遍历

首先还是来链接数据库,然后就查找,如下所示:

/**
 * Created by leigood on 2016/8/31.
 */

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

//引入mongodb模块
var MongoClient = require(‘mongodb‘).MongoClient;
var DB_STR = "mongodb://localhost:27017/blog";//这里的是在mongodb下建立的库
var ObjectId = require(‘mongodb‘).ObjectId;  //这里主要是用来处理mongodb下id的

/* GET users listing. */
router.get(‘/‘, function(req, res, next) {
    MongoClient.connect(DB_STR,function(err,db){
        if(err){
            throw err;
            return;
        }
        var c = db.collection(‘category‘);
        c.find().toArray(function(err,desc){
            if(err){
                res.send(err);
            }
            res.render(‘Admin/category‘,{data:desc});
        });
    });

});

router.get(‘/add‘,function(req,res,next){
    res.render(‘Admin/category_add‘);
});
router.post(‘/add‘,function(req,res){
    var title = req.body.title;
    var sort = req.body.sort;
    //console.log(title+‘-------‘+sort);
    MongoClient.connect(DB_STR,function(err,db){
        if(err){
            throw err;
            return;
        }
        //此处的db,就是blog数据库
        var c = db.collection(‘category‘);
        c.insert({title:title,sort:sort},function(err,result){
            if(err){
                err.send(err);
            }else{
                res.send(‘添加分类成功 <a href="/Admin/category">查看列表</a>‘);
            }
        });
    });

});

router.get(‘/edit‘,function(req,res,next){
    res.render(‘Admin/category_edit‘);
});

module.exports = router;

然后就开始将数据遍历到前台模版上去即可。。。

<% include header.html %>
<% include left.html %>
            <!-- Right side column. Contains the navbar and content of the page -->
            <aside class="right-side">
                <!-- Content Header (Page header) -->
                <section class="content-header">
                    <h1>
                        分类列表
                        <small>分类</small>
                    </h1>
                    <ol class="breadcrumb">
                        <li><a href="index.html"><i class="fa fa-dashboard"></i> 管理中心</a></li>
                        <li class="category_list.html"><a href="index.html">分类</a></li>
                        <li class="active">分类列表</li>
                    </ol>
                </section>

                <!-- Main content -->
                <section class="content">

                    <div class="row">
                        <div class="col-md-12">
                            <div class="box">
                                <div class="box-header">
                                    <h3 class="box-title"></h3>
                                    <a href="/admin/category/add" class="btn btn-default pull-right">添加分类</a>
                                </div><!-- /.box-header -->
                                <div class="box-body">
                                    <table class="table table-bordered">
                                        <tbody><tr>
                                            <th style="width: 10px">#</th>
                                            <th>分类</th>
                                            <th>文章数量</th>
                                            <th>排序</th>
                                            <th style="width: 20%">操作</th>
                                        </tr>
                                        <% data.forEach(function(item,idx){ %>
                                        <tr>
                                            <td><%= idx+1 %></td>
                                            <td><%= item.title %></td>
                                            <td>15</td>
                                            <td><%= item.sort %></td>
                                            <input type="hidden" name="id" value="<%= item._id %>">
                                            <td>
                                                <a href="/admin/category/edit?id=<%= item._id %>" class="btn btn-default" title="编辑"><span class="fa fa-edit"></span> 编辑</a>
                                                <a href="/admin/category/edit?id=<%= item._id %>" class="btn btn-default" title="删除" onclick="return confirm(‘是否删除?‘);"><span class="fa fa-trash-o"></span> 删除</a>
                                            </td>
                                        </tr>
                                        <% }); %>
                                    </tbody></table>
                                </div><!-- /.box-body -->
                                <div class="box-footer clearfix">
                                    <ul class="pagination pagination-bg no-margin pull-right">
                                        <li><a href="#">«</a></li>
                                        <li><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">»</a></li>
                                    </ul>
                                </div>
                            </div>

                        </div>
                    </div>
                </section><!-- /.content -->
                <% include footer.html %>

显示效果如下所示:

时间: 2024-12-09 20:22:08

夺命雷公狗---node.js---21之项目的构建在node+express+mongo的博客项目6之数据的遍历的相关文章

夺命雷公狗---node.js---18之项目的构建在node+express+mongo的博客项目3头尾左侧分离法

在实际的开发中我们的项目往往都是需要头尾分离开来的,居然是后台管理界面当然也不能错过这么好的这步.. 首先我们将我们要分离的部分代码先剪切出来,如下所示: 将他们都弄出来... 这部分的内容分别对应的是他的: 然后通过如下方法引入即可:

夺命雷公狗---node.js---16之项目的构建在node+express+mongo的博客项目1

废话不多说我们直接开工... 直接在目录下打开黑窗口: 然后就开始看看我们创建出来的文件了: 然后就开始创建项目下的目录了: 从这里就可以清晰的看得到我们的目录都是以前后台来分离开来的,引入模版也很简单,如下图所示: 这样即可陈功访问到了我们的前端,,,,

夺命雷公狗---node.js---19之项目的构建在node+express+mongo的博客项目4mongodb在项目中的基本引入

首先我们在命令行下先建立这个库: 然后我们在项目中引入mongodb的模块: var MongoClient = require('mongodb').MongoClient; var DB_STR = "mongodb://localhost:27017/blog";//这里的是在mongodb下建立的库 var ObjectId = require('mongodb').ObjectId; //这里主要是用来处理mongodb下id的 这样在项目中的mongodb即可成功引入了..

夺命雷公狗---node.js---20之项目的构建在node+express+mongo的博客项目5mongodb在项目中实现添加数据

我们上一步就引入了mongodb了,那么下一步就要开始写添加数据了,不过有个前提是先将表单的数据处理好: 最基本的这部现在已经成功了,因为最基本的这步就是先将表单处的提交方式和提交地址给处理好,这里和PHP的基本上是一样... 然后我们在后端处理下接收的内容.. 已经在后端成功接收到了,那么下一步就是直接让他入库了... /** * Created by leigood on 2016/8/31. */ var express = require('express'); var router =

夺命雷公狗---node.js---17之项目的构建在node+express+mongo的博客项目2之一,二级路由

然后我们就来开始搭建后台了... 不过后台我们可以来玩玩他的二级路由... 然后再去修改下他们的样式即可......修改方法和刚才那里的修改方法一样, 访问效果如下所示: OK,已经正常相识了

夺命雷公狗---node.js---22之项目的构建在node+express+mongo的博客项目7之数据的修改

在修改的时候和在PHP里面修改的一样,都是需要在列表页传个id过来才可以实现修改的,如下所示: 然后在后端接收到他传过来id的同时去读取该id的所有信息: 然后就开始写post处理数据方面的问题了,如下所示: <% include header.html %> <div class="wrapper row-offcanvas row-offcanvas-left"> <!-- Left side column. contains the logo and

夺命雷公狗---javascript NO:21 自定义类1

1.快速入门 例1:通过原生js与面向对象js定义一个人的信息 <!DOCTYPE html> <html> <head> <meta charset=’utf-8′> <title></title> </head> <body> <script> //通过js代码定义一个人的信息 var name = ‘lisi'; var age = ’30′; var marry = false; alert

夺命雷公狗---Smarty NO:21 分页

在smarty里面写一个分页 demo6.php代码示例: <?php header(“Content-Type:text/html;charset=utf-8″); require “smarty/Smarty.class.php”; $smarty = new Smarty(); //连接数据库 mysql_connect(“localhost”,’root’,”); mysql_query(‘use xsphp’); mysql_query(‘set names utf8′); //读取所

夺命雷公狗---在js里阻止a标签的跳转和form表单的跳转

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <a href="http://www.baidu.com">百度</a> <a href="http://www.qq