express怎么读取html,Express 配置HTML页面访问的实现

1.配置模板引擎

Express默认的模板引擎是pug(jade)，想要渲染html页面必须要导入对应的模板引擎ejs

npm install ejs

安装完成在app.js文件中完成模板引擎的引入

var ejs = require('ejs');

// 配置Express 视图引擎

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

app.set('view engine', 'html');

2.配置页面路由

如果页面不是放在public目录下，那么就必须要通过配置路由来进行访问。

假设我的文件目录如下

|-views(在根目录下)

|--mplat

|---pages

|----console.html

|---index.html

在app.js中配置全局变量

// 配置 mplat 渲染页面

app.set('mplat',path.join(__dirname,'views/mplat'))

这样子在别处使用的mplat等同于path.join(__dirname,'views/mplat')

在routers目录下新建mplat.js，把两个html文件加入映射

var express = require('express');

var router = express.Router();

/* GET mplat page. */

router.get('/', function(req, res, next) {

res.render('mplat/index.html', { title: 'DisCloudDisk' });

});

router.get('/console',function (req,res,next) {

res.render('mplat/pages/console.html', { title: 'Console' });

})

module.exports = router;

在app.js中引入文件路由

app.use('/mplat',require('./routes/mplat'));

这样子配置完成后，只需要访问 http://$host/mplat即可返回index.html

3.修改静态文件引入

在app.js中定义静态文件目录

app.use(express.static(path.join(__dirname, 'public')));

在页面引入css和js文件只需要默认在前面加上public即可，写法如下

实际目录为public/lib/layui/layui.js

4.页面路由

html页面的跳转也有变化，需要在路由中注册对应的界面，比如我在index访问console，路径和在路由中注册的保持一致。

height="100%">

到此这篇关于Express 配置HTML页面访问的实现的文章就介绍到这了,更多相关Express HTML页面访问内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

时间： 2020-10-30

express怎么读取html,Express 配置HTML页面访问的实现相关推荐

Node.js Express博客项目实战之前台页面数据的显示
前台页面数据通过连接数据库信息将数数据显示在页面上: 最终实现的效果: 前台的路由: 1 // 导入express 2 3 let express = require("express&qu ...
Node之Express服务器启动安装与配置
Node之Express服务器启动安装与配置首先安装express-generator cnpm i -g express-generator 使用express --version查看expres ...
Outlook Express邮件客户端的自动化配置
出处: http://www.cnblogs.com/blodfox777/archive/2009/01/13/1374907.html Outlook Express邮件客户端的自动化配置在部 ...
Express框架简介、express使用模块引擎、模式数据
Express简介: 原生的http不足以应对我们的开发需求,所以我们需要使用框架来加快我们的开发,这里推荐expressjs,其官网:expressjs.com,中文文档推荐:http://java ...
怎么通过id渲染页面_「快页面」动态配置化页面渲染器原理介绍
引言「快页面」是知乎内部一个快速搭建后台管理页面的平台,使用者仅用半小时即可将一个常规复杂度的后台页面开发完成. 「快页面」平台的基石是它的「渲染器」,一个能将 JSON 配置渲染成页面的 Reac ...
实战 Vue 之配置多页面应用
配置多页面应用前言一.搭建 Vue 脚手架二.调整项目结构三.修改相关配置四.验证结果五.总结前言最近一直在做企业钉钉应用开发,即每个功能模块都是一个单独的应用,单独的页面,配置到钉钉 ...
Node.js—Express、Express 路由、Express 中间件、使用 Express 写接口
目标: 能够使用 express.static() 快速托管静态资源能够使用 express 路由精简项目结构能够使用常见的 express 中间件能够使用 express 创建API接口能够 ...
Node 学习 | Day03 express （初识Express、Express 路由、Express 中间件、使用 Express 写接口）
Express 初识Express 1.1 Express 简介 1.1.1 什么是 express 1.1.2 进一步理解 Express 1.1.3 Express可以做什么 1.2 Expres ...
webpack4+react配置多页面移动端应用程序
webpack4+react配置多页面移动端应用程序前言技术栈项目目录结构移动端适配方案 webpack配置基础配置开发环境配置 react+redux热重载生产环境配置 .babelr ...

express怎么读取html,Express 配置HTML页面访问的实现

express怎么读取html,Express 配置HTML页面访问的实现相关推荐

最新文章

热门文章