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>
发表回复