iView(1) 增删改查案例

今天分享一波基于vue的一套关于iView的增删改查demo源码

温馨小提示：
iView官网文档：https://www.iviewui.com/docs/guide/install
Vue Router ： https://router.vuejs.org/zh/

iview-admin后台管理系统框架源码下载：https://github.com/iview/iview-admin
项目在线访问地址：https://admin.iviewui.com/login

先看效果吧：

数据库字段：

前端页面：

添加form表单：

编辑form表单：

详情：

其中编辑和详情页都已做了form表单的回显数据

下面是demo源码：

demo.vue

<template><div class="demo"><div slot="zhengqing"><!-- <Select v-model="zqListQuery.username" placeholder="全部" clearable style="width:200px"><Option v-for="item in userNameList" :value="item.value" :key="item.value">{{ item.label }}</Option></Select>--><Input v-model="zqListQuery.username" placeholder="用户名" style="width: 200px" /><Input v-model="zqListQuery.password" placeholder="密码" style="width: 200px" /><Button type="primary" @click="getListPage">查询</Button><Button type="primary" @click="handleCreate">添加</Button></div><Table :columns="columns" size="small" style="margin-top:10px" :loading="listLoading" :data="list" disabled-hover><template slot-scope="{row}" slot="action"><text-Button @click="handleDetail(row)">详情</text-Button><Divider type="vertical" /><text-Button @click="handleUpdate(row)">编辑</text-Button><Divider type="vertical" /><text-Button @click="handleDelete(row)">删除</text-Button></template></Table><!-- 分页 --><cus-page @pageChange="handleCurrentChange" @pageSizeChange="handleSizeChange" :pageSize="zqListQuery.pageSize" :total="total"></cus-page><!--  添加和编辑弹出抽屉  +++++++++++++++++++++++++++++++++++++++++++++++++++++     --><!--  :title 加:为绑定数据 即实现自定义标题  --><Drawer :title="titleValue[dialogStatus]" v-model="drawer" width="30%" :mask-closable="true" :styles="drawerStyles"><Form ref="zq_formData" :model="zq_formData" label-position="right" :label-width="120" :rules="ruleFormData"><Row><Col span="24"><!-- TODO prop：校验  与v-model对应 外加上面的:rules和下面的2个方法配置使用 即可 --><FormItem label="用户名：" prop="username" label-position="top">
<!--          <Select v-model="zq_formData.username" placeholder="遍历" clearable><Option v-for="item in userNameList" :value="item.value" :key="item.value">{{ item.label }}</Option></Select>-->
<!--          <DatePicker v-model="zq_formData.dateTime" type="datetime" placeholder="日期"></DatePicker>--><Input v-model="zq_formData.username" placeholder="请输入用户名" /></FormItem></Col></Row><Row><Col span="24"><FormItem label="密码：" prop="password" label-position="top"><Input v-model="zq_formData.password" placeholder="请输入密码" /></FormItem></Col></Row></Form><div class="demo-drawer-footer"><Button type="primary" @click="ok">保存</Button><Button style="margin-right: 8px" @click="drawer = false">关闭</Button></div></Drawer><!--  详情弹出抽屉  +++++++++++++++++++++++++++++++++++++++++++++++++++++     --><Drawer ref="zq_zq_formData_detail" :title="titleValue[dialogStatus]" v-model="drawer_detail" width="30%" :mask-closable="true" :styles="drawerStyles"><Form :model="zq_zq_formData_detail" label-position="right" :label-width="120"><Row><Col span="24"><FormItem label="用户名："><Input v-model="zq_zq_formData_detail.username" disabled></Input></FormItem></Col></Row><Row><Col span="24"><FormItem label="密码："><Input v-model="zq_zq_formData_detail.password" disabled></Input></FormItem></Col></Row><Row><Col span="24"><FormItem label="性别："><Input v-model="zq_zq_formData_detail.sex" disabled></Input></FormItem></Col></Row></Form></Drawer></div>
</template>
<script>import {getDemoListPage,getDemoList,saveOrUpdateDemo,deleteDemo} from '@/api/zhengqing/demo' //抽取出去的js  -> 作用：发送请求import {forEach} from '../../libs/tools'export default {name: 'zq-app',data () {//校验const validateUsername = (rule, value, callback) => {if (!value) {callback(new Error('请输入用户名！！！'))} else {callback()}};const validatePassword = (rule, value, callback) => {if (!value) {callback(new Error('请输入密码！！！'))} else {callback()}};return {//高级查询需要传到后端的参数zqListQuery: {page: 1,pageSize: 10,username: undefined,password: undefined,},list: undefined,//表格数据total: undefined,//总数据条数drawer: false, // 添加和编辑抽屉弹出页drawer_detail: false, // 详情抽屉弹出页listLoading: false,//是否加载dialogStatus: '',//title自定义标题titleValue:{create:"新增",detail:"详情",update:"编辑"},//title信息zq_formData: {username: undefined, // 用户名password: undefined, // 密码sex: undefined // 性别},zq_zq_formData_detail: {username: undefined, // 用户名password: undefined, // 密码sex: undefined // 性别},//表格数据columns: [{title: '用户名',key: 'username',align: 'center',width: 300},{title: '密码',key: 'password',align: 'center'},{title: '性别',key: 'sex',align: 'center'},{title: '操作',align: 'center',slot: 'action'}],// 抽屉样式drawerStyles: {height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'},//校验ruleFormData: {username: [{required: true,validator: validateUsername,trigger: 'blur'}],password: [{required: true,validator: validatePassword,trigger: 'blur'}]}}},created () {this.getListPage();//高级查询this.getFormatList();//这里可以放一些需要format的请求或者其它},methods: {getFormatList () {getDemoList().then(res => {this.userNameList = res.data.data;// 对应选择器 value和label});},getListPage () {this.listLoading = true;getDemoListPage(this.zqListQuery).then(res => {var records = res.data.data.records;/*if (records.length > 0) {for (var i = 0; i < records.length; i++) {records[i].dateTime = new Date(records[i].dateTime);// TODO 处理时间格式化滴//TODO 处理状态滴if (records[i].state == 0){records[i].state = "未处理";}}}*/this.list = records;this.total = res.data.data.total;this.listLoading = false})},handleCreate () {this.dialogStatus = 'create';//对应标题this.getFormatList();this.resetFormColumns();//重置this.drawer = true;//弹出抽屉修改为显示状态},handleUpdate (row) {this.zq_formData = Object.assign({}, row);//回显数据this.dialogStatus = 'update';this.getFormatList();this.drawer = true;},handleDetail (row) {this.zq_zq_formData_detail = Object.assign({}, row);this.dialogStatus = 'detail';this.drawer_detail = true},handleDelete (row) {deleteDemo({ id: row.id }).then(response => {if (response.data.status == 1) {this.getListPage();this.$notify({title: '成功',message: '删除成功',type: 'success',duration: 2000})} else {this.$message({message: response.data.message,type: 'error'})}}).catch(err => {this.fetchSuccess = false;console.log(err);})},ok () {this.$refs.zq_formData.validate(valid => {if (valid) {saveOrUpdateDemo(this.zq_formData).then(response => {if (response.data.status == 1) {this.getListPage();this.$Notice.success({title: '成功',desc: '保存成功',duration: 2});this.drawer = false;} else {this.$message({message: response.data.message,type: 'error'})}}).catch(err => {this.fetchSuccess = false;console.log(err);})}})},cancel () {this.drawer = false;},handleSizeChange (val) {this.zqListQuery.pageSize = val;this.getListPage();this.getFormatList();},handleCurrentChange (val) {this.zqListQuery.page = val;this.getListPage();this.getFormatList();},resetFormColumns () {this.zq_formData = {username: undefined, // 用户名password: undefined, // 密码sex: undefined // 性别}}}}
</script>
<!-- 样式 -->
<style lang="less" scoped>.demo {.demo-title {height: 70px;line-height: 70px;background: #2b3b65;padding-left: 20px;font-size: 24px;color: #fff;}}.demo-drawer-footer {width: 100%;position: absolute;bottom: 0;left: 0;border-top: 1px solid #e8e8e8;padding: 10px 16px;text-align: center;background: #fff;}
</style>

demo.js

import axios from '@/libs/api.request'export const getDemoListPage = (query) => {return axios.request({url: '/api/zhengqing/demo/listPage',data: query,method: 'post'})
};export const getDemoList = (query) => {return axios.request({url: '/api/zhengqing/demo/list',data: query,method: 'post'})
};export const getUserNameList = (query) => {return axios.request({url: '/api/zhengqing/demo/list',data: query,method: 'post'})
};export const saveOrUpdateDemo = (form) => {return axios.request({url: '/api/zhengqing/demo/save',data: form,method: 'post'})
};export const deleteDemo = (id) => {return axios.request({url: '/api/zhengqing/demo/delete',data: id,method: 'post'})
};

至于后端代码就不放了，根据各自的需求返回合适的数据data就好了 ~

iView(1) 增删改查案例相关推荐

JDBC+MySQL入门增删改查案例
目录前言案例分析核心思路拆解案例涉及知识点第一关创建数据库和项目创建数据库创建项目第二关 JDBC插入和查询预备工作单个插入批量插入查询数据 JDBC修改和删除修改数据删 ...
java springboot+mybaits 实现数据库增删改查案例
springboot是java中最实用,当前也是最流行的框架,mybaits对应dao层.想要做项目springboot和mybaits是必须的.今天就教大家怎么简单搭建一个用springboot的增 ...
5分钟做一个php的增删改查案例
增删改查案例 PHP基础入门完成了,自己做了一个签到系统,用于可活动考勤,班级考勤等,主要是在校园中自己有时候需要使用,最近刚好学了PHP+MySQL的知识,于是自己构建了一个简单的考勤签到系统.这个 ...
Java中的sqlsession_java相关：MyBatis中SqlSession实现增删改查案例
java相关:MyBatis中SqlSession实现增删改查案例发布于 2020-6-13| 复制链接摘记: 前言开博客这是第一次写系列文章,从内心上讲是有点担心自己写不好,写不全,毕 ...
品牌增删改查案例，登录以及注册
环境导入E:\课程\javaweb资料\day10-JSP\资料\2. 品牌增删改查案例素材(师生共用) 查询所有(使用JSP脚本展示品牌数据) 1,在数据访问层的mapper接口中定义查询所有的sq ...
python django ORM 简单的增删改查案例记录
在学习中摸索简单的ORM和模板层html的数据交互中的增删改查功能. 主要和网络教程不同的是我查询用的是fileter去对象,再在html中用for in给对象实例化,再获取对应属性的值,而b站的教程 ...
springboot增删改查案例_大神基于SpringBoot开发一个Restful服务，实现增删改查功能...
前言在去年的时候,在各种渠道中略微的了解了SpringBoot,在开发web项目的时候是如何的方便.快捷.但是当时并没有认真的去学习下,毕竟感觉自己在Struts和SpringMVC都用得不太熟练. ...
springboot+springm vc+mybatis实现增删改查案例！
大家好,我是雄雄,欢迎关注微信公众号[雄雄的小课堂]. 前言最近这几天都在看关于springboot的内容,每天新会获得点新收获,并且都总结发在公众号中:最后经过不懈努力,不断查找相关网页,解决各种 ...
孙连伟 java_java(jsp)简单实现数据库学生信息的增删改查案例
1:创建学生类,创建主函数进行测试java package cn.edu.hpu.stu; import java.util.Scanner; import cn.edu.hpu.jdbclink.* ...

iView(1) 增删改查案例

先看效果吧：

下面是demo源码：

iView(1) 增删改查案例相关推荐

最新文章

热门文章

iView(1) 增删改查 案例

先看效果吧：

下面是demo源码：

iView(1) 增删改查 案例相关推荐

最新文章

热门文章

iView(1) 增删改查案例

iView(1) 增删改查案例相关推荐