如何在express中用javascript和html制作类似window文件夹视图的列表视图？
在Express中使用JavaScript和HTML制作类似Windows文件夹视图的列表视图，可以通过以下步骤实现：
- 首先，确保已经安装了Express框架，并创建一个新的Express应用程序。
- 在应用程序的根目录下创建一个名为
views的文件夹，并在其中创建一个名为index.html的文件。 - 在
index.html文件中，使用HTML和CSS创建一个列表视图的基本结构。可以使用<ul>和<li>标签来创建列表和列表项。 - 在Express应用程序的主文件（通常是
app.js或index.js）中，设置静态文件目录，以便可以访问到index.html文件。可以使用express.static中间件来实现这一点。 - 创建一个路由处理程序，用于处理对根路径的GET请求。在该处理程序中，使用
res.render方法来渲染index.html文件。 - 在
index.html文件中，使用JavaScript代码来动态生成列表项。可以使用document.createElement方法来创建新的HTML元素，并使用appendChild方法将其添加到列表中。 - 使用JavaScript代码来获取文件夹中的文件列表。可以使用
fs模块的readdirSync方法来同步读取文件夹中的文件列表。 - 将获取到的文件列表传递给前端，以便在列表视图中显示。可以使用Express的路由处理程序中的
res.render方法，将文件列表作为参数传递给index.html文件。 - 在
index.html文件中，使用JavaScript代码来遍历文件列表，并将每个文件名添加为列表项。 - 最后，启动Express应用程序，并在浏览器中访问根路径，即可看到类似Windows文件夹视图的列表视图。
请注意，以上步骤仅提供了一个基本的实现思路，具体的代码实现可能会根据需求和具体情况有所不同。此外，还可以使用一些前端框架（如React、Vue.js）来简化开发过程，并提供更丰富的交互和样式效果。
关于腾讯云相关产品和产品介绍链接地址，由于要求不能提及具体的云计算品牌商，无法给出具体的链接地址。但腾讯云提供了丰富的云计算服务，包括云服务器、云数据库、云存储等，可以根据具体需求选择相应的产品进行使用。
相关·内容
1回答
将角2添加到现有的快速结构中
javascript、node.js、express、angular、typescript
我使用express-generator创建了一个表达式结构，给出了标准结构：
bin
bld
node_modules
public routes
views
app.js
package.json
我想在视图和路由目录中添加如下内容：
views
->angular2
->->index
->->about
->->services
->->contact
->->sign up
->->sign in
使用路由、索引文件夹(index.js)和关于文件夹(about.js) ...and等.：
ro
浏览 2提问于2016-08-11得票数 0
回答已采纳
1回答
公司因为业务需求，需要上传文件夹（里面为png图）到腾讯云，上传文件数量较少的文件时能够上传成功！当文件数量较大时出现403.代码参照腾讯云web端直传实践来写的https://cloud.tencent.com/document/product/436/9067，请求获取签名后来上传，
QQ截图20190218154305.png
只是前端加了个循环来上传文件夹中的每一个文件。
浏览 2341提问于2019-02-18
1回答
express.js:改变路由器和静态的顺序使静态文件产生404错误
static、express、router
当我用
app.use(express.cookieParser());
app.set('views', path.join(__dirname, 'views'));
app.engine('html', consolidate.underscore);
app.set('view engine', 'html');
app.use(express.favicon(path.join(__dirname, 'public/favicon.ico')));
app.use(express.logg
浏览 3提问于2013-11-30得票数 1
1回答
如何快速呈现多个静态文件？
javascript、node.js、express、server、routes
我正在尝试使用express从我的公用文件夹中呈现几个不同的html文件。这些都是静态文件。如果一个路由是无效的路由被调用，我还想呈现一个404页面。这是我的密码。
const express = require("express")
const app = express()
app.use(express.static("public"))
app.get("/", (req, res) => {
res.render("index")
})
app.get("/about", (req,
浏览 6提问于2022-02-27得票数 0
1回答
如何添加我现有的视图、样式表、要表达的javascripts？
node.js、express
我有一个现有的编码前端，即视图、javascripts、样式表()，我打算将其添加到express框架中，以便将其链接到db。我将内容添加到公用文件夹中。javascript文件夹中的javascript、样式表中的css和图像文件夹中的图像。然后，我根据这个app.js修改了的代码
现在，当运行app.js并在浏览器中打开页面时，我得到了原始页面的剥离版本。控制台中没有出现错误。这是我的app.js
/**
* Module dependencies.
*/
var express = require('express');
var routes = require(&
浏览 2提问于2013-12-28得票数 0
回答已采纳
1回答
前端和后端与快门
node.js、express
目前，我正在使用express.js开发一个web应用程序。我想有一个前端和后端。前端应该显示数据库中的一些内容，在后端我希望创建这个内容(类似于cms)。
我从这个文件夹结构开始：
app/
├── frontend/
│ ├── public //Javascript, css & images only for frontend
│ ├── views //Frontend jade templates
│ └── client.js
│
├── backend/
│ ├── public //Only backend
浏览 2提问于2014-08-06得票数 9
回答已采纳
3回答
如何在expressJS服务器中从客户端提供index.html静态文件？
node.js、reactjs、express、webpack
前端：
我有一个由Webpack生成的dist/index.html文件来为用户服务。
后端nodeJs服务端：
我也有一个nodeJs服务器，它想要提供静态文件从服务器包括index.html从服务器。
app.use(express.static('server-side-public-folder'))
router.get('/*', (req, res) => {
res.render('index.html', {secret: secret1});
});
问题：
有没有办法从客户端而不是服务器端来服务index.ht
浏览 3提问于2018-12-18得票数 0
5回答
微信小程序人脸与身份证照片对比登录,后端做什么？
官方文档、小程序·云开发
微信小程序前端和后端分别要做些什么 ? 所有需要的东西有哪些 ? (请尽量详细点)
标题：人脸识别 - 智能图像服务 - 产品文档 - 帮助与文档 - 腾讯云
地址：https://cloud.tencent.com/document/product/641/12397
浏览 2459提问于2018-01-24
1回答
如何配置express.static从谷歌云CDN拉取静态内容？
angularjs、google-app-engine、express、google-cdn
我正在尝试在谷歌云应用程序引擎中托管一个Angular应用程序。使用express来提供内容，而static应该来自于google CDN。
构建Dist并将其交付到CDN。CDN存储桶也已共享。
我把它作为一个基本的express应用程序来处理，它提供本地./dist文件夹中的静态内容。如何配置才能与CDN协同工作？
'use strict';
var express = require('express');
var app = express();
app.use(express.static('dist'));
app.get('
浏览 17提问于2016-09-09得票数 0
30回答
呈现基本的HTML视图？
javascript、html、node.js、mongodb、express
我有一个基本的Node.js应用程序，我正试图通过使用Express框架来启动它。我有一个views文件夹，其中有一个index.html文件。但是，在加载网页时，我会收到以下错误：
Error: Cannot find module 'html'
下面是我的密码。
var express = require('express');
var app = express.createServer();
app.use(express.staticProvider(__dirname + '/public'));
app.get('/&#
浏览 29提问于2010-12-25得票数 316
回答已采纳
1回答
什么是现代web应用程序中的“API第一体系结构”？
angularjs、node.js、rest、api、express
我试图理解API第一个应用于web应用程序的体系结构，并在这里发现了一些信息，。
下面我附上一个例子，以更好地回答这些问题。我开始使用Angular.js作为前端。Node.js，服务器的Express.js。
文件夹结构
|-- server.js
|-- app
|-- models
|-- views
|-- index.html
|-- about.html
|-- contact.html
|-- controllers
|-- app.js
浏览 0提问于2017-09-08得票数 3
回答已采纳
1回答
糟糕的应用程序。两个服务器同时提供快递，NodeJS，角2
javascript、node.js、angular、express、mean-stack
我试图连接后端(NodeJS，Express)与前端(角2)，但有一个问题。
当我分别启动两个服务器时，客户端和服务器端都可以正常工作。在我的情况下: localhost:4200 -角本地主机:3000- NodeJS，Express
当我在视图文件夹中呈现任何静态html文件时，它正常工作，但是当我将html文件的内容更改为角Index.html (使用组件)时，它就不能工作了。我的意思是，它可以工作，但不装载我的组件。
我认为这个问题在配置中，而且我的index.html不知道如何查找和加载组件，但我不知道具体的错误在哪里。
当我试图在同一个端口启动两个服务器时，我的前端部分就停止工作了
浏览 2提问于2017-01-24得票数 1
1回答
未在Express中呈现react组件的react应用程序
reactjs、express
我正在使用React和node.js构建一个MVC应用程序。公用文件夹中有index.html，视图文件夹中有index.jsx
然后，我启动我的服务器，转到localhost，我看到一个空白页，我尝试了许多解决方案，但它们都没有解决问题。
这是文件结构
+-- app.js
+-- public
| +-- index.html
+-- routes
| +-- index.js
+-- views
| +-- index.jsx
这是根目录中的app.js
var createError = require('http-erro
浏览 0提问于2019-12-17得票数 1
1回答
如何在Node项目中渲染Angular项目中的索引
node.js、angular、express、server-side-rendering
我有两个文件夹放在一个主文件夹中，一个叫前端，有一个angular项目，另一个叫后端，这个文件夹有一个后端和所有的API。我会像SSR项目一样切换这个项目，可以将angular项目集成到一个节点项目中，然后当我执行
npm run dev
并且node项目在各自的端口上启动，前端自动在其中启动。
我尝试了多种方法来创建从一个文件夹到另一个文件夹的路径，但都没有成功。
如果我这样做
const indexTest = (path.join(__dirname, `../frontend/src/index.html`))
server.get('/', (r
浏览 5提问于2021-05-21得票数 0
回答已采纳
1回答
如何将mysql数据呈现到玉文件中？
mysql、node.js、express、pug
我使用express ~4和mysql来存储数据，我可以创建用户数据库和user_info表。当我点击“注册页面的创建”按钮时，数据库正在更新，我被重定向到用户页面，它应该呈现包含用户信息的show.jade文件，即电子邮件地址和用户名。但它显示用户没有定义。和管理页面，即locahost:3000/myuser，按预期显示数据库中所有用户的列表，但它没有显示用户名
请帮帮忙
根文件夹中的app.js文件
app.js文件
var express = require('express');
var mysql = require('mysql&
浏览 3提问于2016-02-20得票数 0
5回答
使用Web的纯前端JavaScript与使用ajax的MVC视图
javascript、asp.net-mvc、ajax、asp.net-mvc-web-api
这更多地是讨论了现在人们对如何分割web应用程序的想法。
我习惯于创建一个包含所有视图和控制器的MVC应用程序。我通常会创建一个完整的视图，然后在一个完整的页面请求中将其传回浏览器，除非有一些特定的区域我不想马上填充，然后使用DOM页面加载事件调用服务器来使用AJAX加载其他区域。
另外，当涉及到部分页面刷新时，我会调用一个MVC操作方法，它将返回HTML片段，然后我可以使用该片段填充页面的部分内容。这将适用于我不希望减缓初始页面加载速度的区域，或者更适合AJAX调用的区域。一个例子是表分页。如果您想继续下一页，我更希望AJAX调用获得该信息，而不是使用完整的页面刷新。但是AJAX调用仍然会返
浏览 0提问于2014-05-10得票数 16
1回答
React和Express的路由有什么区别？
reactjs、express、react-router、express-router
我很难理解前端路由和后端路由之间的区别。
我的基本理解是，React路由器将将组件映射到URL，如下所示：
<Router>
<div>
<Header />
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/topics" component={Topi
浏览 0提问于2019-05-06得票数 3
回答已采纳
1回答
使用nodejs创建动态路由
javascript、node.js、express、routes
app.js
// Calling Routes
require("./routes")(app);
路由器文件夹index.js
module.exports = function (app) {
app.use("/", require("./all_routes"));
}
all_routes.js
var express = require("express");
var router = express.Router();
router.get("/", function (req, re
浏览 2提问于2021-11-26得票数 0
回答已采纳
2回答
在mern堆栈应用程序中，我将上传的图像或文件存储在哪里？
node.js、express、next.js
我在做一个项目。我为rest api使用node和express，为前端使用next js。
我有表单，用户可以添加新的产品。
上传的图片应该存放在哪里？
我应该在网站文件夹根目录中创建文件夹uploads还是在client/public/assets/img/中上传图像
如果我在根目录中创建了一个上传文件夹，我应该如何在前端访问这些图像？
我知道如何上传图片或文件。我只想知道存放它们的最佳位置
这是我的项目结构
Website
--------
client
-------
components
pages
public
styles
...
浏览 2提问于2021-03-20得票数 0
1回答
在添加更多路由后，每个页面上的express.js错误500
javascript、node.js、express
我使用的是最新版本的express，并使用express生成器创建了我的基本文件夹和文件结构。现在，在app.js文件中添加了更多的路由之后，我在每个页面上都会收到一个错误500。
下面是我在app.js中添加路由的部分：
var routes = require('./routes/index');
var play = require('./routes/play');
var login = require('./routes/login');
var register = require('./routes/register
浏览 0提问于2015-11-09得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
