Vue Cli目录
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>
7、结合Echarts图表
<template>
<div>
<div id="myChart" :style="{width: '500px', height: '500px'}"></div>
</div>
</template>
<script>
export default {
data(){
return{
singer:[],
song:[],
singerSong:[]
}
},
created:function(){
},
methods: {
selectEcharts(){
var that=this;
this.$axios.get("/selectSong").then(function(res){
that.song=res.data;
// console.log(that.song);
});
this.$axios.get("/selectSinger").then(function(res){
that.singer=res.data;
// console.log(that.singer);
});
this.$axios.get("/singerSong").then(function(res){
that.singerSong=res.data;
// console.log(that.singerSong);
that.drawLine();
});
},
drawLine() {
// 基于准备好的dom，初始化echarts实例
let myChart = this.$echarts.init(document.getElementById("myChart"));
// 绘制图表
myChart.setOption({
xAxis: {
type: 'category',
data: this.singer,
},
yAxis: {
minInterval: 1,
},
series: [
{
data: this.song,
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
});
}
},mounted(){
this.selectEcharts();
}
}
</script>
<style>
</style>
java
mysql
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。