vue2+vant mock模拟数据在页面上渲染出来 （五）

把utils/request.js 换成真实开发后端路径

let apiBaseUrl = {
  production: "http://api.cpengx.cn/finance/api",
  // developent:"http://api.cpengx.cn/development",
  // 网站的根目录
  // developent:'/',
  development: "http://api.cpengx.cn/finance/api",
  testDev: "http://api.cpengx.cn/finance/api",
};

mock.js进行模拟数据

const Mock = require("mockjs");

//mock 模拟导航列表数据  http://api.cpengx.cn/finance/api/是后端提供的路径   nav/navList这个组件路径
Mock.mock ('http://api.cpengx.cn/finance/api/nav/navList','get',()=>{
    return{
        msg:'ok',
        result:[
            {title:'大盘行情',imgSrc:'/imgs/nav1.png',linko:''},
            {title:'股票组合',imgSrc:'/imgs/nav2.png',linko:''},
            {title:'股票开户',imgSrc:'/imgs/nav3.png',linko:''},
            {title:'选股攻略',imgSrc:'imgs/fail.png',linko:''},
            {title:'指数选基',imgSrc:'/imgs/nav5.png',linko:''},
            {title:'基金组合',imgSrc:'/imgs/nav6.png',linko:''},
            {title:'私募基金',imgSrc:'/imgs/nav7.png',linko:''},
            {title:'基金必看',imgSrc:'/imgs/nav8.png',linko:''},
        ]
    }
})

api请求mock模拟出的数据

//请求测试
import request from '../utils/request'


export const getTestapi = () =>{
    return request({
        methods:'GET',
        url:'/',
    })
}

// 请求mock导航模拟的数据
// url必须要和mock里边写的一致
export const getNavList = () => {
    return request({
        methods:'GET',
        url:'/nav/navList'
    })
}

//获取指数信息    
export const getQuotes = params => {
    return request({
        method:'GET',
        url:'/quote',
        // params是传参 选项是用来配置GET方法的query参数,?xxx=xxx&key =value
        params,
    })
}

1、创建三个组件分别是导航栏、导航列表、今日热点
组件导航栏列表

<template>
  <div class="navHeader">
    <van-nav-bar>
        <!-- #left是vant指定的写法 意思是左边 -->
      <template #left>
        <!-- 直接从global.less引过来的 -->
        <!-- <span class="iconfont icon-gerenzhongxin"></span> -->
        <van-icon name="contact" size="25" color="#1989fa" />
      </template>
      <template #title>
        <van-search
          v-model="value"
          placeholder="请输入搜索关键词"
          shape="round"
        />
      </template>
      <template #right>
        <!-- 直接从vant图标引入过来的 -->
        <van-icon name="envelop-o" size="25" :badge="badge" />
      </template>
    </van-nav-bar>
  </div>
</template>

<script>
// import { NavBar } from "vant";

export default {
  data() {
    return {
      badge: 9,
      value: "",
    };
  },
  // main全局注册好，这边就不用注册了
  //   components: {
  //    'van-nav-bar': NavBar,
  //   },
};
</script>
<style lang="less" scoped>
.navHeader { 
    // 覆盖掉原来的
    ::v-deep .van-nav-bar__title{
        max-width: 100%;
    }
    // 进行一个嵌套   ::v-deep样式穿透
  ::v-deep.van-search__content {
    padding-left: 0;
  }
}
</style>

组件导航栏列表
导航列表

<template>
  <div class="navList">
    <van-grid :column-num="4" :border ='false'>
        <!--  v-for="(item, i) in navList   循环return里边的内容-->
        <!--:icon="item.imgSrc || `/imgs/nav${i+1}.png`"   假如imgSrc没有请求到后端提供的图片;我们给他个默认初始化数据  -->
      <van-grid-item
        v-for="(item, i) in navList"
        :key="item.title"
        :icon="item.imgSrc || `/imgs/nav${i + 1}.png`"
        :text="item.title"
      />
    </van-grid>
  </div>
</template>
<script>
// 引入全部api接口 写法
import * as api from "@/api/index"
//引入apii中的getNavList接口
import {getNavList} from "@/api.index"
export default {
  data() {
    return {
        // 初始化数据
        navList: [
            {title:'大盘行情',imgSrc:'/imgs/nav1.png',linko:''},
            {title:'股票组合',imgSrc:'/imgs/nav2.png',linko:''},
            {title:'股票开户',imgSrc:'/imgs/nav3.png',linko:''},
            {title:'选股攻略',imgSrc:'/imgs/nav4.png',linko:''},
            {title:'指数选基',imgSrc:'/imgs/nav5.png',linko:''},
            {title:'基金组合',imgSrc:'/imgs/nav6.png',linko:''},
            {title:'私募基金',imgSrc:'/imgs/nav7.png',linko:''},
            {title:'基金必看',imgSrc:'',linko:''},
        ]
    }
  },
  async mounted(){
    //   请求后台接口
      let res = await api.getNavList();
    //   把初始化数据替换成后台数据
      this.navList = res.result;
      console.log(res)
  }
//第二种请求接口写法 import {getNavList} from "@/api.index"
 // async mounted(){
  // let res = await getNavList();
  //console.log(res,res);
  }
};
</script>

<style lang='less' scoped>
   .navList{
    //    ::v-deep 穿透 不渗入;样式覆盖不了 
    //  [class*=van-hairline]::after 在f12里边复制过来相对应的样式
    //    ::v-deep  [class*=van-hairline]::after {
    //     border: none;
    // }
   }
</style>

组件导航栏列表
引入今日热点组件

<template>
    <div>
        <h1>今日热点</h1>
    </div>
</template>
<script>
import * as api from "@/api/index"

export default {
    data() {
        return { }
        
    },
  async  mounted(){
     let resgetQuotes = await  api.getQuotes();
     console.log(resgetQuotes,'resgetQuotes')
    }
}
</script>

三个组件请求api接口提供的数据

2、在页面中显示子三个组件数据效果

home.vue

<template>
    <div class="home">
      <!-- 导航栏 -->
      <NavHeader></NavHeader>
      <!-- 导航列表 -->
      <NavList></NavList>
      <!-- 今日热点 -->
      <HotStock></HotStock>
    </div>
</template>

<script>
// 引入导航组件
import NavHeader from '@/components/NavHeader.vue';
// 引入列表
import NavList from '@/components/NavList.vue';
//今日热点
import HotStock from '@/components/HotStock.vue'
// 请求接口
// import { getTestapi,getTestProxy, getTestMock} from "@/api/index";

export default {
  name: "Home",
  // 注册
  components: {
    NavHeader,
    NavList,
    HotStock
  },

};
</script>
<style >
.d1 {
  width: 200px;
  height: 200px;
  background-color: blue;
}
.d2 {
  width: 2rem;
  height: 2rem;
  background-color: red;
}
</style>

组件效果和请求接口成功