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;
**敬请后续......
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 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 让容器管理更轻松!