zoukankan      html  css  js  c++  java
  • express+mongodb+ajax+ejs实现数据库文件调到前台页面显示

    第一,文件包内容要提前下好 express  mongodb ejs jquery 等。并建一个www文件夹 里面放静态资源,还有一个index主页

    第二,往mongodb数据库上传 数据 如:文字,图片。。。。参考如何操作mongodb上传资源。(注意上传图片...等www目录下要有images文件夹存图片)

    例如:

    {"name":"我","age":"28","text":"我我我我我我我我我我"}
    {"name":"她","age":"27","text":"她他她她她他她她她他她"}
    {"name":"宝宝","age":"1","text":"宝宝宝宝宝宝宝宝宝宝宝"}

    第三,app.js是主程序文件 设置服务器 链接数据库 引入模块

    第四,

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>
    <div>
    <div id="here">
    </div>
    </div>
    <script src="js/jquery.js"></script>
    <script src="js/ejs.js"></script>
    <script type="text/template" id="template">
    <div>
    <% for(var i=0;i<data.length;i++){ %>
    <h2>姓名:<%= data[i].name %></h2>
    <h3>年龄:<%= data[i].age %></h3>
    <p>介绍:<%= data[i].text %></p>
    <% } %>
    </div>
    </script>
    <script>
    $(function () {
    $.ajax({
    type:'get',
    url:'/dd',
    // async:true,//默认异步 可写可不写
    success:function (res) {
    //ejs模板三部曲
    var temp=$("#template").html();
    var content=ejs.render(temp,{"data":res});
    $("#here").html(content);
    // console.log(res);//得到的是一组数组里面是json数据
    }
    });
    })
    </script>
    </body>
    </html>
    第五,1,利用express框架 2, 往mongodb数据库 3,利用ajax从后台拿数据 4,利用ejs模板把拿到的数据渲染到前台页面上来。
    结果如下:
  • 相关阅读:
    20210420
    20210419
    2021041601
    20210416
    20210415
    20210414
    20210413
    20210412
    20210409
    20210405
  • 原文地址:https://www.cnblogs.com/zyyweb/p/9464453.html
Copyright © 2011-2022 走看看