使用express设置静态目录,创建服务,响应get请求(一)

(1)安装node.js和express
Node.js的安装
Node.js 安装包及源码下载地址为:https://nodejs.org/en/download/。按步骤安装即可,安装完成后使用node-v查看安装结果。
express的安装
npm install express会将express模块安装到当前路径下(即当前项目的所在路径下,要在cmd中cd到该目录下再执行该安装命令);
npm install -g express则将express模块安装到当前用户的全局位置(可以使用npm root -g查看全局安装目录).
全局安装与本地安装的区别 (https://www.cnblogs.com/PeunZhang/p/5629329.html)

具体Node.js和express可参考这篇文章,写的很详细(https://blog.csdn.net/han_chuang/article/details/93531654)
安装express:
注意:在cmd中安装时需要以管理员身份运行,否则权限不够会报错不能安装。
在这里插入图片描述
(2)vscode的终端设置
npm : 无法加载文件 C:\Users\wsngodv\AppData\Roaming\npm\npm.ps1,因为在此系统上禁止运行脚本
在这里插入图片描述
解决办法:
以管理员身份运行Windows PowerShell,进入PowerShell后,
输入set-ExecutionPolicy RemoteSigned选A即可。最后,也可输入get-ExecutionPolicy查看是否设置成功。
之后就可以在vscode的终端中输入命令执行了。
(3)设置静态目录
第一步:使用vscode打开你的项目:
在这里插入图片描述
第二步:在vscode的上方选择栏中找到终端,点击新建终端。
在这里插入图片描述

第三步:打开终端后,看一下是不是在项目的当前所在目录,若在,输入npm init -y生成npm项目,

此时会在当前目录下自动生成package-lock.json,
在这里插入图片描述
接着输入npm install express载入express依赖(即在当前目录下express的局部安装),这里安装依然要以管理员身份打开cmd(否则会报错权限不够),并在cmd中cd到该目录下再执行该安装命令。
在这里插入图片描述

这样即可,并且会在当前目录下再生成一个json文件和node_modules文件夹(里面是一写express的依赖库)
在这里插入图片描述

第四步:在当前目录下建立一个public文件夹(将作为静态托管文件夹),把index.html放入其中;在当前目录下建立一个server.js文件,用来引入express并设置服务器这端的一些功能。
在这里插入图片描述

// 1、引入express
 const express = require('express');//在node应用中载入express
//  2、创建应用对象
 const app = express();//建立一个express实例
 const expressPort=3000;//指定一个端口,端口号

// 静态文件的托管--将当前目录下的public文件夹设置为静态文件夹
app.use(express.static(__dirname+'/public'));

// 接下来告诉服务器端口在接收到get请求后返回一个什么样的结果
// 3、创建路由规则
// 参数(聆听地址,回调函数),在回调函数中获得3个参数(req,res,next)
// request是对请求报文的封装,response是对响应报文的封装
	app.get('/',(req,res,next)=>{

    // 使用send方法做出反馈
    res.send("hello word");
    // res.sendFile(__dirname+'/public/index.html')
})

// 4、监听端口启动服务
// 使用listen进行监听//传入(端口号,回调函数),在成功进行监听后对一个函数告诉用户服务器在运行了
app.listen(expressPort,() => {
    console.log("running……on" + expressPort);
    })

第五步:在public文件下的index.html文件中测试是否和服务器连接成功
在这里插入图片描述
随便写入一些东西,接着在server.js所在目录下运行server.js打开端口服务,
在这里插入图片描述
注意:这里路径中的所有名字都需要是英文字母,否则会报错。
在这里插入图片描述
接着在浏览器中输入localhost:3000即可看到显示,表示get请求响应成功。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值