vue nodejs使用express架设服务器 axios发送ajax 使用postgresql 箭头函数this的区别

1，安装依赖包

npm i axios -S
npm i express -S
npm i pg -S

2，使用postgresql

//server\pgsql.js
const pg = require('pg');

const config = {
    database: 'study',
    user: 'postgres',
    password: 'postgres',
    port: 5432
};

const pool = new pg.Pool(config);

function sqlfun(sql, arr, callback) {
    pool.connect(function (err, client, done) {
        if (err) {
            console.log("Can not connect to the DB" + err);
        }
        client.query(sql, arr,
            function (err, result) {
                done();
                if (err) {
                    console.log(err);
                }
                callback(result);
            })
    })
};

module.exports = sqlfun

3，编写服务器

//server\index.js
const express = require('express');	
const app = express();
const port = 8081;
const router=require('./router');

app.use('/api',router);

app.listen(port, () => console.log(`后台服务器监听${port}端口!`));

//server\router.js
const express = require('express');
const router = express.Router();
const sqlfun = require('./pgsql');
// import sqlfun from './pgsql';


router.get('/', (req, res) => res.send('server api test'));

router.get('/goodsList', (req, res) => {
    const page = req.query.page || 1;
    let pageSize = 5;
    sqlfun('select count(*) from product', null, (result) => {
        let count = result['rows'][0]['count'];
        if (count > 0) {
            let from = (page - 1) * pageSize;
            let sql = `select * from product order by id limit ${pageSize} offset ${from} `;
            sqlfun(sql, null, (result) => {
                if (result.rows.length > 0) {
                    res.send({
                        status: 200,
                        data: result.rows,
                        pageSize: pageSize,
                        total: count,
                        page: page,
                    });
                } else {
                    res.send({
                        status: 500,
                        data: '没有数据'
                    });
                }
            });
        }
    });
});

module.exports = router

4，在server目录使用命令npx nodemon index.js 启动服务器(npx nodemon,npx nodemon index也行)

5，使用axios发送ajax请求
在created生命周期发送

//src\components\level2\goods.vue，使用了element-plus
<template>
  <div>商品管理</div>
  <div class="header">
    <el-input v-model="input" placeholder="Please input" />
    <el-button type="primary">查询</el-button>
    <el-button type="success">添加</el-button>
  </div>
  <div class="wrapper">
    <el-table :data="tableData" stripe border style="width: 100%" height="250">
      <el-table-column type="selection" width="55" />
      <el-table-column fixed prop="id" label="商品id" width="100" />
      <el-table-column prop="name" label="名字" show-overflow-tooltip/>
      <el-table-column prop="price" label="价格" />
      <el-table-column prop="count" label="数量" />
      <el-table-column prop="category" label="类别" />
      <el-table-column prop="pic" label="图片" />
      <el-table-column prop="sellpoint" label="卖点" />
      <el-table-column prop="description" label="描述" />
      <el-table-column fixed="right" label="操作" width="200">
        <el-button type="warning">编辑</el-button>
        <el-button type="danger">删除</el-button></el-table-column
      >
    </el-table>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  methods: {},
  created(){
    axios.get('/api0/goodsList').then(res=>{
      this.tableData = res.data.data;
    })
  },
  data() {
    return {
      tableData: [],
    };
  },
};
</script>

<style lang="less" scoped>
.header {
  display: flex;
  padding: 15px;
  button {
    margin-left: 10px;
  }
}
.wrapper {
  padding: 15px;
}
</style>

箭头函数和普通function的this的区别

参考https://blog.csdn.net/qq_41157351/article/details/114874579
这里使用了

axios.get('/api0/goodsList').then(res=>{
  this.tableData = res.data.data;
})

如果使用

axios.get('/api0/goodsList').then(function(res){
  this.tableData = res.data.data;
})

this会找不到对象。