前端-增删改查

目录

效果

Vue3 创建项目

Element Plus

安装

引入

axios

安装

结构

index.js

home.js

Vue

home.vue

---

效果

Vue3 创建项目

vue create [options] <app-name>

Element Plus

安装

npm install element-plus --save

引入

plugins-index.js

import 'element-plus/dist/index.css'
import { ElButton } from 'element-plus'
​
const plugins = [
  ElButton
]
​
export default function getElementPlus (app) {
  plugins.forEach((item) => {
    return app.use(item)
  })
}

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import getElementPlus from './plugins'
​
const app = createApp(App)
getElementPlus(app)
app.use(router).mount('#app')

axios

安装

npm install axios

结构

index.js

import axios from 'axios'
​
const request = axios.create({
  baseURL: 'http://127.0.0.1:4523/m1/1865777-0-default/',
  timeout: 3000
})
export default request

home.js

import request from '..'
​
// 增 post
export function addUser (data) {
  return request({
    method: 'post',
    url: '/user',
    data: data
  })
}
​
// 删 delete
export function deleteUser (id) {
  return request({
    method: 'delete',
    url: '/user/' + id
  })
}
​
// 改 put
export function updateUser (data) {
  return request({
    method: 'put',
    url: '/user',
    data: data
  })
}
​
// 查 get
export function getUserList () {
  return request({
    method: 'get',
    url: '/user/list'
  })
}

Vue

home.vue

<template>
  <div class="container">
    <!-- 标题 -->
    <h2>增删改查</h2>
    <!-- 查询 -->
    <div class="query-box">
      <el-input v-model="input" placeholder="Please input" />
      <el-button @click="handleAddUser" type="primary">增加</el-button>
    </div>
    <!-- 表格 -->
    <div class="table">
      <el-table :data="userList" style="width: 100%">
        <el-table-column type="selection" width="50" />
        <el-table-column prop="name" label="姓名" width="160" />
        <el-table-column prop="age" label="年龄" width="80" />
        <el-table-column prop="phone" label="电话" width="160" />
        <el-table-column prop="address" label="地址" width="400" />
        <el-table-column fixed="right" label="操作" width="150">
          <template v-slot="scope">
            <el-button link type="primary" size="small" @click="handleDeleteUser(scope.row)" style="color: #F56C6C">删除</el-button>
            <el-button link type="primary" size="small" @click="handleEditUser">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
​
    <!-- 新增对话框 -->
    <el-dialog v-model="tableFormVisible" :title="tableFormName">
    <el-form :model="tableForm">
      <el-form-item label="姓名" :label-width="80">
        <el-input v-model="tableForm.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="年龄" :label-width="80">
        <el-input v-model="tableForm.age" autocomplete="off" />
      </el-form-item>
      <el-form-item label="电话" :label-width="80">
        <el-input v-model="tableForm.phone" autocomplete="off" />
      </el-form-item>
      <el-form-item label="地址" :label-width="80">
        <el-input v-model="tableForm.address" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="tableFormVisible = false">Cancel</el-button>
        <el-button type="primary" @click="handleAddUserConfirm">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
​
  <!-- 删除对话框 -->
  <el-dialog
    v-model="deleteDialogVisible"
    title="删除"
    width="30%"
    :before-close="handleClose"
  >
    <span>确认要删除用户 "{{tableForm.name}}" 吗？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleDeleteUserConfirm">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>
​
<script setup>
import { ref, onMounted } from 'vue'
import { getUserList, addUser, deleteUser } from '@/request/api/home'
​
const input = ref('')
​
// 表格数据 ---------------------
// [1] 数据
const userList = ref()
​
onMounted(async () => {
  const res = await getUserList()
  userList.value = res.data.data
})
​
// 对话框 ---------------------
// [1] 数据
const deleteDialogVisible = ref(false)
const tableFormVisible = ref(false)
const tableFormName = ref('add')
const tableForm = ref()
​
// [2] 方法
// 新增
const handleAddUser = () => {
  tableFormVisible.value = true
  tableFormName.value = '新增'
  tableForm.value = {}
}
// 新增确认
const handleAddUserConfirm = async () => {
  tableFormVisible.value = false
  const res = await addUser(tableForm.value)
  console.log(res)
}
// 编辑
const handleEditUser = () => {
  tableFormVisible.value = true
  tableFormName.value = '编辑'
}
// 删除
const handleDeleteUser = (data) => {
  deleteDialogVisible.value = true
  tableForm.value = data
}
// 删除确认
const handleDeleteUserConfirm = async () => {
  deleteDialogVisible.value = false
  const res = await deleteUser(tableForm.value.id)
  console.log(res)
}
// 对话框 ---------------------
</script>
​
<style>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1,
  #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
}
​
.title {
  text-align: center;
}
.query-box {
  width: 1000px;
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}
.el-input {
  width: 300px;
}
​
.table {
  margin: 20px auto;
  width: 1000px;
}
</style>
​