html+vue页面请求json文件或接口

最新推荐文章于 2024-04-08 08:09:24 发布

性野喜悲

最新推荐文章于 2024-04-08 08:09:24 发布

阅读量991

点赞数 1

分类专栏：经验分享 vue html+css 文章标签：前端 vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/leng0920/article/details/129329245

版权

经验分享同时被 3 个专栏收录

149 篇文章 1 订阅

订阅专栏

vue

136 篇文章 4 订阅

订阅专栏

html+css

113 篇文章 1 订阅

订阅专栏

wy_seat_code.json

[
    {"name":"杨阿东","num":"1号桌"},
    {"name":"王德鹿","num":"2号桌"},
    {"name":"徐勇飞","num":"3号桌"},
    {"name":"蔡新飞","num":"4号桌"},
    {"name":"王珠珠","num":"5号桌"},
]

页面引用wy_seat_code.json的内容

<!DOCTYPE html>
<html>

<link>
<meta charset="utf-8">
<meta name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<title>本地json文件使用</title>
<style>
  .dialog-title {
    font-size: .4rem;
    font-weight: 700;
    color: #31302C;
    line-height: .4rem;
    margin-bottom: 1.05rem;
  }

  .dialog-cont {
    padding: 0 .7rem;
  }

  .dialog-input {
    position: relative;
  }

  .dialog-input img {
    position: absolute;
    width: .36rem;
    left: .24rem;
  }

  .dialog-input input {
    width: 100%;
    display: block;
    outline: none;
    height: .85rem;
    background-color: #F8F9FB;
    border-radius: .15rem;
    font-size: .24rem;
    border: none;
    color: #000;
    box-sizing: border-box;
    padding-left: .77rem;
    background-size: .36rem .36rem;
    background-position: .24rem center;
  }

  .dialog-input input::-webkit-input-placeholder {
    color: rgba(152, 167, 185, 1);
  }

  .btn-box {
    padding: .56rem 0 .77rem;
  }

  .com-btn {
    width: 100%;
    font-size: .28rem;
    font-weight: 500;
    line-height: .27rem;
    text-align: center;
    padding: .3rem 0;
    border-radius: .15rem;
  }

  .search-btn {
    background-color: rgba(0, 100, 255, 1);
    color: #fff;
  }

  .cancel-btn {
    margin-top: .24rem;
    background-color: rgba(244, 246, 249, 1);
    color: rgba(36, 46, 66, 0.8);
  }
</style>
<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>

