springboot+vue网站开发-渲染前端列表页面-缩略图信息

springboot+vue网站开发-渲染前端列表页面-缩略图信息！内容比较多。这是第一篇，先给大家展示的是，基础的代码封装，vue前端网站模块的代码展示。

我们使用到了pinia-存储我们请求过来的数据，它是一个状态管理，取代了之前的旧技术vuex.

使用起来更为简便一些。

我们使用了axios封装好了一些基础条件，方便对后端服务器发送业务请求。

后端已经写好了接口了。下一篇文章展示后端接口的内容。

如图，我们引入成功了，开始使用他们。

第一步，我们在src下面新建一个utils文件夹，新建一个http.js

//axios基础的封装
import axios from "axios";const httpInstance = axios.create({baseURL:'http://127.0.0.1:7777',timeout:5000
})
//axios请求拦截器
httpInstance.interceptors.request.use(config =>{return config},e => Promise.reject(e)
)
//axios响应拦截器
httpInstance.interceptors.response.use(res => res.data,e =>{return Promise.reject(e)}
)
export default httpInstance

其他业务接口都可以用它来发请求了。

我们在src下面新建一个apis文件夹，新建一个layout.js

其实这个名字你随意都行的，主要是内容。

import httpInstance from "@/utils/http";
export function getFoListVoAPI(){return httpInstance({url:'/fo/foListVo'})
}

我们在src下面新建stores文件夹（pinia的）

fo.js

import {ref} from 'vue'
import {defineStore} from 'pinia'
import { getFoListVoAPI } from '@/apis/layout'export const useFoStore = 
defineStore('fo',()=>{//const foListVo = ref([])//action获得数据const getFoListVo = async ()=>{const res = await getFoListVoAPI()foListVo.value = res.result;}return {foListVo,getFoListVo}
})

这样，我们就可以组件页面内使用这个对外暴漏的对象了。好像java一样，

<script setup>
import { useFoStore } from '@/stores/fo';
const foStore = useFoStore()
</script>
<template><div><h3>寺庙页面展示</h3><div>请选择你要祭拜的佛菩萨图标,点击即可打开对应的内容</div><div class="fo-list"><div class="fo" v-for="item in foStore.foListVo " :key="item.id"><RouterLink to="/foDetail/{{ item.id }}"><img :src="$host + item.foThumb" :alt="item.name"/></RouterLink><br/><p>{{item.name}}</p><p>浏览量{{item.viewCount}}</p></div></div></div>
</template>
<style scoped>
.fo-list{width: 100%;align-items: flex-start;border-radius: 10%;border-color:2px solid rgb(241, 218, 6);
}
.fo-list .fo{margin-left: 1.4rem;margin-bottom: 1.4rem;width: 25%;text-align: center;float: left;height: auto;}
.fo-list .fo img{width: 100%;}
.fo-list .fo p{text-align: center;font-size:0.4rem;
}
</style>

执行是正常的，没有报错。说明调用成功了，页面没有展示信息，是因为我们后端接口返回了内容是空白的。