1.首先新建文件夹并在这个文件夹里安装ejs
安装命令:cnpm install ejs --save
2.创建一个ejs文件
doma.ejs 怎么写呢(看下图)
<%= name %>
3.创建一个html文件
dome.html
4.创建express 本地服务器
express.js
里面怎么写呢看下面
var express = require("express");
var app = express();
//跨域
app.all("*",function(req,res,next){
res.header("Accrss-Control-Allow-Origin","*")
next();
})
//设置模板引擎 ejs
app.set("view engine","ejs");
//设置模板引擎ejs的存放目录
app.set("views","./component");
//设置静态目录
app,use(express.static(__dirname+"./public/"));
//声明变量 获取数据
var data = require("./public/data.json");
console.log(data)
//设置默认页面
app.get("/",function(req,res){
res.sendFile(__dirname+"./component/dome.html")
})
//设置路由传参
app.get("/a/:id",function(req,res){
//用户请求过来的id
var id = req.params.id;
//过滤并匹配id
var datalist = data.filter(item=>item.id==id)[0];
res.render("doma",datalist)
})
//设置端口号
app.listen(8087,function(){
console.log("prot 8087")
})
5.运行上一步写的本地服务器
node express.js
6.在html文件里面用ajax获取数据
$.ajax({
url: "http://127.0.0.1:8087/data.json",
dataType: "json",
type: "get",
success: function (res) {
console.log(res)
}
})
7.最后把数据渲染到页面上
8.查看的话就打开浏览器,输入端口号就行!
9.查看详情
<a href="http://127.0.0.1:8087/a/${i.id}">详情</a>
//${i.id} 这个就是利用jQuery.js插件,获取数据并拿到的id