<body>
  <div id="app" v-cloak>
    <van-dialog v-model="showSeatDialog" title="" get-container="body" :show-confirm-button="false">
      <div class="dialog-title" slot="title">座位信息查询</div>
      <div class="dialog-cont">
        <div class="dialog-input flex-center-center">
          <img
            src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAMAAABiM0N1AAAAAXNSR0IArs4c6QAAAbNQTFRFAAAAgICAVVVVQEBAMzNmVVVVOTlVMzNNRkZGQEBAOzs7NzdJMzNEPDw8NjZDMzNAMT09Ojo6NzdDNTVANTU+MzM7NjY+NTU8MDc+NjY8NDQ7Mjg+LzU7NDQ6MzM+MDU6NDQ5MTY7MDU6LzQ9MTY6MDU5MDQ9MjY7MjY6MTU5MTU8MDM6MjY5MTQ7LzY8MDU7LzU6MTQ6MDM7MDU6LzQ5LzQ7MDQ5MTM6LzQ7MTM6MDU5MDQ6LzM6MTU7MDQ6LzM7MDQ6LzM7MTU6MDQ6MDQ5LzM6LzQ6MDQ5MDM6LzM6MDQ7MDM6LzQ5MTQ5MDQ6MDM6MDM6MDQ6MDM5MDQ5MDQ6MDM6MDM5LzQ6LzQ6LzQ5MDQ6MDQ6LzM6MDM6MDQ5MDM6MDQ6LzQ6LzM6MDQ5MDQ5MDQ6MDQ6LzM6LzM5MDQ5LzM5LzM5LzQ6MDQ6MDM6MDM5LzQ6MDQ6MDM5MDM5MDM6MDM5MDM6MDM6LzQ6MDM5LzQ5LzQ5LzM6MDM6MDQ5LzQ5LzM6MDM6MDM5LzQ6LzM6LzM5MDM5MDQ5LzQ6LzM6MDM5MDQ6MDQ6LzM5LzM5LzM5iL0BtAAAAJB0Uk5TAAECAwQFBgkKCwwNDg8RExQVFhcYHR4hIiUmJykrLC0wMTQ1Njk6Oz1CQ0RLTE5RW1xdZGVmZ2ttcXJ0dnx+gIKEh4iJioyNj5CRlJWXmJmam56goaOkpaesrbCxs7S2ubq8vb/AwcXHyMnMzc7P0NHT1NXb3N/g4eLk5+jp6uzt7u/w8vP09fb3+Pr7/P3+hBwF3AAAAfNJREFUGBntwelDi3EAB/DvOraMaFlEwkQ5J0py1CpHrlLGHMPmJiHZEitl1S47vn+ydzzPtuf5Hb3d54OaTdvin3j1bTX3YyZ8eT/09TzP8b/FQDO0HIqyTHKoCeou5Vnp614ocj9hVeunoaTxBS0UTkFFkJbSXZA3SBuJZshqSdLOOGRN0tafDsjZkae9u5DTR4Ff9ZASpcgxSMlSZAQyWih0DzIOUigKGccp9BEyDlAoAhnbKTQNKSmKDENKmCLdkNJLgZ8OSNmWpb0bkHSFttJtkLQ1QTvDkNZLG3EX5F2jpdUOKHA8ooVsD5Q477CqxFGo6k2z0lsv1O0OFmj2va8eWvZML/Of4oeBRmhzdA2HXs4vzIQnznpQU86567C//7xJv7+rzQkVdd2jn1ld6dPokTrI8d5aoa2Vm16ItY5nKJS53gqBgRSlpM7Bjus+pQVdsNQ+RwVz7bDgXaCSBS+qcs9S0awbVTREqCzSgEoXqeECKnjWqGHNg3JT1DKFMp1Fail2wmyMmsZgFqemGEx81OaDUYDaAjAKUVsIRm+o7TWMYtQWg1GG2jIw4ibAaInaEjCaorbbMGp6Rk0PnDBxnHi8TmWLkz5Uqtt3Zmji6bsv8aXkRjZfLJVYoVQs5DZ+Ly/Ov48+vDp4cidq5P0F9oAPUcyETvcAAAAASUVORK5CYII=">
          <input type="text" v-model="attendeeName" placeholder="请输入您的姓名查询座位信息" />
        </div>
        <div class="btn-box">
          <div class="com-btn search-btn" @click="handleGetInfo">查询</div>
          <div class="com-btn cancel-btn" @click="showSeatDialog = false">取消</div>
        </div>
      </div>
    </van-dialog>
  </div>
</body>
//可以使用cdn引入
<script src="https://eventimg.oss-cn-shanghai.aliyuncs.com/micro/common_resources/js/axios-v0.24.0.min.js">
</script>
<script src="https://eventimg.oss-cn-shanghai.aliyuncs.com/micro/common_resources/js/vue-v2.6.14.min.js">
</script>
<script src="https://eventimg.oss-cn-shanghai.aliyuncs.com/micro/common_resources/js/utils.js"></script>
<script src="https://eventimg.oss-cn-shanghai.aliyuncs.com/micro/common_resources/js/vant-v2.12.37.min.js">
</script>
<script>
  new Vue({
    el: '#app',
    data: {
      
      showSeatDialog: true,
      attendeeName: '',
    },
    watch: {},
    computed: {},
    mounted() {
      
    },
    methods: {

      handleGetInfo() {
        if (!this.attendeeName) {
          vant.Notify('请输入您的姓名')
          return;
        }
        axios({
          method: 'get',
          headers: {
            'Content-Type': 'application/json; charset=utf-8',
          },
          url: `./js/wy_seat_code.json`, //接口地址（可以是本地json文件也可以是后台返回的接口地址）
        }).then(
          (res) => {
            let {
              data,
              code
            } = res;
            if (data) {
              let list = data.find(item => item.name === this.attendeeName);
              if (list) {
    //seat.html为查询结果页，可将姓名（name）与座位（num）由路由带过去到seat.html进行显示
                window.location.href =
                  `./seat.html?name=${list.name}&num=${list.num}`;
              } else {
                vant.Notify('查询不到您的座位码，请确认姓名无误再重试~')
                return;
              }
            }
          },
          (err) => {
            // console.log(err);
          },
        );
      }
    }
  })
</script>

</html>