关于前端:VueCliSpringBoot路由主入口弹窗axios请求数据遍历等二

48次阅读

共计 9704 个字符，预计需要花费 25 分钟才能阅读完成。

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>

正文完
前端
发表至： 前端
2022-05-12
 0
关于前端:前端实现很哇塞的浏览器端扫码功能🌟
关于前端:如何使用码匠连接-GuassDB
关于前端:失业了求个工作
关于前端:我的博客-30