开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

EJS和Express，不知道如何从根路径加载静态文件

EJS (Embedded JavaScript) 是一种简洁、灵活的模板引擎，可用于在服务器端生成动态的 HTML 页面。它允许开发人员在 HTML 页面中嵌入 JavaScript 代码，从而动态地生成内容并将其发送到客户端。

Express 是一个流行的 Node.js 后端框架，它提供了一组简化的工具和中间件，帮助开发人员构建 Web 应用程序。Express 具有强大的路由功能和模板引擎支持，其中包括 EJS。

要从根路径加载静态文件（例如 CSS、JavaScript 文件、图像等），可以使用 Express 的内置中间件函数 express.static。下面是一个简单的示例：

首先，确保已经安装了 Express 框架和 EJS 模板引擎。可以使用以下命令进行安装：

npm install express ejs

然后，创建一个名为 app.js 的文件，并在其中编写以下代码：

const express = require('express');
const app = express();

// 设置 EJS 模板引擎
app.set('view engine', 'ejs');

// 从根路径加载静态文件
app.use(express.static('public'));

// 定义根路径的路由处理程序
app.get('/', (req, res) => {
  res.render('index');
});

// 启动服务器
app.listen(3000, () => {
  console.log('Server started on port 3000');
});

在上面的代码中，public 目录是存放静态文件的文件夹。将你的静态文件（例如 CSS 文件）放置在该目录下。

接下来，创建一个名为 index.ejs 的文件，并将其放置在 views 目录下（如果没有该目录，则自行创建）。在该文件中，可以使用 EJS 的语法来嵌入动态内容。例如：

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to my website!</h1>
  <p>This is a static HTML page generated by EJS and served by Express.</p>
  <script src="script.js"></script>
</body>
</html>

在上面的示例中，我们使用了 styles.css 和 script.js 这两个静态文件，并使用相对路径进行引用。

最后，在命令行中运行以下命令以启动服务器：

node app.js

现在，当访问根路径 http://localhost:3000 时，Express 将会加载静态文件并将生成的 HTML 页面发送给客户端。

推荐的腾讯云相关产品和产品介绍链接地址：

腾讯云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云内容分发网络（CDN）：https://cloud.tencent.com/product/cdn
腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf
腾讯云数据库（TencentDB）：https://cloud.tencent.com/product/cdb
腾讯云人工智能：https://cloud.tencent.com/product/ai

相关搜索:Node.js express和ejs尝试将变量从js文件传递到ejs文件 Xamarin iOS:如何从文件路径加载WebP 如何从Bash中的路径字符串中删除文件后缀和路径部分？如何从URL中加载xml而不是.NET中的文件路径？如何从xib文件加载和显示窗口如何从相对路径加载c#中的json文件？如何使用android静态凭据从Google drive上传和检索文件如何使用angular和typescript从.graphql文件中加载查询如何使用express从ejs中获取复选框值和另一个值如何使用带有express和react的服务静态文件？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Express框架快速入门

利用 Express 托管静态文件 6. 在 Express 中使用模板引擎 7....Express基本路由路由是指如何定义应用的端点（URIs）以及如何响应客户端的请求。...中间件的用法 Express 是一个自身功能极简，完全是由路由和中间件构成一个的 web 开发框架：从本质上来说，一个 Express 应用就是在调用各种中间件。...利用 Express 托管静态文件通过 Express 内置的 express.static 可以方便地托管静态文件，例如图片、CSS、JavaScript 文件等。...将静态资源文件所在的目录作为参数传递给 express.static 中间件就可以提供静态资源文件的访问了。

5.1K1 0

带你零基础入门express

（就像我），你将如何完成这个任务？...这篇文章就是写给暂时不知道怎么完成的同学，我们一起来完成！...//先require var express = require('express'); var app = express(); //处理文件路径的模块 var path = require('path...*/ app.set('views', path.join(__dirname, 'views')); app.set('view engine', 'ejs'); /*静态文件处理,定义并创建一个目录...，存放你的静态文件，比如css，图片，前端js代码等等。

4.9K57 0

使用express框架开发，如何在ejs文件中导入外部的js、css文件

在使用ejs模版的过程中遇到了这个问题：如何在ejs模版中导入外部的js、css文件。我猜测，ejs和html导入外部文件的方式应该是不一样的。但是我还是决定试一试。...按照之前在html文件中的方式导入，结果失败。这也证明我之前的想法，这些静态文件一经过服务器，就不能直接进行导入了。那该如何导入呢？这是我的文件结构： ?...()这个方法具体的介绍，这里有篇文章，写的很好app.use(express.static)方法详解这样，就可以在ejs文件中导入外部静态文件了。 ...笔者这里的情况如下：基于node.js ，使用express开发一个blog网站：项目目录： ? 这里引用外部js和css文件的ejs页面的代码：我的public文件夹的路径配置： ? public文件夹下的静态资源结构： ?

