• 日期: 2025-12-22 00:58:59
  • 标签: 常规
<template>
  <div class='user-management'>
    <el-row>
      <el-col :span='24'>
        <h1>User Management</h1>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='24'>
        <el-input v-model='searchText' placeholder='Search'></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='24'>
        <el-button type='primary' @click='showAddUserDialog'>Add User</el-button>
        <el-dialog :visible.sync='addUserDialogVisible' title='Add User' :before-close='clearAddUserForm'>
          <el-form :model='addUserForm' :rules='addUserFormRules' ref='addUserForm'>
            <el-form-item label='Name' prop='name'>
              <el-input v-model='addUserForm.name'></el-input>
            </el-form-item>
            <el-form-item label='Phone' prop='phone'>
              <el-input v-model='addUserForm.phone'></el-input>
            </el-form-item>
            <el-form-item label='Email' prop='email'>
              <el-input v-model='addUserForm.email'></el-input>
            </el-form-item>
            <el-form-item label='Address' prop='address'>
              <el-input v-model='addUserForm.address'></el-input>
            </el-form-item>
          </el-form>
          <div slot='footer'>
            <el-button @click='addUserDialogVisible = false'>Cancel</el-button>
            <el-button type='primary' @click='addUser'>Add</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='24'>
        <el-table :data='filteredUsers' :default-sort='{prop: 'name', order: 'ascending'}'>
          <el-table-column prop='name' label='Name'></el-table-column>
          <el-table-column prop='phone' label='Phone'></el-table-column>
          <el-table-column prop='email' label='Email'></el-table-column>
          <el-table-column prop='address' label='Address'></el-table-column>
          <el-table-column label='Actions'>
            <template slot-scope='scope'>
              <el-button type='text' @click='showEditUserDialog(scope.row)'>Edit</el-button>
              <el-button type='text' @click='deleteUser(scope.$index)'>Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='24'>
        <el-pagination :current-page.sync='currentPage' :page-size='pageSize' :total='users.length'></el-pagination>
      </el-col>
    </el-row>
    <el-dialog :visible.sync='editUserDialogVisible' title='Edit User' :before-close='clearEditUserForm'>
      <el-form :model='editUserForm' :rules='editUserFormRules' ref='editUserForm'>
        <el-form-item label='Name' prop='name'>
          <el-input v-model='editUserForm.name'></el-input>
        </el-form-item>
        <el-form-item label='Phone' prop='phone'>
          <el-input v-model='editUserForm.phone'></el-input>
        </el-form-item>
        <el-form-item label='Email' prop='email'>
          <el-input v-model='editUserForm.email'></el-input>
        </el-form-item>
        <el-form-item label='Address' prop='address'>
          <el-input v-model='editUserForm.address'></el-input>
        </el-form-item>
      </el-form>
      <div slot='footer'>
        <el-button @click='editUserDialogVisible = false'>Cancel</el-button>
        <el-button type='primary' @click='editUser'>Save</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        users: [],
        filteredUsers: [],
        searchText: '',
        addUserDialogVisible: false,
        addUserForm: {
          name: '',
          phone: '',
          email: '',
          address: ''
        },
        addUserFormRules: {
          name: [
            { required: true, message: 'Name is required', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: 'Phone is required', trigger: 'blur' }
          ],
          email: [
            { required: true, message: 'Email is required', trigger: 'blur' },
            { type: 'email', message: 'Invalid email', trigger: 'blur' }
          ],
          address: [
            { required: true, message: 'Address is required', trigger: 'blur' }
          ]
        },
        editUserDialogVisible: false,
        editUserIndex: null,
        editUserForm: {
          name: '',
          phone: '',
          email: '',
          address: ''
        },
        editUserFormRules: {
          name: [
            { required: true, message: 'Name is required', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: 'Phone is required', trigger: 'blur' }
          ],
          email: [
            { required: true, message: 'Email is required', trigger: 'blur' },
            { type: 'email', message: 'Invalid email', trigger: 'blur' }
          ],
          address: [
            { required: true, message: 'Address is required', trigger: 'blur' }
          ]
        },
        currentPage: 1,
        pageSize: 10
      };
    },
    created() {
      // Fetch users from server or define users as a variable in server-side code
      this.users = [
        { name: 'John Doe', phone: '555-555-5555', email: 'john.doe@example.com', address: '123 Main St' },
        { name: 'Jane Smith', phone: '555-555-5556', email: 'jane.smith@example.com', address: '456 Oak St' },
        { name: 'Bob Johnson', phone: '555-555-5557', email: 'bob.johnson@example.com', address: '789 Elm St' },
        { name: 'Alice Brown', phone: '555-555-5558', email: 'alice.brown@example.com', address: '321 Maple St' }
      ];
      this.filteredUsers = this.users;
    },
    computed: {
      filteredUsers() {
        if (this.searchText) {
          return this.users.filter(user => {
            return user.name.toLowerCase().includes(this.searchText.toLowerCase()) ||
              user.phone.toLowerCase().includes(this.searchText.toLowerCase()) ||
              user.email.toLowerCase().includes(this.searchText.toLowerCase()) ||
              user.address.toLowerCase().includes(this.searchText.toLowerCase());
          });
        } else {
          return this.users;
        }
      }
    },
    methods: {
      showAddUserDialog() {
        this.addUserDialogVisible = true;
      },
      addUser() {
        this.$refs.addUserForm.validate(valid => {
          if (valid) {
            this.users.push(this.addUserForm);
            this.addUserDialogVisible = false;
            this.clearAddUserForm();
          }
        });
      },
      clearAddUserForm() {
        this.addUserForm.name = '';
        this.addUserForm.phone = '';
        this.addUserForm.email = '';
        this.addUserForm.address = '';
        this.$refs.addUserForm.clearValidate();
      },
      showEditUserDialog(user) {
        this.editUserIndex = this.users.indexOf(user);
        this.editUserForm.name = user.name;
        this.editUserForm.phone = user.phone;
        this.editUserForm.email = user.email;
        this.editUserForm.address = user.address;
        this.editUserDialogVisible = true;
      },
      editUser() {
        this.$refs.editUserForm.validate(valid => {
          if (valid) {
            this.users.splice(this.editUserIndex, 1, this.editUserForm);
            this.editUserDialogVisible = false;
            this.clearEditUserForm();
          }
        });
      },
      clearEditUserForm() {
        this.editUserIndex = null;
        this.editUserForm.name = '';
        this.editUserForm.phone = '';
        this.editUserForm.email = '';
        this.editUserForm.address = '';
        this.$refs.editUserForm.clearValidate();
      },
      deleteUser(index) {
        this.users.splice(index, 1);
      }
    }
  };
