搭建基于node Express框架运行环境,并使用html引擎

r囧r小猫 2022-04-16 06:26 186阅读 0赞

*  安装express generator生成器
 *  通过生成器自动创建项目
 *  配置分析

## 第一步：安装 ##

npm i -g express-generator@4.14.1

查询使用安装成功，一定要输入express --version，输入express -v是不行的

express --version

## 第二步：通过express server命令快速生成项目 ##

express server

默认生产的项目目录如下:

![20181118193946110.png][]

bin 就是可执行文件; 后期我们通过node www 就可以启动这个服务

public 就是一些静态资源

routes 路由，这个路由就是我们浏览器访问的地址

views 视图，express 官方推荐使用jade语法

app.js 是入口文件

package.json 项目依赖

### app.js文件释义 ###

cd server进入server目录

运行 node bin/www

打开 [http://127.0.0.1:3000/][http_127.0.0.1_3000]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70][]

说明我们的页面已经访问到了，上面我们说了，如果我们访问的是/就会默认访问index

这时因为routes/index.js路由有个/

var express = require('express');
    var router = express.Router();
    
    /* GET home page. */
    router.get('/', function(req, res, next) {
      res.render('index', { title: 'Express' });
    });
    
    module.exports = router;

这时它会去render index页面,也就是views下的index.jade，这时不用再去设置views文件夹路径了，因为app.js里面已经设置过了

app.set('views',path.jpin(\_\_dirname, 'views'));  所以在routes/index.js路由里面直接runder('index')就可以找到index.jade了,它传的变量是Express，所以index.jade里面拿到的是Express

extends layout
    
    block content
      h1= title
      p Welcome to #{title}

————————————————————————————————————————————————————————

## 如果大家不想使用jade语法，也可以使用html ##

安装 ejs

npm i ejs --save

在app.js中引入ejs

var ejs = require('ejs');

并设置

app.engine('.html',ejs.__express)

并且将app.js中的app.set('view engine', 'jade');模板引擎改为app.set('view engine', 'html');模板引擎

在views下建一个index.html页面

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Title</title>
    </head>
    <body>
        <h2>
            hello,Express is very Good!
        </h2>
    </body>
    </html>

运行 node server/bin/www

访问 [http://127.0.0.1:3000/][http_127.0.0.1_3000]

![20181118203137296.png][]————————————————————————————————————————————————————————

[20181118193946110.png]: /images/20220416/c84fdb50c8d242079a884735fc7abce5.png
[http_127.0.0.1_3000]: http://127.0.0.1:3000/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h5cGhm_size_16_color_FFFFFF_t_70]: /images/20220416/9c9d2dfd52af46d58f175c6643d3ec19.png
[20181118203137296.png]: /images/20220416/bef35dc7f7e14705872a9d7fca36ee04.png