在nodejs中使用req.query或req.params方式获取前端传来的参数,然后根据获取的参数使用res.render()方法进行页面跳转。
nodejs跳转到新页面示例:
在我们做项目中一般点击列表页面到详细页面需要把当前点击的列表id传递到详细页面,详细页面根据列表页面传递过来的id获取具体内容。
处理方式
1、query查询方式在详细页面的url?id=xxx这样的方式
2、静态文件处理(更适合SEO搜索引擎)url/xx
query查询方式处理代码
1、前端代码(ejs模板文件)
<% for(let index in data){%> <div class="col-md-3"> <div class="thumbnail"> <img src="upload/<%= data[index].filename%>" style="width:200px;height: 200px;"> <div class="caption"> <h4><%= data[index].type%></h4> <p> <a href="/list?id=<%= data[index].id %>" class="btn btn-primary" role="button">详细页面</a> </p> </div> </div> </div> <% } %>
2、nodejs后端获取传递过来的参数代码
router.get("/list",(req,res)=>{ let id = req.query.id; res.locals.id = id; res.render("list.ejs"); })
3、说明res.locals.xx是传递参数到一个页面中,页面中直接<%= xx %>就可以显示
使用静态文件的处理方式
1、前端模板文件(ejs文件)
<% for(let index in data){%> <div class="col-md-3"> <div class="thumbnail"> <img src="upload/<%= data[index].filename%>" style="width:200px;height: 200px;"> <div class="caption&qu<strong style="color:transparent">来源gaodai#ma#com搞@代~码网</strong>ot;> <h4><%= data[index].type%></h4> <p> <a href="/list/<%= data[index].id %>" class="btn btn-primary" role="button">详细页面</a> </p> </div> </div> </div> <% } %>
2、nodejs后端获取传递过来的参数代码(注意是用req.params获取)
router.get("/list/:id",(req,res)=>{ let id = req.params.id; res.locals.id = id; res.render("list.ejs"); })
以上就是nodejs怎么跳转到新页面?的详细内容,更多请关注gaodaima搞代码网其它相关文章!