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一样，

import { useFoStore } from '@/stores/fo';
const foStore = useFoStore()


    
        
寺庙页面展示
        
            请选择你要祭拜的佛菩萨图标,点击即可打开对应的内容