</script>
<style scoped>
  .user-management {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
</style>
<pre><code>
{'title': 'Vue 和 Element UI 实现用户管理页面：增删改查、分页和数据存储', 'description': '本文介绍如何使用 Vue 和 Element UI 构建一个用户管理页面，包括用户数据的增删改查、分页和数据存储等功能。前端代码使用 Vue 和 Element UI，后端使用 Koa2 和 JSON 文件存储数据。', 'keywords': 'Vue, Element UI, 用户管理, 增删改查, 分页, 数据存储, Koa2, JSON 文件, 前端开发, 后端开发', 'content': '前端代码（使用 Vue 和 Element UI）：

</code></pre>
<template>
  <div class='user-management'>
    <el-row>
      <el-col :span='24'>
        <h1>User Management</h1>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='24'>
        <el-input v-model='searchText' placeholder='Search'></el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='24'>
        <el-button type='primary' @click='showAddUserDialog'>Add User</el-button>
        <el-dialog :visible.sync='addUserDialogVisible' title='Add User' :before-close='clearAddUserForm'>
          <el-form :model='addUserForm' :rules='addUserFormRules' ref='addUserForm'>
            <el-form-item label='Name' prop='name'>
              <el-input v-model='addUserForm.name'></el-input>
            </el-form-item>
            <el-form-item label='Phone' prop='phone'>
              <el-input v-model='addUserForm.phone'></el-input>
            </el-form-item>
            <el-form-item label='Email' prop='email'>
              <el-input v-model='addUserForm.email'></el-input>
            </el-form-item>
            <el-form-item label='Address' prop='address'>
              <el-input v-model='addUserForm.address'></el-input>
            </el-form-item>
          </el-form>
          <div slot='footer'>
            <el-button @click='addUserDialogVisible = false'>Cancel</el-button>
            <el-button type='primary' @click='addUser'>Add</el-button>
          </div>
        </el-dialog>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='24'>
        <el-table :data='filteredUsers' :default-sort='{prop: 'name', order: 'ascending'}'>
          <el-table-column prop='name' label='Name'></el-table-column>
          <el-table-column prop='phone' label='Phone'></el-table-column>
          <el-table-column prop='email' label='Email'></el-table-column>
          <el-table-column prop='address' label='Address'></el-table-column>
          <el-table-column label='Actions'>
            <template slot-scope='scope'>
              <el-button type='text' @click='showEditUserDialog(scope.row)'>Edit</el-button>
              <el-button type='text' @click='deleteUser(scope.$index)'>Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span='24'>
        <el-pagination :current-page.sync='currentPage' :page-size='pageSize' :total='users.length'></el-pagination>
      </el-col>
    </el-row>
    <el-dialog :visible.sync='editUserDialogVisible' title='Edit User' :before-close='clearEditUserForm'>
      <el-form :model='editUserForm' :rules='editUserFormRules' ref='editUserForm'>
        <el-form-item label='Name' prop='name'>
          <el-input v-model='editUserForm.name'></el-input>
        </el-form-item>
        <el-form-item label='Phone' prop='phone'>
          <el-input v-model='editUserForm.phone'></el-input>
        </el-form-item>
        <el-form-item label='Email' prop='email'>
          <el-input v-model='editUserForm.email'></el-input>
        </el-form-item>
        <el-form-item label='Address' prop='address'>
          <el-input v-model='editUserForm.address'></el-input>
        </el-form-item>
      </el-form>
      <div slot='footer'>
        <el-button @click='editUserDialogVisible = false'>Cancel</el-button>
        <el-button type='primary' @click='editUser'>Save</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        users: [],
        filteredUsers: [],
        searchText: '',
        addUserDialogVisible: false,
        addUserForm: {
          name: '',
          phone: '',
          email: '',
          address: ''
        },
        addUserFormRules: {
          name: [
            { required: true, message: 'Name is required', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: 'Phone is required', trigger: 'blur' }
          ],
          email: [
            { required: true, message: 'Email is required', trigger: 'blur' },
            { type: 'email', message: 'Invalid email', trigger: 'blur' }
          ],
          address: [
            { required: true, message: 'Address is required', trigger: 'blur' }
          ]
        },
        editUserDialogVisible: false,
        editUserIndex: null,
        editUserForm: {
          name: '',
          phone: '',
          email: '',
          address: ''
        },
        editUserFormRules: {
          name: [
            { required: true, message: 'Name is required', trigger: 'blur' }
          ],
          phone: [
            { required: true, message: 'Phone is required', trigger: 'blur' }
          ],
          email: [
            { required: true, message: 'Email is required', trigger: 'blur' },
            { type: 'email', message: 'Invalid email', trigger: 'blur' }
          ],
          address: [
            { required: true, message: 'Address is required', trigger: 'blur' }
          ]
        },
        currentPage: 1,
        pageSize: 10
      };
    },
    created() {
      // Fetch users from server or define users as a variable in server-side code
      this.users = [
        { name: 'John Doe', phone: '555-555-5555', email: 'john.doe@example.com', address: '123 Main St' },
        { name: 'Jane Smith', phone: '555-555-5556', email: 'jane.smith@example.com', address: '456 Oak St' },
        { name: 'Bob Johnson', phone: '555-555-5557', email: 'bob.johnson@example.com', address: '789 Elm St' },
        { name: 'Alice Brown', phone: '555-555-5558', email: 'alice.brown@example.com', address: '321 Maple St' }
      ];
      this.filteredUsers = this.users;
    },
    computed: {
      filteredUsers() {
        if (this.searchText) {
          return this.users.filter(user => {
            return user.name.toLowerCase().includes(this.searchText.toLowerCase()) ||
              user.phone.toLowerCase().includes(this.searchText.toLowerCase()) ||
              user.email.toLowerCase().includes(this.searchText.toLowerCase()) ||
              user.address.toLowerCase().includes(this.searchText.toLowerCase());
          });
        } else {
          return this.users;
        }
      }
    },
    methods: {
      showAddUserDialog() {
        this.addUserDialogVisible = true;
      },
      addUser() {
        this.$refs.addUserForm.validate(valid => {
          if (valid) {
            this.users.push(this.addUserForm);
            this.addUserDialogVisible = false;
            this.clearAddUserForm();
          }
        });
      },
      clearAddUserForm() {
        this.addUserForm.name = '';
        this.addUserForm.phone = '';
        this.addUserForm.email = '';
        this.addUserForm.address = '';
        this.$refs.addUserForm.clearValidate();
      },
      showEditUserDialog(user) {
        this.editUserIndex = this.users.indexOf(user);
        this.editUserForm.name = user.name;
        this.editUserForm.phone = user.phone;
        this.editUserForm.email = user.email;
        this.editUserForm.address = user.address;
        this.editUserDialogVisible = true;
      },
      editUser() {
        this.$refs.editUserForm.validate(valid => {
          if (valid) {
            this.users.splice(this.editUserIndex, 1, this.editUserForm);
            this.editUserDialogVisible = false;
            this.clearEditUserForm();
          }
        });
      },
      clearEditUserForm() {
        this.editUserIndex = null;
        this.editUserForm.name = '';
        this.editUserForm.phone = '';
        this.editUserForm.email = '';
        this.editUserForm.address = '';
        this.$refs.editUserForm.clearValidate();
      },
      deleteUser(index) {
        this.users.splice(index, 1);
      }
    }
  };
