持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第5天，点击查看活动详情

引言

这次我们来做网页版文章生成器，首先我们学习一些node.js开发服务器的入门知识。

框架的使用与导入

因为node原生开发服务器较麻烦，这里我们采用express框架来开发。

首先我们调出控制台，在控制台中输入

npm i express

然后等待一会儿，我们下载完express之后，通过 import express from 'express';导入 express 模块。因为我们本项目采取的ES Moudle模块，所以这里我们使用import完成导入。

接下来通过定义app完成初始化 const app = express();

之后调用 app中的listen方法完成服务器的启动 listen中传入两个参数一个是服务器启动在的那个端口号，另一个参数则是一个函数启动时调用的function.

我们通过一个实例来理解

import express from 'express';

const app = express();

app.listen(6666,()=>{
    console.log('successfully');
})

接下来我们继续打开控制台输入 node cs.js

结果如下:

successfully

我们便已成功启动了serve，并且serve跑在6666端口上。

get post请求的挂载

众所周知，请求方式中有get,post,pull......等等多种的请求方式，这里我们主要来演示挂载get和post两种请求的挂载。

get请求的挂载

import express from 'express';

const app = express();

app.get('/getmethod',(req,resp)=>{
    console.log('get')
    resp.send("这是一个get请求");
})

app.listen(6666,()=>{
    console.log('serve is running at http://localhost:6666');
})

代码写完后我们运行这个js，同样的在控制台中输入 node cs.js

首先控制台打印出来了 serve is running at http://localhost:6666

我们打开接口调试工具选择get请求，然后访问

然后你就会发现.......

那么这是为什么呢？

原来我们服务器虽然是启动在http://localhost:6666 上，但是我们挂载get请求却是在
http://localhost:6666/getmethod 中。所以我们应该访问上述的url 而不是服务器的启动地址。

修改接口文档运行发现返回了

这是一个get请求

控制台中也打印了get

get请求的挂载已经学习完毕。

post请求的挂载

完成了get请求的学习接下来我们来学习 post请求的挂载

类比get请求的挂载只不过从get换成了post

全部代码如下:

import express from 'express';

const app = express();

app.get('/getmethod',(req,resp)=>{
    console.log('get')
    resp.send("这是一个get请求");
})

app.post('/postmethod',(req,resp)=>{
    console.log('post')
    resp.send("这是一个post请求");
})

app.listen(6666,()=>{
    console.log('serve is running at http://localhost:6666');
})

打开接口测试的工具对 http://localhost:6666/postmethod 发起post请求。

接口工具返回结果:

这是一个post请求

控制台输出:

post

post 请求学习完毕。

req接收JSON

首先我们调用app.use()

代码如下:

app.use(express.urlencoded({extended:false}));

接下来我们演示post请求的接受JSON并相应一个结果

import express from 'express';

const app = express();
app.use(express.urlencoded({extended:false}));
app.get('/getmethod',(req,resp)=>{
    console.log('get')
    resp.send("这是一个get请求");
})

app.post('/postmethod',(req,resp)=>{
    console.log('post')
    resp.send("这是一个post请求");
})

app.post('/postcs',(req,resp)=>{
    const result = req.body;
    console.log(result);
    resp.send('成功了');
})

app.listen(6666,()=>{
    console.log('serve is running at http://localhost:6666');
})

首先我们要加上 app.use(express.urlencoded({extended:false})); 否则是接受不到的。

调用 node cs,js

打开接口测试工具 url:http://localhost:6666/postcs 发起请求方式为post,记得传入参数。这里我传入了name为ceshi的测试的value。

接口测试工具结果:

成功了

控制台结果:

[Object: null prototype] { ceshi: '测试' }

工具的提升

我们可以下载nodemon工具，用来提升我们的开发效率。

传统的node xxx.js启动之后每次改变都要先 ctrl+c停止服务器然后改变之后 ctrl+s保存然后再次 node xx.js再次启动

非常繁琐复杂麻烦

这里可以下载nodemon nodemon xxx.js 启动每次只要ctrl+s 保存即可不需要再停止服务器再启动了

下载方式

打开控制台输入 npm install nodemon -g

进行全局安装

下集预告

下次继续讲解服务器的代码层面的优化。

基于node.js开发的文章生成器（五、网页版本的文章生成器--准备篇）

引言