摘要：学了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. Qt----拖拽

    最近比较忙,今天此才有时间来继续学习下Qt.Qt的拖拽可以按字面意思分为拖和拽两部分.一般来说我们常见的拖拽分别由两个程序合作完成.例如我们经常把桌面的文件拖拽进其他目录: 这个拖拽在Qt中由两方合作 ...

  2. iOS推送，看这篇足够了

    一.注册推送: - (void)registerNotification { if ([[[UIDevice currentDevice] systemVersion] floatValue] > ...

  3. HTML5将给企业带来什么?

    HTML5是近几年来互联网行业的热门词汇,火热的厉害,未来的网络属于HTML5. 乔布斯生前也在公开信<Flash之我见>中预言:像HTML5这样在移动时代中创立的新标准,将会在移动设备上 ...

  4. [对smartMenu.js改进] 解决右键菜单栏在边缘弹出后，移出视图区域无法操作的问题

    当用户在视图边缘(如右下角)右键召唤菜单栏的时候,菜单仍然从选中元素的右下角弹出,这时二级菜单栏一般都离开了视图区域,用户无法进一步操作. 这个问题挺常见的,原作者的留言板: 但是作者应该是已经不再维 ...

  5. SSM框架的搭建

    第一阶段: 1.用PowerDesign建数据模型,并导出SQL文件: 2.将SQL文件导入到MySQL客户端,建立表格: MySQL数据远程访问:GRANT ALL PRIVILEGES ON *. ...

  6. 十招让Ubuntu 16.04用起来更得心应手（转）

    ubuntu 16.04是一种长期支持版本(LTS),是Canonical承诺发布五年的更新版.也就是说,你可以让这个版本在电脑上运行五年! 这样一来,一开始就设置好显得特别重要.你应该确保你的软件是 ...

  7. 深入理解php内核 编写扩展 II：参数、数组和ZVALs

    原文:http://devzone.zend.com/article/1022-Extension-Writing-Part-II-Parameters-Arrays-and-ZVALs Part I ...

  8. Java消息服务初步学习（基于Spring In Action的整理）

    几个名词 Java消息服务(Java Message Service)是一个Java标准,定义了使用消息代理的通用API. 消息代理(message broker):类似于邮局的作用,确保消息被投递到 ...

  9. eclipse导入新项目后，运行时找不到主类解决办法

    最近在学习多线程,今天下了一套源码,导入到eclipse里后,随便找了个带main()的类试了一下,找不到主类. 首先想到的解决办法是把工程clean一下,并没有用.去网上找了一个遍终于找到了管用的方 ...

  10. ABAP CDS Table Function介绍与示例

    Core data services(以下简称CDS)可以指两样东西,一个是HANA CDS,一个是ABAP CDS. 如我们所知,HANA CDS只支持HANA数据库,ABAP CDS理论上支持多种 ...