当前位置：首页 > 文章列表 > 数据库 > MySQL > VueCli+SpringBoot（路由、主入口、弹窗、axios请求、数据遍历、结合Echarts）（前端）二

VueCli+SpringBoot（路由、主入口、弹窗、axios请求、数据遍历、结合Echarts）（前端）二

来源：SegmentFault 2023-02-24 19:41:29 0浏览收藏

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《VueCli+SpringBoot（路由、主入口、弹窗、axios请求、数据遍历、结合Echarts）（前端）二》，聊聊MySQL、前端、Java、vue.js，我们一起来看看吧！

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 style="margin-right: 13px;">搜索</el-button><el-button style="margin-right: 13px;">新增</el-button><el-button style="margin-right: 13px;">导入</el-button><el-button style="margin-right: 13px;">导出</el-button><el-button 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">修改</el-button></el-table-column><el-table-column><!-- 获取当行元素 --><el-button slot-scope="scope">删除</el-button></el-table-column></el-table><!-- 分页 --><el-pagination :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" style="margin-right: 33px;">取消</el-button><el-button type="submit">提交</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" style="margin-right: 33px;">取消</el-button><el-button type="submit">修改</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>关闭</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 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 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>测试</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">修改</el-button></el-table-column><el-table-column><!-- 获取当行元素 --><el-button slot-scope="scope">删除</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>测试</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 :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>

好了，本文到此结束，带大家了解了《VueCli+SpringBoot（路由、主入口、弹窗、axios请求、数据遍历、结合Echarts）（前端）二》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多数据库知识！

mysql MySQL 前端 Java vue.js

版本声明

本文转载于：SegmentFault 如有侵犯，请联系study_golang@163.com删除