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+element-ui添加自定义右键菜单的方法示例
Dec 08 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
Vue中computed和watch有哪些区别
Dec 19 Vue.js
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
Vue ​v-model相关知识总结
Jan 28 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
如何让vue长列表快速加载
Mar 29 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
Vue+Flask实现图片传输功能
Apr 01 Vue.js
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
vue封装数字翻牌器
Apr 20 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
array_multisort实现PHP多维数组排序示例讲解
2011/01/04 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
phpstorm配置Xdebug进行调试PHP教程
2014/12/01 PHP
Mac系统下使用brew搭建PHP(LNMP/LAMP)开发环境
2015/03/03 PHP
PHP编程基本语法快速入门手册
2016/01/07 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
通过event对象的fromElement属性解决热区设置主实体的一个bug
2008/12/22 Javascript
extjs fckeditor集成代码
2009/05/10 Javascript
javascript自适应宽度的瀑布流实现思路
2013/02/20 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
2013/03/19 Javascript
使用jsonp完美解决跨域问题
2014/11/27 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
2015/08/12 Javascript
jQuery遍历json的方法分析
2016/04/16 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
javascript中JSON.parse()与eval()解析json的区别
2016/05/19 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
关于javascript的一些知识以及循环详解
2016/09/12 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
javaScript基础详解
2017/01/19 Javascript
js获取当前周、上一周、下一周日期
2017/03/19 Javascript
微信小程序中换行空格(多个空格)写法详解
2018/07/10 Javascript
vue中子组件传递数据给父组件的讲解
2019/01/27 Javascript
解析原来浏览器原生支持JS Base64编码解码
2019/08/12 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
用python实现英文字母和相应序数转换的方法
2019/09/18 Python
python使用pip安装模块出现ReadTimeoutError: HTTPSConnectionPool的解决方法
2019/10/04 Python
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
python re模块和正则表达式
2021/03/24 Python
临床医师专业个人自我评价范文
2013/11/07 职场文书
公务员年度考核登记表个人总结
2015/02/12 职场文书
总经理助理岗位职责范本
2015/03/31 职场文书
离婚协议书格式范本
2016/03/18 职场文书