VUE+Axios+Nodejs+express+pgsql实现前后数据交互

1、环境准备(需要安装)

(1)vue-cli3

(2)nodejs

(3)axios

(4)pg

   (5)express

编译器:vscode

2、个人思路

(1)利用Nodejs+pg包,读取pgsql的数据

(2)利用Nodejs+express将读取的数据库数据,发送到建立的web服务器里

(3)利用VUE+axios读取web服务器里的数据,并在自己的客户端显示

3、工程目录(红色框内是要用到的目录)

(1)后端目录

 

 

(2)前端目录

 

 

4、具体实现

(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;
复制代码

**敬请后续......

posted @   hongzi826  阅读(1983)  评论(1编辑  收藏  举报
编辑推荐:
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示