上一周, 我们简单的服务器已经启动了, 那么可以更进一步了.
渲染页面
我们访问页面时的本质都是服务端的一个路由, 那么我们现在就先来写一个 / 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 的写法, 模板引擎会将页面中的某个字符串渲染成数据再返回出来
ejs 中文文档
工具有了, 怎么集成到我们的项目中呢?
在根目录下创建 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 了, 下次就做表单提交和错误处理吧...
荆轲刺秦王...
来源: http://www.jianshu.com/p/7de48f83c5d2