044Node.js后端mysql、sqlite数据库和file文件数据读写封装方案
来自前端的交互示例
<script setup lang="ts">
import Api from '@/utils/Api';
import As from '@/utils/As';
import {
reactive, ref } from 'vue';
const types = [
{
label: '一星', value: 1 },
{
label: '二星', value: 2 },
{
label: '三星', value: 3 },
];
const lists: any = ref([]);
const itemData: any = reactive({
data: {
id: '123', title: '标题1', content: '内容1', type: 1 },
});
const activeNames = ref(['1']);
const handleChange = (val: string[]) => {
console.log(val);
};
function add() {
Api({
url: '/apisqlitetest/add',
method: 'POST',
data: itemData.data,
}).then((res: any) => {
console.log(666.999, res);
getLists();
});
}
function del(item: any) {
Api({
url: '/apisqlitetest/del',
method: 'GET',
params: {
id: item.id },
}).then((res: any) => {
console.log(666.999, res);
getLists();
});
}
function read(item: any) {
Api({
url: '/apisqlitetest/read',
method: 'GET',
params: {
id: item.id },
}).then((res: any) => {
itemData.data = As.jsonParse(res.data[0].content);
console.log(666.999, res);
});
}
function edit() {
Api({
url: '/apisqlitetest/edit',
method: 'POST',
data: itemData.data,
}).then((res: any) => {
console.log(666.999, res);
getLists();
});
}
function getLists() {
Api({
url: '/apisqlitetest/list',
method: 'GET',
}).then((res: any) => {
lists.value = res.data;
if (lists.value && typeof lists.value === 'object' && lists.value.length) {
lists.value.forEach((el: any) => {
el.content = As.jsonParse(el.content);
});
} else {
lists.value = [];
}
console.log(666.999, lists.value);
});
}
getLists();
</script>
<template>
<el-form label-width="120px"
>{
{ itemData.data }}
<el-form-item label="编号">
<el-input v-model="itemData.data.id" />
</el-form-item>
<el-form-item label="标题">
<el-input v-model="itemData.data.title" />
</el-form-item>
<el-form-item label="类型">
<el-select v-model="itemData.data.type" placeholder="选择类型">
<el-option
v-for="item in types"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="内容">
<el-input v-model="itemData.data.content" type="textarea" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="add()"> 新增 </el-button>
<el-button @click="edit()"> 提交 </el-button>
</el-form-item>
</el-form>
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item
v-for="(item, index) in lists"
:title="item.content.title"
:name="index"
>
<div>
<el-button type="primary" @click="del(item.content)"> 删除 </el-button>
<el-button type="primary" @click="read(item.content)"> 编辑 </el-button>
{
{ item.content.content }}
</div>
</el-collapse-item>
</el-collapse>
</template>
<style scoped lang="scss"></style>
后端路由承接
module.exports = (route: any) => {
const dbSql: any = require('../../../utils/Data/Index')('sqlite');
const As: any = require('../../../utils/As');
route
.post('/add', async (ctx: any) => {
const dataStr: any = await As.getCtxData(ctx);
As.clog(666.1002, 'add', dataStr);
await dbSql
.sqlDb({
type: 'insert',
table: 'apifiletest',
field: ['name', 'content'],
value: [[As.jsonParse(dataStr).id, dataStr]],
})
.then((res: any) => {
As.clog(10022, res);
ctx.body = res;
})
.catch((err: any) => {
As.clog(10021, err);
});
})
.post('/edit', async (ctx: any) => {
const dataStr: any = await As.getCtxData(ctx);
As.clog(666.1004, 'edit', dataStr);
await dbSql
.sqlDb({
type: 'update',
table: 'apifiletest',
set: [['content', dataStr]],
where: [['name', '=', As.jsonParse(dataStr).id]],
})
.then((res: any) => {
As.clog(10042, res);
ctx.body = res;
})
.catch((err: any) => {
As.clog(10041, err);
});
})
.get('/del', async (ctx: any) => {
As.clog(666.1006, 'del', ctx.query.id);
await dbSql
.sqlDb({
type: 'delete',
table: 'apifiletest',
where: [['name', '=', ctx.query.id]],
})
.then((res: any) => {
As.clog(10062, res);
ctx.body = res;
})
.catch((err: any) => {
As.clog(10061, err);
}