小案例：实现http://www.alloyteam.com/page/0/移动端效果，博客文章列表和文章详情页面

一：案例要求和数据：

(1)移动端适配
(2)列表跳详情
(3)回到顶部
(4)上下页
(5)时间格式
(6)解决接口跨域请求访问问题
(7)路由跳转无bug

接口路径均以 http://118.190.39.123:8877/ 为前缀
文章列表
	请求方法：get
	接口地址url：articles
	接收get参数：
	   page：页数 （必填）
	   limit：每页显示条数（必填）
	响应数据：
	   {
	    "total": 11,//文章总条数
	    "current": 1,//当前页码
	    "pages": 3,//总页码
	    "results": [
	        {
	            "id": 0,//文章id
	            "tags": [//文章标签
	                "WEB开发"
	            ],
	            "title": "2020・AlloyTeam 腾讯文档前端团队招聘・Web 工程师",//文章标题
	            "author": "TAT.ALLOY",//作者
	            "avatar": "",//头像
	            "date": "2015-08-21T09:54:17+00:00",//日期
	            "separator": "\\n\\t\\t\\t\\t 98,732  次浏览\\t\\t\\t",//浏览量
	            "summary": "",//概述
	            "content": " "//文章内容
	        }
	]
	}

文章详情
请求方法：post
接口地址url：articles/:id
接收post参数：
      id：文章id（必填）
响应数据：
     {
            "id": 0,//文章id
            "tags": [//文章标签
                "WEB开发"
            ],
            "title": "2020・AlloyTeam 腾讯文档前端团队招聘・Web 工程师",//文章标题
            "author": "TAT.ALLOY",//作者
            "avatar": "",//头像
            "date": "2015-08-21T09:54:17+00:00",//日期
            "separator": "\\n\\t\\t\\t\\t 98,732  次浏览\\t\\t\\t",//浏览量
            "summary": "",//概述
            "content": " "//文章内容
        }

二：效果图展示：

三：开始写的思路

布局——数据——交互
第一：创建项目
第二：先把给的模板布局布好，一个要求一个要求实现
第三：配置移动端页面
第四：请求数据进行跨域
第五：拿到数据进行样式调整
第六：列表跳详情
第七：回到顶部
第八：调整上一页下一页
第九：时间格式
第十：处理bug和小细节

进行：

1.创建项目

在文件里标题栏cmd后在文件下vue create 项目名

2.创建完成之后 npm run serve看看效果
3.先创建一个文件名rem的文件下index.js写rem移动端布局，在main.js里面引入import '@/rem'

const WIDTH = 375//如果是尺寸的设计稿在这里修改
const setView = () => {
    //设置html标签的fontSize
    document.documentElement.style.fontSize = (100 * document.documentElement.clientWidth / WIDTH) + 'px'
}
window.onresize = setView
setView()

4.调整一下看看移动端是否配置成功
5.开始测接口和请求数据

//接口是 http://118.190.39.123:8877/ 产生跨域需要下载一个依赖`npm i axios`
//在vue.config.js里配置
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy: {
      '/api': {
        target: " http://118.190.39.123:8877/ ",
        pathRewrite: {
          '^/api': "",
        }
      }
    }
  }
})

6.请求完数据要渲染数据，放在view文件下的home页面

<template>
  <div class="home">
    <a href="one"></a>
    <ul>
      <li v-for="item in list" :key="item.id">
        <div class="ding">
          <!-- <img :src="item.avatar" alt=""> -->
          <!-- {{item.avatar}} -->
          <h1>AlloyTeam</h1>
          <p>腾讯全端 AlloyTeam 团队 Blog</p>
        </div>
        <div>
          <p>{{ item.author }}</p>
          <p class="yi">{{ item.tags[0] }}</p>
          <p class="er">
            <router-link :to="'/articles/' + item.id">
              {{ item.title }}
            </router-link>
          </p>
        </div>
        <p>{{item.summary}}</p>
        <div v-html="item.content" class="two"></div>
        <p>{{ dayjs(item.date).format("YYYY-MM-DD") }}</p>
         <button @click="zhi">置顶</button>
      </li>
    </ul>
    <div class="footer">
     <button @click="top">上一页</button>
     <button @click="bottom">下一页</button>
    </div>
</template>

