从零开始搭建自己的博客平台：前端开发指南（持续更新-3、Koa + MongoDB）

Ferries
1,343 阅读4分钟

Koa + MongoDB

Koa创建

继上一篇文章，我们要开始写后台的接口，语言使用的是Node在这里我使用的是Koa框架，因为Koa官方是没有脚手架的，所以我们用其他的脚手架koa-generator，创建一个新的Koa项目，官方链接

$ npm i koa-generator -g
//myapp 是自定义的名字
$ koa2 myapp 
$ cd myapp
// 安装依赖包
$ yarn

现在我们就已经将Koa项目跑起来了，它已经集成了各种中间件。方便我们的开发，现在我们看一下它的目录层级

image-20230317102107188.png

bin/www : 这是项目的启动文件，里面包含了服务的启动，监听。
public  : 放我们的资源文件
routes  : 这是我们的路由目录，每一个文件都是一个路由，在app.js中注册
views   : 暂时没用（我也不知道）
app.js  : 这个文件是我们的主程序，处理一些插件，路由注册，数据库配置都在这个文件中

我们先将bin/www中的端口号改成8080，然后通过yarn dev命令跑起来，访问localhost:8080,看到下图，你就已经完成第一步安装了

image-20230317103132656.png

koa跨域问题

ok，现在我们在前端调用一下我们的初始接口，在前端随便一个页面写下以下代码，

fetch("http://localhost:8080/").then((res) => console.log(res));

我们打开浏览器控制台发现它跨域了，什么是跨域呢，就是url的协议，地址，端口号，任何一个不匹配就被浏览器认定为跨域，下面记录一下我的解决方法。

我们在koa中的app.js写下以下代码，注意位置，一定要在路由注册之前

app.use(async (ctx, next) => {
  ctx.set('Access-Control-Allow-Origin', '*');
  if (ctx.method === 'OPTIONS') {
    ctx.body = 200
  } else {
    await next()
  }
})

image-20230317104806021.png

现在get请求ok了，我们编写一个post接口,后端写在routes/index.js文件中

// routes/index.js
router.post("/add", async (ctx, next) => {
  let { title, doc, description, tag, image } = ctx.request.body;
  console.log(title, doc, description, tag, image,ctx.request.body);
​
  ctx.body = {
    code: 200,
    message: "Success",
  };
});

👇前端代码

fetch("http://localhost:8080/add", {
    method: "post",
    body: JSON.stringify({
      title: "test data",
      doc: "test Doc",
      tag: "test tag",
    }),
    headers: {
      "Content-Type": "application/json",
    },
  });

你会发现它又又又跨域了

image-20230317113401577.png

这是为什么呢？？？？？？，这就涉及到了简单请求和复杂请求，以及浏览器的安全策略和CORS（跨域资源共享）规范。

简单请求是指满足以下所有条件的请求：

  • 使用以下请求方法之一：GET、HEAD、POST
  • 请求头中只使用了以下字段：Accept、Accept-Language、Content-Language、Content-Type（仅限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain）
  • 请求中没有使用任何非简单请求的参数，例如自定义HTTP头

在这种情况下，浏览器会自动发送一个预检请求（Preflight Request）给服务器，以验证服务器是否支持跨域请求。预检请求使用 OPTIONS 方法发送，它包含了一些额外的请求头和信息，例如 Origin、Access-Control-Request-Method、Access-Control-Request-Headers 等。如果服务器返回允许请求的响应头，那么浏览器就会发出实际的请求。

对于复杂请求，指的是不符合以上简单请求条件的请求，例如使用 PUT、DELETE 等方法，或者在请求头中使用了自定义的头信息等。这种情况下，浏览器不会自动发送预检请求，而是直接发起实际请求。因此，服务器需要在响应头中添加适当的 CORS 头信息，允许跨域请求才能成功。如果服务器没有正确设置 CORS 头信息，浏览器就会阻止响应被读取，并抛出一个跨域错误。

总之，简单请求和复杂请求之间的主要区别在于，简单请求是由浏览器自动发送预检请求，而复杂请求则需要服务器返回适当的CORS头信息来允许跨域请求。

最简单的处理方法就是，我们通过koa2-cors的插件来处理

$ yarn add koa2-cors
//将上述的处理跨域的代码替换成下面的
const cors = require("koa2-cors")
app.use(cors())

image-20230317114008664.png

现在就ok了。我们现在连通之后就可以正式开发接口了，我们现在就要考虑接口接收回来的数据要存在哪里，我之后mongodb数据库，所以下一步就是安装mongodb

MongoDB安装

现在我们前后端的项目都OK了，我们要开始搭MongoDB了，但是作为一个开发攻城狮，我对数据库还是不熟的，所以这一步我会非常详细的写下来，以及把我遇到的问题都写出来。

1、首先让我们先把mongoDB下载下来，下载地址

2、下载下来之后我们要把这个包解压出来，然后重命名为mongodb(为了好看)。

3、现在我们在终端执行mongod命令是报错的，因为我们没有把mongod命令添加到环境中，打开终端，执行以下操作

// 执行 
$ open ~/.bash_profile
// 把下面这行代码添加到文件末尾，'/usr/local/mongodb/bin'这是你本地mongodb的bin目录位置
export PATH=/usr/local/mongodb/bin:$PATH 
$ source ~/.bash_profile
//测试数据库命令是否可用
$ mongod --version

4、现在我们可以启动数据库了

//我们先进入到mongodb目录创建一个数据保存目录
$ cd /usr/local/mongodb
$ mkdir -p data/db
//启动数据库命令
$ mongod --dbpath /usr/local/mongodb/data/db

5、打开另一个终端，我们使用mongo命令启动数据库操作面板，在这里我们如果使用的是V6.0之后的版本，我们需要去单独下载mongoDB shell,下载地址，命令也从mongo变成了mongosh，然后像上面一样配置mongosh命令。

// 执行 
$ open ~/.bash_profile
// 把下面这行代码添加到文件末尾，'/usr/local/mongosh-1.8.0-darwin-x64/bin'这是你本地mongodb的bin目录位置
export PATH=/usr/local/mongosh-1.8.0-darwin-x64/bin:$PATH 
$ source ~/.bash_profile
//测试数据库命令是否可用
$ mongosh --version
//启动mongosh
$ mongosh

image-20230315104131387.png 当我们看到这样的时候，你就可以操作数据库了

image-20230315104221597.png

以上就是操作数据库的命令

$ show dbs            : 查找所有的库
$ use test            : 使用哪一个数据库
$ show collections    : 展示数据库里面的表
$ db.blogs.find()     : 查找表中所有数据

总结

我们现在所有需要的东西都搭建好了，下一步就是三端连调了，期待后面的更新吧

avatar
文章
阅读
粉丝