【NodeJs】使用Express框架快速搭建一个web网站

news/2024/11/20 23:32:28/

如果电脑有安装使用Nodejs,用得次数少的话,忘了怎么弄,可以看看这个文章,按照步骤,能快速搭建一个web网站服务器,

首先,你需要保证电脑系统有安装了Node.js,然后可以用VsCode开发工具,新建一个项目文件夹,

准备就绪

如果你是新手,应该知道,创建nodejs项目会依赖npm,

在项目根目录下,鼠标右键选择从终端打开,也可以是CMD,开始从里输入命令,

要检查npm是否已安装,就输入如下检查npm版本命令如下,查看

npm -v

若报错,表示没有安装npm,输入以下命令如下,查看

npm install or npm i

新建项目

创建一个依赖npm的项目,需要先执行一个初始化命令如下,查看

npm init

这时会提示输入项目配置信息,若懒得输入,一直按回车默认设置即可

直到初始化完成,会看到项目中多出来一个package.json文件,之前输入的项目配置信息就在这里面了(安装的依赖),

安装框架

接下来,输入一个命令,给项目安装Experss框架

npm install express --save

换国内镜像,安装很快

cnpm install express --save

如要运行web站点(服务器),输入以下命令即可

npm run start

输出信息如 listenPort: 3000,那访问本地站点地址就是http:localhost:3000

懒得手动打开浏览器输入地址的话,直接添加以下命令即可

var cp = require('child_process');//...服务开始监听的地方
server.listen(port);
console.log('listenPort:', port)
//...添加在这里
cp.exec('start http://localhost:'+port);

这个是入口文件上修改,路径在/bin/www
开始运行的时候,会自动调用浏览器打开

项目结构

了解一下Express 框架项目结构

  • public – 文件夹,存放公开的静态资源
  • routes – 文件夹,路由,类似于服务,专门处理视图业务逻辑
  • views – 文件夹,视图,渲染模板视图
  • app.js – 文件,这是框架实例
  • package.json – 文件,项目属性文件
  • … 其它

如果你还对Express框架不够了解,建议先研究学习它,它就是用来快速搭建网站的,一些网站后台必须的功能都给封装好了可以拿来用

💡 小提示

  • 默认访问的public静态资源路径,如果是 /public/logo.png 访问不了,需要去掉/public就能访问
  • 点此了解 Node.js Express 框架

把自己做的网页文件,或者静态网页资源,都放在项目里的public文件夹路径下,

然后,运行在浏览器上就可以看到显示自己的网站页面了,

就到这里了,慢走,记得点赞。

请添加图片描述


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

相关文章

leetcode 104——二叉树的最大深度

文章目录 题目详情方法一 万能的递归方法二 通过使用层序遍历的方式Java完整代码递归实现非递归实现——借助队列 题目详情 给定一个二叉树,找出其最大深度。 二叉树的深度为根节点到最远叶子节点的最长路径上的节点数。 说明: 叶子节点是指没有子节点的节点。 l…

数据可视化二、综合项目

零、文章目录 数据可视化二、综合项目 1、项目概述 (1)项目展示 (2)项目目的 市场需求:应对现在数据可视化的趋势,越来越多企业需要在很多场景(营销数据,生产数据,用户数据)下使…

vue项目将多张图片生成一个gif动图

当前做项目有一个需求是将多张图片生成一个gif动图的形式 类似下面图片几张图片叠加生成一个gif动图 图片涉及工作隐私,就不公开啦 我们要引入一个gif.js的引入包,但是他没有直接引入的方式,只能从官方下载文件包,下载地址&#…

Linux进程状态及优先级

本文已收录至《Linux知识与编程》专栏! 作者:ARMCSKGT 演示环境:CentOS 7 进程状态及优先级 前言正文进程状态就绪运行状态R阻塞睡眠状态 S休眠状态D挂起 暂停状态T前台与后台进程待追踪暂停状态t 死亡状态 X僵尸状态 Z 孤儿进程进程优先级查…

视频播放方案

video插件播放m3u8格式视频(存原生) 这里使用原生的javascript实现m3u8格式视频播放。 使用了包括video.min.js库和HLS插件。 1-基础使用 <!DOCTYPE html> <html> <head><meta charset"UTF-8"><title>Video.js HLS Example</title…

SIM800C-AT指令测试(二) SMS短消息

相关的AT主要有&#xff1a; ATCPMS // 查询SIM卡内短消息使用状态 ATCNMI // 新消息指示设置 ATCMGF // 选择短消息格式 ATCSCS // 编码设置 ATCSCA // 查…

ChatGPT 探讨内存屏障的意内存

一、与 ChatGPT 探讨内存屏障的意内存 轻松的氛围&#xff0c;跟 ChatGPT 从内存屏障问题一直扯到CAP原理 我&#xff1a; 2023/4/14 17:48:09 那我可以理解为{ shared_var 1; asm volatile ("sfence" ::: "memory"); asm volatile ("lfence" …

一键免费部署你的私人 ChatGPT 网页应用-ChatGPT Next Web

ChatGPT-Next-Web是一款基于GPT-3.5的在线聊天机器人应用程序。它可以自动回复用户输入的消息&#xff0c;并提供有用的信息和服务。该应用程序使用了最先进的自然语言处理技术和GPT-3.5模型&#xff0c;可以生成自然流畅的文本&#xff0c;并提供准确和个性化的回复。 项目地…