<script>
//跨域需要引用一下axios
import axios from "axios";
export default {
  name: "HomeView",
  data() {
    return {
      list: [],
    };
  },
  created() {
    axios.get('/api/articles?page=1&limit=1').then((res)=>{
      console.log(res)
      this.list=res.data.results
    })
  },
  methods: {
    
  },
};
</script>
<style lang="scss" scoped>
.home {
  width: 100%;
  ul {
    width: 100%;
    margin: 0 auto;
    li {
      .ding {
        display: flex;
        justify-content: space-between;
      }
      .two {
        blockquote {
          font-size: 0.1rem;
        }
        h3{
          border-bottom: 1px solid #ccc;
        }
      }
    }
  }
  a {
    color: black;
    text-decoration: none;
  }
}
</style>

7.数据已拿到也已渲染该列表跳详情啦，需要先拿到一个id值后用路由传参的方式传输该条数据，在详情的那条数据这样写

<p class="er">
  <router-link :to="'/articles/' + item.id">
     {{ item.title }}
   </router-link>
 </p>

在router文件下的index.js修改路由配置

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/articles/:id',
    name: 'articles',
    component: () => import( '../views/AboutView.vue')
  }
]

由此可见跳到了about页面在about页面配置详情页的内容

<template>
  <div class="about">
      <!-- <img :src="item.avatar" alt=""> -->
      <router-link to="/">首页</router-link>
      <div v-html="list.content" class="first"></div>
      <p>{{list.data}}</p>
      <button @click="zhi">置顶</button>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  name: "AboutView",
  data(){
    return{
      list:{},
      num:1
    }
  },
  async mounted(){
  //先输出一下看id值是否传过来然后用async方法：
    console.log(this.$route.params.id)
    let res = await axios.post("/api/articles/" + this.$route.params.id);
    console.log(res);
    this.list = res.data;
  },
  methods:{
    zhi(){
      document.documentElement.scrollTop=0
    },
  }
};
</script>
<style lang="scss" scoped>
  .about{
    width: 100%;
    //height: 4rem;
    // background: purple;
    .first{
      h3{
        border-bottom: 1px solid #ccc;
      }
    }
  }
</style>

8.数据交互列表跳详情已成功，写写小效果置顶和时间格式
在home和about页面都有一个置顶的button按钮绑定点击事件后在methods写即可

methods:{
  zhi(){
     document.documentElement.scrollTop=0
   },
 }

时间格式的话下载一个插件npm install dayjs --save
在全局main.js引用一下import dayjs from "dayjs" Vue.prototype.dayjs = dayjs;后直接在组件内用即可
例：<p>{{ dayjs(item.date).format("YYYY-MM-DD") }}</p>
9.分页(上一页下一页)
主要是通过if判断来判断请求列表的页数来显示展示的内容

<div class="footer">
   <button @click="top">上一页</button>
   <button @click="bottom">下一页</button>
</div>

<script>
//跨域需要引用一下axios
import axios from "axios";
export default {
  name: "HomeView",
  data() {
    return {
      list: [],
      num:1
    };
  },
  created() {
    axios.get('/api/articles?page=1&limit=1').then((res)=>{
      console.log(res)
      this.list=res.data.results
    })
  },
  methods: {
    top() {
      if (this.num > 1) {
        this.num = this.num - 1;
        axios.get("/api/articles/", {
        //params传递的参数是加密的哟
            params: {
              page: this.num,
              limit: 1,
            },
          })
          .then((res) => {
            console.log(res);
            this.list = res.data.results;
          });
      }else{
        this.num=3
      }
      console.log(112)
    },
    bottom() {
      if(this.num<3){
        this.num=this.num+1
        axios
          .get("/api/articles/", {
            params: {
              page: this.num,
              limit: 1,
            },
          })
          .then((res) => {
            console.log(res);
            this.list = res.data.results;
          });
      }else{
        this.num=1
      }
    },
  },
};
</script>

这段代码可以进行封装，简单的写

easy(){
	axios.get("/api/articles/", {
    params: {
      page: this.num,
      limit: 1,
    },
  })
  .then((res) => {
    console.log(res);
    this.list = res.data.results;
  });
}
//封完之后直接在用的地方调用即可

到这里这个小案例就已经结束了，如果还没学尽兴的话可以看看作者大大的其他博客🈯https://blog.csdn.net/weixin_62228315?type=blog