</script>
<style scoped>
  .user-management {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
  }
</style>
<pre><code>
后端代码（使用 Koa2 和 JSON 文件存储数据）：

</code></pre>
<p>const Koa = require('koa');
const bodyParser = require('koa-bodyparser');
const Router = require('koa-router');
const fs = require('fs');</p>
<p>const app = new Koa();
const router = new Router();</p>
<p>const JSON_FILE_PATH = './users.json';</p>
<p>// Read users from JSON file
let users = [];
if (fs.existsSync(JSON_FILE_PATH)) {
users = JSON.parse(fs.readFileSync(JSON_FILE_PATH));
}</p>
<p>// Middleware
app.use(bodyParser());</p>
<p>// Routes
router.get('/users', ctx =&gt; {
ctx.body = users;
});</p>
<p>router.post('/users', ctx =&gt; {
const user = ctx.request.body;
users.push(user);
fs.writeFileSync(JSON_FILE_PATH, JSON.stringify(users, null, 2));
ctx.body = user;
});</p>
<p>router.put('/users/:id', ctx =&gt; {
const id = ctx.params.id;
const user = ctx.request.body;
users[id] = user;
fs.writeFileSync(JSON_FILE_PATH, JSON.stringify(users, null, 2));
ctx.body = user;
});</p>
<p>router.delete('/users/:id', ctx =&gt; {
const id = ctx.params.id;
users.splice(id, 1);
fs.writeFileSync(JSON_FILE_PATH, JSON.stringify(users, null, 2));
ctx.status = 204; // No Content
});</p>
<p>app.use(router.routes());</p>
<p>// Start server
app.listen(3000, () =&gt; {
console.log('Server started on port 3000');
});</p>
<pre><code></code></pre>
Vue 和 Element UI 实现用户管理页面：增删改查、分页和数据存储

原文地址: https://www.cveoy.top/t/topic/nkNO 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录