zoukankan      html  css  js  c++  java
  • 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;

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

  • 相关阅读:
    菜鸟打印模板
    centos8安装nginx1.9.1
    centos8安装tomcat8.5
    构建微信公众号服务实例和小程序服务实例
    wxMpMenuService.menuGet()和wxMpMenuService.getSelfMenuInfo()返回值对比
    spring cloud 实现基于Nacos权重的负载均衡
    go开发环境搭建
    国内公共的DNS服务&Centos7 配置公共DNS服务
    Redis
    Spring Boot 集成 PageHelper
  • 原文地址:https://www.cnblogs.com/hongyungo/p/12187751.html
Copyright © 2011-2022 走看看