zoukankan      html  css  js  c++  java
  • node之mongo取到数据渲染到html上

    使用的是ejs

    /**
     1.npm install mongodb --save-dev / cnpm install mongodb --save-dev
    
     2.var MongoClient = require('mongodb').MongoClient;
    
     var url = 'mongodb://localhost:27017/test';   连接数据库的地址
    
     3.连接数据库
    
     MongoClient.connect(url, function(err, db) {
    
    });
    
     4.实现增加修改删除
    
     MongoClient.connect(url, function(err, db) {
    
        db.collection('user').insertOne({'name':'zhangsan'},function(error,data){
    
    
    
    
        })
    
    });
    
    
    
    
    
     */
    var http=require('http');
    
    var ejs=require('ejs');
    
    var MongoClient = require('mongodb').MongoClient;
    
    var DBurl = 'mongodb://localhost:27017/itying';
    
    
    
    var app=require('./model/express-route.js');
    
    http.createServer(app).listen(3000);
    
    app.get('/',function(req,res){
    
    
    
        MongoClient.connect(DBurl,function(err,db){
            if(err){
    
                console.log('连接数据库失败');
                return;
            }
    
            //查询数据
            var list=[];  /*放数据库里面查询的所有数据*/
    
            var result=db.collection('user').find({});
    
    
            result.each(function(error,doc){
    
    
                //console.log(doc);
                    if(error){
                        console.log(error);
                    }else{
    
                        if(doc!=null){
                            list.push(doc);
    
                        }else{  /*doc==null表示数据循环完成*/
    
                            /*获取数据以后*/
                            //console.log(list);
    
                            ejs.renderFile('views/index.ejs',{list:list},function(err,data){
    
                                res.send(data);
                            })
    
                        }
    
                    }
    
            })
    
            //console.log(result);
    
        })
    
    })
    
    app.get('/add',function(req,res){
    
        MongoClient.connect(DBurl,function(err,db){
    
            if(err){
    
                console.log('连接数据库失败');
                return;
            }
    
            db.collection('user').insertOne({"name":'lisi',"age":40},function(error,data){
    
                if(error){
                    console.log('增加数据失败');
                    return;
                }
                console.log(data);
    
                res.send('增加数据成功');
    
                db.close();
    
            })
    
    
        })
    })

    app和上篇文章一样

    下面附录上ejs

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
      <title></title>
    </head>
    <body>
    
        <ul>
    
            <%for(var i=0;i<list.length;i++){%>
                <li><%=list[i].name%></li>
            <%}%>
        </ul>
    
    
    </body>
    </html>
  • 相关阅读:
    Vue.js 章6 v-model与表单
    Vue.js 简单购物车开发
    Vue.js实战 章五:内置指令
    Vue stage3
    Vue初接触 stage1
    前端代码的一些恶优化
    websocket介绍 以及 vue websocket使用案例
    回忆一下跨域
    如何使用Flexible这样的一库来完成H5页面的终端适配
    css 输入px单位的数值 直接转换为rem的插件
  • 原文地址:https://www.cnblogs.com/qiaohong/p/8460289.html
Copyright © 2011-2022 走看看