node笔记_http服务搭建(渲染html、json)

文章目录

    • ⭐前言
    • ⭐初始化项目
      • 调整npm 的script运行入口
      • 搭建hello world的http服务
      • npm run dev执行主函数的http服务
    • ⭐http返回类型
      • html模板文件返回
        • 安装express
        • 渲染html的字符串
      • 渲染html文件 sendFile
      • 渲染json返回数据类型 res.json
    • ⭐结束

⭐前言

大家好,我是yma16,本期分享node搭建http服务的教程。
往期文章
node_windows环境变量配置
node_npm发布包
linux_配置node
node_nvm安装配置

⭐初始化项目

创建一个node_server目录

$ mkdir node_server
$ cd node_server

node_server

npm init

初始化package.json文件

$ npm init

npm_init
安装 http依赖

$ npm install http

调整npm 的script运行入口

调整script的dev 为node 执行的入口 main/index.js文件

{
  "name": "node_server",
  "version": "1.0.0",
  "description": "http server ",
  "main": "main/index.js",
  "scripts": {
    "dev": "node ./main/index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "yma16",
  "license": "ISC",
  "dependencies": {
    "http": "^0.0.1-security"
  }
}

搭建hello world的http服务

index.js写一个http返回

const { createServer } = require('http');

const honstname= '127.0.0.1';
const port= '3000';

const server = createServer((req, resp) => {
  // the first param is status code it returns
  // and the second param is response header info
  resp.statusCode=200;
  resp.setHeader({ 'Content-Type': 'text/plain' })
  // resp.writeHead(200, { 'Content-Type': 'text/plain' });
  console.log('server is working...');

  // call end method to tell server that the request has been fulfilled
  resp.end('Hello World');
});

server.listen(port, honstname, (error) => {
  if (error) {
    console.log('Something wrong: ', error);
    return;
  }

  console.log(`Server running at http://${hostname}:${port}/`);
});

npm run dev执行主函数的http服务

执行npm run dev

$ npm run dev

npm  run dev

浏览运行的http地址 http://localhost:3000,出现搭建的hello world 说明搭建的http服务成功
在这里插入图片描述

⭐http返回类型

指定http返回的类型

  1. html文件
  2. json数据类型

html模板文件返回

渲染一个类似于python的web框架django渲染template

安装express

$ npm install express

渲染html的字符串

使用express渲染html的字符串

const hostname = '127.0.0.1';
const port = 3000;

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

app.listen(port,hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

app.get("/", (req, res) => {
  res.send("<html> <head>server Response</head><body><h1> This page was render direcly from the server <p>Hello there welcome to my website</p></h1></body></html>");
});

访问页面渲染html成功
express_html

渲染html文件 sendFile

login的html文件 一个登录的效果
在inscode查看效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>login</title>
	</head>
	<style>
		* {
			margin: 0;
			padding: 0;
		}

		body {
			background: #5D4157;
			/* fallback for old browsers */
			background: -webkit-linear-gradient(to left, #A8CABA, #5D4157);
			/* Chrome 10-25, Safari 5.1-6 */
			background: linear-gradient(to left, #A8CABA, #5D4157);
			/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
			animation: backdiv 12s infinite;
			background-position: 0% 50%;
			background-size: 400%;
		}

		@keyframes backdiv {
			0% {
				background-position: 0% 50%;
			}

			50% {
				background-position: 100% 50%;
			}

			100% {
				background-position: 0% 50%;
			}
		}

		.title {
			text-align: center;
			padding: 50px 0 20 px;
		}

		.title h1 {
			margin: 0;
			padding: 0;
			color: #fff;
			/* text-transform: uppercase; */
			font-size: 36px;
		}

		.container {
			width: 50%;
			height: 400px;
			margin: 0 auto;
			border: 2 px solid #fff;
			box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
		}

		.container .left {
			float: left;
			width: 50%;
			height: 400px;
			background: url(./html/img/background.jpg);
			background-size: cover;
			box-sizing: border-box;
		}

		.container .right {
			float: right;
			width: 50%;
			height: 400px;
			box-sizing: border-box;
			background: #fff;
		}

		.formBox {
			width: 100%;
			padding: 80px 40px;
			height: 400px;
			background: #fff;
			box-sizing: border-box;
			/* opacity: 0.6; */
		}

		.formBox .p {
			margin: 0;
			padding: 0;
			font-weight: bold;
			color: #a6af13;
		}

		.formBox input {
			width: 100%;
			margin-bottom: 20px;
		}

		.formBox input[type="text"] {
			border: none;
			border-bottom: 2px solid #a6af13;
			outline: none;
			height: 40px;
		}

		.formBox input[type="password"] {
			border: none;
			border-bottom: 2px solid #a6af13;
			outline: none;
			height: 40px;
		}

		.formBox input[type="text"]:focus {
			border-bottom: 2px solid #262626;
		}

		.formBox input[type="password"]:focus {
			border-bottom: 2px solid #262626;
		}

		.formBox input[type="submit"] {
			border: none;
			outline: none;
			height: 40px;
			color: #fff;
			background: #262626;
			cursor: pointer;
		}

		.formBox input[type="submit"]:hover {
			background: #a6af13;
		}

		.formBox a {
			font-weight: bold;
			color: #262626;
			font-size: 12px;
		}
	</style>
	<body>
		<div class="title">
			<h1>login form</h1>
		</div>
		<div class="container">
			<div class="left"></div>
			<div class="right">
				<div class="formBox">
					<form>
						<p>username</p>
						<input type="text" name="" placeholder="name" />
						<p>password</p>
						<input type="password" name="" placeholder="password" />
						<input type="submit" name="" value="sign" />
						<a href="#">forget password</a>
					</form>

				</div>

			</div>
		</div>
	</body>
</html>

index内容

const hostname = '127.0.0.1';
const port = 3000;

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

app.listen(port,hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
// server your css as static
app.use(express.static(__dirname));

app.get("/", (req, res) => {
	console.log(__dirname)
	res.sendFile(__dirname + "/html/login.html");
});

访问出现html的内容
login

渲染json返回数据类型 res.json

const hostname = '127.0.0.1';
const port = 3000;
const express = require("express");
const app = express();

app.listen(port,hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
// server your css as static
app.use(express.static(__dirname));

app.get("/", (req, res) => {
	console.log(__dirname)
	res.json({
		code:200,
		data:'hello yma16',
		msg:'csdn'
	})
});

预览,返回json成功!
http_json

⭐结束

感谢你的阅读,如有不足欢迎指出!
light

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/24289.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

TensorFlow 1.x学习(系列二 :4):自实现线性回归

目录 线性回归基本介绍常用的op自实现线性回归预测tensorflow 变量作用域模型的保存和加载 线性回归基本介绍 线性回归&#xff1a; w 1 ∗ x 1 w 2 ∗ x 2 w 3 ∗ x 3 . . . w n ∗ x n b i a s w_1 * x_1 w_2 * x_2 w_3 * x_3 ... w_n * x_n bias w1​∗x1​w2​∗…

MySQL 对日期使用 DATE_FORMAT()函数

文章目录 DATE_FORMAT()函数显示今天是星期几只显示年月显示当前时间的分钟数和秒数 DATE_FORMAT()函数 前面使用日期时间函数&#xff0c;获取到的要么是 yyyy-mm-dd 形式的日期&#xff0c;要么是 hh:MM:ss 形式的时间&#xff0c;或者是 yyyy-mm-dd hh:mm:ss 形式的日期及时…

算法基础学习笔记——⑧堆\哈希表

✨博主&#xff1a;命运之光 ✨专栏&#xff1a;算法基础学习 目录 ✨堆 &#x1f353;堆模板&#xff1a; ✨哈希表 &#x1f353;一般哈希模板&#xff1a; &#x1f353;字符串哈希模板&#xff1a; 前言&#xff1a;算法学习笔记记录日常分享&#xff0c;需要的看哈O(…

Qt文件系统源码分析—第六篇QSaveFile

深度 本文主要分析Windows平台&#xff0c;Mac、Linux暂不涉及 本文只分析到Win32 API/Windows Com组件/STL库函数层次&#xff0c;再下层代码不做探究 本文QT版本5.15.2 类关系图 QTemporaryFile继承QFile QFile、QSaveFile继承QFileDevice QFileDevice继承QIODevice Q…

远程访问本地jupyter notebook服务 - 无公网IP端口映射

文章目录 前言视频教程1. Python环境安装2. Jupyter 安装3. 启动Jupyter Notebook4. 远程访问4.1 安装配置cpolar内网穿透4.2 创建隧道映射本地端口 5. 固定公网地址 转载自远控源码文章&#xff1a;公网远程访问jupyter notebook【cpolar内网穿透】 前言 Jupyter Notebook&am…

网络原理(六):http 协议(上)

目录 HTTP 协议是什么 抓包工具 Fiddler 的下载 使用Fiddler HTTP 请求 (Request) HTTP 请求格式 首行 请求头&#xff08;Header&#xff09; Cookie HTTP 协议是什么 还是老样子&#xff0c;在讲解http 之前我们先来了解以下什么叫做 http 。 HTTP&#xff08;Hyp…

(转载)从0开始学matlab(第14天)—while循环结构

循环(loop) 是一种 matlab 结构&#xff0c;它允许我们多次执行一系列的语句。循环结构有两种基本形式 :while 循环和 for 循环。两者之间的最大不同在于代码的重复是如何控制的。在while 循环中&#xff0c;代码的重复的次数是不能确定的&#xff0c;只要满足用户定义的条件…

整理6个超好用的在线编辑器!

随着 Web 开发对图像可扩展性、响应性、交互性和可编程性的需求增加&#xff0c;SVG 图形成为最适合 Web 开发的图像格式之一。它因文件小、可压缩性强并且无论如何放大或缩小&#xff0c;图像都不会失真而受到欢迎。然而&#xff0c;为了编辑 SVG 图像&#xff0c;需要使用 SV…

《五》 Git 中的标签和分支

标签 tag&#xff1a; Git 可以给仓库中某一次 commit 的提交打上标签。对于重大的版本经常会打上一个标签来表示它的重要性。 创建标签&#xff1a; git tag【tag 名称】&#xff1a;创建标签。 查看标签&#xff1a; git tag&#xff1a;查看标签。 推送标签到远程仓库…

任务40 评奖系统设计

系列文章 任务40 评奖系统设计 为教务处设计一个学生评价老师的程序&#xff1a; 每位学生投一张票&#xff0c;选出自己最喜爱的老师&#xff0c;选票格式为&#xff1a; | 第一喜爱的老师 | 第二喜爱的老师 |第三喜爱的老师 | | 工号 |工号 |工号 | 上述数据存放在一个数据…

随机网络构建

随机网络构建 文章目录 随机网络构建[toc]1 随机网络定义2 网络拓扑性质2.1 边数分布2.2 度分布 3 代码实现 1 随机网络定义 随机网络与规则网络相对应&#xff0c;最为经典的随机网络模型是Erds和Rnyi研究的ER随机图模型&#xff0c;ER随机图模型有两种定义方式&#xff1a; …

三种快速转换PDF为TXT的方法:简单、高效、免费

如何将PDF转换为TXT文件&#xff1f;在日常生活中&#xff0c;PDF和TXT是常见的文本格式。PDF格式文件具有稳定的布局和易于存储的特点。然而&#xff0c;许多在线下载的电子书通常是以PDF格式提供的&#xff0c;而电子阅读器通常不支持PDF格式&#xff0c;这就导致了无法方便地…

字节软测划水四年,内容过于真实......

先简单交代一下吧&#xff0c;潇潇是某不知名211的本硕&#xff0c;18年毕业加入一个小厂&#xff0c;之后跳槽到了字节跳动&#xff0c;一直从事测试开发相关的工作。之前没有实习经历&#xff0c;算是四年半的工作经验吧。 这四年半之间他完成了一次晋升&#xff0c;换了一家…

SAP-MM-计算方案字段解析

01、 “步骤”&#xff1a;标识此条件类型在计算方案中的顺序编号&#xff0c;此编号会影响到后续业务中条件类型的排序&#xff0c;不同条件类型之间的编号最好间隔大一些&#xff0c;这样设置便于以后对计算方案进行扩展&#xff1b; 02、 “计数器”&#xff1…

Apache Kafka - 重识消费者

文章目录 概述Kafka消费者的工作原理Kafka消费者的配置Kafka消费者的实现高级API低级API 导图总结 概述 Kafka是一个分布式的消息队列系统&#xff0c;它的出现解决了传统消息队列系统的吞吐量瓶颈问题。 Kafka的高吞吐量、低延迟和可扩展性使得它成为了很多公司的首选消息队…

面试前15天刷完这个笔记,拿下字节测开岗offer....

面试&#xff0c;跳槽&#xff0c;每天都在发生&#xff0c;跳槽&#xff0c;更是很常见的&#xff0c;对于每个人来说&#xff0c;跳槽的意义也各不相同&#xff0c;可能是一个人更向往一个更大的平台&#xff0c;更好的地方&#xff0c;可以通过换一个环境改变自己的现状。而…

解密Java Class文件不为人知的秘密

Java 诞生多年&#xff0c;因此在网络上&#xff0c;有关 Java Class 文件格式解析的文章有很多&#xff0c;但他们大多数都是在列举《Java 虚拟机》中定义的格式&#xff0c;通读下来&#xff0c;好像所有的东西都讲清楚了&#xff0c;但是我个人好像并没有看懂&#xff0c;不…

2. css表格属性、文本属性、列表属性、边距属性、尺寸属性

1. 表格属性 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"><meta name"viewport" content"widthdevice-width…

【JavaSE】Java基础语法(十五):继承

文章目录 1. 继承的实现2. 继承的好处和弊端3. Java中继承的特点4. 继承中的成员访问特点5. super6. 继承中构造方法的访问特点7. 继承中成员方法的访问特点8. super内存图9. 方法重写10. 权限修饰符 1. 继承的实现 继承的概念 继承是面向对象三大特征之一&#xff0c;可以使得…

【状态估计】基于随机方法优化PMU优化配置(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…