044Node.js后端mysql、sqlite数据库和file文件数据读写封装方案

044Node.js后端mysql、sqlite数据库和file文件数据读写封装方案

来自前端的交互示例

  • VUE3示例
<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);
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿赛工作室

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值