摘要：学了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. ubuntu-16.04使用MDK3伪造wifi热点和攻击wifi热点至死

    MDK3是? MDK3 是一款无线DOS 攻击测试工具,能够发起Beacon Flood.Authentication DoS.Deauthentication/Disassociation Amok ...

  2. python学习笔记 map&&reduce

    ---恢复内容开始--- 1.map 1)map其实相当对吧运算符进行一个抽象,返回的是一个对象,但是这里不知道为什么不可以对一个map返回变量打印两次,难道是因为回收了? def f(x): ret ...

  3. webpack 1.x 学习总结

    webpack介绍(from github): A bundler for javascript and friends. Packs many modules into a few bundled ...

  4. 乐呵乐呵得了 golang入坑系列

    开场就有料,今天返回去看了看以前的文章,轻松指数有点下降趋势.一琢磨,这不是我的风格呀.一反思,合着是这段时间,脑子里杂七杂八的杂事有点多,事情一多,就忘了快乐.古话说得好:愁也一天,乐也一天,只要还 ...

  5. ios多线程开发总结

    1>无论使用哪种方法进行多线程开发,每个线程启动后并不一定立即执行相应的操作,具体什么时候由系统调度(CPU空闲时就会执行). 2>更新UI应该在主线程(UI线程)中进行,并且推荐使用同步 ...

  6. linux 安装 cenos7 和 jdk

    安装一个虚拟机安装cenos7 版本的 安装完虚拟机后必备工具 第一步. 配置网路 设置桥接网路设置静态网络参考 下面博文 http://www.cnblogs.com/Jerry1104/p/758 ...

  7. 实战-Mysql5.6.36脚本编译安装及初始化

    概述 本文为centos7.3自动化编译安装mysql5.3.6的脚本及后续初始化操作,话不多少,直接上脚本. 安装脚本install.py如下: #coding=utf-8 #!/usr/bin/p ...

  8. JavaScript学习笔记（十六）——面向对象编程

    在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

  9. Linux分区的注意事项以及远程连接排错

    分区方式一般有三种 第一种:数据不是很重要 /boot(系统的引导分区): 系统引导的信息/软件 系统的内核   200M swap( 交换分区): 为了避免系统内存用光了导致系统 宕机 如果系统内存 ...

  10. Qt快速上手（学习笔记四）

    拖了大半年,今天终于有更新了...我自己都不好意思,最近太忙了! 今天讲一下:QML语法 一 概述 QML是一种专门用于构建用户界面的编程语言,它允许用户构建高性能,具有流畅特效的可视化应用程序,QM ...