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即可，写法如下

<script src="/lib/layui/layui.js"></script>

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

4.页面路由

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

 <iframe src="/mplat/console" frameborder="0" scrolling="yes" width="100%"
            height="100%"></iframe>

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

赞 (0)

相关推荐

  • Nodejs+express+html5 实现拖拽上传

    Nodejs+express+html5 实现拖拽上传

    一.前言 文件上传是一个比较常见的功能,传统的选择方式的上传比较麻烦,需要先点击上传按钮,然后再找到文件的路径,然后上传.给用户体验带来很大问题.html5开始支持拖拽上传的需要的api.nodejs也是一个最近越来越流行的技术,这也是自己第一次接触nodejs,在nodejs开发中,最常用的开发框架之一是expess,它是一个类似mvc模式的框架.结合html5.nodejs express实现了拖拽上传的功能. 二.基础知识普及 1.NodeJs基础知识 nodejs简单来说就是一个可以让j

  • 详解Express笔记之动态渲染HTML(新手入坑)

    在日常项目中,我喜欢用Django做后端, 因为大而全 如果只是写一个简单服务的话, Express是更好的选择, Express是基于nodejs的一个后端框架,特点是简单,轻量, 容易搭建, 而且性能非凡,下面我们就用最少的步骤搭建一个Express的后端服务吧! 创建文件夹 mkdir express-simple-server 初始化项目 cd express-simple-server npm init -y   安装Express npm install express 在根目录下创

  • node express使用HTML模板的方法示例

    前言 一般我们在做node web项目的时候,想使用我们平时常用的html模板,express默认使用jade模板,本身是没有HTML的,那么如何实现呢? ejs模板配置 使用 var app = express(); app.set('views', path.join(__dirname, 'views')); //设置视图引擎 app.set('view engine', 'ejs'); html模板配置 安装ejs npm install ejs -D 引入 var ejs = requ

  • Express使用html模板的详细代码

    express默认使用jade模板,可以配置让其支持使用ejs或html模板. 1. 安装ejs 在项目根目录安装ejs. npm install ejs 2.引入ejs var ejs = require('ejs'); //我是新引入的ejs插件 3.设置html引擎 app.engine('html', ejs.__express); 设置视图引擎 app.set('view engine', 'html'); 保存后重启服务,即可访问html文件. 注:在express搭建的服务器中,

  • 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目录下,那么就必须要通过配置路由

  • Servlet实现统计页面访问次数功能

    Servlet实现统计页面访问次数功能

    本文实例为大家分享了Servlet实现统计页面访问次数的具体代码,供大家参考,具体内容如下 实现思路: 1.新建一个CallServlet类继承HttpServlet,重写doGet()和doPost()方法: 2.在doPost方法中调用doGet()方法,在doGet()方法中实现统计网站被访问次数的功能,用户每请求一次servlet,使得访问次数times加1: 3.获取ServletContext,通过它的功能记住上一次访问后的次数. 在web.xml中进行路由配置: <!-- 页面访问

  • 关于SpringSecurity配置403权限访问页面的完整代码

    关于SpringSecurity配置403权限访问页面的完整代码

    1.未配置之前 2.开始配置 2.1 新建一个unauth.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>没有访问的权限</h1> </body> </html&

  • NodeJS Express使用ORM模型访问关系型数据库流程详解

    目录 一.ORM模型 二.在Node中ORM的实现 一.ORM模型 设计思想,主要目的是简化计算机程序访问数据库 1.ORM:对象关系模型(对象关系映射) Object Releastion Model,将程序中的对象和数据库中关系(表格)进行映射.可以使开发者在程序中方便的对数据库进行操作(用户在程序操作对对象实际就是操作数据库的表格) 2.ORM的映射关系: (1)程序中的模型(即为类) <——>表名 (2)模型的类型(类中定义的属性)<——> 表的列 (3)由模型创建的对象(

  • Node.js+Express配置入门教程详解

    Node.js+Express配置入门教程详解

    Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V8引 擎执行Javascript的速度非常快,性能非常好.Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好.Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O 模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型

  • Node.js+Express配置入门教程

    Node.js+Express配置入门教程

    Node.js是一个Javascript运行环境(runtime).实际上它是对Google V8引擎进行了封装.V8引 擎执行Javascript的速度非常快,性能非常好.Node.js对一些特殊用例进行了优化,提供了替代的API,使得V8在非浏览器环境下运行得更好.Node.js是一个基于Chrome JavaScript运行时建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.Node.js 使用事件驱动, 非阻塞I/O模型而得以轻量和高效,非常适合在分布式设备上运行的数据密集型的

  • vue 配置多页面应用的示例代码

    前言: 本文基于vue 2.5.2, webpack 3.6.0(配置多页面原理类似,实现方法各有千秋,可根据需要进行定制化) vue 是单页面应用.但是在做大型项目时,单页面往往无法满足我们的需求,因此需要配置多页面应用. 1. 新建 vue 项目 vue init webpack vue_multiple_test cd vue_multiple_test npm install 2. 安装 glob npm i glob --save-dev glob 模块用于查找符合要求的文件 3. 目

  • Vue单页及多页应用全局配置404页面实践记录

    前后端分离后,控制路由跳转的责任转移到了前端,后端只负责给前端返回一个html文档以及提供各种接口.下面我们用作例子的两个项目,均采用vue作为基础框架,一个是SPA应用,另一个是多页应用,均由前端进行路由控制及渲染的. 总体思路 无论单页还是多页,我的实现思路是总体配置404页面的思路就是在前端路由表中添加一个 path: '/404' 的路由,渲染相应的404页面.同时,配置一个规则,当在用户可访问的路由表中的所有路由都无法匹配的时候,自动跳转重定向至该404页面.下面来说一下针对单页和多页

  • Linux安装Jenkins步骤及各种问题解决(页面访问初始化密码)

    1. 准备java环境,jdk1.8 检查java是否安装,如果没有则先安装java环境:java -version 2. 安装Jenkins 官网:https://wiki.jenkins-ci.org/display/JENKINS/Installing+Jenkins+on+Red+Hat+distributions#InstallingJenkinson (1)安装稳定版 sudo wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenk

  • Java +Tomcat + SpringMVC实现页面访问示例解析

    window7下Java环境安装记录:  一.安装Tomcat 1.下载tomcat 7.0,解压,无需安装,放置到目录:D:\apache-tomcat-7.0.90. 2.配置系统环境变量,CATALINA_BASE=D:\apache-tomcat-7.0.90,CATALINA_HOME=D:\apache-tomcat-7.0.90,在Path中新增"%CATALINA_HOME%\lib;%CATALINA_HOME%\bin"的环境变量. 3.进入D:\apache-to

随机推荐