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

最新推荐文章于 2024-08-25 22:37:28 发布

置顶 Kvkens

最新推荐文章于 2024-08-25 22:37:28 发布

阅读量1.2k

点赞数

分类专栏： Node.js 文章标签： node.js javascript

本文链接：https://blog.csdn.net/kvkens/article/details/50599113

版权

Node.js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

今天开始我们的第二讲，先从建立“app.js”开始讲起。一个node.js的程序，入口文件就是这个app.js了，一般运行node程序都是“node xxx”开始的，也有一些是配置在package.json里面的，通过“npm start”来跑服务、测试啊什么的，这里我就用最简单的来做。

1、模板引擎配置

我们首先来建立“app.js” 文件，先把前端静态文件做一下，看下面的代码：

/**
 * title : 喵喵日记社区主程序
 * author: Kvkens
 * update: 2016.01.28 11:00:00
 */

var express = require("express");//引用express
var app = express();//获取express的app对象
var path = require('path');//路径引用

app.use(express.static(path.join(__dirname, 'assets')));//assets文件夹作为前端静态资源目录

app.get("/",function(req,res){
	res.send("MiaoMiao");
});

app.listen(process.env.PORT || 3000,function(){
	console.log("MiaoMiao Group Is Start!");
});

然后先把我们的bower安装一下，npm install bower -g 然后在目录下运行：bower install jquery bootstrap --save

这样就会安装完前端需要的一些库了，（注意：bower是通过git来安装的，前提安装好git哦）

我把项目名字改了一下，叫“喵喵日记社区”，采用了“MiaoMiao”这个名字作为项目名称了，主要是练技术……

然后我们来运行“node app”

这样就可以通过http://127.0.0.1:3000/libs/jquery/dist/jquery.min.js 来访问我们的静态文件了，等后面有时间的我会说下静态用nginx来搞这个，现在就由node托管吧！

可以看出，我们的静态服务做好了！

下面来配置一下ejs模板引擎。

打开我们的“app.js”文件，修改下我们的代码，添加12-15行代码：

/**
 * title : 喵喵日记社区主程序
 * author: Kvkens
 * update: 2016.01.28 11:00:00
 */

var express = require("express");//引用express
var app = express();//获取express的app对象
var path = require('path');//路径引用
app.use(express.static(path.join(__dirname, 'assets')));//assets文件夹作为前端静态资源目录

app.set('views', path.join(__dirname, 'views'));//设置模板目录
app.set('view engine', 'html');//设置ejs引擎
app.engine('html', require('ejs-mate'));//可以使用.html
app.locals._layoutFile = 'layout.html';

app.get("/",function(req,res){
	res.send("MiaoMiao");
});

app.listen(process.env.PORT || 3000,function(){
	console.log("MiaoMiao Group Is Start!");
});

代码内的注释也有写，设置好我们ejs-mate为模板引擎。

现在可以使用模板了，就不能直接让get输出普通文本了，要渲染到我们views下面的模板来显示，修改18行代码：

res.render("test/test",{data:["red","pink","black"]});

这个意思是，response的渲染到test文件夹下的test.html里面，并且带了一个data数组。

看下文件夹结构：

红色的部分是我们的layout文件，这里解释一下，通常我们做网站是分头、尾、左右这样的布局，总有一些频繁使用的部分，那么我们就要反复使用，来看下layout.html里面是什么：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>喵喵日记 - 多人分享日记社区 公开的 快乐的</title>
	</head>
	<body>
		<%-body -%>
	</body>
</html>

看到了<%-body -%>部分了吧，是一个主体的部分引用，app.js里面我们设置了

app.locals._layoutFile = 'layout.html';

告诉我们ejs-mate我们是有layout文件的，每次都要加载这个，不需要我们手动去<%include("user/user")%>这样每次都写，它会按我们要求自动的加载的。

我们的test/test.html里面如下：

<div>
	我是测试的页面！<br />
	哈哈<%=data.join(",")%>
</div>

非常简单，都能看明白。data是我们渲染带过去的数组，就可以直接调用array的方法来显示数据了。

看下运行前与运行后的效果对比：

最终效果：

实际上我们的默认首页是那个指定渲染的test/test.html文件，因为我们设置了layout，它自己就包含进去了，每次都带着layout，非常方便，不需要我们每次都包含头尾什么的，是不是很赞，这就是ejs-mate魅力所在！

现在我们学会了基本的ejs使用了，是可以去布局bootstrap了，但是，我觉得不应该去做这个，先把路由机制写好，这样后面我们可以一边写路由，一边写页面，我觉得是极好的。

下面开始配置路由机制。

2、路由机制的配置

