Vue Cli目录
VueCli官网：https://element.eleme.io/#/zh-CN
VueCli写法
: 等于 v-bind
router/index.js
//引入模块import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'import Music from '../views/Music.vue'import Test from '../views/Test.vue'Vue.use(VueRouter)//path是路由参数，当门路匹配到以后路由参数时，就会跳转component所对应的页面组件const routes = [ { path: '/', //首页 name: 'Home', component: Home }, { path: '/about', //模块门路 name: 'About', component: Aubot }, { path: '/music', //模块门路 name: 'Music', component: Music }, { path: '/test', //模块门路 name: 'Test', component: Test }]const router = new VueRouter({ routes})export default router
app.vue 为主入口
<template> <div id="app"><!-- router容许应用路由跳转 mode设置程度 垂直 --> <el-menu mode="horizontal" background-color="#97c0c8" text-color="#fff" router > <el-menu-item index="/">首页</el-menu-item> <el-menu-item index="/about">音 乐</el-menu-item> <el-menu-item index="/music">走马灯</el-menu-item> <el-menu-item index="/test">测试</el-menu-item> </el-menu><!-- 部分跳转页面 --><router-view></router-view> </div></template><style></style>
views/About
<template> <div> <el-input v-model="input" placeholder="请输出歌手名" style="width: 13%; margin-top: 13px; margin-bottom: 13px; margin-right: 13px; margin-left: 3px;"></el-input> <el-button @click='findInput(input)' style="margin-right: 13px;">搜寻</el-button> <el-button @click='dialogSave=true' style="margin-right: 13px;">新增</el-button> <el-button @click='dialogUpload=true' style="margin-right: 13px;">导入</el-button> <el-button @click='downloadExcel()' style="margin-right: 13px;">导出</el-button> <el-button @click='print()' style="margin-right: 13px;">打印</el-button> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="song" label="歌曲名" width="180"> </el-table-column> <el-table-column prop="name" label="歌手" width="180"> </el-table-column> <el-table-column prop="sex" :formatter="sexType" label="性别" width="180"> </el-table-column> <el-table-column prop="createTime" label="创立工夫" width="180"> </el-table-column> <el-table-column> <el-button slot-scope="scope" @click='dialogUpdate=true,update(scope.row)'>批改</el-button> </el-table-column> <el-table-column> <!-- 获取当行元素 --> <el-button slot-scope="scope" @click='deleteId(scope.row.id)'>删除</el-button> </el-table-column> </el-table> <!-- 分页 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageSize" :page-sizes="[5, 10, 15, 20]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="count"> </el-pagination> <el-dialog title="新增" :visible.sync="dialogSave" style="width: 100%;"> <table> <tr> <td>歌曲名：</td> <td><el-input v-model="musicName"></el-input></td> </tr> <tr> <td>歌 手：</td> <td><el-input v-model="name"></el-input></td> </tr> <tr> <td>性 别：</td> <td><el-input v-model="sex"></el-input></td> </tr> </table> <el-button type="submit" @click="dialogSave=false" style="margin-right: 33px;">勾销</el-button> <el-button type="submit" @click="insertData()">提交</el-button> </el-dialog> <el-dialog title="批改" :visible.sync="dialogUpdate"> <table> <tr> <td>歌曲名：</td> <td><el-input v-model="updateMusicName"></el-input></td> </tr> <tr> <td>歌 手：</td> <td><el-input v-model="updateName"></el-input></td> </tr> <tr> <td>性 别：</td> <td><el-input v-model="updateSex"></el-input></td> </tr> </table> <el-button type="submit" @click="dialogUpdate=false" style="margin-right: 33px;">勾销</el-button> <el-button type="submit" @click="updateData()">批改</el-button> </el-dialog> <el-dialog title="导入上传" :visible.sync="dialogUpload"> <el-upload drag action="http://localhost:1313/uploadExcel" accept=".xls,.xlsx" :on-success="upload" > <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> --> </el-upload> <el-button @click="close()">敞开</el-button> </el-dialog> </div></template><script> export default { data() { return { tableData: [], dialogSave: false, dialogUpdate: false, dialogDelete: false, input: "", musicName:"", name:"", sex:"", updateMusicName:"", updateName:"", updateSex:"", id:"", pageSize:1, size:5, count:0, dialogUpload:false, // file:[] } }, created:function(){ var that=this; this.$axios.get("/selectAll"+"/"+that.pageSize+"/"+that.size).then(function(res){ that.tableData=res.data; // console.log(res.data); }); this.$axios.get("/selectCount").then(function(res){ that.count=res.data; }) }, methods: { //页面跳转 // junp(){ // this.$router.push({ // path:'/music' // }) // } deleteId(id){ // this.dialogDelete=true; // console.log(id); var that=this; this.$axios.delete("/deleteMessage",{ data:{ id:id, name:that.musicName, sex:that.sex, song:that.musicName, } }).then(function(res){ alert(res.data); that.selectAll(); that.selectCount(); }) }, findInput(input){ var that=this; // console.log(input); this.$axios.post("/selectCondition"+"/"+that.pageSize+"/"+that.size,{ name:input }).then(function(res){ that.tableData=res.data; that.count=res.data.length; }) }, insertData(){ var that=this; this.$axios.post("/insertMessage",{ name:that.name, sex:that.sex, song:that.musicName }).then(function(res){ alert(res.data); that.selectAll(); that.selectCount(); }) this.musicName="", this.name="", this.sex="", this.dialogSave=false }, update(data){ // console.log(data); this.updateMusicName=data.song; this.updateName=data.name; this.id=data.id; // this.updateSex=data.sex; if(data.sex==1){ this.updateSex="男"; }else if(data.sex==2){ this.updateSex="女"; } }, updateData(){ var that=this; this.$axios.post("/updateMessage",{ id:that.id, name:that.updateName, song:that.updateMusicName, sex:that.updateSex }).then(function(res){ alert(res.data); that.selectAll(); }) this.dialogUpdate=false }, //table表格格式化 sexType(row, column){ if (row.sex == 1) { return "男"; } else if(row.sex == 2){ return "女"; } }, selectAll(){ var that=this; this.$axios.get("/selectAll"+"/"+that.pageSize+"/"+that.size).then(function(res){ that.tableData=res.data; }) }, handleSizeChange(size){ this.size=size; // console.log(this.pageSize+"++++++条数++++++"); if(this.pageSize>1){ this.pageSize=1; } this.selectAll(); }, handleCurrentChange(pageSize){ this.pageSize=pageSize; // console.log(this.pageSize+"++++++当前页数++++++"); this.selectAll(); }, selectCount(){ var that=this; this.$axios.get("/selectCount").then(function(res){ that.count=res.data; }) }, print(){ window.print(); }, // uploadExcel(){ // var that=this; // this.$axios.post("http://localhost:1313/uploadExcel").then(function(res){ // alert(res.data); // }) // }, downloadExcel(){ window.open("/downloadExcel"+'/'+this.input) }, upload(response,file,fileList){ // console.log(response); // console.log(file); // console.log(fileList); alert(response); // this.file=fileList; }, close(){ this.selectAll(); this.dialogUpload=false; } } }</script><style> .el-input{ margin-left: 13px; }</style>
性能
1、弹窗
<template> <div> <!-- dialogSave默认false不显示true为显示 --> <el-button @click='dialogSave=true' style="margin-right: 13px;">新增</el-button> <el-dialog title="新增" :visible.sync="dialogSave" style="width: 100%;"></el-dialog> </div></template><script> export default { data() { return { dialogSave:false } } }</script>
2、加载页面执行办法、打印
<template> <div> <el-button @click='print()' style="margin-right: 13px;">打印</el-button> </div></template><script> export default { data() { return { } }, // 加载执行该办法 created:function(){ }, methods:{ print(){ window.print(); } } }</script>
3、axios连贯接口 get、post、delete申请
<template> <div> <el-button @click="selectCount()">测试</el-button> </div></template><script> export default { data() { return { tableData:[], name:"", sex:"", musicName:"" } }, methods:{ //function办法里this须要var that=this;才可失常应用 // get申请 selectCount(){ this.$axios.get("/selectCount").then(function(res){ console.log(res.data); }) }, // post申请 insertData(){ var that=this; this.$axios.post("/insertMessage",{ name:that.name, sex:that.sex, song:that.musicName }).then(function(res){ alert(res.data); // 调用该办法 that.selectCount(); }) this.musicName="", this.name="", this.sex="" }, // delete申请 deleteId(id){ var that=this; this.$axios.delete("/deleteMessage",{ data:{ id:id, name:that.musicName } }).then(function(res){ alert(res.data); that.selectCount(); }) } } }</script>
4、el-table遍历、 :formatter数据格式化（1、2转化为男、女）、 slot- scope获取当前列的数据信息
<template> <div> <!-- prop是父组件用来传递数据的一个自定义属性 label为标签--> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="song" label="歌曲名" width="180"> </el-table-column> <el-table-column prop="name" label="歌手" width="180"> </el-table-column> <!-- 字典表能够通过formatter更改值 --> <el-table-column prop="sex" :formatter="sexType" label="性别" width="180"> </el-table-column> <el-table-column prop="createTime" label="创立工夫" width="180"> </el-table-column> <el-table-column> <!-- 获取当前列的信息 @click能够通过逗号 调用多个办法 --> <el-button slot-scope="scope" @click='update(scope.row)'>批改</el-button> </el-table-column> <el-table-column> <!-- 获取当行元素 --> <el-button slot-scope="scope" @click='deleteId(scope.row.id)'>删除</el-button> </el-table-column> </el-table> </div></template><script> export default { data() { return { tableData:[] } }, // 加载执行该办法 created:function(){ var that=this; this.$axios.get("/selectAll"+"/"+3+"/"+3).then(function(res){ that.tableData=res.data; console.log(that.tableData) }) },methods:{ update(res){ console.log(res) }, deleteId(res){ console.log(res); }, //table表格格式化 sexType(row, column){ if (row.sex == 1) { return "男"; } else if(row.sex == 2){ return "女"; } } } }</script>
5、接口设置好下载款式 从新关上一个页面调用该办法下载
<template> <div> <el-button @click="downloadExcel()">测试</el-button> </div></template><script> export default { data() { return { } }, methods:{ downloadExcel(){ window.open("/downloadExcel"+'/'+this.input) }, } }</script>
6、分页
<template> <div> <!-- 分页 --> <!-- @size-change 执行扭转当前页条数 @current-change 执行扭转当前页数 :current-page 默认当前页数 :page-sizes 设置以后条数 :page-size 默认以后条数 layout 组件布局，子组件名用逗号分隔 :total 总条数 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageSize" :page-sizes="[5, 10, 15, 20]" :page-size="size" layout="total, sizes, prev, pager, next, jumper" :total="count"> </el-pagination> </div></template><script> export default { data() { return { } }, methods:{ handleSizeChange(size){ this.size=size; // console.log(this.pageSize+"++++++条数++++++"); // 扭转条数 当前页大于1 跳转到第一页 if(this.pageSize>1){ this.pageSize=1; } this.selectAll(); }, handleCurrentChange(pageSize){ this.pageSize=pageSize; // console.log(this.pageSize+"++++++当前页数++++++"); this.selectAll(); } } }</script>