Express-Generator 快速构建 Web 应用

创建项目

环境:node14.17 、express4.16

快速开始

express app
cd app
npm init -y
npm run start
复制代码

至此一个包含部署服务的应用程序Web项目就创建好了。

文件目录结构

app
│  app.js		// 应用程序的创建/配置
│  package.json
│  
├─bin
│      www  	//部署http server
│      
├─public
│  ├─images
│  ├─javascripts
│  └─stylesheets
│          style.css
│          
├─routes	
│      index.js
│      users.js
│      
└─views
        error.jade
        index.jade
        layout.jade
        
复制代码

路由

除了默认的路由,还需要添加额外的路由。

定义路由

routes文件夹中新增路由index.js

/* routes>index.js */

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

router.get('/index', function (req, res, next) {  
    // response something
});

module.exports = router;
复制代码

路由视图

路由页面由响应的视图(HTML)来呈现,响应方式也有很多种,这里修改了原有的views文件结构,分别管理不同的视图文件:

views
├─html
│      index.html
│      users.html
├─ejs
│      index.ejs
│      users.ejs
├─jade
│      index.jade
│      users.jade
│      layout.jade
复制代码

配合匹配不同类型的视图文件,路由模块也做了相应修改:

routes
├─file
│      index.js
│      users.js
├─engine
│      index.js
│      users.js
复制代码

HTML文件

如果你的页面是简单静态的,可以选择直接响应HTML文件来呈现路由页面。

需要呈现的HTML
<!-- views>html>index.html -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML</title>
    </head>
    <body>
        <h1>一个普通的HTML页面</h1>
    </body>
</html>
复制代码
路由响应
/* routes>file>index.js */

var express = require('express');
var router = express.Router();
var fs = require('fs');

router.get('/', function (req, res, next) {
    const file = fs.readFileSync('views/html/index.html', 'utf-8') // fs的绝对路径 和 文件对应的编码方式 很重要
    res.send(file)
});

module.exports = router;
复制代码

无需任何模板引擎(engine)的配置,就可以直接呈现HTML页面。

模板引擎

模板引擎可以让我们通过变量传递动态控制视图内容,不同的模板引擎还提供不同的简洁语法,各有千秋。

express-generator使用了jade作为默认的模板引擎。

安装模板引擎(ejs)
npm i ejs
复制代码
挂载模板引擎
/* app.js */

app.set('views', path.join(__dirname, `views/ejs`)); // 批量导入视图文件
app.set('view engine', 'ejs'); // 挂载模板引擎
复制代码
模板视图文件
<!-- views>ejs>index.ejs -->

<h2><%= template %></h2>
<p> Welcome to <%= index %></p>
复制代码
路由响应

在路由响应中使用res.render(view,data),这个API传入视图文件名(view)称和传递的数据(data),最终返回一个HTML

/* routes>file>index.js */

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

router.get('/index', function (req, res, next) {
    res.render('index', {
        template: 'EJS ',
        message: 'index',
    });
});

module.exports = router;
复制代码
自定义模板引擎(nuj)

自定义一个模板引擎,可根据喜好设计模板语法,相应渲染时就需要解析为HTML;当然也可以什么都不做,直接返回文件内容。

/* app.js */

app.set('views', path.join(__dirname, `views/html`));
app.set('view engine', 'nuj');

// setup nuj engine
app.engine('nuj', function (filePath, options, callback) {
    // 处理文件内容...
    fs.readFile(filePath, function (error, content) {
        if (error) return callback(new Error(error))
        var renderContent = content.toString().replace('%title%','<title>'+options.title+'</title>')
        return callback(null, renderContent)
    })
})
复制代码

路由挂载

需要注意的是,如果在routes>*>index.js中已经定义了路径/index,挂载时就不要重复设定路径了。

file 响应路由

/* app.js */

app.use('/', require('./routes/file/index'));  
// app.use('/about', require('./routes/file/index'));  // 重复设定路径
复制代码

render 模板引擎路由

/* app.js */

app.use('/', require('./routes/engine/index'));  
复制代码

路由匹配

……

免责声明:务必仔细阅读

  • 本站为个人博客,博客所转载的一切破解、path、补丁、注册机和注册信息及软件等资源文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。

  • 本站为非盈利性站点,打赏作为用户喜欢本站捐赠打赏功能,本站不贩卖软件等资源,所有内容不作为商业行为。

  • 本博客的文章中涉及的任何解锁和解密分析脚本,仅用于测试和学习研究,禁止用于商业用途,不能保证其合法性,准确性,完整性和有效性,请根据情况自行判断.

  • 本博客的任何内容,未经许可禁止任何公众号、自媒体进行任何形式的转载、发布。

  • 博客对任何脚本资源教程问题概不负责,包括但不限于由任何脚本资源教程错误导致的任何损失或损害.

  • 间接使用相关资源或者参照文章的任何用户,包括但不限于建立VPS或在某些行为违反国家/地区法律或相关法规的情况下进行传播, 博客对于由此引起的任何隐私泄漏或其他后果概不负责.

  • 请勿将博客的任何内容用于商业或非法目的,否则后果自负.

  • 如果任何单位或个人认为该博客的任何内容可能涉嫌侵犯其权利,则应及时通知并提供身份证明,所有权证明至admin@proyy.com.我们将在收到认证文件后删除相关内容.

  • 任何以任何方式查看此博客的任何内容的人或直接或间接使用该博客的任何内容的使用者都应仔细阅读此声明。博客保留随时更改或补充此免责声明的权利。一旦使用并复制了博客的任何内容,则视为您已接受此免责声明.

您必须在下载后的24小时内从计算机或手机中完全删除以上内容.

您使用或者复制了本博客的任何内容,则视为已接受此声明,请仔细阅读


更多福利请关注一一网络微信公众号或者小程序

一一网络微信公众号
打个小广告,宝塔服务器面板,我用的也是,很方便,重点是免费的也能用,没钱太难了,穷鬼一个,一键全能部署及管理,送你3188元礼包,点我领取https://www.bt.cn/?invite_code=MV9kY3ZwbXo=


一一网络 » Express-Generator 快速构建 Web 应用

发表评论

发表评论

一一网络-提供最优质的文章集合

立即查看 了解详情