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

在这里插入图片描述

查看专栏目录

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.hqwc.cn/news/283675.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Endnote在线链接pubmed的时候报错12057:不能连接到吊销服务器,或者未能获得最终响应?

Endnote在线链接pubmed的时候报错12057&#xff1a;不能连接到吊销服务器&#xff0c;或者未能获得最终响应&#xff1f; 问题如下&#xff1a; 解决办法&#xff1a; 在任务栏搜索internet选项并打开 选高级&#xff0c;参照下图配置 完了之后再去EndNote就不会出现此问题了…

YOLOv5改进 | 卷积篇 | SPD-Conv空间深度转换卷积(高效空间编码技术)

一、本文介绍 本文给大家带来的改进内容是SPD-Conv&#xff08;空间深度转换卷积&#xff09;技术。SPD-Conv是一种创新的空间编码技术&#xff0c;它通过更有效地处理图像数据来改善深度学习模型的表现。SPD-Conv的基本概念&#xff1a;它是一种将图像空间信息转换为深度信息…

什么是磁钢的工作点和Pc值?如何计算Pc值?

永磁体是在开路状态下工作的&#xff0c;由于开路状态的磁体是在退磁场的作用下&#xff0c;所以工作状态下的永磁体的磁感应强度不在闭路状态的Br点上&#xff0c;而是在比Br低的退磁曲线上的某一点&#xff0c;这一点称为永磁体的工作点&#xff0c;如下图D点。 工作点与退磁…

Python实验项目9 :网络爬虫与自动化

实验 1&#xff1a;爬取网页中的数据。 要求&#xff1a;使用 urllib 库和 requests 库分别爬取 http://www.sohu.com 首页的前 360 个字节的数据。 # 要求&#xff1a;使用 urllib 库和 requests 库分别爬取 http://www.sohu.com 首页的前 360 个字节的数据。 import urllib.r…

人工智能在大型复杂机械产品装配状态检测自动化中的应用

尊敬的读者们&#xff0c;本文主要围绕“大型复杂机械产品装配状态检测自动化方案”开展讨论&#xff0c;从这个领域存在的问题和难度&#xff0c;以及基于人工智能、数字图像处理、机器人控制、装配机理等技术的自动化设计与实践方案。文章提出了数字化建模和智能识别模型构建…

【PHP】一个邮箱点击验证的完整示例

目录 1.效果展示 2.发送验证码 3.进行验证 以绑定邮箱为例&#xff0c;注册验证的话修改判断逻辑 1.效果展示 2.发送验证码 /*** 发点击验证* 参数 email*/public function sendClick(){$param $this->request->post();// 邮箱email的validate规则验证&#xff0c;略…

Xcode编写基于C++的动态连接库(dylib)且用node-ffi-napi测试

创建一个dylib工程示例 在 Xcode 中创建一个动态链接库&#xff08;.dylib 文件&#xff09;的步骤如下&#xff1a; 打开 Xcode&#xff1a; 打开 Xcode 应用程序。 创建新的工程&#xff1a; 选择 "Create a new Xcode project"&#xff0c;或者使用菜单 File &g…

【咕咕送书 | 第7期】深入探索Spring Batch:大规模批处理的领航者

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏:《linux深造日志》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! ⛳️ 写在前面参与规则 ✅参与方式&#xff1a;关注博主、点赞、收藏、评论&#xff0c;任意评论&#xff08;每人最多评论…

记录 | Visual Studio报错:const char*类型的值不能用于初始化char*类型

Visual Studio 报错&#xff1a; const char *”类型的值不能用于初始化“char *”类型的实体错误 解决办法&#xff1a; 1&#xff0c;强制类型转换&#xff0c;例如&#xff1a; char * Singer::pv[] {(char*)"other", (char*)"alto", (char*)"c…

【物联网】EMQX(二)——docker快速搭建EMQX 和 MQTTX客户端使用

一、前言 在上一篇文章中&#xff0c;小编向大家介绍了物联网必然会用到的消息服务器EMQ&#xff0c;相信大家也对EMQ有了一定的了解&#xff0c;那么接下来&#xff0c;小编从这篇文章正式开始展开对EMQ的学习教程&#xff0c;本章节来记录一下如何对EMQ进行安装。 二、使用…

能在电脑同时控制苹果和安卓的软件,找到了!

开门见山&#xff0c;既能远程控制安卓手机又能控制iPhone或iPad的软件是AirDroid Cast。 AirDroid Cast是一款专业、强大且易于使用的投屏&控制工具。不仅可以将安卓手机&#xff08;安卓7.0及以上版本&#xff09;、iPhone、iPad的屏幕画面投射到电脑上&#xff0c;还支持…

QT-CAD-3D显示操作工具

QT-CAD-3D显示操作工具 一、效果展示二、核心程序三、程序链接 一、效果展示 二、核心程序 TDF_LabelSequence DxfReader::transfer(DocumentPtr doc, TaskProgress* progress) {TDF_LabelSequence seqLabel;Handle_XCAFDoc_ShapeTool shapeTool doc->xcaf().shapeTool();…