渲染首页数据

喵喵酱仔__

已于 2023-04-21 09:37:09 修改

阅读量65

点赞数

文章标签：前端 vue.js javascript

于 2023-04-19 23:31:53 首次发布

本文链接：https://blog.csdn.net/qq_38210427/article/details/130254175

版权

小鹿专栏收录该内容

9 篇文章 0 订阅

订阅专栏

	
	01 搭建项目 Vite + Vue3 ： https://xuexiluxian.cn/blog/detail/5e5d17f75af14e1586d3471f613e4586

	02 Vite + Vue项目安装router ： https://xuexiluxian.cn/blog/detail/0a44da50c0b440d6b8f591867f8909f5

	03 先做首页头部吧，先做准备工作 : https://xuexiluxian.cn/blog/detail/f6236ef0b71c4e7eb67d9796eb3ef17f

	04 开始布局头部 : https://xuexiluxian.cn/blog/detail/d949b688b99145ba952a19f5594fcaeb

	05 首页NavSwiper布局 : https://xuexiluxian.cn/blog/detail/c460c18fe6d342d0b19d52e81d1da71c

	06 设置代理，axios封装，api解耦  : https://xuexiluxian.cn/blog/detail/814307b5854748f3b47e9ed24775b6e6

	07 NavSwiper开始渲染数据  ： https://xuexiluxian.cn/blog/detail/a320939b9a414437aac402fa001302c9
	
	08 首页-新上好课组件 : https://xuexiluxian.cn/blog/detail/bb104b93c01f45bd906b482cc15a7251

	09 首页-底部组件  :  https://xuexiluxian.cn/blog/detail/a4ae28350a41476eb6060eb0c3dffaed

	10 首页之异步组件 : https://xuexiluxian.cn/blog/detail/b4099c83918345b4a3f108123cf5d1db

1 解决跨域

2 axios封装

文件：新建utils/api/request.js

import axios from 'axios';

//1. 创建axios对象
const service = axios.create();

//2. 请求拦截器
service.interceptors.request.use(config => {
  return config;
}, error => {
  Promise.reject(error);
});

//3. 响应拦截器
service.interceptors.response.use(response => {
  //判断code码
  return response.data;
},error => {
  return Promise.reject(error);
});

export default service;

注意下载axios

npm install axios -S

三、api文件

文件：新建utils/api/courseManage.js

import request from './request'

export function mostNew( data ){
	return request({
		url:'/api/course/mostNew',
		method:"post",
		data
	})
}

项目完整接口文档在： Vue3_WEB前端_前端课程_前端学习路线_小鹿线

3轮播图接口

//获取一级分类
export function getFirstCategorys(){
	return request({
		url:'/api/course/category/getFirstCategorys',
	})
}

设置轮播图的图片

刷新一下没有数据，需要点击一下，怎么解决？？

4新上好课数据


//查询最新课程
export function newCourse( data ){
	return request({
		url:'/api/course/mostNew',
		method:'post',
		data
	})
}

4.1 等级返回的是0,1,2. 我们使用mixin

渲染：

代码：

  {{ courseTypeFn(item.courseLevel) }}

//mixin
import mixin from '../../mixins/courseType.js'
let { courseTypeFn } = mixin();

export default function(){

	let courseTypeFn = ( type )=>{
		let val = '';
		switch (type) {
	        case 1:
	          val = '初级';
	          break;
	        case 2:
	         val = '中级';
	          break;
	        case 3:
	          val = '高级';
	          break;
	        default:
	          val = '';
	    }
	    return val;
	}

	return {
		courseTypeFn
	}

}

4.2 根据不同的值，展示不同的内容

  <div class="coursePriceZero" v-if="item.discountPrice == 0">
                                <div class="pricefree">免费学习</div>
                                <img src="../../assets/img/free.png" alt="">
                            </div>

                            <div class="coursePrice" v-else-if="item.isMember == 1">
                                <div class="courseMemberbg"><span class="courseMember">会员免费</span></div>
                                <div class="price">¥ {{item.discountPrice}}</div>
                            </div>

                            <div class="coursePricePri" v-else>
                                <div class="pricePri">¥ {{item.discountPrice}}</div>
                            </div>

4.2 首页之异步组件

一、为什么用异步组件？

就拿首页的新上好课组件来说，第一屏可能用户看不到太多数据，但是也都加载了，那么用户没有看到反而加载首页的加载速度就会慢，为了提高首页加载效率，这一块采用异步组件来处理。

二、Vueuse使用

2.1 下载安装

npm i @vueuse/core

2.2 Home.vue代码调整为：

<template>
	<Header></Header>
	<NavSwiper></NavSwiper>
	<div ref="target">
		<NewGoodCourse v-if='targetIsVisible'></NewGoodCourse>
	</div>
	<Foot></Foot>
</template>

<script setup>
import { useIntersectionObserver } from '@vueuse/core'

import Header from '../components/common/Header.vue'
import NavSwiper from '../components/home/NavSwiper.vue'

const NewGoodCourse = defineAsyncComponent(() =>
  import('../components/home/NewGoodCourse.vue')
)

const target = ref(null);
const targetIsVisible = ref(false);

const { stop } = useIntersectionObserver(
  target,
  ([{ isIntersecting }]) => {
  	if( isIntersecting ) {
  		targetIsVisible.value = isIntersecting
  	}
  },
)

import Foot from '../components/common/Foot.vue'

</script>