代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="divUserInfo" style="width: 80%;margin: 0px auto">
<!--查询条件部分-->
<el-form ref="userBeanForm" :model="userBeanForm" label-width="80px">
<el-row>
<el-col :span="12">
<el-form-item label="用户姓名">
<el-col :span="18">
<el-input v-model="userBeanForm.username"></el-input>
</el-col>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="年龄">
<el-col :span="11">
<el-input v-model="userBeanForm.userage"></el-input>
</el-col>
<el-col class="line" :span="1" :offset="1">-</el-col>
<el-col :span="11">
<el-input v-model="userBeanForm.userage2"></el-input>
</el-col>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="地址">
<el-col :span="18">
<el-input v-model="userBeanForm.useraddress"></el-input>
</el-col>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="注册日期">
<el-col :span="11">
<el-date-picker type="date" placeholder="开始时间" v-model="userBeanForm.userregdate"
style="width: 100%;"></el-date-picker>
</el-col>
<el-col class="line" :span="1" :offset="1">-</el-col>
<el-col :span="11">
<el-date-picker type="date" placeholder="结束时间" v-model="userBeanForm.userregdate2"
style="width: 100%;"></el-date-picker>
</el-col>
</el-form-item>
</el-col>
<!--可以绑定分页信息参数（pageNum，pageSize）的隐藏表单对象-->
</el-row>
<el-form-item>
<el-row>
<el-col :span="8">
<el-button type="primary" @click="doquery(1)">查询</el-button>
</el-col>
<el-col :span="8">
<el-button type="info" @click="resetForm(userBeanForm)">重置</el-button>
</el-col>
<el-col :span="8">
<el-button type="success" @click="addUserInfo()">新增</el-button>
</el-col>
</el-row>
</el-form-item>
</el-form>
<!--查询结果集显示部分-->
<!--data属性绑定的是vue组件中的数据结果集，如果data绑定的数据发生变化，则table会进行自动更新【由vue的数据的双向绑定功能实现】-->
<el-row>
<el-table
ref="multipleTable"
:data="lstUserInfo"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
type="index"
width="50">
</el-table-column>
<el-table-column
prop="username"
label="用户姓名"
width="180">
</el-table-column>
<el-table-column
prop="userage"
label="年龄"
width="120">
</el-table-column>
<el-table-column
prop="useraddress"
label="地址"
show-overflow-tooltip>
</el-table-column>
<el-table-column
prop="userregdate"
label="注册日期"
width="180">
<!--<template slot-scope="scope">{{ scope.row.date }}</template>-->
</el-table-column>
<el-table-column
fixed="right"
label="操作"
width="200">
<!--使用template模板的 slot-scope="scope" 表示，scope将获取table绑定的数据源中对应的当前行的数据对象，
可以通过 scope.row.data获取当前行的数据对象并传递给响应事件函数；
通过 Scoped slot 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据
-->
<template slot-scope="scope">
<el-button :plain="true" type="success" size="small" icon="edit" @click="editClick(scope.row)">编辑
</el-button>
<el-button :plain="true" type="danger" size="small" icon="delete"
@click="deleteClick(scope.row.userid)">
删除
</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<!--列表底部工具条和分页符-->
<el-row style="margin-top: 20px" type="flex" justify="end">
<!--批量删除按钮-->
<el-col :span="6">
<el-button :plain="true" type="danger" size="small" icon="delete" @click="removeSelections">批量删除</el-button>
</el-col>
<!--分页工具（使用pagehelper进行物理分页）：
handleCurrentChange方法：用于处理页码改变时的响应方法；
handleSizeChange方法：处理每页记录条数改变时的影响；
-->
<el-col :span="18">
<el-pagination
style="float: right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[2, 3, 5, 10]"
:page-size="pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total">
</el-pagination>
</el-col>
</el-row>
<!--<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>-->
<!--新增模态框部分:elementUI要求dialog单独放置-->
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="60%"
:before-close="handleClose">
<el-form :model="editFormData" ref="editFormData" label-width="80px" :rules="editFormRules" ref="editForm">
<el-row>
<el-col :span="10">
<el-form-item label="用户名" prop="username">
<el-input v-model="editFormData.username" placeholder="请输入用户名"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="密码">
<el-input type="password" v-model="editFormData.userpsw" placeholder="请输入密码"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="年龄">
<el-input v-model="editFormData.userage" placeholder="请输入年龄"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="地址">
<el-input v-model="editFormData.useraddress" placeholder="请输入地址"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<el-form-item label="注册日期">
<el-date-picker type="date" placeholder="请输入注册时间" v-model="editFormData.userregdate"
format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
style="width: 100%;"></el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="saveOrUpdateUserInfo('editFormData')">确 定</el-button>
</span>
</el-dialog>
</div>
<!--引入vue的库，一定要在element库文件之前-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/element-ui/lib/table.js"></script>
<!--引入axios库，完成后台异步请求的http通信，替代jquery ajax（也可以使用）-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--解决axios跨域无法传递form表单数据到后台实体类的问题-->
<script src="https://cdn.bootcss.com/qs/6.5.1/qs.min.js"></script>
<!--使用vue组件进行处理-->
<script type="text/javascript">
var app = new Vue({
el: "#divUserInfo",
data: {
// form表单绑定的实体类数据结构
// 数据模型和form表单绑定
userBeanForm: {
username: '',
userpsw: '',
userage: '',
userage2: '',
useraddress: '',
userregdate: '',
userregdate2: ''
},
// table表格绑定的数据结果集【数组和list集合】
// 数据模型和table显示列表绑定
lstUserInfo: [],
// dialog是否进行显示的数据结构
dialogVisible: false,
// dialog修改和新增对话框中的数据结构
editFormData: {
userid: null, // 默认值为null，用于区分新增还是修改
username: '',
userpsw: '',
useraddress: '',
userregdate: '',
},
// 新增和修改form表单的验证规则定义
editFormRules: {
/*表单name属性,中括号中是验证规则的配置*/
username: [
{required: true, message: '请输入姓名', trigger: 'blur'}
]
},
// 选中框，多选框--存储表格左侧数据行的多选选定的记录的id到一个数组数据结构中
multipleSelection: [],
/////////////分页相关/////////////////
//当前页
currentPage: 1,
//分页大小
pageSize: 5,
//总记录数
total: 0,
},
methods: {
/*查询部分的方法*/
doquery: function (currentIndex, currentPageSize, isDeleted) {
let req_data = Qs.stringify(this.userBeanForm);
console.log("currentPageSize::::::");
console.log(currentPageSize);
if (!currentPageSize) {
currentPageSize = this.pageSize;
}
// 在异步请求发送给服务器的请求的数据添加分页的参数信息
let strPageHelperParams = "&pageNum=" + currentIndex + "&pageSize=" + currentPageSize;
// 拼接分页信息到参数字符串中发送给后台服务器
req_data += strPageHelperParams;
// 当前this对象进行别名处理
_self = this;
// 同服务器进行异步通信，验证用户登陆的合法性
axios.post('http://localhost:9091/springboot_vue_elementui_server20191028/doAjaxUserInfoQueryByPramasRestWithPageHelper', req_data)
.then(function (response) {
console.log(response.data);
// 更新vue的table的数据模型 lstUserInfo
_self.lstUserInfo = response.data.list; // 取出pagehelper中的pageinfo实体类中的list对象，绑定给显示列表table
// 数据查询完成之后，将分页相关的信息数据，绑定给分页插件的数据结果集
// 绑定数据给分页插件
_self.pageSize = currentPageSize;
_self.total = response.data.total;
// 处理删除时，最后一页删除之后没有数据的情况
console.log("isdeleteddddddd:::::");
console.log(isDeleted);
if (isDeleted) {
// 删除情况下，防止删除之后，最后一页没有数据
// 取出之后一页的页码
let navigateLastPage = response.data.navigateLastPage;
// 如果当前页和分页控件的最后一页不相等，则说明最后一页灭有数据了
if (navigateLastPage != currentIndex) {
// 修改查询的页码为前一页
let pindex = currentIndex - 1 >= 0 ? currentIndex - 1 : 0;
_self.doquery(pindex, _self.pageSize);
}
} else {
// 非删除操作时的页码
_self.currentPage = currentIndex;
}
})
.catch(function (error) {
console.log(error);
});
}
,
// 重置表单数据
resetForm(formName) {
//this.$refs[formName].resetFields();
}
,
/*数据显示部分的方法*/
// 处理显示列表左侧多选框的方法
handleSelectionChange: function (val) {
// val对象中保存的是table中的每一行的数据对象
for (var i = 0; i < val.length; i++) {
// 取出当前行的数据对象
var row = val[i];
// 将当前行的数据的主键值存储多选数组中
this.multipleSelection[i] = row.userid;
}
//this.multipleSelection = val;
console.log("表格左侧多选：：：：：")
console.info(this.multipleSelection);
},
// 表格左侧多选框的批量删除操作
removeSelections: function () {
// TODO 批量删除功能作为课下作业，独立完成
},
// 进行编辑操作--弹出dialog对话框
editClick: function (rowData) {
// 设置dialog的visible.sync属性绑定的值为true进行显示，false进行关闭
this.dialogVisible = true;
// 使用Object.assign方法从scope.row传递过来的对象中提取数据
this.editFormData = Object.assign({}, rowData);
},
// 进行新增操作--弹出dialog对话框
addUserInfo: function () {
// 设置dialog的visible.sync属性绑定的值为true进行显示，false进行关闭
this.dialogVisible = true;
// 将dialog绑定的数据设置为空，进行新增操作
this.editFormData = {
userid: null, // 默认值为null，用于区分新增还是修改
username: '',
userpsw: '',
useraddress: '',
userregdate: '',
};
},
// 新增和修改dialog对话框的确定按钮事件处理
saveOrUpdateUserInfo: function (formName) {
// 当前this对象进行别名处理
_self = this;
console.log("this.$refs[formName]::::::")
console.log(this.$refs[formName])
this.$refs[formName].validate((valid) => {
if (valid) {
// 验证通过，进行表单提交处理
let req_data = Qs.stringify(this.editFormData);
// 同服务器进行异步通信，验证用户登陆的合法性
axios.post('http://localhost:9091/springboot_vue_elementui_server20191028/saveOrUpdateUserinfoWithOutFileRest', req_data)
.then(function (response) {
console.log(response.data);
// 更新vue的table的数据模型 lstUserInfo
//_self.lstUserInfo = response.data;
// 如果新增或者修改成功，则重新调用查询方法进行查询操作
_self.doquery(_self.currentPage, _self.pageSize);
// 关闭对话框
_self.dialogVisible = false;
})
.catch(function (error) {
console.log(error);
});
} else {
// 验证不通过，进行信息提示处理
console.log('error submit!!');
_self.$message.error('提交数据验证非法!');
return false; // return false 阻止表单提交
}
});
},
// 进行删除操作
deleteClick: function (userid) {
// 将this对象以别名的形式进行定义【？ js的this作用于有关】
_self = this;
// 使用确认框，确认用户是否进行删除操作
this.$confirm('是否删除该记录?', '删除警告', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
// 使用axios异步通信进行删除操作
axios.post('http://localhost:9091/springboot_vue_elementui_server20191028/doAjaxUserInfoDeleteByIDRest', Qs.stringify({"userid": userid})
).then(function (response) {
// 提示用户删除成功
_self.$message({
message: '删除成功',
type: 'success'
});
// 重新查询
_self.doquery(_self.currentPage, _self.pageSize, true);
//_self.doquery(_self.currentPage, _self.pageSize);
}).catch(function (error) {
console.log(error);
});
// 使用axios异步通信进行删除操作end
});
},
// 弹出对话框相关处理事件
handleClose: function (done) {
this.$confirm('确认关闭？')
.then(_ => {
// 调用done函数，继续进行dialog后续的处理
done();
})
.catch(_ => {
});
},
// 使用pagehelper的分页处理事件
// 每页页面大小发生变化事件的处理
handleSizeChange: function (currentSize) {
// 重新查询后台数据库数据，进行分页数据的重新绑定
// 调用查询方法
this.doquery(this.currentPage, currentSize);
},
// 分页工具的页码发生变化的事件处理
handleCurrentChange: function (index) {
// 重新查询后台数据库数据，进行分页数据的重新绑定
// 调用查询方法
this.doquery(index, this.pageSize);
}
}
})
;
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手