[Day2] Node.js利用Express访问index.html

最新推荐文章于 2023-08-15 10:33:03 发布
最新推荐文章于 2023-08-15 10:33:03 发布
阅读量1.3k 收藏 4
点赞数
分类专栏： nodejs实战 文章标签： nodejs javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhs362625119/article/details/109126774
版权

[Day2] Node.js利用Express访问index.html

文章目录

要求

  • 了解Express框架
  • 了解JavaScript和html基础知识
  • 了解node.js常用模块：http,fs
  • 了解require, exports

环境

  1. OS: Win10
  2. Node.js: v12.19.0
  3. Notepad++
  4. Express: v4.17.1

实战

  1. 编写一个简单index.html文件.
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
			<title>Hello HTML</title>
		</head>
		<body>
			<h1>看到这句话表示html页面成功显示了。</h1>
		</body>
	</head>
</html>
  1. 编写index.js
var app=require("./server")

app.listen(3000);
console.log("Server running at localhost:3000");

  1. 编写server.js

    var express=require("express");
var path=require("path");
var app=express();

app.get('/', (req, res) => {    
	var options = {
        root: __dirname,    
		headers: {
		  "Content-Type": "text/html"
		}
	}
	res.sendFile('index.html',options, function(error){
		if(error){
			console.log('Sent failed:', 'index.html' + error);
		}else{
			console.log('Sent sucess:', 'index.html');
		}
	});
});

module.exports = app;

  2. install Express

    npm install express

  3. 运行index.js

node index.js
  1. 浏览器看效果，及整个过程
    在这里插入图片描述
