一:案例要求和数据:
(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