摘要：学了node之后有时候分不清前台和后台，今天用ajax和ejs来从后台获取数据，没有数据库，用json数据来进行模拟数据库；来区分前台和后台需要干什么？

一、用ejs获取数据

1、文件目录

2、app.js

var experss=require("express");

var app=experss();

var shujuku=[

    {   "biaoti":"我是0号新闻啊！我很开心",

        "shijian":"2015年9月23号",

        "zuozhe":"考拉0",

        "neirong":"<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>"

    },

    {   "biaoti":"我是1号新闻啊！我很开心",

        "shijian":"2015年9月23号",

        "zuozhe":"考拉1",

        "neirong":"<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>"

    },

    {   "biaoti":"我是2号新闻啊！我很开心",

        "shijian":"2015年9月23号",

        "zuozhe":"考拉2",

        "neirong":"<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>"

    },

    {   "biaoti":"我是3号新闻啊！我很开心",

        "shijian":"2015年9月23号",

        "zuozhe":"考拉3",

        "neirong":"<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>"

    }

];

app.set("view engine","ejs");

app.get("/news/:id",function (req,res) {

    //新闻id

    var id=parseInt(req.params.id);

    res.render("content",shujuku[id]);

});

app.listen(3000);

3、content.ejs

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .header{

            width:980px;

            height: 100px;

            margin: 0 auto;

            background-color: #ccc;

            margin-bottom: 20px;

        }

        .content{

            width: 980px;

            margin: 0 auto;

        }

        h1{

            text-align: center;

        }

        .main{

            float:left;

            width:599px;

            margin-right:20px;

        }

        .aside{

            float:left;

            width:360px;

            height:400px;

            background-color: #ccc;

        }

    </style>

</head>

<body>

<div class="header"></div>

<div class="content">

    <div class="main">

        <h1><%=biaoti%></h1>

        <p>时间：<%=shijian%> 作者：<%=zuozhe%></p>

        <p><%=neirong%></p>

    </div>

    <div class="aside"></div>

</div>

</body>

</html>

4、运行结果:通过输入http://127.0.0.1:3000/news/新闻id

二、通过ajax获取数据：要用到一个叫做underscore.js的模版,需要先下载下来

1、目录结构

2、app.js

var express=require("express");

var app=express();

var shujuku=[

    {   "biaoti":"我是0号新闻啊！我很开心",

        "shijian":"2015年9月23号",

        "zuozhe":"考拉0",

        "neirong":"<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>"

    },

    {   "biaoti":"我是1号新闻啊！我很开心",

        "shijian":"2015年9月23号",

        "zuozhe":"考拉1",

        "neirong":"<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>"

    },

    {   "biaoti":"我是2号新闻啊！我很开心",

        "shijian":"2015年9月23号",

        "zuozhe":"考拉2",

        "neirong":"<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>"

    },

    {   "biaoti":"我是3号新闻啊！我很开心",

        "shijian":"2015年9月23号",

        "zuozhe":"考拉3",

        "neirong":"<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>"

    }

];

app.use(express.static("./public"));

app.get("/news",function (req,res) {

    res.json(shujuku);　　　　　　　　　　　　//将数据返回给前端页面

})

app.listen(3000);

