实习第五天

想…

已于 2022-07-31 00:09:08 修改

阅读量110

点赞数

分类专栏：实习日记文章标签：前端 vue.js javascript

于 2022-07-18 21:45:24 首次发布

本文链接：https://blog.csdn.net/weixin_53491844/article/details/125860996

版权

实习日记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了前端页面的设计，包括首页头部的布局和样式设置，使用了Vant组件库。同时，讲解了如何通过axios进行API接口的编写，包括安装axios，设置请求拦截器，并定义了一个获取所有分类数据的接口。最后展示了如何在页面中调用接口并展示分类数据。

摘要由CSDN通过智能技术生成

前端页面设计

1.首页头部编写

<template>
    <div class="home">
        <div class="search">
            <van-icon name="qr" size="30"/>
            <div class="input">
                <van-search
                    v-model="value"
                    placeholder="请输入搜索关键词"
                    input-align="center"
                />
            </div>
            <van-icon name="scan" size="30" />
        </div>
        
    </div>
</template>
<script>
    import Vue from 'vue';
    import { Tabbar, TabbarItem } from 'vant'
    Vue.use(Tabbar);
    Vue.use(TabbarItem);
    //需要导入一些此文件需要外部资源
    //把改vue文件导出为一个组件，提供给其它页面使用
    export default {
        name:'',//导出的文件名
        components:{
            //注册组件
            //tabBar,
        },
        data(){
            return{
                active:0,
                value:'',
            }
        },
        computed:{ //计算属性

        },
        methods:{

        },

    }
</script>
<style scoped>
    /* css样式 */
    .search{
        display: flex; /* 网格布局 */
        height: 108px;
        padding-top: 0 12px;
        align-items: center; /* 子元素的对齐方式 */
    }
    .input{
        flex: 1; /* 网格布局 */
    }
</style>

2.API接口编写（mock接口）

2.1 安装axios

官网

http://www.axios-js.com/zh-cn/docs/#axios-create-config

npm install axios

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q6ngGoMa-1658151900620)(前端页面设计.assets/image-20220714100205368.png)]

2.2 定义工具类的API接口

响应状态码详解：

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Status#%E6%88%90%E5%8A%9F%E5%93%8D%E5%BA%94

2.3 request工具类编写

import axios from "axios"; //导入axios库
import { Toast } from "vant"; //按需加载vant组件
//我们发送的请求是基于URL地址，我们的服务器地址是不会改变的，所以我们可以定义一个公共的地址
const baseURL = 'http://162.14.108.31:3000'
//我们在使用axios的时候每次都需要单独去创建axios对象所以我们可以把axios实例的过程抽取出来
const  service = axios.create({
    baseURL , //服务器地址
    timeout:10000,//超时时间
    //withCredentials:true,//是否跨域学贷凭证，列如cookie或者session
})
//请求拦截
service.interceptors.request.use(config=>{
    //在请求头中携带token传递到服务器进行认证。
   // config.headers.token = token ; 携带token发送到服务器端
   //加载提示
   Toast.loading({
        message:'加载中......',
        duration:0,//展示时间，0不会消失

   })
   return config ;
},err =>{
    Toast.clear();//提示消失
    return Promise.reject(err);//展示错误信息
});
service.interceptors.response.use(response =>{
   //关闭提示
   Toast.clear();//提示消失
   //状态200-299 表示请求成功
   if(response.status >= 200 &&  response.status < 300){
        //接收响应的数据 response.data //响应数据
       const { code,data } =  response.data ;//{code:200,data:[]}
       if(code === 200){
            return data ;
       }
   }
   //如果出现异常
   const error = new Error('请求接口异常');
   error.reason = response ;
   Toast.fail({
        message:'请求接口异常.....',
   })
   return Promise.reject(error);
},err=>{
    Toast.fail({
        message:'请求接口异常：'+err.message,
    })
    return Promise.reject(error);
})
//导出创建的axios实例
export default service

2.4 API接口定义

import request from '@/utils/request'
import API from './contants'
/*
    查询所有分类数据接口
*/
export const getCategories = ()=>request({
    url:API.TABS_API,
})

2.5 分类接口调用

 async created(){ //async :当前方法属于异步请求
            //vue实例创建后，立即发送axios请求
           try{
                const[
                    {list:categories}
                ]=await Promise.all([ //发送多个请求
                   getCategories() 
                ])
                //修改data数据
                this.categories = categories ;
                console.log(this.categories);
           }catch(error){

                console.log('有错误',error);
           }
           
        }

2.6 页面展示分类

 <!-- 分类 -->
        <van-tabs v-model="active">
            <van-tab 
                v-for="category in categories"
                :key="category.id"
                :title="category.name">
             
            </van-tab>
        </van-tabs>