VUE+Axios+Nodejs+express+pgsql實現先後數據交互

一、環境準備（須要安裝）

（1）vue-cli3

（2）nodejs

（3）axios

（4）pg

   (5）express

編譯器：vscode

二、我的思路

（1）利用Nodejs+pg包，讀取pgsql的數據

（2）利用Nodejs+express將讀取的數據庫數據，發送到創建的web服務器裏

（3）利用VUE+axios讀取web服務器裏的數據，並在本身的客戶端顯示

三、工程目錄（紅色框內是要用到的目錄）

（1）後端目錄

 

 

（2）前端目錄

 

 

四、具體實現

（1）利用Nodejs+pg實現數據庫數據讀取。

我是利用數據池的方式進行鏈接。

1）在sever下創建一個db.js

// 數據庫鏈接配置
module.exports = { pgsql: { host: 'localhost', port: 5432, user: 'postgres', password: 'admin', database: 'hello', poolSize: 5 } }

2)sever文件下建立一個index.js

// node 後端服務器
 const userApi = require('./api/userApi'); const fs = require('fs'); const path = require('path'); const bodyParser = require('body-parser'); const express = require('express'); const app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: false })); // 後端api路由
app.get('/user/addUser', userApi); app.post('/user/login', userApi); // 監聽端口
app.listen(8088); console.log(app); console.log('success listen at port:3000......');

3)在sever下創建api文件，而後再創建userApi.js

var db = require('../db'); var express = require('express'); var router = express.Router(); const pgsql = require('pg'); var $sql = require('../sqlMap'); //建立數據池實例
let conn = pgsql.Pool(db.pgsql); //數據池鏈接
conn.connect(); var jsonWrite = function (res, ret) { if (typeof ret === 'undefined') { res.json({ code: '1', msg: '操做失敗' }); } else { res.json({table:ret.fields}); } }; // 增長用戶接口
console.log(router); router.get('/user/addUser', (req, res) => { var sql = $sql.user.add; var params = req.body; console.log(params); //conn.query(sql, [params.username, params.age], function (err, result)
  conn.query(sql,function (err, result) { if (err) { console.log(err); } if (result) { jsonWrite(res, result); } }) }); router.post('/user/login', (req, res) => { var params = req.body; var sql = `select cloud_user_status('${params.code}', '${params.password}')`; console.log(params); //conn.query(sql, [params.username, params.age], function (err, result)
  conn.query(sql, function (err, result) { if (err) { console.log(err); } if (result) { res.json({ status: result.rows[0].cloud_user_status}) } }) }); // module.exports = router;

**敬請後續......