VUE+Axios+Nodejs+express+pgsql实现前后数据交互【手摸手（绝对真实！），基础到爆炸！】
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了VUE+Axios+Nodejs+express+pgsql实现前后数据交互【手摸手（绝对真实！），基础到爆炸！】，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4042字，纯文字阅读大概需要6分钟。
内容图文
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>
内容总结
以上是互联网集市为您收集整理的VUE+Axios+Nodejs+express+pgsql实现前后数据交互【手摸手（绝对真实！），基础到爆炸！】全部内容，希望文章能够帮你解决VUE+Axios+Nodejs+express+pgsql实现前后数据交互【手摸手（绝对真实！），基础到爆炸！】所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。