Nodejs+Express学习一（搭建最简单网站）

时间 2019-11-09

标签 nodejs+express nodejs express 学习搭建最简单网站栏目网站开发繁體版

原文原文链接

1、Nodejs与Express
这里我只作简单介绍，以实战为目的，不想说那么多废话。
Nodejs：运行在服务器端的javascript（若是你是新手，那么只须要知道这个就能够）。
Express：基于Node平台的web开发框架（你能够理解为前端的“jquery”）javascript

2、建立项目
对于nodejs的安装这里直接跳过。
那么咱们从建立项目开始。
本人用的IDE是WebStorm，由于上面有相似cmd的控制台，比较方便。
下面很少说，直接开始：html

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来安装该模板引擎。
以上基本须要的东西就安装完成了，而后请根据下面的图来建立目前尚未的文件夹和文件：
前端

3、编写入口文件index.jsjava

//引用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里的内容：node

<!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（为了简单，将他们的内容编码一致）：jquery

<h1>{{ title }}</h1>

这里的title是从服务器端传过来的：
web

好，如今咱们最简单的网站都完成了，至于数据库这里就不说了，我会在学习过程当中跟进有关文章，篇文章的目的就是搭建最简单的网站。
那么咱们在跑一下，在控制台中运行命令：node index.js，会看到打印出来的服务器启动完成，端口为： 3000。这时，咱们在浏览器地址栏中输入：localhost:3000和localhost:3000/about，就会显示出对应的页面了：

数据库

好，最简单的网站就完成了，后面原本还会继续学习nodejs，因此也会继续跟进相关文章。express