9.8K0 0

使用express框架，如何在ejs文件中导入外部的js、css文件

最近在用nodejs写一点东西，当然也用到了express框架和ejs模版了。在使用ejs模版的过程中遇到了这个问题：如何在ejs模版中导入外部的js、css文件。...我猜测，ejs和html导入外部文件的方式应该是不一样的。但是我还是决定试一试。按照之前在html文件中的方式导入，结果失败。这也证明我之前的想法，这些静态文件一经过服务器，就不能直接进行导入了。...那该如何导入呢？这是我的文件结构： ? 我现在需要在index.ejs文件中导入public文件夹下的table.css以及table.js两个文件。...当然，上面的截图中的目录是我自己写的，下面是express自动生成的目录： ? 可以看到，其中的public文件夹是其自动生成的，也就是让你放静态文件的文件夹。...，这里有篇文章，写的很好app.use(express.static)方法详解这样，就可以在ejs文件中导入外部静态文件了。

6.4K0 0

Node.js 常见面试题速查

(process.argv); # node 有哪些相关的文件路径 __dirname 被执行的 js 所在文件夹的绝对路径 __filename 返回被执行的 js 的绝对路径 process.cwd...是直接拼接 path 片段， resolve 是解析路径并返回 # node 文件如何读取 const fs = require('fs'); // 同步 try { fs.unlinkSync...和 Koa 框架中间件有什么不同 express 中间件：通过 next 的机制，即上一个中间件会通过 next 触发下一个中间件(层层递归) koa2 中间件：通过 async/await 实现，中间件执行顺序是...，用来从 JSON 数据中生成 HTML 字符串 pug 是一款健壮、灵活、功能丰富的模板引擎,专门为 Node.js 平台开发 # node 如何利用多核 CPU 以及创建集群 nodejs 是基于...= require('express'); const path = require('path'); const ejs = require('ejs'); const app = express

7801 0

Node

以上代码就是自定义模块的基本规则这是重点 4.4 模块加载的顺序和规则在 CommonJS 规范中，使用 require() 加载(引入) 模块时，模块标识必须使用相对路径或绝对路径指明模块位置，但是在...中已经帮我们写好了路由的请求处理规则，不需要我们进行判断；路由是指确定应用程序如何响应对特定端点的客户端请求，该请求是URI（或路径）和特定HTTP请求方法（GET，POST等）。...移入，修改 index.html 加载 css 静态文件，在http.js中引入并设置静态资源加载路径： ?.../views/users.ejs” 和 “./views/user/show.ejs” 两个模板文件，你可以通过代码包含后者。...=new Koa(); server.listen(8080); //语法 ejs(server, { root: path.resolve(__dirname, 'template'), //根路径

10.6K3 1

Nodejs学习笔记（五）--- Express安装入门与模版引擎ejs

