【免费】Vue学习之旅值作业1：员工信息管理无美化版本资源-CSDN文库

共3个文件

js：2个

html：1个

vue.js

需积分: 0 107 浏览量 2023-06-12 19:51:25 上传评论收藏 117KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

员工信息管理(vue简洁版).zip （3个子文件）

emp.html 4KB

vue.js 424KB

axios.min.js 31KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>员工管理系统</title> </head> <div id="app"> <table border="1" width="100%"> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>薪资</th> <th>操作</th> </tr> <tr v-for="(user,index) in lists" :key="user.id" style="text-align: center"> <td>{{ user.id }}</td> <td>{{ user.name }}</td> <td>{{ user.sex }}</td> <td>{{ user.salary }}</td> <td><a href="javascript:;" @click="delUser(user.id)">删除</a>   <a href="javascript:;" @click="updateUser(user.id)">修改</a></td> </tr> </table> <button>添加用户</button><br> <span>共有 {{ lists.length }} 名员工</span><br> <form action="">  用户姓名：<input type="text" v-model="emp.name"><br> 用户性别：<input type="text" v-model="emp.sex"><br> 用户薪资：<input type="text" v-model="emp.salary"><br> <input type="button" value="新增员工" @click="addUser">   <input type="button" value="更新信息" @click="saveUser">  </form> </div> <body> </body> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script src="js/axios.min.js"></script> <script> var app = new Vue({ el: '#app', data: { lists: [], emp: {}, }, methods: { delUser(userId) { axios.delete("http://localhost:8083/emp/" + userId).then(res => { if (res.data == 1) { alert("删除成功"); this.load() } else { alert("删除失败，请稍后再试"); } }); }, addUser() { axios.post("http://localhost:8083/emp", this.emp).then(res => { if (res.data == true) { alert("添加员工信息成功") this.emp = {} this.load() } else { alert("添加员工信息失败，请稍后再试") } }) }, saveUser() { axios.put("http://localhost:8083/emp", this.emp).then(res => { if (res.data == 1) { alert("更新员工信息成功") this.emp = {} this.load() } else { alert("更新员工信息失败，请稍后再试") } }) }, updateUser(id) { console.log(id) this.getOne(id) }, getOne(id) { axios.get("http://localhost:8083/emp/" + id).then(res => { this.emp = res.data console.log(res.data) }) }, load() { axios.get("http://localhost:8083/emp").then(res => { console.log(res.data) // this_.lists = res.data this.lists = res.data }); } }, created() { // var this_ = this; // 保存外部vue实例 this.load() } }); </script> </html>

评论收藏

内容反馈