koa2对Json数组增删改查

参考：

nodejs框架如何对json文件进行增删改查 - web开发 - 亿速云这篇文章主要为大家展示了“nodejs框架如何对json文件进行增删改查”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习�...https://www.yisu.com/zixun/168616.html小案例：javascript实现对json文件的增删改查_奄奄一息的一条咸鱼的博客-CSDN博客_js对json增删改查下面为books.json格文件的数据[{ "id": 1, "bookName": "完美世界", "author": "辰东", "hero": "石昊"}, { "id": 2, "bookName": "武庚纪", "author": "沈乐平", "hero": "武庚"}, { "id": 4, "bookName": "天行九歌", "author": "陈岚", "hero": "韩非"}https://blog.csdn.net/weixin_46682277/article/details/123011417 

 前端

 index.vue:

<!--page1-->
<template>
  <div class="userManage">
    <el-card>
      <div style="margin-bottom: 10px">
        <el-input
          v-model="searchName"
          clearable
          placeholder="输入用户名称搜索"
          style="width: 200px; margin-right: 10px"
        />
        <el-button
          sizi="mini"
          type="success"
          icon="el-icon-search"
          @click="searchUser(searchName)"
          >搜索</el-button
        >
        <el-button
          sizi="mini"
          type="warning"
          icon="el-icon-refresh-left"
          @click="searchName = ''"
          >重置</el-button
        >
        <el-button
          sizi="mini"
          @click="handleAdd()"
          type="primary"
          icon="el-icon-plus"
          >新增</el-button
        >
        <el-button
          @click="getUserList()"
          sizi="mini"
          icon="el-icon-refresh"
          style="float: right"
          >刷新</el-button
        >
      </div>
      <el-table :data="tableData" border v-loading="isLoading">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column
          label="用户名"
          prop="username"
          align="center"
          width="150px"
        ></el-table-column>
        <el-table-column
          label="密码"
          prop="password"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button size="mini" @click="showEditDialog(scope.row)">
              <i class="el-icon-edit" /> 编辑
            </el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)"
            >
              <i class="el-icon-delete" /> 删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <UserManageDialog
      :dialog="dialog"
      :formData="formData"
      @addUser="addUser"
      @editUser="editUser"
    ></UserManageDialog>
  </div>
</template>
 
<script>
import axios from "axios";
import UserManageDialog from "./userManageDialog.vue";
import qs from "qs";

export default {
  name: "page1",
  components: { UserManageDialog },
  data() {
    return {
      searchName: "",
      isLoading: false,
      dialog: {
        show: false,
        title: "",
      },
      formData: {
        id: "",
        username: "",
        password: "",
      },
      tableData: [
        {
          id: "",
          username: "admin",
          password: "123",
        },
      ],
    };
  },
  props: {},
  created() {},
  mounted() {
    this.getUserList();
  },
  computed: {},
  methods: {
    //打开新增用户窗口
    handleAdd() {
      this.dialog = {
        show: true,
        title: "新增用户",
        option: "add",
      };
      this.formData = {
        username: "",
        password: "",
      };
    },
    //打开编辑用户窗口
    showEditDialog(row) {
      console.log("row:", row);
      this.dialog = {
        show: true,
        title: "编辑用户",
        option: "edit",
      };
      this.formData = {
        id: row.id,
        username: row.username,
        password: row.password,
      };
    },
    //获取用户列表
    async getUserList() {
      this.isLoading = true;
      let data = await axios.get("http://localhost:3000/users");
      this.tableData = data.data.data.users;

      this.isLoading = false;
    },
    //根据用户名查询
    async searchUser(searchName) {
      if (!searchName) {
        this.getUserList();
        return;
      }
      this.isLoading = true;
      let { data } = await axios.get(
        "http://localhost:3000/users/findByUsername",
        {
          params: { username: searchName },
        }
      );
      this.tableData = data.data;
      this.isLoading = false;
    },
    //删除用户
    handleDelete(row) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await axios.delete(`http://localhost:3000/users`, {
            params: { id: row.id },
          });
          this.$message({
            type: "success",
            message: "删除成功!",
            showClose: true,
          });
          this.getUserList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
            showClose: true,
          });
        });
    },
    //新增用户
    async addUser() {
      await axios.post(
        "http://localhost:3000/users",
        qs.stringify({
          username: this.formData.username,
          password: this.formData.password,
        })
      );

      this.dialog.show = false;
      this.$notify({
        title: "成功",
        message: "新增用户成功！",
        type: "success",
      });
      this.getUserList();
    },
    //编辑用户
    async editUser() {
      await axios.put("http://localhost:3000/users", {
        id: this.formData.id,
        username: this.formData.username,
        password: this.formData.password,
      });
      this.dialog.show = false;
      this.$notify({
        title: "成功",
        message: "编辑用户成功！",
        type: "success",
      });
      this.getUserList();
    },
  },
  watch: {},
};
</script>

 userManageDialog.vue:

<!--userManageDialog   -->
<template>
  <div class="userManageDialog">
    <el-dialog
      :title="dialog.title"
      width="45%"
      :visible.sync="dialog.show"
      v-if="dialog.show"
    >
      <el-form
        ref="ref_form_userManage"
        :model="formData"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            v-model="formData.username"
            autocomplete="off"
            style="width: 90%"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            v-model="formData.password"
            autocomplete="off"
            style="width: 90%"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.show = false">取 消</el-button>
        <el-button
          v-if="dialog.option == 'add'"
          @click="addUser('ref_form_userManage')"
          type="primary"
          >确 定</el-button
        >
        <el-button
          v-if="dialog.option == 'edit'"
          @click="editUser('ref_form_userManage')"
          type="primary"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
 
<script>
export default {
  name: "userManageDialog",
  props: ["dialog", "formData"],
  data() {
    return {
      fileList: [],
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {},
  mounted() {},
  computed: {},
  methods: {
    addUser(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.$emit("addUser");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    editUser(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          this.$emit("editUser");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  watch: {},
};
</script>
<style lang="scss" scoped>
</style>

 后端：

users.js:

const router = require('koa-router')()
const fs = require("fs")
const uuid = require('uuid');

router.prefix('/users')

//根据username查询用户
router.get('/findByUsername', async (ctx, next) => {
  let { username } = ctx.request.query
  let findJson = () => {
    return new Promise((resolve, reject) => {
      fs.readFile('users.json', 'utf-8', function (err, data) {
        if (err) {
          resolve({ code: -1, msg: '查询失败' + err })
          return console.error(err);
        }
        resolve({ code: 0, data: JSON.parse(data).users.filter((item) => item.username === username) })
      })
    })
  }
  ctx.body = await findJson()
})

//查询所有用户
router.get('/', async (ctx, next) => {
  let findJson = () => {
    return new Promise((resolve, reject) => {
      fs.readFile('users.json', 'utf-8', function (err, data) {
        if (err) {
          resolve({ code: -1, msg: '查询失败' + err })
          return console.error(err);
        }
        resolve({ code: 0, data: JSON.parse(data) })
      })
    })
  }
  ctx.body = await findJson()
})


//删除用户
router.delete('/', async (ctx, next) => {
  let { id } = ctx.request.query;
  let deleteJson = () => {
    return new Promise((resolve, reject) => {
      fs.readFile('users.json', 'utf-8', function (err, data) {
        if (err) {
          resolve({ code: -1, msg: '删除失败' + err })
          return console.error(err);
        }
        let jsonData = JSON.parse(data).users.filter((item) => item.id !== id);
        fs.writeFile('users.json', JSON.stringify({ "users": jsonData }), function (err) {
          if (err) {
            resolve({ code: -1, msg: '删除失败' + err })
          }
          resolve({ code: 0, msg: '删除成功' })
        })
      })
    })
  }
  ctx.body = await deleteJson()
})

//添加用户
router.post('/', async (ctx, next) => {
  let { username, password } = ctx.request.body

  let id = uuid.v4();

  let writeJson = () => {
    return new Promise((resolve, reject) => {
      fs.readFile('users.json', 'utf-8', function (err, data) {
        if (err) {
          resolve({ code: -1, msg: '新增失败' + err })
          return console.error(err);
        }
        let jsonData = JSON.parse(data)
        jsonData.users.push({ id, username, password })
        fs.writeFile('users.json', JSON.stringify(jsonData), function (err) {
          if (err) {
            resolve({ code: -1, msg: '新增失败' + err })
          }
          resolve({ code: 0, msg: '新增成功' })
        })
      })
    })
  }
  // 返回给前端
  ctx.body = await writeJson()
})

//修改用户
router.put('/', async (ctx, next) => {
  let { id, username, password } = ctx.request.body
  let writeJson = () => {
    return new Promise((resolve, reject) => {
      fs.readFile('users.json', 'utf-8', function (err, data) {
        if (err) {
          resolve({ code: -1, msg: '修改失败' + err })
          return console.error(err);
        }
        let jsonData = JSON.parse(data).users
        jsonData.splice(jsonData.findIndex(item => item.id === id), 1, { id, username, password })
        fs.writeFile('users.json', JSON.stringify({ "users": jsonData }), function (err) {
          if (err) {
            resolve({ code: -1, msg: '修改失败' + err })
          }
          resolve({ code: 0, msg: '修改成功' })
        })
      })
    })
  }
  // 返回给前端
  ctx.body = await writeJson()
})

module.exports = router

users.json:

{
    "users": [
        {
            "id": "adfsg",
            "username": "李四",
            "password": "444asd"
        },
        {
            "id": "d4d2c1df-8c78-4cba-9e42-58c83c26eb5b",
            "username": "ag",
            "password": "dfg"
        },
        {
            "id": "cadbd3d6-6cab-4f82-ae2d-fe2c0ceae5b7",
            "username": "tasdfasd",
            "password": "rtasdf"
        }
    ]
}