3、content.html

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .header{

            width:980px;

            height: 100px;

            margin: 0 auto;

            background-color: #ccc;

            margin-bottom: 20px;

        }

        .content{

            width: 980px;

            margin: 0 auto;

        }

        h1{

            text-align: center;

        }

        .main{

            float:left;

            width:599px;

            margin-right:20px;

        }

        .aside{

            float:left;

            width:360px;

            height:400px;

            background-color: #ccc;

        }

        .grid{

            box-shadow: 1px 1px 1px #333;

            border-bottom: 1px solid #333;

            margin-bottom: 10px;

            padding:10px;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

<div class="header"></div>

<div class="content">

    <div class="main">

    </div>

    <div class="aside"></div>

</div>

<script type="text/template" id="moban">

        <div class="grid">

            <h3><%=biaoti%></h3>

            <p>发布时间：<%=shijian%> 作者：<%=zuozhe%></p>

            <p><%=neirong%></p>

            <p><a href="">详细信息</a></p>

        </div>

</script>

<script type="text/javascript" src='jquery-1.11.3.min.js'></script>

<script type="text/javascript" src="underscore.js"></script>

<script type="text/javascript">

    //得到模版内容

    var mobanstring=$("#moban").html();

    //模版函数

    var compiled=_.template (mobanstring);

    $.get("/news",function (data,status) {

        for (var i=0;i<data.length;i++){

            var compiledString=compiled(data[i]);

            $(".main").append($(compiledString));

        }

    });

</script>

</body>

</html>

4、运行结果：通过输入http://127.0.0.1:3000/content.html

node.js之用ajax获取数据和ejs获取数据的更多相关文章

  1. Node.js 从零开发 web server博客项目[数据存储]

    web server博客项目 Node.js 从零开发 web server博客项目[项目介绍] Node.js 从零开发 web server博客项目[接口] Node.js 从零开发 web se ...

  2. node.js爬取ajax接口数据

    爬取页面数据与爬取接口数据,我还是觉得爬取接口数据更加简单一点,主要爬取一些分页的数据. 爬取步骤: 1.明确目标接口地址,举个例子 : https://www.vcg.com/api/common/ ...

  3. node.js使用免费的阿里云ip查询获取ip所在地

    在项目过程中,我们常常需要获取IP的所在地.而这一功能一般都是通过一些数据网站的对外接口来实现,这些接口一般情况下都是付费使用的.在这篇文章中我将记录,基于node.js的阿里云免费IP地址查询接口的 ...

  4. node.js 微信开发2-消息回复、token获取、自定义菜单

    项目结构 >config/wechat.json 微信公众号的配置文件 >controllers/oauth.js 微信网页授权接口(下一篇再细讲讲) >controllers/we ...

  5. node.js 使用 net 模块模拟 websocket 握手，进行数据传递。

    websocket 是一种让浏览器与服务器之间建立持久的连接,并能进行双向数据传输的一种协议. websocket 属性应用层协议,基于tcp传输协议,并复用http的握手通道. 一.如何进行webs ...

  6. Node.js权威指南 (5) - 使用Buffer类处理二进制数据

    5.1 创建Buffer对象 / 705.2 字符串的长度与缓存区的长度 / 725.3 Buffer对象与字符串对象之间的相互转换 / 74 5.3.1 Buffer对象的toString方法 / ...

  7. 《超实用的Node.js代码段》连载一：获取Buffer对象字节长度

    我们知道Node.js框架下的Buffer对象能够对二进制数据提供很好的支持,那么获取一个Buffer对象真实的字节长度则是必须要用到的功能了.Node.js框架为开发人员提供了一个Buffer.by ...

  8. node.js 需要注意知识点

    复习node.js 需要注意知识点--(重点) 2.1:参数传递获取造型 客户端脚手架(发)    (参数传递)    node.js(收) -发ajax  this.axios.get(" ...

  9. Node.js核心模块API之文件操作

    参考:https://www.runoob.com/nodejs/nodejs-fs.html 异步I/O 1,文件操作 2,网络操作 在浏览器中也存在异步操作 1,定时任务 2,事件处理 3,Aja ...

随机推荐

  1. python 保存命令执行结果

    保存命令执行的结果需哟使用os.popen("系统命令").read(),然后使用变量赋值输出即可 >>> result = os.popen("df ...

  2. Maven依赖分析

    背景 昨天帮一位同事排查了一个依赖冲突的问题.问题的现象就是在IntelliJ IDEA运行项目正常,但是打包(Maven assembly jar)之后传到服务器运行失败,报错:Caused by: ...

  3. ECMAScript 6 第一天 let和const命令

    ES6新增声明变量的方法let命令,const命令. (ES5只有两种声明变量的方法:var 命令和 function 命令.) let命令,用来声明变量. 与var声明变量不同于: 1.  let声 ...

  4. while循环小练习-猜答案

    条件 1.每个用户只能猜10次产品的价格2.每次猜玩价格,提示用户价格是多了还是少了或者对了3.如果用户才对则终止程序执行 break! i = 0 #设置一个次数变量 price = 38 #设置一 ...

  5. ASP.NET异常处理机制

    try{ //获取并使用资源,可能出现异常}catch(DivideByZeroException de){}catch(ArithmeticException ae){}catch(Exceptio ...

  6. params SqlParameter[] commandParameters（转）

    C#代码  ExecuteReader(string connectionString, CommandType commandType, string commandText, params Sql ...

  7. HTML Entity 字符实体

    目录 1. HTML Entity 2. 字符与Entity Name的互相转换 3. 字符与Entity Number的互相转换 1. HTML Entity 1.1 介绍 在编写HTML页面时,需 ...

  8. [翻译]Python List Comprehensions: Explained Visually || Python列表解析式

    原文1地址: http://treyhunner.com/2015/12/python-list-comprehensions-now-in-color/ 原文2地址: http://blog.tea ...

  9. 【转】three.js详解之入门篇

    原文链接:https://www.cnblogs.com/shawn-xie/archive/2012/08/16/2642553.html   开场白 webGL可以让我们在canvas上实现3D效 ...

  10. TCP/IP协议栈 --- IP路由

    IP路由:当一个IP包在主机发送出去或者在网络当中时,是怎么选择路径到达目的主机的呢? 一般情况下, 如果说源主机和目的主机在同一个网络中的话,那个数据报可以直接到达目的主机而不经过路由器,下面可以试 ...