- Element-ui和Axios---需要自取
第二步：项目分析首先，我们要先进行分析，要实现案例对品牌信息的操作，需要三层架构的相互调用和操作来实现 。
- Web层（表现层）：表现层我们要实现通过对页面相应的操作，获取页面上的请求或者数据发送到Service层，然后通过Service层的一些方法将数据返回到Web层，进行显示
- Service层（业务逻辑层）：这里主要是进行方法的编写、数据的调度，将从前端拿到的数据或者请求传入到相应的方法体内，调用相应的方法实现相应的操作 。
- Dao层（数据访问层）：主要创建pojo实体类，通过mapper映射的方式，获取数据库的数据 。
文章插图
第三步：废话少说开始编写
- 创建Maven项目，创建brand.html页面，导入axios.js和vue.js,以及element-ui的框架
这里用到的Element前端框架组件，可以参考：Element - 网站快速成型工具<link rel='stylesheet' href='https://www.huyubaike.com/biancheng/js/lib-master/theme-chalk/index.css'><script src="https://www.huyubaike.com/biancheng/js/vue.js" charset='UTF-8'></script><script src="https://www.huyubaike.com/biancheng/js/lib-master/index.js" charset='UTF-8'></script><script src="https://www.huyubaike.com/biancheng/js/axios-0.18.0.js" charset='UTF-8'></script><!DOCTYPE html><html lang="en" ><head> <meta charset="UTF-8"> <title>Title</title> <style> .el-table .warning-row { background: oldlace; }? .el-table .success-row { background: #f0f9eb; } </style></head><body><div id="app"><!-- 搜索表单 --> <el-form :inline="true" :model="brand" class="demo-form-inline"> <el-form-item label="当前状态"> </el-form-item> <el-select v-model="brand.status" placeholder="当前状态"> <el-option label="启用" value="https://www.huyubaike.com/biancheng/1"></el-option> <el-option label="禁用" value="https://www.huyubaike.com/biancheng/0"></el-option> </el-select> <el-form-item label="企业名称"> <el-input v-model="brand.companyName" placeholder="企业名称"></el-input> </el-form-item> <el-form-item label="品牌名称"> <el-input v-model="brand.brandName" 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" @click="dialogVisible=true" plain>新增</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.brandName"></el-input> </el-form-item> <el-form-item label="企业名称"> <el-input v-model="brand.companyName"></el-input> </el-form-item> <el-form-item label="排序"> <el-input v-model="brand.ordered"></el-input> </el-form-item> <el-form-item label="备注"> <el-input type="textarea" v-model="brand.description"></el-input> </el-form-item> <el-form-item label="状态"> <el-switch v-model="brand.status" active-value="https://www.huyubaike.com/biancheng/1" inactive-value="https://www.huyubaike.com/biancheng/0"></el-switch> </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="dialogVisible_update" width="30%" > <template slot-scope="scope"> <el-form ref="form" :model="updateTable" label-width="80px"> <el-form-item label="品牌名称"> <el-input v-model="updateTable.brandName"></el-input> </el-form-item> <el-form-item label="企业名称"> <el-input v-model="updateTable.companyName"></el-input> </el-form-item> <el-form-item label="排序"> <el-input v-model="updateTable.ordered"></el-input> </el-form-item> <el-form-item label="备注"> <el-input type="textarea" v-model="updateTable.description"></el-input> </el-form-item> <el-form-item label="状态"> <el-switch v-model="updateTable.status" active-value="https://www.huyubaike.com/biancheng/1" inactive-value="https://www.huyubaike.com/biancheng/0"></el-switch> </el-form-item> <el-form-item> <el-button type="primary" @click="updateBrand">提交</el-button> <el-button @click="dialogVisible_update = false">取消</el-button> </el-form-item> </el-form> </template>? </el-dialog><!-- 表格--> <template > <el-table :data='https://www.huyubaike.com/biancheng/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='brandName' label='品牌名称' align='center' > </el-table-column> <el-table-column prop='companyName' label='企业名称' align='center' > </el-table-column> <el-table-column prop='ordered' align='center' label='排序'> </el-table-column> <el-table-column prop='description' align='center' label='描述'> </el-table-column> <el-table-column prop='statusStr' align='center' label='当前状态'> </el-table-column> <el-table-column align='center' label='操作'>? <template slot-scope="scope"> <el-row> <el-button type='primary' @click="selectById(scope.row.id)" >修改</el-button> <el-button type='danger'@click="deleteBrand(scope.row.id)">删除</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='5' layout='total, sizes, prev, pager, next, jumper' :total='totalCount'> </el-pagination></div>????<link rel='stylesheet' href='https://www.huyubaike.com/biancheng/js/lib-master/theme-chalk/index.css'><script src="https://www.huyubaike.com/biancheng/js/vue.js" charset='UTF-8'></script><script src="https://www.huyubaike.com/biancheng/js/lib-master/index.js" charset='UTF-8'></script><script src="https://www.huyubaike.com/biancheng/js/axios-0.18.0.js" charset='UTF-8'></script><script>new Vue({ el:'#app', mounted(){ this.selectByPage() }, data() { return { //总记录数 totalCount:'', //分页 --当前页码 currentPage:1 , //每页显示的条数 pageSize:5, //新增表单的显示与隐藏的标记 dialogVisible: false, dialogVisible_update:false,? //品牌模型数据 brand: { status:'', companyName: '', brandName: '', id:'', ordered:'', description:'', }, updateTable:{ status:'', companyName: '', brandName1: '', id:'', ordered:'', description:'', }, //被选中的id数组 selectIds:[],? //复选框选择信息集合 multipleSelection: [], //表格的数据 tableData: [{ brandName: '', companyName: '', ordered: '', description:'', status:'' }], } }, methods: {? //响应数据，显示所有信息 GetAll(){ console.log('提示语句') //当页面加载完成后，发送异步请求，获取数据 axios({ method:'get', url:'brand/selectAll', }).then( resp=>{ this.tableData=https://www.huyubaike.com/biancheng/resp.data ; console.log('提示语句') }) }, //查询分页的数据 selectByPage(){ axios({ method:'post', url:'brand/selectByPageAndCondition?currentPage='+this.currentPage+'&pageSize='+this.pageSize, data:this.brand, }).then(response=>{ //设置表格数据 this.tableData= https://www.huyubaike.com/biancheng/response.data.rows; //{rows:[],totalCount:} //设置总记录数 this.totalCount=response.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.selectByPage();? }, //添加表单数据的方法 addBrand(){ //console.log(this.brand) //发送ajax请求，添加数据 axios({ method:'post', url: 'brand/add', data: this.brand }).then(resp=>{ if(resp.datahttps://www.huyubaike.com/biancheng/=="success"){ //添加成功 this.selectByPage(); //关闭窗口 this.dialogVisible=false; //添加成功的标识 this.$message({ showClose: true, message: '成功添加数据', type: 'success' }); } }) },? //删除一条指定数据操作 deleteBrand(id){ //弹窗提示是否删除 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$message({ type: 'success', message: '删除成功!' }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); }); axios({ method:'post', url:'brand/deleteById', data:id }).then(response=>{ if(response.datahttps://www.huyubaike.com/biancheng/=='success'){ //重新查询 this.selectByPage(); //显示成功提示 this.$message({ showClose: true, message: '删除数据成功', type: 'success' }); } }) }, //更改用户数据 //1.对用户数据进行回显操作 selectById(id){ axios({ method:'post', url: 'brand/selectById', data: id }).then(response=>{ //console.log(id) //回显数据 this.updateTable=response.data; // console.log(_this.updateTable) //弹出修改框 this.dialogVisible_update=true; }) }, //2.对回显数据进行更改操作 updateBrand(){ axios({ method:'post', url:'brand/updateBrand', data:this.updateTable }).then(resp=>{ if(resp.datahttps://www.huyubaike.com/biancheng/=='success'){ //重新查询数据 this.selectByPage(); //关闭窗口 this.dialogVisible_update=false; //更改成功提示 this.$message({ showClose: true, message: '数据更改成功', type: 'success' }); } }) },? //删除多条数据 deleteByIds(){? //弹出确认对话框 this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { this.$message({ type: 'success', message: '删除成功!' }); }).catch(() => { this.$message({ type: 'info', message: '已取消删除' }); });? //1.创建id数组[]从this.multipleSelection里面获取id for (let i = 0; i < this.multipleSelection.length; i++) { let selectionElement=this.multipleSelection[i]; this.selectIds[i]=selectionElement.id; //console.log(this.selectIds) } //2.发送ajax请求，并携带ids数据 axios({ method:'post', url:'brand/deleteByIds', data:this.selectIds }).then(resp=>{ if(resp.datahttps://www.huyubaike.com/biancheng/=='success'){ //删除成功 //重新查询数据 this.selectByPage(); //删除成功提示 this.$message({ showClose: true, message: '删除成功', type: 'success' }); } }) }, //分页工具条 handleSizeChange(val) { //console.log(`每页 ${val} 条`); //设置每页展示的条数 this.pageSize = val; }, handleCurrentChange(val) { // console.log(`当前页: ${val}`); //重新设置当前页码数 this.currentPage=val; this.selectByPage(); } },? })</script></body></html>
经验总结扩展阅读
- 含具体案例 Java8新特性之Stream流
- 电影爱人完整剧情介绍?
- 会话跟踪技术 - Cookie 和 Session 快速上手 + 登陆注册案例
- 案例分享-https证书链不完整导致请求失败
- 不明原因不孕怎么办啊
- JavaWeb505错误，IDEA版问题解决
- 一 CPS攻击案例——基于脉冲宽度调制PWM的无人机攻击
- 黑蒜的制作方法
- 教育案例怎么写
- 大鱼歌词完整版