用nodejs做网站 - 4

in 编程
关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9

开头

惊了,jade改名了,我才知道。

https://github.com/pugjs/pug

This project was formerly known as "Jade." However, it has been revealed to us that "Jade" is a registered trademark, and as a result a rename is needed. After some discussion among the maintainers, "Pug" has been chosen as the new name for this project. The next major version will carry "pug" as the package name.

接着写

启动脚本

开始前我们先写一个小脚本。

"scripts": {
  "dev": "mysql.server start & nodemon index.js"
},

之后我们只要运行下面的命令,就可以了。开启mysql和启动程序。

npm run dev

模板引擎

模板引擎我们用pug(原jade),因为我只熟悉这个,而且官方推荐的引擎不会差到哪里去。

➜ sudo npm i --save pug

将index.js修改如下。

// 引入模块
var express = require('express');

// 创建一个实例
var app = express();

// 设置页面文件夹
app.set('views', './views');

// 设置引擎
app.set('view engine', 'pug');

// 设置根目录返回的内容
app.get('/', function (req, res) {
  res.render('index');
});

// 监听3000端口
var server = app.listen(3000, function () {
  console.log('服务器正在运行...');
});

将index.html更名为index.pug。修改里面的内容。

doctype html
html(lang='zh')
  head
    meta(charset='UTF-8')
    title 首页
  body
    h1 Hi, limichange!

你可以用这两个工具把html快速的转换为pug格式。

现在我们的网页里的内容都是写死的,接下来我们将用动态的方式把内容传进去。做如下的修改。

// index.js

// 设置根目录返回的内容
app.get('/', function (req, res) {
  res.render('index', {
    title: '首页',
    message: 'Hi, limichange!'
  });
});
// index.pug

doctype html
html(lang='zh')
  head
    meta(charset='UTF-8')
    title= title
  body
    h1= message

ok,这样我们就使用了模板引擎动态的生成了一个页面。

➜ tree -aI 'node_modules|.git'
.
├── .gitignore
├── LICENSE
├── index.js
├── package.json
└── views
    └── index.pug

配置文件

我简单说下开发的流程。我们一共需要有三个环境,分别为开发环境、测试环境和正式环境。

这当中有许多的差异。比如说,我们在本地调试的时候,端口是8080端口,而测试环境和正式环境则是80。数据库也是不一样的,每个环境都有自己各自的数据库,这个一定不能混淆。

为了根据不同的环境做动态的切换,我们需要写一个配置文件,将不同的地方定义出来。

# 创建文件
➜ touch config.js

里面的内容如下,包含了http和mysql的设置。

var config;

config = {
  production: {
    url: 'http://url.com',
    database: {
      client: 'mysql',
      connection: {
        host     : '127.0.0.1',
        user     : 'root',
        password : '',
        database : 'website',
        charset  : 'utf8'
      }
    },
    server: {
      host: '0.0.0.0',
      port: '80'
    }
  },
  development: {
    url: 'http://localhost:8090',
    database: {
      client: 'mysql',
      connection: {
        host     : '127.0.0.1',
        user     : 'root',
        password : '',
        database : 'website',
        charset  : 'utf8'
      }
    },
    server: {
      host: '127.0.0.1',
      port: '3000'
    }
  },
  'testing': {
    url: 'http://127.0.0.1:2369',
    database: {
      client: 'mysql',
      connection: {
        host     : '127.0.0.1',
        user     : 'root',
        password : '',
        database : 'ghost_testing',
        charset  : 'utf8'
      }
    },
    server: {
      host: '127.0.0.1',
      port: '8080'
    }
  }
};

module.exports = config;

现在让我们把这个配置到index.js。

// index.js

var config = require('./config')[process.env.NODE_ENV || 'development'];

var host = config.server.host;
var port = config.server.port;

// 监听3000端口
var server = app.listen(port, host, function () {
  console.log(`http://${host}:${port}`);
});

这样我们就将绑定的地址和端口动态设定了。之后我们将写一写数据库的代码。

关注公众号【好便宜】( ID:haopianyi222 ),领红包啦~
阿里云,国内最大的云服务商,注册就送数千元优惠券:https://t.cn/AiQe5A0g
腾讯云,良心云,价格优惠: https://t.cn/AieHwwKl
搬瓦工,CN2 GIA 优质线路,搭梯子、海外建站推荐: https://t.cn/AieHwfX9
扫一扫关注公众号添加购物返利助手,领红包
Comments are closed.

推荐使用阿里云服务器

超多优惠券

服务器最低一折,一年不到100!

朕已阅去看看