单页html+vue3+element-plus+axios

 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, viewport-fit=cover" />
    <title></title>
    <script src="new/flexible.js"></script>
    <script src="new/axios.min.js"></script>
    <link rel="stylesheet" href="new/element-plus.css" />
    <script src="new/vue3.js"></script>
    <script src="new/element-plus.js"></script>
    <script src="new/element-plus-icon.js"></script>
    <script src="new/request.js"></script>
  </head>
  <body>
    <div class="page flex-col" id="app">
            <div><el-button type="primary">{{lists.CName}}</el-button></div>
            <div>
              <el-icon color="#409EFC" class="no-inherit">
                <Share />
              </el-icon>
          </div>
    </div>

    <script lang="ts">
      const { ref, onMounted } = Vue;
  
      const app = Vue.createApp({
        setup() {
          const lists = ref([]);
          
          const fetchData = () => {
            console.log('fetchData');
            let data = {
              ID: 9
            };
            get('/Product/Get', data).then(res => {
              lists.value = res.data;
              console.log('lists', lists.value);
            })
            .catch(err => {
              console.error(err);
            });
          };

          onMounted(() => {
            fetchData();
          });
  
          return {
            lists
          };
        }
      });
  
      app.use(ElementPlus);
      app.mount('#app');
    </script>

  </body>
</html>

 

request.js

const instance = axios.create({
  baseURL: 'https://xxx/api/v1',
  timeout: 10000
});

function get(url, params) {
  return new Promise((resolve, reject) => {
    instance.get(url, { params: params })
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.response.data);
      });
  });
}

function post(url, data) {
  return new Promise((resolve, reject) => {
    instance.post(url, data, {
        headers: {
          'Content-Type': 'application/json'
        }
      })
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.response.data);
      });
  });
}

 

posted @ 2023-07-22 16:29  Lotos  阅读(179)  评论(0)    收藏  举报