vue3+koa2+mysql增删改查

疆~

已于 2023-06-12 09:54:22 修改

阅读量861

点赞数 1

分类专栏： Vue3 Koa mysql数据库文章标签： vue.js

于 2022-10-06 12:18:16 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/127181492

版权

vue3

App.vue:

<template>
  <el-button type="primary" @click="openAddDialog">新增</el-button>

  <el-input
    v-model="state.searchByUsername"
    clearable
    placeholder="输入用户名称搜索"
    style="width: 400px; margin: 0 10px"
  />
  <el-button type="success" @click="searchUser">搜索</el-button>
  <el-table :data="state.tableData" style="width: 100%">
    <el-table-column
      label="用户名"
      prop="username"
      width="180"
    ></el-table-column>
    <el-table-column label="密码" width="180">
      <template #default="scope">
        <el-tag>{
  { scope.row.password }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >编辑</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <!-- 弹窗 -->
  <el-dialog
    :destroy-on-close="true"
    v-model="state_dialog.isShow"
    :title="state_dialog.type == 'add' ? '新增' : '编辑'"
  >
    <el-form
      ref="ref_form"
      :model="state_dialog.form"
      :rules="state_dialog.rules"
    >
      <el-form-item label="用户名" label-width="140px" prop="username">
        <el-input
          v-model="state_dialog.form.username"
          clearable
          autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="密码" label-width="140px" prop="password">
        <el-input
          v-model.number="state_dialog.form.password"
          clearable
          autocomplete="off"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state_dialog.isShow = false">取消</el-button>
        <el-button type="primary" @click="submitForm(ref_form)">确定</el-button>
        <el-button type="primary" @click="resetForm(ref_form)">重置</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script  setup>
import { onMounted, reactive, ref } from "vue";
import axios from "axios";
const ref_form = ref(null);
const state = reactive({
  searchByUsername: "&#