vue2+koa2+postgresql前后端访问

分手后的思念是犯贱 2021-09-07 06:21 1107阅读 0赞

vue+koa2+mysql前后端访问：[https://blog.csdn.net/qq\_40323256/article/details/109261939][https_blog.csdn.net_qq_40323256_article_details_109261939]

# 一、服务端-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、封装postgresql连接池 ##

安装mysql包

cnpm i -S pg

在根目录下新建db.js

![20201024164541444.png][]

// 连接postgreSQL
    var pgsql = require("pg");
    var pool = new pgsql.Pool({
        host: 'localhost',
        user: 'postgres', // 数据库用户名
        password: 'user', // 数据库密码
        database: 'test'
    });
    
    function query(sql) {
        return new Promise((resolve, reject) => {
            pool.connect(async (err, connection) => {
                let result = await connection.query(sql);
                if (result) {
                    resolve(result)
                } else {
                    reject(err)
                }
                connection.release();
            });
        })
    }
    
    exports.query = query;

如果想换成mysql数据库，只需要更改db.js即可。注意：

1.  新建连接池时，pg用**new** pqsql.**Pool**()，mysql用mysql.**createPool**（）
2.  开始连接时，pg中用pool.**connect**()，mysql中用pool.**getConnection**() 
3.  pg中所有表字段名需要小写，而mysql中的表字段可以大写。为了便于两者转换，推荐都用小写

## 新建路由 ##

在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>

# 三、数据库-postgresql #

这里数据库名为：test，表名为users

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

[https_blog.csdn.net_qq_40323256_article_details_109261939]: https://blog.csdn.net/qq_40323256/article/details/109261939
[https_blog.csdn.net_qq_40323256_article_details_109256624]: https://blog.csdn.net/qq_40323256/article/details/109256624
[20201024164541444.png]: /images/20210725/91f83f7636be4c3da319e96aceddcb85.png
[20201024164759790.png]: /images/20210725/0404b8ccea144963948fc3e9eb1bf899.png
[20201024164901142.png]: https://img-blog.csdnimg.cn/20201024164901142.png
[20201024164912318.png]: /images/20210725/3dad612875014d4ca15a1a8e3657e6cd.png
[20201024165216317.png]: /images/20210725/0dd1e38304bd4e96b28d13c295c1b84b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/0b58b4f954e040ad85a5b9b081eff3e2.png