拆分axios 安装 json-server

长沙xtt

已于 2022-05-17 16:26:01 修改

阅读量216

点赞数

分类专栏： vue3 文章标签： vue.js javascript ecmascript

于 2022-05-17 16:03:23 首次发布

本文链接：https://blog.csdn.net/weixin_40746230/article/details/124810979

版权

vue3 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用json-server创建一个模拟API，用于在Vue.js应用中展示和加载数据。首先通过npm安装json-server，并设置数据。然后，在Vue组件中使用axios获取这些数据。接着，配置vue-router实现页面间的导航，并添加详情页面。最后，展示了如何获取详情页面的数据。整个过程详细地展示了如何在Vue项目中实现前后端数据交互和路由跳转。

摘要由CSDN通过智能技术生成

https://blog.csdn.net/lzfengquan/article/details/119413300?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-119413300-blog-124178042.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1-119413300-blog-124178042.pc_relevant_default&utm_relevant_index=1\

安装 json-server

npm install -g json-server

json-server -v

json-server --watch data/db.json

{
    "posts":[
      {
        "title":"zt.js",
        "body":"db本课程",
        "id":1,
        "tags":[
            "vue3",
            "compositionApi",
            "blog"
        ]
      },
      {
        "title":"zt.js",
        "body":"db本课程",
        "id":2,
        "tags":[
            "vue3",
            "compositionApi",
            "blog"
        ]
      },
      {
        "title":"zt.js",
        "body":"db本课程",
        "id":3,
        "tags":[
            "vue3",
            "compositionApi",
            "blog"
        ]
      }

    ]
}

import { ref } from "vue";
import axios from 'axios'

const getPosts=()=>{

    const posts = ref([]);

    
    const load=async()=>{
    try{
        let { data } =await axios("http://localhost:3000/posts")
        posts.value=data
    
    }catch(error){
      console.log(error)
    }
  

}

return {posts,load}
}

export default getPosts

<script setup>
import PostList from "../components/PostList.vue";
import getPosts from '../composibles/getPosts'

const {posts,load}=getPosts()
 load();


</script>

<template>
    <div class="home">
        <div v-if="posts.length"><PostList :posts="posts" /></div>
        <div v-else>加载中....</div>

    </div>
</template>

<script setup>
import {computed } from "vue";
const props=defineProps({
    post:Object
});

const snippet= computed(
    ()=>{
        return props.post.body.substring(0,10)+"...";
    }
)


</script>

<template>
    <div class="post">
    <h3>{{post.title}}</h3>
     <p>{{snippet}}</p> 
     <span v-for="tag in post.tags" :key="tag">#{{tag}}</span>
    </div>
</template>

<style>
.post {
    margin: 0 40px 30px;
    padding-bottom: 30px;
    border-bottom: 1px dashed #e7e7e7;
}
.post h3{
    display: inline-block;
    position: relative;
    font-size: 26px;
    color: black;
    margin-bottom: 10px;
    max-width: 400px;
}
.post h3::before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #ff8800;
    position: absolute;
    z-index: -1;
    padding-right: 40px;
    left: -30px;
}
</style>

安装 axios 安装router

npm install vue-router

 npm i axios

定义router / router.js

import { createRouter,createWebHistory } from "vue-router";
import Home from '../views/Home.vue'
import Details from '../views/Details.vue'
const routes=[
    {path:"/",name:'Home',component:Home},
    {path:"/posts/:id",name:'Details',component:Details,props:true}
]
const router =createRouter(
    {
        history:createWebHistory(),
        routes
    }
)

export default router

获取详情接口数据模拟

import { ref } from "vue";
import axios from 'axios'

const getPost=(id)=>{

    const post = ref({});

    
    const load=async()=>{
    try{
        let { data } =await axios("http://localhost:3000/posts/"+id)
        post.value=data
    
    }catch(error){
      console.log(error)
    }
  

}

return {post,load}
}

export default getPost

配置点击进去详情页

  SinglePost.vue

 <router-link :to="{name:'Details',params:{id:post.id}}">   
         <h3>{{post.title}}</h3>
         </router-link>


router/index.js

{path:"/posts/:id",name:'Details',component:Details,props:true}

views/Detail.vue

<script setup>
import  getPost from '../composibles/getPost'
const porps=defineProps({
    id:Number,
});
const {post,load}=getPost(porps.id)

load()

</script>

<template>
 <div>Details{{post.title}}</div>
</template>

<style>

</style>