前后台交互

最新推荐文章于 2025-01-21 22:38:13 发布

胡鹤婷

最新推荐文章于 2025-01-21 22:38:13 发布

阅读量383

点赞数

CC 4.0 BY-SA版权

分类专栏： nodejs 文章标签： nodejs

本文链接：https://blog.youkuaiyun.com/hhthwx/article/details/78699742

nodejs 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一种通过动态修改网页内容实现多个新闻页面展示的方法，使用了Express框架和EJS模板引擎，根据用户请求的不同ID参数，从模拟数据库中获取相应的新闻数据并呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现存在一个一号新闻页面如下：
这里写图片描述
有二号，三号新闻，所用模板和一号新闻相同，内容，时间，作者不同，那是不是我们要写三个这样的html页面嘞？
答案当然是否定的，所以我们要利用动态修改页面内容的手段来动态修改页面的内容
现有一个news文件夹中包含如下文件：
这里写图片描述
node_modules文件夹中有我们所需要引入的模块，express,fs等等
views中包含一个content.ejs文件，我们向用户呈递的也是这个页面，不看样式部分，直接看这部分的代码：

<body>
    <div class="header">
    </div>
    <div class="content">
        <div class="main">
            <h1><%=title%></h1>
        <p>时间：<%time%> 作者：<%=author%></p>
        <%=content%>
        </div>
        <div class="aside"></div>
    </div>
</body>
</html>

我们使用ejs模板引擎来动态的修改这些数据，这个模板，也就是说这个ejs文件是前端工作者写的，那么，这些模板引擎里面的title，time等等这些数据从哪里来，我们又该如何去设置模板引擎，这就是后台工作者应该做的事情啦。
首先，我们在app.js文件中设置模板引擎：

app.set("view engine","ejs");

然后，我们先模拟一个数据库：

var shujuku = [
   {
    "title":"我是一号新闻",
    "time":"2017年12月3号",
    "author":"小胡",
    "content":"花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花"
   },
    {
    "title":"我是二号新闻",
    "time":"2017年12月3号",
    "author":"小胡",
    "content":"花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花"
   },
    {
    "title":"我是三号新闻",
    "time":"2017年12月3号",
    "author":"小胡",
    "content":"花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花"
   },
    {
    "title":"我是四号新闻",
    "time":"2017年12月3号",
    "author":"小胡",
    "content":"花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花花"
   }
];

我们要从数据库中取几号内容取决于用户向我们请求的参数，也就是用户输入的url的？后面的参数
比如用户输入如下Url:http://127.0.0.1:3000/news/0
我们根据用户输入的参数来获取对应数据库中的内容

//这个id值就对应用户输入的那个0
app.get("/news/:id",function(req,res){
   //获取url传入参数的id值,paras是一个类数组对象
   var id = parseInt(req.params.id);
   //views文件夹中的文件引入不用去设置名字或文件夹名字
   //在数据库中取内容取动态修改页面内容
   res.render("content",shujuku[id]);

})

这样就完成了一次从后台向前端呈递页面的流程