一、Nodejs与Express
这里我只做简单介绍,以实战为目的,不想说那么多废话。Nodejs
:运行在服务器端的javascript(如果你是新手,那么只需要知道这个就可以)。Express
:基于Node平台的web开发框架(你可以理解为前端的“jquery
”)
二、创建项目
对于nodejs
的安装这里直接跳过。
那么我们从创建项目开始。
本人用的IDE
是WebStorm
,因为上面有类似cmd
的控制台,比较方便。
下面不多说,直接开始:
1.找个地方新建一个文件夹作为项目根目录,因为我是学习用的,所以项目名叫study1
。
2.用WebStorm
打开该项目,在控制台中安装初始化项目:npm init
,控制台会有几个步骤依次完成(我是直接全部回车),需要说一下的是步骤里有个main
选项,默认为index.js
,该配置是项目入口文件,如果不想用index
命名,可以根据喜好更改。
3.安装express
,运行命令:npm install --save express
,--save
会更新package.json文件,将要安装的东西更新在package.json中。
4.安装模板引擎,我个人不太喜欢jade
,虽然它可以让我少些很多代码,但我是个前端工程师,原生的html
对我来说更亲切。所以这里选择使用express-handlebars
来作为模板引擎,运行命令:npm install --save express-handlebars
来安装该模板引擎。
以上基本需要的东西就安装完成了,然后请根据下面的图来创建目前还没有的文件夹和文件:
三、编写入口文件index.js
//引用express
var express = require('express');
//引用express-handlebars模板引擎
var hbs = require('express-handlebars').create({
defaultLayout: 'main', //默认布局模板为main.hbs
extname: '.hbs' //设置文件后缀名为.hbs
});
var app = express();
app.set('port',process.env.PORT || 3000); //设置端口
//设置模板引擎为express-handlebars
app.engine('hbs',hbs.engine);
app.set('view engine','hbs');
//使用static中间件 制定public目录为静态资源目录,其中资源不会经过任何处理
app.use(express.static(__dirname + '/public'));
//home页路由
app.get('/', function (req, res) {
res.render('home',{
title:'Home Page' //传入页面的title
});
});
//about页路由
app.get('/about', function (req, res) {
res.render('about',{
title:'About Page' //传入页面的title
});
});
app.listen(app.get('port'), function () {
console.log( '服务器启动完成,端口为: '+app.get('port') );
});
现在我们写好了index.js
文件,大家可能对中间件不熟悉,暂时先不用管它。现在我们来编写main.hbs
里的内容:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node Study</title>
</head>
<body>
<header>
<h1>欢迎来到Nodejs</h1>
</header>
{{{body}}}
</body>
</html>
main.hbs
作为我们的主模板,我们编写的其他页面通过express-handlebars
渲染,用{{{body}}}
嵌入到main.hbs
模板中形成完整的页面。
然后我们完成views下面的home.hbs和about.hbs(为了简单,将他们的内容编码一致):
<h1>{{ title }}</h1>
这里的title
是从服务器端传过来的:
好,现在我们最简单的网站都完成了,至于数据库这里就不说了,我会在学习过程中跟进有关文章,篇文章的目的就是搭建最简单的网站。
那么我们在跑一下,在控制台中运行命令:node index.js
,会看到打印出来的服务器启动完成,端口为: 3000
。这时,我们在浏览器地址栏中输入:localhost:3000
和localhost:3000/about
,就会显示出对应的页面了:
好,最简单的网站就完成了,后面本来还会继续学习nodejs
,所以也会继续跟进相关文章。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。