本周开始了团队作业:
本阶段任务完成页面即可:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="icon" href="lib/logo.ico" type="images/x-ico" /> <title>智能政策信息检索系统</title> <style> .el-table .warning-row { background: oldlace; } .el-table .success-row { background: #f0f9eb; } </style> <style type="text/css"> body{ background: url("./lib/background.png") no-repeat center center fixed; /*兼容浏览器版本*/ -webkit-background-size: cover; -o-background-size: cover; background-size: cover; } </style> </head> <!--<html> <head> <meta content="text/html" charset="UTF-8"> <title>HTML设置图片为页面背景</title> </head> <body background="夕阳余晖.jpg" style="background-repeat:no-repeat background-attachment:fixed; background-size:100% 100%; "> </body> </html> --> <body> <div id="app"> <!--搜索表单--> <el-form :inline="true" :model="brand" class="demo-form-inline"> <el-form-item label="政策名称"> <el-input v-model="brand.name" placeholder="政策名称"></el-input> </el-form-item> <el-form-item label="发文字号"> <el-input v-model="brand.document" placeholder="发文字号"></el-input> </el-form-item> <el-form-item label="发文机构"> <el-input v-model="brand.organ" placeholder="政策编号"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="onSubmit">查询</el-button> </el-form-item> </el-form> <!--按钮--> <el-row> <el-button type="danger" plain @click="deleteByIds">批量删除</el-button> <el-button type="primary" plain @click="dialogVisible = true">新增</el-button> </el-row> <!--添加数据对话框表单--> <el-dialog title="编辑政策" :visible.sync="dialogVisible" width="30%" > <el-form ref="form" :model="brand" label-width="80px"> <el-form-item label="政策名称"> <el-input v-model="brand.name"></el-input> </el-form-item> <el-form-item label="发文机构"> <el-input v-model="brand.organ"></el-input> </el-form-item> <el-form-item label="政策分类"> <el-input v-model="brand.type"></el-input> </el-form-item> <el-form-item label="政策种类"> <el-input v-model="brand.category"></el-input> </el-form-item> <el-form-item label="政策范围"> <el-select v-model="brand.ranged" placeholder="请选择政策范围"> <el-option label="全国(000000 QG)" value="全国(000000 QG)"></el-option> <el-option label="河北省(130000 HE)" value="河北省(130000 HE)"></el-option> <el-option label="重庆市(500000 CQ)" value="重庆市(500000 CQ)"></el-option> <el-option label="北京市(110000 BJ)" value="北京市(110000 BJ)"></el-option> <el-option label="浙江省(330000 ZJ)" value="浙江省(330000 ZJ)"></el-option> <el-option label="上海市(310000 SH)" value="上海市(310000 SH)"></el-option> </el-select> </el-form-item> <el-form-item label="发文字报"> <el-input v-model="brand.document"></el-input> </el-form-item> <el-form-item label="颁布形式"> <el-input v-model="brand.formd"></el-input> </el-form-item> <el-form-item label="政策内容"> <el-input type="textarea" v-model="brand.text"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="addBrand">提交</el-button> <el-button @click="dialogVisible = false">取消</el-button> </el-form-item> </el-form> </el-dialog> <!--修改数据对话框表单--> <el-dialog title="修改政策" :visible.sync="updateDialogVisible" width="30%" > <el-form ref="form" :model="brand" label-width="80px"> <el-form-item label="政策名称"> <el-input v-model="brand.name"></el-input> </el-form-item> <el-form-item label="发文机构"> <el-input v-model="brand.organ"></el-input> </el-form-item> <el-form-item label="政策分类"> <el-input v-model="brand.type"></el-input> </el-form-item> <el-form-item label="政策种类"> <el-input v-model="brand.category"></el-input> </el-form-item> <el-form-item label="政策范围"> <el-select v-model="brand.ranged" placeholder="请选择政策范围"> <el-option label="全国(000000 QG)" value="全国(000000 QG)"></el-option> <el-option label="河北省(130000 HE)" value="河北省(130000 HE)"></el-option> <el-option label="重庆市(500000 CQ)" value="重庆市(500000 CQ)"></el-option> <el-option label="北京市(110000 BJ)" value="北京市(110000 BJ)"></el-option> <el-option label="浙江省(330000 ZJ)" value="浙江省(330000 ZJ)"></el-option> <el-option label="上海市(310000 SH)" value="上海市(310000 SH)"></el-option> </el-select> </el-form-item> <el-form-item label="发文字报"> <el-input v-model="brand.document"></el-input> </el-form-item> <el-form-item label="颁布形式"> <el-input v-model="brand.formd"></el-input> </el-form-item> <el-form-item label="政策内容"> <el-input type="textarea" v-model="brand.text"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="update">提交</el-button> <el-button @click="updateDialogVisible = false">取消</el-button> </el-form-item> </el-form> </el-dialog> <!--表格--> <template> <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName" @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="name" label="政策名称" align="center" > </el-table-column> <el-table-column prop="organ" label="发文机构" align="center" > </el-table-column> <el-table-column prop="viadata" align="center" label="颁布日期"> </el-table-column> <el-table-column prop="type" align="center" label="政策分类"> </el-table-column> <el-table-column align="center" label="操作"> <template slot-scope="scope"> <el-row> <el-button type="primary" @click="brandShow(scope.row)">修改</el-button> <el-button type="danger">删除</el-button> </el-row> </template> </el-table-column> </el-table> </template> <!--分页工具条--> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="totalCount"> </el-pagination> </div> <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <script src="js/axios-0.18.0.js"></script> <script> new Vue({ el: "#app", mounted(){ this.selectAll(); }, methods: { //查询分页数据 selectAll(){ /*//当页面加载完成后,发送异步请求来获取数据\ var _this = this; axios({ method:"get", url:"http://localhost:8080/brand-case/selectAllServlet" }).then(function (resp){ _this.tableData = resp.data; })*/ var _this = this; axios({ method:"post", url:"http://localhost:8080/brand-case/selectByPageAndConditionServlet?currentPage="+this.currentPage+"&pageSize="+this.pageSize, data:this.brand }).then(function (resp){ //设置表格数据 _this.tableData = resp.data.rows; //{rows:[],totalCount:100} //设置总记录数 _this.totalCount = resp.data.totalCount; }) }, tableRowClassName({row, rowIndex}) { if (rowIndex === 1) { return 'warning-row'; } else if (rowIndex === 3) { return 'success-row'; } return ''; }, // 复选框选中后执行的方法 handleSelectionChange(val) { this.multipleSelection = val; console.log(this.multipleSelection) }, // 查询方法 onSubmit() { //console.log(this.brand); this.selectAll(); }, // 添加数据 addBrand(){ //console.log(this.brand); var _this = this; //发送ajax请求,添加数据 axios({ method: "post", url:"http://localhost:8080/brand-case/addServlet", data:_this.brand }).then(function (resp){ if(resp.data == "success"){ //添加成功 //关闭窗口 _this.dialogVisible = false; //重新查询 _this.selectAll(); _this.$message({ showClose: true, message: '恭喜你,添加成功', type: 'success' }); }; }) }, //分页 handleSizeChange(val) { // console.log(`每页 ${val} 条`); //设置每页显示的条数 this.pageSize = val; this.selectAll(); }, handleCurrentChange(val) { //console.log(`当前页: ${val}`); //重新设置当前页码 this.currentPage = val; this.selectAll(); }, //批量删除 deleteByIds(){ //弹出一个确认提示框 this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { //用户点击确认按钮 //1.创建一个id数组[1,2,3] //console.log(this.multipleSelection); for (let i = 0; i < this.multipleSelection.length; i++) { let selectionElement = this.multipleSelection[i]; this.selectedIds[i] = selectionElement.id; } //2.发送AJAX请求 var _this = this; axios({ method: "post", url:"http://localhost:8080/brand-case/deleteByIdsServlet", data:_this.selectedIds }).then(function (resp){ if(resp.data == "success"){ //删除成功 //重新查询 _this.selectAll(); _this.$message({ showClose: true, message: '恭喜你,删除成功', type: 'success' }); }; }) }).catch(() => { this.$message({ //用户点击取消按钮 type: 'info', message: '已取消删除' }); }); }, brandShow(row) { // 获取数据 this.brand = row; console.log(this.brand); // 弹出窗口 this.updateDialogVisible = true; }, update(){ var _this = this; axios({ method:"post", url:"http://localhost:8080/brand-case/updateByIdServlet", data:_this.brand //这是提交的表单数据 }).then(function (resp){ //这里是success数据 if(resp.data == "success"){ //添加成功 console.log("修改成功!"); //关闭窗口 _this.updateDialogVisible = false; //重新查询数据进行显示 _this.selectAll(); _this.$message({ message: '恭喜你,修改成功', type: 'success' }); } if(resp.data == "fail"){ _this.$message.error('修改失败'); } }) }, }, data() { return { //每页显示的条数 pageSize:10, //总记录数 totalCount:100, // 当前页码 currentPage: 1, // 添加数据对话框是否展示的标记 dialogVisible: false, // 修改数据对话框是否展示标记 updateDialogVisible:false, // 品牌模型数据 brand: { id:'', name: '', document: '', organ: '', viadata:"", type:"", text:"", category:"", ranged:"", formd:"", }, //被选中的id数组 selectedIds:[], // 复选框选中数据集合 multipleSelection: [], // 表格数据 tableData: [{ name: '政策', organ: '最高人民检察院', viadata: '2023.4.24', type: "1" }, { name: '政策', organ: '最高人民检察院', viadata: '2023.4.24', type: "1" }, { name: '政策', organ: '最高人民检察院', viadata: '2023.4.24', type: "1" }, { name: '政策', organ: '最高人民检察院', viadata: '2023.4.24', type: "1" }] } } }) </script> </body> </html>
同时还进行了jdbc的基础知识学习。
标签:总结,第七,success,每周,type,brand,message,data,resp From: https://www.cnblogs.com/sxwgzx23/p/17470448.html