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+》。

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

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

相关文章

跟随山海鲸开发者,深入了解智慧城市解决方案的核心技术

随着科技的飞速发展&#xff0c;数字孪生技术逐渐成为智慧城市建设的重要手段。作为山海鲸开发者&#xff0c;我们深知数字孪生技术在智慧城市中的应用价值&#xff0c;因此致力于开发出高效、便捷的数字孪生智慧城市解决方案。因此本文将带大家了解山海鲸智慧城市解决方案。 …

Django 构建动态前端页面详解

概要 Django 是一个强大的 Python Web 框架&#xff0c;广泛用于后端开发。然而&#xff0c;它也支持直接使用 HTML, CSS, 和 JavaScript 来构建动态的前端界面。本文将详细介绍如何在 Django 项目中使用这些技术&#xff0c;包括设置静态文件、编写 HTML 模板以及集成 JavaSc…

YOLOv5改进 | SPPF | 将RT-DETR模型AIFI模块和Conv模块结合替换SPPF(全网独家改进)

一、本文介绍 本文给大家带来是用最新的RT-DETR模型中的AIFI模块来替换YOLOv5中的SPPF。RT-DETR号称是打败YOLO的检测模型&#xff0c;其作为一种基于Transformer的检测方法&#xff0c;相较于传统的基于卷积的检测方法&#xff0c;提供了更为全面和深入的特征理解&#xff0c…

Linux性能优化常做的一些事情

Linux性能优化是一个广泛的主题&#xff0c;涉及多个方面。以下是一些常见的Linux性能优化建议&#xff1a; 硬件和系统配置&#xff1a; 使用SSD替代HDD。确保系统有足够的RAM。使用多核CPU。配置合适的网络硬件和带宽。 磁盘I/O性能&#xff1a; 使用RAID来提高I/O性能。使用…

人工智能在金融与商业领域的智能化变革

导言 随着人工智能技术的不断发展&#xff0c;金融和商业领域正迎来一场智能化的变革。随着人工智能的不断发展&#xff0c;其在金融和商业领域的应用正成为业界瞩目的焦点。本文将深入探讨人工智能在金融和商业应用中的关键技术、应用场景以及对未来的影响。 1. 关键技术与算…

08-工厂方法

意图 定义一个用于创建对象的接口&#xff0c;让子类决定实例化哪一个类 类图 适用性 在下列情况可以使用工厂方法模式&#xff1a; 当一个类不知道它所必须创建的对象的类的时候。当一个类希望由它的子类来指定它所创建的对象的时候。当类将创建对象的职责委托给多个帮助子…

Axure的元件库的使用以及详细案例

目录 元件库的使用 元件介绍 元件的基本使用 矩形、按钮、标题的使用​编辑 图片的使用 图片以及热区的使用 表单元件的使用 表格元件的使用 登录界面 个人简介界面 元件库的使用 元件介绍 Axure提供了一套丰富的元件库&#xff0c;用于快速创建原型中常见的UI界面元素…

虚拟机性能监控、故障处理工具

虚拟机性能监控、故障处理工具 二、基础故障处理工具4.2.1 jps&#xff1a;虚拟机进程状况工具4.2.2 jstat:虚拟机统计信息监视工具4.2.3 jinfo:Java配置信息工具4.2.4 jmap:java内存映像工具4.2.5 jhat:虚拟机堆转储快照分析工具4.2.6 jstack&#xff1a;Java堆栈跟踪工具4.2.…

neo4j安装报错:neo4j.bat : 无法将“neo4j.bat”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

neo4j安装报错&#xff1a; neo4j.bat : 无法将“neo4j.bat”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写&#xff0c;如果包括路径&#xff0c;请确 保路径正确&#xff0c;然后再试一次。 解决办法&#xff1a; 在环境变量中的&#xff0c;用户…

2023年全球运维大会(GOPS深圳站)-核心PPT资料下载

一、峰会简介 1、大会背景与概述 全球运维大会&#xff08;GOPS&#xff09;是运维领域最具影响力的国际盛会&#xff0c;每年都会汇聚世界各地的运维专家、企业领袖、技术爱好者&#xff0c;共同探讨运维技术的最新发展、最佳实践以及面临的挑战。2023年GOPS深圳站作为该系列…

