Document

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>

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

下一次给大家展示后端接口代码，里面会完成上传信息，展示列表的内容。