蜗牛乌龟谁跑的快
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5——XMLHttpRequest 2：基于Node.js的用户修改头像
Del的博客
04-20 357
Day13 今日份内容：使用XMLHttpRequest 2制作基于Node.js的用户修改头像 在HTML5规范中对XMLHttpRequest对象的send()方法进行改良后，其可以发送字符串、document对象、表单数据、Blob对象、文件以及ArrayBuffer对象。 XMLHttpRequest 2 了解XMLHttpRequest与服务器异步交互 使用XMLHttpRequest向服务器提交数据 内容 配置Node.js环境 项目初始化 安装body-parser、connect-mu
学会用node.js服务器写接口
m0_65132206的博客
05-02 4208
服务器相关概念~
node express如何访问到已有的HTML文件？
tdjqqq的博客
09-07 3344
最近在研究express框架，遇到一个问题，已有的HTML文件放哪？如何访问?（大神绕路） 先看看express目录，【public】文件夹是存放静态文件的，如，放一张图片在images中，直接访问localhost:3000/01.jpg，即可访问图片。 按照上面的方法，我在public中创建html文件夹，将我原有的HTML（静态文件）项目全放里面了，然后访问时就有问题，html文件里的C...
express(index.js)
03-25
本文件是flv+express+ffmpeg脚手架，express项目中的index.js。如需要下载另外一个helloworld.uve文件请查看我的资源。自行下载。代码的使用，具体看文件中的注释。
【nodejs】express框架static静态资源默认页面index.html 如何修改？
m0_48808447的博客
08-21 5071
在输入地址，如: localhost:8888时，不做其它路由拦截时，默认显示，静态资源文件夹下的index.html页面 需求：如何可以更改默认页面，如默认显示login.html页面 解决方法： express.static方法有两个参数，第一个路径，第二个参数可选，第二个参数，可以进行多个设置，其中就有index,设置默认显示的文件，默认值为index.html, 如何要修改，直接设置index为对应的修改页面. 代码如下，即可. app.use(express.static(__dirname+"/
express html文件接收路由参数,javascript – 具有静态HTML的Node Express.如何将所有请求路由到index.html？...
weixin_27719109的博客
06-07 230
我正在使用一个单一的网页应用程序使用Node Express和handelbars for tempalting.目前,一个index.html从一个漂亮的标准server.js文件提供的一切都很好：var express = require('express');var server = express();server.use(express.static(__dirname + '/publ...
express跳转html页面,express怎么访问某一个目录下的html
weixin_31034309的博客
06-07 256
可否提供更詳細的訊息呢？這邊我使用 express@4.13.4 實作一個簡單的 ajax get 是正常的。var path = require('path');var express = require('express');var app = express();// 定義靜態檔案目錄app.use(express.static(path.join(__dirname, 'public'))...
express怎么读取html,Express 配置HTML页面访问的实现
weixin_39968266的博客
06-19 992
1.配置模板引擎Express默认的模板引擎是pug(jade)，想要渲染html页面必须要导入对应的模板引擎ejsnpm install ejs安装完成在app.js文件中完成模板引擎的引入var ejs = require('ejs');// 配置Express 视图引擎app.engine('html', ejs.__express);app.set('view engine', 'html...
Node.js_模块_作用域与暴露(2)
汇而不置的博客
04-06 423
//day2\01.js require("./test.js"); console.log("我是01.js，我认识a么"+a); //day2\test.js var a=100; console.log("我是test.js文件，我认识a,值是"+a); 在Node.js中，每个js文件都是单独的作用域。 //day2\01.js var test=require("./test....
【node.js】 node学习笔记
weixin_43655896的博客
10-08 1244
node学习笔记
node.js入门到放弃Day2——npm工具 + Express 框架 + 封装异步API案例
Myself's CSDN
07-04 255
6. npm 6.1 npm 命令行工具 查看版本号： npm -v 升级npm: npm install --global npm npm i -g npm 常用命令： npm init -y npm i -S 包名 npm un -S 包名 npm help npm 命令 --help 7.Expess 原生的 http 在某些方面表现不足以应对我们的开发需求，所以我们就需要使用框架来加快我们的开发效率，框架的目的就是提高效率，让我们的代码更高度统一。 在node 中，有很多
express中 routes/index.js
weixin_30715523的博客
03-06 329
var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res) { res.render('index', { title: 'Express' }); }); module.exports = router; 生...
express访问html,Express 配置HTML页面访问的实现
weixin_36210111的博客
06-26 1040
1.配置模板引擎Express默认的模板引擎是pug(jade)，想要渲染html页面必须要导入对应的模板引擎ejsnpm install ejs安装完成在app.js文件中完成模板引擎的引入var ejs = require('ejs');// 配置Express 视图引擎app.engine('html', ejs.__express);app.set('view engine', 'html...
node使用express快速搭建服务器部署html项目
haogemr的博客
10-29 917
node使用express快速搭建服务器部署html项目
node express 配置路由返回html文件
ai2303444681的博客
07-04 4462
// view engine setup app.set('views', path.join(__dirname, 'views')); //注册ejs模板为html页。简单的讲，就是原来以.ejs为后缀的模板页，现在的后缀名可以//是.html了 app.engine('.html', require('ejs').__express); //设置视图模板的默认后缀名为.html,避免了每次r
nodejs中express的静态目录(金猪脚本)
最新发布
zhuiqiu666666的博客
08-15 392
这意味着，如果你将 public 目录设置为静态目录，并且在其中包含了 index.html 文件，那么当你访问根路径 / 时，Express 会自动返回该目录下的 index.html 文件，而无需显式设置根路径的处理函数。在 Node.js 中，可以使用 Express 框架的 express.static 中间件来设置静态目录，并且默认会处理请求路径为根路径 / 的情况，返回该目录下的 index.html 文件。
node.js之express
newway007的博客
12-20 112
main.js var express = require('express'); var app = express(); app.use('/public', express.static('public')); app.get('/index.html', function (req, res) { res.sendFile( __dirname + "/" + "inde...
nodejs访问本地静态资源（进入index.html）
热门推荐
yy211zhu的博客
12-09 1万+
最近用nodejs搭建服务，需要直接访问本地的index.html文件。让别的电脑通过输入IP：/index.html访问 在网上也找到了代码，顺便做个笔记 代码var url = require("url"), fs=require("fs"), http=require("http"), path = require("path"); http.createSer
express html页面,Express 配置HTML页面访问
weixin_35620837的博客
06-03 787
Express 配置HTML页面访问1.配置模板引擎cssExpress默认的模板引擎是pug(jade)，想要渲染html页面必需要导入对应的模板引擎ejshtmlnpm install ejs安装完成在app.js文件中完成模板引擎的引入expressvar ejs = require('ejs');// 配置Express 视图引擎app.engine('html', ejs.__expre...
Node.js入门指南：从零开始构建Web应用
随着深入学习，第4章至第5章会探讨Node.js的核心模块，这些模块是开发者进行Web开发的基石，如Express框架、Socket.IO等，读者将学会如何利用这些工具构建功能丰富的Web应用。 第6章则转向了一些进阶话题，涉及更...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值