摘要：学了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——正则表达式特殊符号及用法

    由于正则表达式的内容比较多,所以单独写成一系列文章,主要内容是根据小甲鱼所讲的内容综合一下正则表达式的笔记. 贴上小甲鱼的<Python3 如何优雅地使用正则表达式>系列可观看的博客地址: ...

  2. AES高级加密标准简析

    1 AES高级加密标准简介 1.1 概述 高级加密标准(英语:Advanced Encryption Standard,缩写:AES),在密码学中又称Rijndael加密法,是美国联邦政府采用的一种区 ...

  3. 《java.util.concurrent 包源码阅读》13 线程池系列之ThreadPoolExecutor 第三部分

    这一部分来说说线程池如何进行状态控制,即线程池的开启和关闭. 先来说说线程池的开启,这部分来看ThreadPoolExecutor构造方法: public ThreadPoolExecutor(int ...

  4. MYSQL无法使用索引的场景

    设计优化–无法使用索引的场景 •通过索引扫描的记录数超过30%,变成全表扫描 •联合索引中,第一个索引列使用范围查询--只能用到部分索引 •联合索引中,第一个查询条件不是最左索引列 •模糊查询条件列最 ...

  5. java基础回顾（2）

    java中只有两种类型:基础类型.引用类型 8中基本类型:byte  short int long float double char boolean,其中byte类型取值范围[-2^7~2^7-1] ...

  6. python 正则空格\xa0实录 与xpath取 div 里面的含多个标签的所有文字

    业余玩爬虫时,由原先的原生写法 改为 scrapy框架了,使用自带的selector时,xpath配合正则来抓取回复数和阅读数的时候,遇到的小问题,mark下. 首先获取到 我需要的数据块,(我用sc ...

  7. Innodb中的锁

    Innodb中的锁 共享锁和排它锁(Shared and Exclusive Locks)共享锁和排它锁是行级锁,有两种类型的行级锁 共享锁(s lock)允许持有锁的事务对行进行读取操作 排它锁(x ...

  8. Redis各个数据类型的使用场景

    Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). Redis列表命令 参考:http://www.r ...

  9. 32位linux（centos）下mongoDB的安装

    下载mongoDB wget http://downloads.mongodb.org/linux/mongodb-linux-i686-2.4.9.tgz 如果上面地址不对可以去官网自己下载http ...

  10. NGUI_Input

    九.输入框Input 1.凡是用户可以输入文本的地方,几乎都用输入框,有登录账号和密码.输入角色名称.输入聊天内容 2.手动拼接输入框,拖动预制体的就不再说了 (1).创建一个Sprite作为输入框的 ...