摘要：学了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 读取本地文件批量插入mysql

    Uin_phone.txt 本地文件内容 有1000条,这里只是展示前几条,供参考 133584752 133584759 133584764 133584773 133584775 13358477 ...

  2. LoadRunner系统资源监视

    http://www.ltesting.net/ceshi/ceshijishu/rjcsgj/mercury/loadrunner/2013/0418/206165_3.html --------- ...

  3. MySql的虚拟机和Xshell5的连接过程

    给大家介绍一下虚拟机和Xshell5连接的基本配置1.安装虚拟机,跟着提示一步一步安装即可,注意添加镜像文件,虚拟机就完成了.2.下载一个Xshell5,安装好之后.要修改虚拟机的网卡状态    1) ...

  4. Struts2-045验证脚本

    #! /usr/bin/env python # encoding:utf-8 import urllib2 import sys from poster.encode import multipar ...

  5. 关于node的前端项目编译时内存溢出问题

    最近在做一个基于vue 的多页面项目  , 页面n++多,编译时发生node内存溢出问题,继而百度之,得到解答,故记录之. '如图' 只需在 package.json 里面   加上    --max ...

  6. 实践作业1：测试管理工具实践 Day3

    1.Vertrigoserv启动后,首先要配置apache,则需要修改监听端口,不要出现端口冲突2.配置mysql,在mysql console中输入密码vertrigo3.在浏览器中输入http:/ ...

  7. 微信JS-SDK选择相册或拍照并上传PHP实现

    理解:微信上传接口是拍照,或者选择本地照片,上传到微信的服务器,获取到一个id,通过token与这个id获取到图片,保存到服务器即可. 效果 通过微信js接口,调用底层程序. 需要引入js文件,并进行 ...

  8. [安全]PHP能引起安全的函数

    php中需要禁用以下函数来提高安全性 打开php.ini  找到 disable_functions .然后禁用以下函数 [C] 纯文本查看 复制代码 ? 1 disable_functions = ...

  9. mac下出现xcrun: error导致git、svn无法使用的解决办法

    现象:xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun ...

  10. Spring Cloud Zuul 添加 ZuulFilter

    紧接着上篇随笔Spring Cloud Zuul写,添加过滤器,进行权限验证 1.添加过滤器 package com.dzpykj.filter; import java.io.IOException ...