上一周，我们简单的服务器已经启动了，那么可以更进一步了。
渲染页面
我们访问页面时的本质都是服务端的一个路由，那么我们现在就先来写一个/login的路由
先来看路由，我们在index.js里添加这段代码
router.get('/login', function(req, res) {
res.end('login page');
});
ok，启动服务node index.js，访问http://localhost:8888/login，就可以看到效果
路由创建好了，怎么返回一个html页面呢，就要用到模板引擎
ejs
ejs是比较火的一个模板引擎，和express集成良好。不知道什么是模板引擎的，参考vue的写法，模板引擎会将页面中的某个字符串渲染成数据再返回出来
工具有了,怎么集成到我们的项目中呢？
- 在根目录下创建
views文件夹 - 在views中创建一个文件
login.ejs，其代码如下
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
<style>
.container {
width: 500px;
}
</style>
</head>
<body>
<div class="container">
<form class="form-signin" action="/login" method="POST">
<h2 class="form-signin-heading"><%= name %></h2>
<div class="form-group">
<label for="exampleInputEmail1">账号</label>
<input name="userName" type="text" class="form-control" id="exampleInputEmail1" placeholder="账号" required>
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input name="password" type="password" class="form-control" id="exampleInputPassword1" placeholder="密码" required>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me">记住密码
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
</form>
</div>
</body>
</html>
- 这只是个普通的html文件的代码格式而已，
ejs的语法如下
类似vue{{}}的写法，ejs发现这种格式的代码，然后会去寻找服务端的传入的name字段，招到name之后会把它转成字符串展示出来
<%= name %>
- 我们在
index.js里添加这段代码
var path = require('path');
app.set('views', path.join(__dirname, 'views')); // 设置存放模板文件的目录
app.set('view engine', 'ejs'); // 设置模板引擎为 ejs
- 引擎配置好了，怎么在路由里返回对应的页面呢，在
index.js中修改login的路由方法
router.get('/login', function(req, res) {
// render方法可以返回一个页面
// 参数1： 文件名，我们在index.js中配置了引擎目录的路径为views文件夹，这里会去找views下面的login.ejs
//参数2：往该ejs中传入的数据，该数据可以在对应的ejs中通过<%= 字段名 %>拿到
res.render('login', {
name: '登录页面'
});
});
所有文件都配置好后，打开http://localhost:8888/login
image.png
页面已经返回出来了，其实这也是我们时常听说的服务端渲染，也就是通过服务器返回页面，页面中的数据跟随页面同步渲染，这种方式虽然影响用户体验（同步加载大量数据情况下，页面会白屏一段时间），不过方便爬虫爬取数据和做seo。
基本的页面展示以及OK了，下次就做表单提交和错误处理吧...
网友评论