1、环境准备（需要安装）

（1）vue-cli3

（2）nodejs

（3）axios

（4）pg

编译器：vscode

2、个人思路

（1）在pgsql里建数据表

（2）利用Nodejs+pg包，读取pgsql的数据

（3）利用Nodejs+express将读取的数据库数据，发送到建立的web服务器里

（4）利用VUE+axios读取web服务器里的数据，并在自己的客户端显示

3、工程目录（红色框内是要用到的目录）

（1）后端目录

（2）前端目录

（3）数据库

4、具体实现

（1）PGsql里创建数据表

这个在网上查询即可，主要就是对于PostgreSQL的安装和使用。

TIPS：可以利用navicat这个数据库管理软件和设计工具，使得数据库操作更加的简单。

（2）利用Nodejs+pg实现数据库数据读取。

我是利用数据池的方式进行连接。

1）db.js

module.exports = {
    pgsql:{
        host: 'localhost',
    port: 5432,
    user: 'postgres',
    password: '123123',
    database: 'BINGDB',
    poolSize: 5
    }
}

2)index.js

const db = require('./db.js')
const pgsql = require('pg');
const express = require('express');
const app = express();
app.listen(8088, () => {
    console.log('fucking 8088!')
})
//设置跨域访问
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});
//创建数据池实例
let conn = pgsql.Pool(db.pgsql);
//数据池连接
conn.connect();
//从数据库请求数据
app.get('/', function (req, res) {
    //sql语句（查询）
    let sql_qur = 'select * from "public"."Gov_Manager"';
    //数据库查询query(sql,callback)
    conn.query(sql_qur, function (error, result, fields) {
        if (error) {
            console.log(error)
        }
        //将数据库读取的数据转成JSON格式
        res_send = JSON.stringify(result.rows);
        //将J数据发送到8088端口的服务器
        res.send(res_send)
        //数据读取完了，就把数据库连接关了，也可以release掉（因为我用的是数据池）。
        conn.end();
    })
})

以上我就通过nodejs+express+pg实现了数据库的读取，以及web服务器的创建，还要数据的上传。

（3）利用VUE+axios实现数据后端请求，前端展示

本人利用vue-cli3直接创建工程，然后在脚手架的基础上实现操作。

1）utils/request.js

import axios from 'axios';
//配置axios实例
//URL（绝对的） = baseURL + url(相对的)
const service = axios.create({
    baseURL : "http://127.0.0.1:8088",
    timeout : 5000
})

export default service

2）api/DataOfBing.js

import request from '../utils/request'
//这就是把要请求的URL封装成API，便于管理，输出后是一个promise对象。
//为什么是一个promise对象？因为axios就是在promise的基础上实现的呀。
//封装成了promise对象，就可以直接.then操作了
//fetche函数可以加入param参数，例如下侧：
//export function fetch(param){
//    return request({
//        url : '/',
//        method: 'get',
//        params: param
//    })
//}
export function fetch(){
    return request({
        url : '/',
        method: 'get'
    })
}

3)vue.config.js（vue-cli3中，将对于webpack等的配置均封装隐蔽起来，可以自行新建一个vue.config.js文件，然后在里面进行配置，这样可以覆盖默认的配置。）

此次罪域vue.config.js的操作，主要是加入一个proxy代理服务器，使得能够访问相应的web服务器。

proxy: {
        //'/'是指相对url
            '/': {
                //目标，指向绝对URL。
                target: `http://127.0.0.1:8088`,
                changeOrigin: true,
                pathRewrite: {
                    '^/' : ''
                }
            }
        },

以上就已经实现了全栈开发的配置，即实现了前端+后端+数据库的交互啦

4）axiosCom.vue组件

这些代码没什么好说的，基本的v-for指令，还有一些就是vue的api了，可以通过对官文的查看，了解使用的方法。

主要思路就是：把fetch()函数从后端索取到的数据，向前端展示

<template>
  <ul>
    <li v-for = "user in users" >
      {{ user }}
    </li>
  </ul>
</template>

<script>
import {fetch} from '../api/DataOfBing' 

export default {
  data(){
    return {
      users : []
    }
  },
  mounted(){
    var self = this;
    fetch()
    .then(res =>{
      res.data.forEach(param=>{
        self.users.push(param)
      })
    })
  }
};
</script>

5）App.vue

这个就是把组件加到程序的入口里面去了。

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <axiosCom></axiosCom>
  </div>
</template>

<script>
import axiosCom from './components/axiosCom'

export default {
  name: 'app',
  components: {
    axiosCom,
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>