文章目录

环境准备
前端搭建
后端搭建
源代码

记录自己用 Vue 和 Koa2 框架实现前后端的demo。

环境准备

我的Node 和 NPM版本：

C:\Users\lynnh>node -v
v16.4.0

C:\Users\lynnh>npm -v
7.18.1

前端搭建

借助 vue-cli 4.0以上版本快速搭建前端Vue 环境。

先卸载老的vue-cli版本（指4.0以下）

若没有老的版本，此步骤可跳过。

npm uninstall -g vue-cli

安装新版本

注意和老版本的包名区别。

npm install -g @vue/cli

如果用npm安装会报错的话，推荐使用cnpm安装：

npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @vue/cli

查看我们安装好的vue-cli版本：

C:\Users\lynnh>vue -V
@vue/cli 4.5.13

vue-cli装好了，接下来我们开始创建我们的前端项目。

创建项目

这里我们先切到D盘下面，在FE目录下来创建我们的项目：

C:\Users\lynnh>cd D:\FE
C:\Users\lynnh>d:
D:\FE>

键入命令：

vue create my-first-vue-demo

可以用方向键来选择我们的需要的工具。
在这里插入图片描述
这里我们选Manually select features，手动选择一些特性，进入下一步：
在需要选择的特性上按空格来确认，这里我们选择如下几个特性。

我们选择vue 2.x版本。

根据自己喜好，这里路由模式我们选择不使用histroy模式。
在这里插入图片描述
CSS预处理器根据自己喜好，这里我们选择Stylus。

选择用ESLint + Prettier 来规范我们的代码，并选择保存时校验。

这里我们选择将一些配置文件保存到独立的文件。

不保存我们的预设。
这一步之后，就等待自动构建完成。
在这里插入图片描述
构建完成后用VS Code打开我们的项目。

启动项目

npm run serve

这是vue-cli帮我们默认生成的页面。
在这里插入图片描述

我们需要操作的文件主要都在src目录下。
在这里插入图片描述

修改HelloWorld.vue

删掉原本的内容，改为静态的hello world文本。

<template>
  <div>hello world!</div>
</template>

<script>
export default {};
</script>

<style scoped lang="stylus"></style>

访问http://localhost:8080：
在这里插入图片描述
好了，前端暂时先到这里，接下来我们搭建后端，实现后端api。
等后端搭建好后，我们就可以通过前端去请求后端的接口，从而获取动态的数据。

后端搭建

借助 Koa2脚手架工具快速搭建后端Node环境。

安装脚手架工具

npm install koa-generator -g

通过 koa2 或者 Koa2 创建项目（大小写都可）

koa2 my-first-node-demo

创建好后，进入项目目录下，使用npm i装包。
Tips: npm i等同于npm install。

D:\FE\my-first-node-demo>npm i

装好后在VS Code中打开我们的项目。
Tips：命令行中，在项目的路径下，使用code .命令可快速在VS Code打开该项目。如果你学到了的话不妨点个赞 ^ ^

D:\FE\my-first-node-demo>code .

启动项目

npm run dev

如果这一步报错的话：
在这里插入图片描述
对package.json文件的内容进行修改：对路径用双反斜杠

  "scripts": {
    "start": "node bin/www",
    "dev": ".\\node_modules\\.bin\\nodemon bin/www",
    "prd": "pm2 start bin/www",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

保存，再次启动：
在这里插入图片描述
访问http://localhost:3000：

项目目录结构

www文件中可以修改我们的端口之类操作
routes目录下主要编写api文件
修改index.js文件
增加以下内容并保存：

router.get("/get_hello_world", async (ctx, next) => {
  ctx.body = {
    content: "hello world!!!"
  }
})

现在我们的接口写好了，在http://localhost:3000/get_hello_world访问该接口：
在这里插入图片描述
接下里我们准备修改前端的代码来访问该接口。
用axios来发请求。

安装axios

npm install axios -S

修改HelloWorld.vue

<template>
  <div>
    <button @click="getContent">点我</button>
    <div>{{ content }}</div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data: function () {
    return {
      content: "",
    };
  },
  methods: {
    async getContent() {
      const res = await axios.get("http://localhost:3000/get_hello_world");
      if (res?.data) {
        this.content = res.data.content;
      }
    },
  },
};
</script>

<style scoped lang="stylus"></style>

写好后保存，我们迫不及待的到页面点击按钮，结果报错了：
在这里插入图片描述
错误很明显，我们从8080端口去请求3000端口的数据，因端口不同，需要跨域了。
这个问题可以通过配置代理来解决。

项目根目录下新建vue.config.js
vue-cli 4.0以上不会默认生成该文件，需要我们自己创建。

// vue.config.js
module.exports = {
  devServer: {
    port: "8080", // 设置端口号
    proxy: {
      "/api": {
        // 表示以/api开头的请求url需要被代理
        target: "http://localhost:3000",
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          "^/api": "" // 请求时将url中从api开始替换为""
        }
      }
    }
  }
}

修改了配置文件记得重新启动项目。

npm run serve

修改HelloWorld.vue

只需将请求的url替换为以api开头即可。

const res = await axios.get("/api/get_hello_world");

现在我们到界面继续查看，点击按钮：
在这里插入图片描述
wooooooooooooooooooooooooooo！！！
我们想要的结果出现了。

至此我们的前后端分离的动态"hello world" 已基本实现。

源代码

原文链接：https://blog.csdn.net/baidu_36511315/article/details/118256646