前端工程师使用node.js打造日记社区教程之四

hello 大家过年好，迎来了2016的工作日，我们继续来完善日记社区吧~

从本章开始，我将带领大家把我们所有的views视图模板设计完，这样后面我们可以安心的去写node后台了。

目前我能想到的页面，有首页、加入、登录、发现、关于、查看信息、查看日记、写日记……暂且这些，后面发现缺的话在补上。

1、加入

按照业务区分的话，加入和登录都是对用户进行操作的，所以我要建立几个文件，找到文件夹“controllers”建立“userController.js”文件，内容如下：

/**
 * title : 喵喵日记社区用户控制器
 * author: Kvkens
 * update: 2016.02.15 16:00:00
 */
exports.join = function(req,res,next){
	res.render("user/join");
}

渲染到user下的join页面。

我们再来修改路由引用，打开“webRouter.js”添加：

var user = require("./controllers/userController");

先把我们的用户控制器加载进来，下面开始使用：

//加入
router.get("/Join",user.join);

我们就可以访问到我们的加入页面了。很容易的看出来，user.join就是控制器里面的那个exports.join暴露的方法。

编写加入的页面，views\user\join.html，内容很简单，基本的bootstrap 12栅格布局加form：

<div class="row">

	<div class="col-sm-6 col-sm-offset-3">
		<form class="form-horizontal" method="post">
		  <div class="form-group">
		    <label for="inputAccount" class="col-sm-2 control-label">帐号：</label>
		    <div class="col-sm-10">
		      <input type="email" class="form-control" id="inputAccount" placeholder="注册的帐号">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword1" class="col-sm-2 control-label">密码：</label>
		    <div class="col-sm-10">
		      <input type="password" class="form-control" id="inputPassword1" placeholder="输入密码">
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="inputPassword2" class="col-sm-2 control-label">确认：</label>
		    <div class="col-sm-10">
		      <input type="password" class="form-control" id="inputPassword2" placeholder="确认密码">
		    </div>
		  </div>
		  <div class="form-group">
		    <div class="col-sm-offset-2 col-sm-10">
		      <button type="submit" class="btn btn-info">加入</button>
		    </div>
		  </div>
		</form>
	</div>

</div>

今天先到这里，明天继续更！