JavaScript结合node.js和Express框架制作项目教程详细版（一）——基础语法

目录

一、环境安装

1.安装node.js

2.使用终端创建项目

打开终端

创建package.json

 安装Express框架

二、用Express写JS代码

1.获取Express模块

2.监听端口

3.响应get请求

---

我当时学会了HTML,CSS,JS来创建一个很好的界面，当时我用的是VSCode的Live Server，可是我想创建一个项目——一个有package.json的项目，却一直找不到合适的教程，最后找到了用node.js下载的Express框架建一个项目。

这个教程基本要求是你得会熟练的运用HTML,CSS,JS尤其是JS。

一、环境安装

1.安装node.js

这一部分不多讲（因为我也忘了我是怎么安装的），如果没有安装node.js可以参考以下博客：

Windows安装教程

Mac安装教程

Linux安装教程

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写到了前面，请勿模仿。

这篇文章就到此结束了

下集来啦！

JavaScript结合node.js和Express框架制作项目教程详细版（二）——详细语法与概念https://blog.csdn.net/ttowill/article/details/128755746

 第三集：渲染(render)HTML页面https://blog.csdn.net/ttowill/article/details/128886132?spm=1001.2014.3001.5502