nodejs配置express服务器,运行自动打开浏览器

news/2024/11/19 16:25:03/

在这里插入图片描述

查看专栏目录

Network 灰鸽宝典专栏主要关注服务器的配置,前后端开发环境的配置,编辑器的配置,网络服务的配置,网络命令的应用与配置,windows常见问题的解决等。

文章目录

    • 设置方法:
      • 1,安装nodejs
      • 2,创建一个文件夹,然后npm init 创建package.json
      • 3, 安装express和open组件
      • 4, 配置server.js文件
      • 5, package.json最终配置
      • 6,放置文件:
      • 7,执行命令
    • 结尾语

作为前端开发的项目,有的时候打包完后就想在本地测试是什么样子的,另外一些如cesium等程序,需要在服务的环境下才能启动三维球等。 这里使用nodejs+express搭建一个普通的服务器。

代码结构:
在这里插入图片描述

设置方法:

1,安装nodejs

2,创建一个文件夹,然后npm init 创建package.json

在这里插入图片描述

由于配置后来修改,main入口改为了server.js

3, 安装express和open组件

npm install express open --save

4, 配置server.js文件

const express = require('express') 
const path = require('path') 
const app = express() 
const open = require('open') //npm另安装的模块 app.use(express.static(path.join(__dirname, 'html'))) open("http://localhost:7010")  //打开网页 
app.listen(7010, () => { console.log('启动成功,请打开http://localhost:7010') 
}) 

5, package.json最终配置

{ "name": "express-server", "version": "1.0.0", "description": "nodejs 编写的express为框架的一个html服务器", "main": "server.js", "scripts": { "test": "test", "prestart": "echo " 启动start之前 "", "start": "node server.js", "poststart": "start http://localhost:7010" }, "author": "zjcopy.com", "license": "ISC", "dependencies": { "express": "^4.17.1", "open": "^8.2.1" } 
} 

6,放置文件:

将静态的文件放到html文件夹中,比如一个index.html文件

<!DOCTYPE html> 
<html lang="en"> <head> <meta charset="UTF-8"> 
<title>nodejs显示html</title> 
</head> <body> 
<h1>成功了,激动吗?大剑师的访问者</h1> 
</html> 

7,执行命令

npm run start

开启服务,同时打开浏览器,浏览网页

结尾语

Network 灰鸽宝典为开发配置保驾护航,让服务运行快捷平稳。 希望某个知识点就能帮助你,欢迎学习GIS的朋友一起交流。
《 Openlayers 综合示例200+ 》,
《 leaflet示例教程100+ 》,
《 Cesium示例教程100+》,
《MapboxGL示例教程100+》。


http://www.ppmy.cn/news/1273567.html

相关文章

实现el-table操作列点击弹出echarts

代码&#xff1a; <el-table-column :width"90"><template #default"scope"><el-popover placement"left-end" width"550" trigger"click"><div><div style"font-size: 18px; margin-left…

广西岑溪市火灾通报:1人死亡 AI科技助力预防悲剧

近日&#xff0c;广西岑溪市玉梧大道紫坭工业园一厂房发生一起令人心痛的火灾事件&#xff0c;造成1人不幸丧生。这起悲剧再次提醒我们&#xff0c;火灾的防范工作是多么的重要。在这样的背景下&#xff0c;我想分享一个能够有效预防类似悲剧的技术——北京富维图像公司开发的F…

初级数据结构(六)——堆

文中代码源文件已上传&#xff1a;数据结构源码 <-上一篇 初级数据结构&#xff08;五&#xff09;——树和二叉树的概念 | NULL 下一篇-> 1、堆的特性 1.1、定义 堆结构属于完全二叉树的范畴&#xff0c;除了满足完全二叉树的限制之外&#xff0c;还满…

技术分析测试

文章目录 概要整体架构流程技术名词解释技术细节小结 概要 提示&#xff1a;这里可以添加技术概要 例如&#xff1a; openAI 的 GPT 大模型的发展历程。 整体架构流程 提示&#xff1a;这里可以添加技术整体架构 例如&#xff1a; 在语言模型中&#xff0c;编码器和解码器都…

2023新时代中国模特大赛总决赛在京落幕

12月16日&#xff0c;备受瞩目的2023新时代中国模特大赛圆满落幕。本次大赛旨在挖掘和培养具有新时代特色的模特人才&#xff0c;推动中国时尚产业的创新发展。 作为中国时尚界的重要赛事&#xff0c;新时代中国模特大赛吸引了来自全国各地的优秀模特选手45名参加全国总决赛。在…

智安网络|企业网络安全工具对比:云桌面与堡垒机,哪个更适合您的需求

随着云计算技术的快速发展&#xff0c;越来越多的企业开始采用云计算解决方案来提高效率和灵活性。在云计算环境下&#xff0c;云桌面和堡垒机被广泛应用于企业网络安全和办公环境中。尽管它们都有助于提升企业的安全和效率&#xff0c;但云桌面和堡垒机在功能和应用方面存在着…

【Java JVM】实例对象的创建

当我们涉及 Java 编程时, 对象的创建是一个基础而关键的概念。在 Java 中, 一切皆为对象, 而对象的创建方式直接影响代码的结构和性能。 本博客将探讨一下 Java 实例对象的创建过程。 1 创建对象的方法有哪些 在 Java 中如果要创建一个对象, 有哪些方式呢? 运用 new 关键字创…

Kafka本地安装⭐️(Windows)并测试生产消息以及消费消息的可用性

2023.12.17 天气晴 温度较低 十点半&#xff0c;不是不想起实在是阳光浴太nice了日常三连&#xff0c;喂&#xff0c;刷&#xff0c;肝刷会儿博客&#xff0c;看会儿设计模式冷冷冷 进被窝 刷视频 睡觉看看kafka的本地部署 》》实践》》成功写会儿博客&#xff0c…