vue+koa2+mysql前后端访问

た入场券 2021-09-02 10:37 553阅读 0赞

# 一、服务端-koa2 #

## 1、koa-generator搭建koa2项目 ##

首先使用koa脚手架搭建好基础的框架，具体步骤，见：[https://blog.csdn.net/qq\_40323256/article/details/109256624][https_blog.csdn.net_qq_40323256_article_details_109256624]

## 2、封装mysql连接池 ##

安装mysql包

cnpm i -S mysql

在根目录下新建db.js

![20201024164541444.png][]

// db.js 
    var mysql = require('mysql');
    
    var pool = mysql.createPool({
        host: 'localhost',
        user: 'root',
        password: 'root',
        database: 'test'
    });
    
    function query(sql) {
        return new Promise((resolve, reject) => {
            pool.getConnection(function (err, connection) {
                connection.query(sql, function (err, result) {
                    if (err) {
                        reject(err)
                    } else {
                        resolve(result)
                    }
                    connection.release();
                });
            });
        })
    
    }
    
    exports.query = query;

## 新建路由 ##

在routes文件夹中创建test.js

![20201024164759790.png][]

test.js内容如下：

## 注册路由 ##

在app.js中将routes/test.js给注册进来

![20201024164901142.png][]![20201024164912318.png][]

# 二、客户端-Vue2 #

## 封装axios.js ##

![20201024165216317.png][]

axios.js内容如下：

import axios from 'axios'
    import qs from 'qs'
    
    axios.defaults.timeout = 5000
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'
    
    //请求拦截器
    axios.interceptors.request.use(
        config => {
            return config
        },
        error => {
            return Promise.reject(error)
        }
    )
    //响应拦截器即异常处理
    axios.interceptors.response.use(response => {
        return response
    }, err => {
        return Promise.resolve(err.response)
    })
    
    export default {
        get(url, params = {}) {
            return new Promise((resolve, reject) => {
                axios.get(url, {
                    params: params
                }).then(res => {
                    resolve(res)
                }).catch(err => {
                    reject(err)
                })
            })
        },
    
        post(url, params = {}) {
            return new Promise((resolve, reject) => {
                axios.post(url, qs.stringify(params))
                    .then(response => {
                        resolve(response)
                    }).catch(err => {
                        reject(err)
                    })
            })
        }
    }

main.js中注册为全局

//全局注册axios
    import http from '@/api/axios.js'
    Vue.prototype.$axios = http

## 解决跨域 ##

在根目录新建vue.config.js

// vue.config.js
    module.exports = {
        lintOnSave: false, //取消eslint
        devServer: {
            proxy: {
                '/api': {
                    target: 'http://localhost:3000', //设置开发环境服务域名和端口号 别忘了加http
                    changeOrigin: true, //這裡true表示实现跨域
                    pathRewrite: {
                        '^/api': ''
                    }
                }
            }
        }
    }

## 前端访问-增删改查 ##

<template>
      <div class="main">
        <el-button @click="selectAllUsers()">selectAllUsers</el-button>
        <el-button @click="deleteUsers()">deleteUsers</el-button>
        <el-button @click="addUsers()">addUsers</el-button>
        <el-button @click="updateUsers()">updateUsers</el-button>
      </div>
    </template>
    
    <script>
    export default {
      components: {},
      data() {
        return {};
      },
      props: {},
      created() {},
      mounted() {},
      computed: {},
      methods: {
        //查询所有用户
        async selectAllUsers() {
          let data = await this.$axios.get("/api/test/selectAllUsers");
          console.log("data", data);
        },
        //删除用户
        async deleteUsers() {
          let obj = {
            id: 3
          };
          let data = await this.$axios.post("/api/test/deleteUsers", obj);
          console.log("data", data);
        },
        //添加用户
        async addUsers() {
          let obj = {
            username: "王五",
            password: 555
          };
          let data = await this.$axios.post("/api/test/addUsers", obj);
          console.log("data", data);
        },
        //修改用户
        async updateUsers() {
          let obj = {
            username: "王五",
            password: 55555555
          };
          let data = await this.$axios.post("/api/test/updateUsers", obj);
          console.log("data", data);
        }
      }
    };
    </script>
    
    <style lang="scss" scoped>
    .main {
      height: 100%;
      color: red;
    }
    </style>

# 三、数据库-mysql #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

[https_blog.csdn.net_qq_40323256_article_details_109256624]: https://blog.csdn.net/qq_40323256/article/details/109256624
[20201024164541444.png]: /images/20210725/21ea0ebc44ee4a0b81dd6ad356cb29d2.png
[20201024164759790.png]: /images/20210725/92d16cf26a21497f9ea52aaeb6eaf79f.png
[20201024164901142.png]: https://img-blog.csdnimg.cn/20201024164901142.png
[20201024164912318.png]: /images/20210725/feab914987964337be680656ab2b8498.png
[20201024165216317.png]: /images/20210725/feccbd45eab54bbcaa2ce9ad4af16cce.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/a766715a2c4441bcb6a3f00725d5530a.png