目录
我当时学会了HTML,CSS,JS来创建一个很好的界面,当时我用的是VSCode的Live Server,可是我想创建一个项目——一个有package.json的项目,却一直找不到合适的教程,最后找到了用node.js下载的Express框架建一个项目。
这个教程基本要求是你得会熟练的运用HTML,CSS,JS尤其是JS。
一、环境安装
1.安装node.js
这一部分不多讲(因为我也忘了我是怎么安装的),如果没有安装node.js可以参考以下博客:
2.使用终端创建项目
这一部分我要声明一下:我用的是Windows,其他电脑的操作方式我不太了解,可以上网去查。
首先创建一个文件夹,命名为项目的名字。
打开终端
你可以使用VSCode的终端,也可以在文件资源管理器的空白处按Shift加右键,像这样:
点击“在此处打开Powershell窗口”。
你还可以使用cmd,这里就不教了,只要是这个文件夹的终端就行了。
创建package.json
在终端输入:
npm init -y
执行以后你会发现文件夹中多了一个package.json,它是按默认值创建的。
安装Express框架
npm install express --save
可以简写成:
npm i express -S
你会发现文件夹下出现了package-lock.json和node_moudles文件夹,这就表示你已经安装好Express了。
现在你已经把基本配置安装好了,可以开始写代码了。
二、用Express写JS代码
1.获取Express模块
const express=require("express");
const app=express();
这里的app就是我们要用来管理请求的常量了。
2.监听端口
const express=require("express");
const app=express();
const port=3000
app.listen(port,()=>console.log("sever started"));
port常量就是我们要监听的端口了。
你还可以用app.set设置一下:
const express=require("express");
const app=express();
const port=3000;
app.set("port",port);
app.listen(port,()=>console.log("sever started"));
3.响应get请求
我们访问一个网站就相当于向服务器发送了一个get请求,就像这样:(当然,没人会这样写)
new XMLHttpRequest().open("get",url)
2024.2.6更新:其实就是这个意思:(写这个文章时,我还没怎么用fetch)
fetch(url);
所以我们就要在服务器端响应这个请求,下面是一个例子:
const express=require("express");
const app=express();
const port=3000;
app.set("port",port);
app.get("/",(req,res,next)=>{
res.send("<h1>Welcome to Express!</h1>");
});
app.listen(port,()=>console.log("sever started"));
2024.2.6更新:在这里要强调app.listen一定要放到最后面,否则会出现一些bug。在第三级及以前都是把app.listen写到了前面,请勿模仿。
这篇文章就到此结束了
下集来啦!
第三集:渲染(render)HTML页面https://blog.csdn.net/ttowill/article/details/128886132?spm=1001.2014.3001.5502