vue3+koa+axios实现前后端通信

vue3+koa+axios实现前后端通信

写了一个小demo来实现前后端通信,涉及跨域问题，非常简单可以给大家平时开发的时候参考

服务端：
目录结构如下：

router index.js

// router的入口文件
// 引入路由
const Router = require("koa-router")
const router = new Router()
router.get("/", async (ctx) => {
    ctx.body = "首页"
  })
  router.get("/list",async(ctx)=>{
      ctx.body={
          data:[{name:1},{name:2}]
      }
     
  })
// router.use()
router.use(router.routes(), router.allowedMethods())

// 一般首页是直接访问ip+端口号进入,所以可以将期重定向到/home下的某一个路由
router.redirect("/", "/list")

module.exports = router // 导出router给app.js使用
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

app.js

// 整个koa项目的入口文件
const Koa = require("koa") // 引入koa
const app = new Koa() // 声明一个实例
const port = 3000 // 端口号
const router = require("./router/index") // 配置路由
const cors = require("koa-cors") // 解决跨域
const static = require("koa-static") // 静态资源管理
const path = require("path")

/**
 * use()就是调用router中间件
 * router.routes()作用是启动路由
 * router.allowedMethods()作用是允许任何请求(例如:get,post,put)
 */
//  router.get("/list",async(ctx)=>{
//     console.log(ctx)
//     ctx.body={
//         data:[{name:1},{name:2}]
//     }
   
// })
app.use(static(path.join(__dirname + "/public"))) //读取静态资源
app.use(cors({
    exposeHeaders: ['WWW-Authenticate', 'Server-Authorization', 'x-show-msg'],
    maxAge: 5,  //  该字段可选，用来指定本次预检请求的有效期，单位为秒
    allowMethods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], // 允许的请求方法
    allowHeaders: ['Content-Type', 'Authorization', 'Accept', 'X-Requested-With'] 
})) //后端允许跨域访问

app.use(router.routes(), router.allowedMethods())

app.listen(port, () => {
  console.log(`server in running at http://localhost:${port}`)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

前端：
首先要安装axios
main.js

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
app.config.globalProperties.$axios = axios
app.mount('#app')
1
2
3
4
5
6
7

vue.config.js

module.exports = {
    devServer: {
        port:8080,
        open:true,
        proxy: {
            '/api': {
                target: 'http://localhost:3000/', //接口域名
                changeOrigin: true,             //是否跨域
                ws: true,                       //是否代理 websockets
                secure: false,                   //是否https接口
                pathRewrite: {                  //路径重置
                    '^/api': ''
                }
            }
        }
    }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

前端请求数据：

<template>
  <div class="hello">
    <button @click="sendMessage">click me</button>  
    <input type="text" :value="msg">
  </div>
</template>

<script src="./hello">

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

import axios from "axios"
import {ref} from 'vue'

export default {
    setup(){
        let msg=ref();
        function sendMessage(){
            axios.get('/api/list').then(function(res){
                console.log(res.data.data)
                msg.value=res.data.data[0].name
            })
        }
        return{
            msg,sendMessage
        }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16