硬件基础-电阻

电阻 1.品牌 厚声、风华&#xff0c;三星、罗姆、松下、KOA 2.分类 插件 碳膜电阻&#xff1a;精度-5 J 是在高阻&#xff0c;高压和高温应用中 属负温度系数电阻 金属膜&#xff1a;-1 F 贴片 电阻标识&#xff1a;&#xff08;含义&#xff1a;阻值大小和精度&a…

mysql自动安装脚本(快速部署mysql)

mysql_install - 适用于生产环境单实例快速部署 MySQL8.0 自动安装脚本 mysql8_install.sh&#xff08;执行前修改一下脚本里的配置参数&#xff0c;改成你自己的&#xff09;&#xff08;博客末尾&#xff09; my_test.cnf&#xff08;博客末尾&#xff09;&#xff08;这个…

Mac搭建Frida逆向开发环境

一、简介 Frida是一种基于Python+JavaScript的动态分析工具,可以用于逆向开发、应用程序的安全测试、反欺诈技术等领域,本质是一种动态插桩技术。Frida主要用于在已安装的应用程序上运行自己的JavaScript代码,从而进行动态分析、调试、修改等操作,能够绕过应用程序的安全措…

Vulnhub-DC-8 靶机复现完整过程

一、环境搭建 kali的IP地址&#xff1a;192.168.200.14 DC-8的IP地址&#xff1a;192.168.200.13&#xff08;一个flag&#xff09; 靶机和攻击机处于同一个网络方式&#xff1a;nat或桥接 若出现开机错误&#xff0c;适当将dc的兼容版本改低&#xff0c;我的vmware workstat…

如何基于企业需求,又便宜又快地定制开发一套CRM客户管理系统?

如何基于企业需求&#xff0c;又便宜又快地定制开发一套CRM客户管理系统&#xff1f; 定制开发CRM客户管理系统是为了满足企业个性化需求而进行的&#xff0c;它可以帮助企业提高客户关系管理效率&#xff0c;提供更好的客户服务和实现精细化运营。本文将为大家介绍CRM定制开发…

postman脚本生成可执行文件(6)

一.通过Python脚本&#xff08;executescript.py&#xff09;执行newman指令 #!usr/bin/python import subprocess from datetime import datetimeclass Newman_automate():Newman_automate():该类主要是定义postman脚本执行__path:cmd命令行中执行newnan脚本指令&#xff08;…

补题与总结:牛客小白月赛83(B~F)

文章目录 写在最前面的复盘B-小天的魔法&#xff08;贪心 模拟 双指针&#xff09;C-小天的 Minecraft&#xff08;概率&#xff09;D-小天的子序列&#xff08;预处理 排列组合&#xff09;E-小天的贪吃蛇&#xff08;模拟&#xff09;F-小天的 AB&#xff08;结论题&#xff…

QT QWidget 爱心灯

简介 就是使用QTableWidget生成一个LED点阵, 使用网上的Arduino点阵数组, 应用在此&#xff1b;代码 LEDWidget.h #ifndef LEDWIDGET_H #define LEDWIDGET_H#include <QWidget>class LEDWidget : public QWidget { public:LEDWidget(QWidget *parent nullptr);inline …

vue门户设计器实现技术方案

一、什么是门户设计器 门户设计器是一种用于创建和设计门户网站或者应用系统首页的工具。它通常是一个软件应用程序&#xff0c;可以帮助用户快速、轻松地设计和构建自己的门户网站或者应用系统的首页。门户设计器通常提供在线拖拉拽设计器&#xff0c;以及各种模板、主题和组…

Ubuntu系统入门指南:基础操作和使用教程

学习目标&#xff1a; 解Ubuntu系统的基本概念和特点&#xff0c;包括其开源性、稳定性和安全性&#xff0c;以及如何获取和安装Ubuntu系统。 掌握Ubuntu系统的用户界面和桌面环境&#xff0c;包括如何使用桌面面板、启动器和工作区&#xff0c;以及如何自定义和个性化你的桌面…