美文网首页
在express站点中使用ejs模板引擎

在express站点中使用ejs模板引擎

作者: 刘某某的简书 | 来源:发表于2018-07-11 11:08 被阅读0次

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

相关文章

网友评论

      本文标题:在express站点中使用ejs模板引擎

      本文链接:https://www.haomeiwen.com/subject/fithpftx.html