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会找不到对象。