路由是比较多的，我就不建议在app.js里面去做，我把它拿出来，便于扩展。在我们的根目录创建“webRouter.js”文件用于编写路由。图片里面少了一个“r”大家记得加上！

修改我们的“app.js”内容来加载路由文件，并且使用。

/**
 * title : 喵喵日记社区主程序
 * author: Kvkens
 * update: 2016.01.28 11:00:00
 */

//Express
var express = require("express");//引用express
var app = express();//获取express的app对象
var path = require('path');//路径引用
var webRouter = require("./webRouter");//路由

app.use("/",webRouter);//启用页面路由
app.use(express.static(path.join(__dirname, 'assets')));//assets文件夹作为前端静态资源目录
//ejs配置
app.set('views', path.join(__dirname, 'views'));//设置模板目录
app.set('view engine', 'html');//设置ejs引擎
app.engine('html', require('ejs-mate'));//可以使用.html
app.locals._layoutFile = 'layout.html';
//加载路由



app.listen(process.env.PORT || 3000,function(){
	console.log("MiaoMiao Group Is Start!");
});

增加了11、13行代码，引用路由，然后让express路由全部转发到路由文件里面去，这样app.js里面就会业务分离了。

我们再来修改“webRouter.js”文件，在这里又是一个新的文件，我们需要路由机制，这个功能包含在express里面所以require("express")，拿到路由对象：

/**
 * title : 喵喵日记社区路由机制
 * author: Kvkens
 * update: 2016.01.28 15:00:00
 */

var express = require("express");
var router = express.Router();

router.get("/",function(req,res){
	res.send("喵喵日记社区路由机制");
});
router.get("/Test",function(req,res){
	res.send("我只是测试的啊亲！");
});
router.post("/Test",function(req,res){
	res.send("我只能post访问的亲！");
});


module.exports = router;

看到router对象了吧，有的是get有的是post按你自己的需求来做，我只是演示了一下这个路由，常用的就是这2种了。

访问结果：

可以看出是GET方式，自己也可以写个表单去测试POST的，我这里不做演示了。我要建立我的首页路由。

我们来修改一下路由文件，不过先要建立我们的第一个控制器。

3、建立第一个控制器

在controllers里面创建文件“homeController.js”，输入如下：

/**
 * title : 喵喵日记社区首页控制器
 * author: Kvkens
 * update: 2016.01.28 16:00:00
 */

exports.index = function(req,res,next){
	res.send("我来自控制器的首页哦！");
}

页面上和以前访问是没有区别的，只是在node端有些变化，有点往MVC靠拢了。

再修改一下，渲染到我们的首页模板里面去……

/**
 * title : 喵喵日记社区首页控制器
 * author: Kvkens
 * update: 2016.01.28 16:00:00
 */

exports.index = function(req,res,next){
	res.render("index");
}

很明显，这是要渲染到views里面的index.html里去，好吧，我们加上该文件index.html里面随便先写上几句话，运行就会发现我们的页面和layout完美结合了。

目前做到这些，我们的node.js的后端架构基本完成一半啦，可以去搭建首页bootstrap啦！

不过呢，我先把layout里面的css、js补充完整再说！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
   		<meta name="description" content="喵喵日记,多人分享日记社区,公开的,快乐的">
    	<meta name="author" content="Kvkens(kvkens@qq.com)">
    	<link rel="icon" href="./libs/favicon.ico">
		<title>喵喵日记 - 多人分享日记社区 公开的 快乐的</title>
		<!-- Bootstrap core CSS -->
    	<link href="./libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    	<link href="./libs/bootstrap/dist/css/bootstrap-theme.min.css" rel="stylesheet">
	</head>
	<body>
		 <nav class="navbar navbar-inverse navbar-fixed-top">
	      <div class="container">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
	          <a class="navbar-brand" href="/">喵喵日记社区</a>
	        </div>
	        <div id="navbar" class="navbar-collapse collapse">
	          <form class="navbar-form navbar-right">
	            <div class="form-group">
	              <input name="account" type="text" placeholder="帐号" class="form-control">
	            </div>
	            <div class="form-group">
	              <input name="password" type="password" placeholder="密码" class="form-control">
	            </div>
	            <button type="submit" class="btn btn-success">登录</button>
	            <a href="./Join" class="btn btn-default">加入</a>
	          </form>
	        </div><!--/.navbar-collapse -->
	      </div>
	    </nav>



		<%-body -%>
	<!-- Bootstrap core JavaScript================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="./libs/jquery/dist/jquery.min.js"></script>
    <script src="./libs/bootstrap/dist/js/bootstrap.min.js"></script>
	</body>
</html>

好了，目前layout写到这样吧，今天就到这……