2021-07-12 山东大学软件学院暑期项目实训day10

最新推荐文章于 2022-05-22 15:08:05 发布

布鲁布鲁ฅ

最新推荐文章于 2022-05-22 15:08:05 发布

阅读量144

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/m121388/article/details/118669112

版权

学习目标：

活动修改页详细实现，选座详情页详细实现，修改活动展示页面，加上二维码。

学习内容：

从主页面跳转到活动修改页面，将该活动原有参数当作默认值传入活动修改表单中，带参数的路由页面跳转,即this.$router.push()路由传值和获取。参考：添加链接描述
（1）push后面可以是一个字符串路径，或者描述地址的对象：

//字符串
this.$router.push('home')
//对象
this.$router.push({path: '/login?url=' + this.$route.path});
//命名的路由
this.$router.push({name:'home',params:{id:123}})
//带查询参数
this.$router.push({path: '/backend/order', query: {selected: "2"}});
//设置查询参数
this.$http.post('v1/user/select-stage', {stage: stage})
      .then(({data: {code, content}}) => {
            if (code === 0) {
                // 对象
                this.$router.push({path: '/home'});
            }else if(code === 10){
                // 带查询参数，变成/login?stage=stage
                this.$router.push({path: '/login', query:{stage: stage}});
           }
});
// 设计查询参数对象
let queryData = {};
if (this.$route.query.stage) {
    queryData.stage = this.$route.query.stage;
}
if (this.$route.query.url) {
    queryData.url = this.$route.query.url;
}
this.$router.push({path: '/my/profile', query: queryData});

（2）获取参数的两种常用方法：params和query
params:
由于动态路由也是传递params的，所以在this.$router.push()方法中，path不能和params一起使用，否则params将无效，需要用name来指定页面及通过路由配置的name属性访问,在目标页面通过this.route.params获取参数
query:
在目标页面通过this.route.query 获取参数
（3）在项目中的使用
在这里插入图片描述

实现效果：

vue的script中一个方法调用另一个方法的写法：this.$options.methods.func2();
从后端获取Base64格式的数据展示到前端：

<template>
  <img :src="icon">
</template>
<script>
export default {
    data() {
      return {
        icon: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAAFeAQAAAADlUEq3AAABCElEQVR42u3awQ6DIAyAYW48Njw2\n' +
            'hyWdE7BFt+FpWejPyTSfnhpoqUHur0cAg8FgMBgM/g3Ooa8oUkIqr4chCHaLoxwPm9lwGoNgzzjv\n' +
            'CdNwjZggGJz7JpMEDL4kUuwRMPh0AO25pEbAvrGpUXM0WTSrcsHLY7uyBbPuGLw81kYmtG63vdXr\n' +
            'WLBbfGp19Qv9FbBbrH3u2PYKGNxLEd1q7JEE9o1tU2ML1wT2ja+FqyZSmTc14IXxteGVotfsX4a2\n' +
            '4PWxvROrQ9t6GJXJjgT2gN8OX6ZDW7ArbNve/OFnD7BPLCaLbk14wavj062IlPEGFewW28LVbCxH\n' +
            'XoHdYv6sBoPBYDAY/B/4CXKFUJMlhIC6AAAAAElFTkSuQmCC\n',
      }
    },
  methods: {
  },
}
</script>
<style scoped>
</style>

实现效果：
在这里插入图片描述

实现座位的可视化，每有一个用户选座，就会形成一个pick_seat对象。然后将pick_seat对象数组发送给前端。
行数(4)
列数(4)
座位编号串(1，0，2，3，4，0，5，6，7，0，8，9，10，0，11，12)
选座信息串(1022101110314015)
用户id(test)
用户名(test)
座位的相对位置(12)

<el-main>
        <!--    座位布局    -->
        <div class="pick-seat" v-for="(item,x) in seat_info"  :key="x">
          <el-row :gutter="20">
            <div v-for="(subItem,y) in item" :key="y">
              <el-col :span="6">
                <!--            <div>{{subItem}}</div>-->
                <div v-if="subItem == '0'" ><el-button size="medium">过道</el-button></div>
                <div v-if="subItem == '1'" ><el-button size="medium" type="danger" >{{seat_id[x][y]}}</el-button></div>
                <div v-if="subItem == '2'" ><el-button size="medium" type="primary">{{seat_id[x][y]}}</el-button></div>
                <div v-if="subItem == '3'" ><el-button size="medium" type="warning">{{seat_id[x][y]}}</el-button></div>
                <div v-if="subItem == '4'" ><el-button size="medium" type="info">{{seat_id[x][y]}}</el-button></div>
                <div v-if="subItem == '5'" ><el-button size="medium" type="success">{{seat_id[x][y]}}</el-button></div>
              </el-col>
            </div>
          </el-row>
        </div>
      </el-main>