简介和安装　　Express是一个轻量级、简洁、易用的Node.js Web MVC开发框架，它基于Node.js原有进行了很多Web开发所需的功能封装......: 'Express'时，从显示效果来看，他直接输出HTML标签到页面上，输出的是转义后的变量值 2. 　　而这个标签，从显示效果上看，他没有直接输出HTML代码到页面上...，输出的是没有转义后的变量值 3. 　　而这个标签，从显示上看，他循环了出来参数中的值，标签中是javascript逻辑代码，注意括号的开闭合　　在这里，简单认识一下ejs，下面开始看看express...(__dirname, 'views')); 设置了模版文件夹的路径；主要清楚__dirname的意思就可以了，它是node.js中的全局变量，表示取当前执行文件的路径　　app.set('view...(path.join(__dirname, 'public'))); 这一句中可能要注意一下，express.static( )是处理静态请求的，设置了public文件，public下所有文件都会以静态资料文件形式返回

3.6K10 0

Node.js服务部署

目录结构 Public 公共静态资源 Route 路由（html路径） Template （视图层） Server服务器配置文件（总览全局） image.png 注册静态目录（我们自己创建的目录）在server.js...文件里配置 app.use(express.static('..../public')); image.png 配置网页路径（路由）route文件夹 image.png router.get('/shopping.html',function(request,response...response.send("Hello，欢迎进入使用express搭建的服务器"); 并配置路由文件下的 // 定义购物车路径为首页 router.get('/',function(request...,response){ // render()表示‘渲染’，并指定页面的来源是shopping.ejs image.png 页面跳转设置route路径，，，然后在需要跳转的地方直接写路由页面路径

1.9K2 0

NestJS学习总结篇

app.module.ts 应用程序的根模块。 main.ts 应用程序入口文件。它使用 NestFactory 用来创建 Nest 应用实例。...支持的命令常用命令：创建控制器：nest g co user module 创建服务：nest g s user module 创建模块：nest g mo user module 默认以src为根路径生成...', 'views')) // 放视图的文件 app.setViewEngine('ejs'); //模板渲染引擎 await app.listen(9000); } bootstrap();...：default文件夹下的index.ejs getUser(): any { return {message: "hello word"} //只有返回参数在模板才能获取，如果不传递参数...，必须返回一个空对象 } } Cookie的使用 cookie和session的使用依赖于当前使用的平台，如：express和fastify 两种的使用方式不同，这里主要记录基于express平台的用法

2.3K4 2

Node 概念及中间件

node_modules|bower_components(依赖模块) -> not found * 指定路径：找指定路径 -> not found模块化代码执行 * 模块里的代码从引入的那一行开始执行...* 导出的值从引入后调用的那一行开始执行三、express 包管理工具：npm、yarn、bower 接口响应 * 支持各种请求方式：get、post、put、delete......1','磁盘路径n')` * 合并磁盘片段，从右到左找根，找到从当前向右拼接，没有找到根，以当前文件路径为根（二）multer中间件 multer 接受 form-data编码数据，所有要求前端携带时应注意...let ejs = require('ejs') ejs.renderFile('ejs模板文件',{要合并到html数据},回调(err,data)) // err：错误，null代表没有错误...配置和使用 * 创建模块文件：`/router/xx.js` // 1.创建路由 let router = express.Router();

5.5K2 0

Express 配置HTML页面访问

Express 配置HTML页面访问 1.配置模板引擎 Express默认的模板引擎是pug（jade），想要渲染html页面必须要导入对应的模板引擎ejs npm install ejs 安装完成在...app.js文件中完成模板引擎的引入 var ejs = require('ejs'); // 配置Express 视图引擎 app.engine('html', ejs..../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，路径和在路由中注册的保持一致

8.2K2 0

基于 Express 应用框架的技术方案选型浅谈

插件篇主要讲述如何开发一个有趣的 Webpack 插件（Vue CLI / Babel 插件同理）。...，将 Web 前端的 Webpack 构建目录设置成 Express 的静态资源目录设置单页应用的路由和路由服务启动服务查看页面是否可以渲染成功以上实现过程记录在一个简单的示例 rewatch 里...设计完成后将开发态页面使用 Webpack 打包构建，构建目录为服务端 Express 的静态资源目录。首屏渲染的工作交给 Ejs 模板引擎（事实上也可以直接使用 HTML 字符串渲染）进行处理。...但是如果应用较大，首次请求静态资源和进行页面动态渲染的过程中会产生以下问题：首屏加载慢，产生白屏效果不利于 SEO 为了解决上述客户端的渲染问题，需要实现 React 服务端渲染。...不需要深入了解 ES6 / ES7 / JSX 等语法，因此不需要学习和使用 Webpack 配置。使用 Ejs 模板引擎进行渲染的 Express 应用，是天然的服务端渲染应用。

7K3 0

Node.js基于Express框架搭建一个简单的注册登录Web功能

是项目的静态文件，放置js css img等文件 routes是项目的路由信息文件,控制地址路由 views是视图文件，放置模板文件ejs或jade等（其实就相当于html形式文件啦~) express...注销吧，注销后清除session值，然后跳转到根路径 ? 然后试一下浏览器直接进入 home路径？浏览器地址输入 localhost:3000/home 回车， ok 它自动跳转到登录界面 ?...好现在开始解析如何构建这个小项目：因为我们直接使用了后缀名 .html ，所以我们要先修改一下ejs模板，再把原来views目录下模板文件后缀改成 .html var app = express(...__express 和renderFile都可以，不用管它是什么，它能那样用就行了然后我们知道需要这些模板文件，那就创建它们吧 ?.../register 然后我们就通过路由功能根据此路径来处理信息（这个跟ajax和php交互是同一个道理） <!

7.2K1 0

Express进阶升级

, title, xiyou}); console.log(result); /views/index.ejs：文件后缀 .ejs 用于标识这是一个 EJS模板文件，开发者在项目中可以轻松识别和区分模板文件...#package.json 文件包含应用的依赖和其他配置信息 ├── public #public 目录用于存放静态资源 │ ├── images #如图像、JavaScript文件和样式表...还是有点无从下手经过上述文件分析，我们大致了解如何定义自己的路由规则了： /routes 中定义路由文件——>并配置在app.JS中进行引用、暴漏 /views 中定义ejs等模板资源——>app.JS...目录用于存放静态资源 │ ├── images #如图像、JavaScript文件和样式表: 框架启动后可以直接通过URL访问: │ ├── ├──01.png #即可通过: http...per_page、过滤views_gt、范围_start和_end等静态文件：如果你创建了一个.

2201 0

Node.js学习笔记（三）——Node.js开发Web后台服务

、挂载静态资源下面是一些例子，在Express程序中使用express.static中间件。...'))) 在/static路径下挂载中间件来提供静态资源托管服务，只当请求是以/static为前缀的时候 // GET /static/style.css etc. app.use('/static',...express.static(path.join(__dirname, 'public'))) 通过在设置静态资源中间件之后加载日志中间件来关闭静态资源请求的日志 app.use(express.static...常见属性有： req.app：当callback为外部文件时，用req.app访问express的实例 req.baseUrl：获取路由当前安装的URL路径 req.body / req.cookies...res.send()：传送HTTP响应 res.sendFile(path [，options] [，fn])：传送指定路径的文件 -会自动根据文件extension设定Content-Type res.set

7.9K3 0

Express 框架的特点、使用方法以及相关的常用功能和中间件

接下来，你可以使用这个 app 对象来定义路由和中间件等。定义路由在 Express 中，路由用于定义客户端请求的路径与服务器端的处理逻辑之间的映射关系。...以下是一些常用的内置中间件：express.static()：用于提供静态文件服务，例如 HTML、CSS、JavaScript 文件等。...以下是一个使用 EJS（Embedded JavaScript）模板引擎的示例：首先，安装 EJS 模块：$ npm install ejs然后，在 Express 应用程序中设置 EJS 模板引擎：app.set...('view engine', 'ejs');接下来，创建一个名为 index.ejs 的模板文件：<!...通过本文的介绍，你应该对 Express 框架有了更深入的了解，并学会了如何安装 Express、创建应用程序、定义路由、使用中间件和模板引擎等。

4453 0

Nodejs开发框架Express3.0开发手记–从零开始

(每个项目管理自己的依赖，与Maven,Gradle等不同) package.json，项目依赖配置及开发者信息 app.js，程序启动文件 public，静态文件(css,js,img) routes...，路由文件(MVC中的C,controller) Views，页面文件(Ejs模板) 3....Ejs模板使用让ejs模板文件，使用扩展名为html的文件。修改：app.js app.engine('.html', ejs....Session使用从刚来的例子上面看，执行exports.doLogin时，如果用户名和密码正确，我们使用redirect方法跳转到的home res.redirect('/home'); 执行exports.home...如果我们想保存session数据，也是需要找到一个存储，通过文件存储,redis,Mongdb都可以。接下来，我将演示如何通过mongodb来保存session，并实现登陆后用户对象传递。

5.8K12 0

模块化

在nodejs中，可以通过exports或module.exports 和 require 实现模块化 exports 和 module.exports的区别？...: 判断当前路径是否是绝对路径 ---*join : 合并路径 Fs Fs - file system 文件系统：在nodejs中用于操作文件的核心模块...Use() 只要有请求就会执行use中的回调函数 ) 通过express.static(‘路径’）设置静态路径 --------app.use(express.static(‘路径’)) Express...中res： sendFile() -----------直接把文件发送到前端，里面的参数必须是绝对路径 Express中res: send() -----------Res.send() = write...创建views文件夹把.ejs文件放到views中就代表页面中要变的那个部分对应于： render（）中的第二个参数路由请求方法加上请求路径就是路由 App.get

1.8K2 0

Express4.x API (一)：application (译)

例如，如果你把下面内容放在所有其他的路由定义的前面，它要求所有从这个点开始的路由需要认证和自动加载一个用户。...默认情况下，Express需要使用require()来加载基于文件扩展的引擎。...举个栗子，使用ejs模板引擎来渲染.html文件： app.engine('html',require('ejs').renderFile); 在这个例子中，ejs提供了一个.renderFile方法，...__dirname + '/public')); 通过在设置静态资源中间件之后加载日志中间件来关闭静态资源请求的日志。...app.use(express.static(__dirname + '/public')); app.use(logger()); 托管静态资源从不同的路径，但.

3K10 0

【NodeJS】归纳篇（三）Express | 链式操作 | cookie && session | 模板引擎 | Router | mysql

server = express();//1、创建服务 //3、响应请求 //use() 添加响应 server.use('/a.html',function(req,res){ //req和res是经过...方式的请求改进 express-static 处理静态文件的中间件 const express = require('express'); const expressStatic = require(.../www'));//从www这个目录下读取静态文件处理数据 const express = require('express'); const bodyParser = require('body-parser...= express(); server.listen(8080); server.use(function(req,res,next){//没有第一个参数，则对所有路径请求都接收 //原生写法...,需求先指定上传后文件的存储位置。

2282 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