vue从后台渲染文章列表以及根据id跳转文章详情详解


Posted in Vue.js onDecember 14, 2020

前言:

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 ∗ ! ! ! ∗ ∗ 而 不 是 route*!!!** 而不是route∗!!!∗∗而不是router!

$route是当前router跳转的对象,可以获取router实例里的name、path、query、pramas。

(2)params方式传参和接收参数

params相当于post请求,参数不会在地址栏中显示。

传参:

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?${this.current}`, // 后端的接口地址
  method: "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获取后台返回的数据并渲染出来。

到此这篇关于vue从后台渲染文章列表以及根据id跳转文章详情的文章就介绍到这了,更多相关vue后台渲染文章列表及根据id跳转文章内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
在Vue中使用mockjs代码实例
Nov 25 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
利用Vue实现简易播放器的完整代码
Dec 30 Vue.js
vue中实现点击空白区域关闭弹窗的两种方法
Dec 30 Vue.js
vue调用微信JSDK 扫一扫,相册等需要注意的事项
Jan 03 Vue.js
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
使用Vue.js和MJML创建响应式电子邮件
Mar 23 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
vue中 this.$set的使用详解
Nov 17 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
Vue在H5 项目中使用融云进行实时个人单聊通讯
Dec 14 #Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 #Vue.js
Vue如何跨组件传递Slot的实现
Dec 14 #Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 #Vue.js
vue3.0实现插件封装
Dec 14 #Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 #Vue.js
Vue实现点击当前行变色
Dec 14 #Vue.js
You might like
社区(php&amp;&amp;mysql)五
2006/10/09 PHP
PHP Pear 安装及使用
2009/03/19 PHP
PHP中3种生成XML文件方法的速度效率比较
2012/10/06 PHP
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
PHP使用xpath解析XML的方法详解
2017/05/20 PHP
php微信开发之关注事件
2018/06/14 PHP
js给onclick事件赋值,动态传参数实例解说
2013/03/28 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
js使用心得分享
2015/01/13 Javascript
SpringMVC+bootstrap table实例详解
2017/06/02 Javascript
又拍云 Node.js 实现文件上传、删除功能
2018/10/28 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
2019/10/27 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
JS画布动态实现黑客帝国背景效果
2020/11/08 Javascript
Python中的并发编程实例
2014/07/07 Python
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
详解Python字符串对象的实现
2015/12/24 Python
Python的Flask框架应用调用Redis队列数据的方法
2016/06/06 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
python3 实现口罩抽签的功能
2020/03/11 Python
Django-imagekit的使用详解
2020/07/06 Python
找到不普通的东西:Bonanza
2016/10/20 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
请用Java实现列出某个目录下的所有文件
2013/09/23 面试题
餐饮营销方案
2014/02/23 职场文书
工会主席事迹材料
2014/06/03 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书
助学金感谢信
2015/01/20 职场文书
Django migrate报错的解决方案
2021/05/20 Python
python运算符之与用户交互
2022/04/13 Python
table不让td文字溢出操作方法
2022/12/24 HTML / CSS