【vue】增删查改练习

基于vue-cli、elementUI的Vue超简单入门小例子

vue+elementui搭建后台管理界面(1登录)

使用 vue2.x + ElementUI 快速搭建一个后台增删改查管理界面

vue+element-ui 实现数据的增删改查以及分页（举例新增学生）

SpringBoot+Vue+Element-ui前后端分离(增删改查)(八)

insert into user VALUES(1,'张三','3612gsa','管理员');
insert into user VALUES(2,'李四','h41lh2','管理员');
insert into user VALUES(3,'王二','21h3h1oh','用户');
insert into user VALUES(4,'路飞','3k12jg','用户');insert into user(userName,`password`,realName) VALUES('路飞','3k12jg','用户');insert into student(`name`,age,teacher_id,address_id) VALUES('李洛',23,2,4);

表格组件使用

表单的使用

Element-ui 中dialog的使用方法

展示

其实界面做的相对简陋了一些，还是希望从简单入手
主要是灵活掌握四种请求方式的使用，是最重要的。

<template><div style="margin-left: 100px"><div style="display: flex;justify-content: space-between"><el-button type="primary" icon="el-icon-plus" size="small" @click="addButton">添加部门</el-button></div>
<el-table :data="userData" ><el-table-column prop="id" label="id" width="100"></el-table-column><el-table-column prop="userName" label="用户名" width="100"></el-table-column><el-table-column prop="passWord" label="密码" width="100"></el-table-column><el-table-column prop="realName" label="身份" width="100"></el-table-column><el-table-column label="操作"><template scope="scope"><el-button type="text" size="small" @click="editRow(scope.row)">编辑</el-button><el-button type="text" size="small" @click="deleteRow(scope.row.id)">删除</el-button></template></el-table-column></el-table><el-dialog title="编辑用户信息" :visible.sync="editUserForm" @click="handleClose" width="500px"><!--给ref赋一个值，可以在js内通过this.$refs.你设置的值（我设置的为editform，所以可以通过this.$refs.editForm访问）--><el-form ref="editForm" :model="editForm" label-width="80px" class="editform" ><el-form-item label="id"><el-col :span="13">     <!--解决了设置input宽度的麻烦--><el-input v-model="editForm.id"></el-input></el-col></el-form-item><el-form-item label="用户名"><el-col :span="13"><el-input v-model="editForm.userName" ></el-input></el-col></el-form-item><el-form-item label="密码"><el-col :span="13" ><el-input v-model="editForm.passWord" ></el-input></el-col></el-form-item><el-form-item label="身份"><el-col :span="13" ><el-input v-model="editForm.realName" ></el-input></el-col></el-form-item><el-form-item><el-button type="primary" @click="editUserForm=false">取消</el-button><el-button type="primary" @click="editRow_ensure">确定</el-button></el-form-item></el-form></el-dialog><el-dialog title="添加用户信息" :visible.sync="addUserForm" @click="handleClose" width="500px"><!--给ref赋一个值，可以在js内通过this.$refs.你设置的值（我设置的为editform，所以可以通过this.$refs.editForm访问）--><el-form ref="addForm" :model="editForm" label-width="80px" class="editform" ><el-form-item label="id"><el-col :span="13">     <!--解决了设置input宽度的麻烦--><el-input v-model="editForm.id"></el-input></el-col></el-form-item><el-form-item label="用户名"><el-col :span="13"><el-input v-model="editForm.userName" ></el-input></el-col></el-form-item><el-form-item label="密码"><el-col :span="13" ><el-input v-model="editForm.passWord" ></el-input></el-col></el-form-item><el-form-item label="身份"><el-col :span="13" ><el-input v-model="editForm.realName" ></el-input></el-col></el-form-item><el-form-item><el-button type="primary" @click="addUserForm=false">取消</el-button><el-button type="primary" @click="addButton_ensure">确定</el-button></el-form-item></el-form></el-dialog></div>
</template><script>export default {name: "",data(){return{userData:[],editUserForm:false,addUserForm:false,editForm:{id:'',userName:'',passWord:'',realName:''}}},mounted() {this.init();},methods:{init(){   //get请求this.$axios.get('http://localhost:8082/user/select').then(res=>{this.userData = res.data;}).catch(err=>{console.log(res.data)})},deleteRow(param){     //delete请求this.$axios.delete('http://localhost:8082/user/delete',{params:{id:param}}).then(successRespose =>{this.init();}).catch(err=>{console.log(param)})},handleClose(){this.$refs.editForm.resetFields() //获取ref值为editForm的Dom元素，然后重置表单this.$refs.addForm.resetFields();this.editForm={id:'',userName:'',password:'',realName:''}},editRow(row){this.editUserForm = true;// this.editForm = row;/*不直接用上面的赋值，因为我发现只要修改输入框内容，界面数据就会变化当然，数据库没变化，刷新一下就好*/this.editForm = Object.assign({},row);},editRow_ensure(){   //put请求let formData = new FormData();for(let key in this.editForm){formData.append(key,this.editForm[key])}this.$axios.put('http://localhost:8082/user/update',formData).then(res=>{this.init();})this.$refs.editForm.validate((valid) => {if (valid) {console.log('输入正确')this.editUserForm = false;} else {console.log('输入错误')}})},addButton(){this.addUserForm = true;this.editForm = {}},addButton_ensure(){       //post请求let formData = new FormData();for(let key in this.editForm){formData.append(key,this.editForm[key])}this.$axios.post('http://localhost:8082/user/add',formData).then(res=>{this.addUserForm = false;this.init();npm})}}}
</script><style scoped>.style1 {width: 50%;height: 70%;margin-top: 5%;margin-left: 10%;}.editform {margin-left: 80px;}
</style>

表格分页

Vue-Element UI 增删改查

vue利用elementUI创建列表以及增删改查和分页

表单验证

分页练习

<template>
<div><h1>{{pageSize}}</h1><h1>{{currentPage}}</h1><div class="container"><el-table style="width: 100%":data="userList.slice((currentPage - 1) *pageSize,currentPage * pageSize)"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentPageChange":page-sizes="[10,20,30,40,50]"backgroundlayout="total, sizes, prev, pager, next, jumper":total="userList.length"><!--显示总共有多少条数据--></el-pagination></div>
</div>
</template><script>
export default {name: '',data () {return {currentPage: 1, // 初始页pageSize: 10, // 每页的数据条数userList: Array(1000).fill({date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}) // 生成含n个对象的数组}},methods: {// 设置每页显示的条数handleSizeChange (size) {this.pageSize = size},// 设置当前页为第currentPage页handleCurrentPageChange (currentPage) {this.currentPage = currentPage}}
}
</script><style scoped></style>
<!--
当前userList有1000条数据,要求每页显示n条数据，显示第m页的数据
则要显示的就是userList第（m-1）*n条数据 ~第m*n条数据<el-pagination@size-change="handleSizeChange"@current-change="handleCurrentPageChange":current-page="currentPage":page-sizes="[10,20,30,40,50]"    下拉框，设置一页显示的条数:page-size="pageSize"            显示当前页的条数layout="total, size, prev, pager, next, jumper"设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。:total="userList.length">         显示总共有多少条数据
</el-pagination>
-->

【vue】增删查改练习相关推荐

spring和mybatis结合做简单的增删查改系统_springbootamp;amp;vue简单的景点信息管理系统...
springboot&&vue简单的景点信息管理系统这两天闲着没有什么事,就根据陈哥的教程,试着写了一个springboot和vue的简单的景点信息管理系统.也就大致实现了最基本的增 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
8天学通MongoDB——第二天细说增删查改
2019独角兽企业重金招聘Python工程师标准>>> 看过上一篇,相信大家都会知道如何开启mongodb了,这篇就细说下其中的增删查改,首先当我们用上一篇同样的方式打开mongod ...
MERGE批量增删查改数据
MERGE优点: 在批量处理数据的时候,我可以用到merge一次完成数据处理. 示例代码一: MERGE INTO student AS t using (SELECT '丽水' AS NAME,20 ...
Django：数据库表的建立与增删查改（ForeignKey和ManytoMany）
数据库表的创建: 1.Django工程项目建立,基础环境调试. 2.创建表 from django.db import models class Publisher(models.Model): ...
【C++ 语言】vector 容器 ( 容器分类 | vector 声明 | vector 初始化 | vector 容器元素增删查改 )
文章目录序列式容器 vector 简介 vector ( 向量 ) 头文件 vector ( 向量 ) 声明及初始化 vector ( 向量 ) 添加元素 vector ( 向量 ) 查询元素 ve ...
lr mysql 增删改查_Python对MySQL进行增删查改
#增删查改 from Practice_Recode.UserTest.User importUserimportpymysqldefopenDb():globaldb, cursor db= pym ...
安卓后端mysql_后端Spring Boot+前端Android交互+MySQL增删查改（Java+Kotlin实现）
1 前言&概述这篇文章是基于这篇文章的更新,主要是更新了一些技术栈以及开发工具的版本,还有修复了一些Bug. 本文是SpringBoot+Android+MySQL的增删查改的简单实现,用到 ...
5.在MVC中使用泛型仓储模式和工作单元来进行增删查改
原文链接:http://www.c-sharpcorner.com/UploadFile/3d39b4/crud-operations-using-the-generic-repository-pat ...
winform调用webservice增删查改_教你分别用数据库与云函数实现“增删查改”
导语数据库 API 与云函数"增删查改"的姿势有何不同?对比代码差异往往有助于更好的理解,本文用详细代码帮你寻找答案并巩固基础! ▌一.云开发初始化 wx.cloud.init( ...

【vue】增删查改练习

展示

分页练习

【vue】增删查改练习相关推荐

最新文章

热门文章