vue后台管理增删改查前端代码
时间: 2023-10-10 19:08:02 浏览: 134
以下是一个简单的 Vue 后台管理增删改查的前端代码示例:
## HTML
```html
<div id="app">
<h2>用户列表</h2>
<table>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.username }}</td>
<td>{{ user.email }}</td>
<td>
<button @click="editUser(user)">编辑</button>
<button @click="deleteUser(user)">删除</button>
</td>
</tr>
</tbody>
</table>
<h2>添加用户</h2>
<form @submit.prevent="addUser">
<label>用户名:</label>
<input type="text" v-model="newUser.username">
<br>
<label>邮箱:</label>
<input type="email" v-model="newUser.email">
<br>
<button type="submit">添加</button>
</form>
<h2>编辑用户</h2>
<form v-if="editingUser" @submit.prevent="updateUser">
<input type="hidden" v-model="editingUser.id">
<label>用户名:</label>
<input type="text" v-model="editingUser.username">
<br>
<label>邮箱:</label>
<input type="email" v-model="editingUser.email">
<br>
<button type="submit">保存</button>
</form>
</div>
```
## JS
```js
new Vue({
el: '#app',
data: {
users: [], // 用户列表
newUser: { username: '', email: '' }, // 新用户
editingUser: null // 正在编辑的用户
},
mounted() {
// 获取用户列表
axios.get('/api/users').then(response => {
this.users = response.data
})
},
methods: {
// 添加用户
addUser() {
axios.post('/api/users', this.newUser).then(response => {
// 添加成功后,将新用户添加到用户列表中
this.users.push(response.data)
// 清空新用户
this.newUser = { username: '', email: '' }
})
},
// 编辑用户
editUser(user) {
// 将正在编辑的用户设置为选中的用户
this.editingUser = Object.assign({}, user)
},
// 更新用户
updateUser() {
axios.put(`/api/users/${this.editingUser.id}`, this.editingUser).then(response => {
// 更新成功后,将正在编辑的用户替换成更新后的用户
const index = this.users.findIndex(user => user.id === response.data.id)
this.users.splice(index, 1, response.data)
// 清空正在编辑的用户
this.editingUser = null
})
},
// 删除用户
deleteUser(user) {
axios.delete(`/api/users/${user.id}`).then(response => {
// 删除成功后,从用户列表中移除该用户
const index = this.users.findIndex(u => u.id === user.id)
this.users.splice(index, 1)
})
}
}
})
```
以上代码仅供参考,实际情况需要根据具体需求进行修改。