vue从后台渲染文章列表以及根据id跳转文章详情详解
(编辑：jimmy 日期: 2024/11/6 浏览：3 次 )
前言：
vue里面怎样从后台渲染列表，怎么根据文章的id获取文章的具体内容。以及值与值之间的传递，vue-router 里query和params的区别及使用。
一、query和params
先来看看query和params是怎样传值和接收参数的吧！后面会用到的哦！
（1）query方式传参和接收参数
query相当于get请求，页面跳转的时候，可以在地址栏看到请求参数
传递参数：把数据发送出去
this.$router.push({
path:'/aaa/bbb/ccc',
query:{
id:aaaid
}
})
接收参数：在其他的组件中接收传过来的参数
this.$route.query.id
*注：接收参数是r o u t e "htmlcode">
this.$router.push({
name:'aaa',
params:{
id:aaaid
}
})
接收参数：
this.$route.params.id
注意：params传参，push里面是name不是path！！
二、从后台渲染列表
这里我们要创建一个vue组件，名为ArticleList，用于存放渲染的文章列表。
下面是ArticleList的父组件：
假设叫information
<template>
<div class="Information">
<section>
<p>文章列表为：</p>
<ArticleList
:ArticleList_props_Data="ArticleList_props_Data"
:project_article_Data="project_article_Data"
></ArticleList>
//给子组件传值
</div>
</section>
</div>
</template>
<script>
import axios from 'axios';
import Qs from 'qs';
import ArticleList from "@/components/ArticleList";
export default {
name: "information",
components: {
ArticleList,
},
data() {
return {
current:'1',
ArticleList_props_Data: {
current_path: '/index/information'
},
project_article_Data: [
{
id: ``,
title: ``,
intro: ``,
text: ``,
issue_time: ``,
source:``
}
]
}
},
created(){
this.get_project_article_Data()
},
methods: {
get_project_article_Data() {
axios({
url: `/API/aaa/bbb/ccc/project"get",
params: {
page: this.current,
},
transformRequest: [
function (data) {
data = Qs.stringify(data);
return data;
},
],
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
},
dataType: "json",
})
.then((res) => {
console.log("连接成功"); // 这里多打印一句提示，只是为了更直观一点
console.log(res); // res 是后端回传的数据，如果连接成功，可以把res打印出来。
this.project_article_Data=res.data.datas
})
.catch(function (error) {
console.log("连接失败"); // 作用同上
console.log(error); // 如果连接失败，会抛出错误信息。
});
},
},
}
</script>
<style scoped lang="scss">
//这里就不写css了
</style>
在ArticleList组件里面写入：
<template>
<div class="hello">
<div class="project_content">
<div
class="project_article_box"
v-for="item in project_article_Data"
:key="item.id"
>
<h1
class="project_article_title"
@click="to_article_content(item.id)"
>
<a href="javascript:" rel="external nofollow" >{{ item.title }}</a>
</h1>
<p class="project_article_intro">{{ item.intro }}</p>
<p class="project_issue_time">
<span>{{item.issue_time}}</span>来源: {{ item.source }}
</p>
<a-divider />
</div>
</div>
</div>
</template>
<script>
export default {
name: "articlelist",
props: {
project_article_Data: Array, //注册父组件中导入的数据
ArticleList_props_Data: Object,
},
data() {
return {
};
},
methods: {
//根据文章id跳转文章详情
to_article_content(article_id) {
this.$router.push({
path: `${this.ArticleList_props_Data.current_path}/article_content`,
//根据路径跳转到文章在详情页并给详情页传递id
query: { article_id: article_id },
});
},
},
};
</script>
<style scoped lang="scss">
</style>
(4)根据id获取文章详情
再创建一个名为“article_content”的vue组件，用来放置文章的详情信息。
acticle_content如下：
<template>
<div class="Article_Content">
<section>
<div id="content">
<div class="article_container">
<p>article_id：{{ $route.query.article_id }}</p>
<p class="article_text_title">
{{article_text_title}}
</p>
<p class="article_text_message">发布时间:{{article_text_message}}</p>
<a-divider />
<p class="article_text_content" v-html="this.article_text_content">
</p>
</div>
</div>
</section>
</div>
</template>
<script>
import axios from "axios";
import qs from "qs";
export default {
name: "Article_Content",
props: {
},
data() {
return {
article_id: this.$route.query.article_id, //通过路径跳转传过来的id
article_text_title:"",
article_text_message:'',
article_text_content:'',
};
},
created() {
this.get_article_data(this.article_id);
},
methods: {
/*
功能：获取文章内容
参数：article_id 文章id
*/
get_article_data(article_id) {
//获取传过来的具体id值
axios({
url: `/API/aaa/bbb/${this.article_id}`, // 后端的接口地址
method: "get",
params: {
//给后台传递id地址
id: this.article_id,
},
transformRequest: [
function (data) {
data = qs.stringify(data);
return data;
},
],
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
},
dataType: "json",
})
.then((res) => {
console.log("连接成功"); // 这里多打印一句提示，只是为了更直观一点
console.log(res); // res 是后端回传的数据，如果连接成功，可以把res打印出来。
this.article_text_title = res.data.title
this.article_text_message= res.data.issue_time
this.article_text_content=res.data.content
this.article_category=res.data.article_category
})
.catch(function (error) {
console.log("连接失败"); // 作用同上
console.log(error); // 如果连接失败，会抛出错误信息。
});
},
},
};
</script>
在index.js中去注册组件（router），注意路径!!!
import information from '@/components/information'
import ArticleList from '@/components/ArticleList'
import Article_Content from '@/pages/Article_Content'
const router = [
{
path: '/index/information',
name: 'information',
component: nformation,
},
{
path: '/index/information/article_content',
name: 'article_content',
component: article_content
}
]
三、总结
1、params和query的区别及使用
2、根据id获取详细信息，id就藏在点击事件里面，当点击时，就跳转到详情页并把此时传过来的id传给后台，在详情页上根据id获取后台返回的数据并渲染出来。
下一篇：一分钟学会JavaScript中的try-catch