Vue获取后端数据 渲染页面后跳转
主页面
<template>
<div>
<ul v-for="item in courseList">
<router-link :to="{ name:index,query:{id:item.id} }">{{ item.title }}</router-link>
</ul>
</div>
</template> <script>
export default {
name: "Couerse",
data() {
return {
index: "CourseDetail",
courseList: ""
};
},
// 页面刚加载立即执行 = mounted
mounted() {
this.initCourse();
},
methods: {
//这个方法也可以跳转
handleClick(ret) {
this.$router.push({
path: `/CourseDetail/${ret}/`,
query: {
page: ret,
code: "8989"
}
});
},
//通过ajax向接口发送请求并获取课程列表
//axios/jquery
// npm install axios --save
// 第一步:在main.js中配置
//第二步:使用axios发送请求 initCourse: function() {
// 记住一点要定义一个全局的 this 来取值
var _this = this;
this.$axios
.request({
url: "http://127.0.0.1:8000/api/v1/course/",
methods: "GET"
})
.then(function(ret) {
// ajax请求发送成功后,获取的响应内容
// ret.data=
if(ret.data.code === 1000){
_this.courseList = ret.data.data; }
})
.catch(function(ret) {
// ajax请求发送失败后,获取的响应内容
});
}
}
};
</script> <style scoped>
</style>
跳转后的页面
<template>
<div>
<img :src="detail.img" />
<h1>{{ detail.title }}</h1>
<h3>{{detail.slogon }}</h3>
<h5>{{ detail.level }}</h5>
<p>{{ detail.why }}</p>
<div>
<ul v-for="item in detail.chapter">
<li>{{ item.title }}</li>
</ul>
</div>
<br/>
推荐课程:
<div>
<ul v-for="item in detail.recommends">
<li>{{ item.title }}</li>
</ul>
</div>
</div>
</template> <script>
export default {
name: "CourseDetail",
data() {
return { detail: {
course: null,
img: null,
level: null,
slogon: null,
title: null,
why: null,
chapter: [],
recommends: []
}
};
},
// created:在模板渲染成html前调用
created() {
this.getRouterData();
},
methods: {
getRouterData() {
// 拿到主页面传过来的id值
this.id = this.$route.query.id; // 发送ajax请求给后端 请求详细信息
//获得一个全局的this
var _this = this; this.$axios
.request({
url: `http://127.0.0.1:8000/api/v1/coursedetail/${this.id}/`,
methods: "GET"
})
.then(function(ret) {
// ajax请求发送成功后,获取的响应内容
// ret.data=
if (ret.data.code === 1000) {
_this.detail = ret.data.data;
}
})
.catch(function(ret) {
// ajax请求发送失败后,获取的响应内容
});
}
}
};
</script> <style scoped>
</style>
Vue获取后端数据 渲染页面后跳转的更多相关文章
- vue获取后端数据放在created还是mounted方法里面?
问题提出: 我们知道一般vue使用ajax或者axios来获取后端数据,并且好像放在created里面和mounted里面都可以获取数据并正确渲染.那么放在created里面和mounted里面有什么 ...
- vue 获取后端数据打印结果undefined问题
今天做项目时后端有一个要展示到页面上的附件需要前端获取,我获取到了那个附件的信息,但打印fj.name或fj.url时控制台就会显示undefined,后来才发现是json数据没有解析对,应该使用JS ...
- Vue v-for嵌套数据渲染问题
Vue v-for嵌套数据渲染问题 问题描述: 由于在获取商品子分类的时候,同时需要获取子分类下的商品,那么多层的列表渲染就只能是第一层好用 问题原因: vue在处理多层的渲染的时候,不能直接用等号赋 ...
- Electron-vue实战(二)— 请求Mock数据渲染页面
Electron-vue实战(二)— 请求Mock数据渲染页面 作者:狐狸家的鱼 本文链接 GitHub:sueRimn 一.环境搭建 1.安装Mock.js 如果仅仅用作脱离后台的模拟数据,就安装在 ...
- 用$.getJSON() 和$.post()获取第三方数据做页面 ——惠品折页面(1)
用$.getJSON() 和$.post()获取第三方数据做页面 首页 index.html 页面 需要jquery 和 template-web js文件 可以直接在官网下载 中间导航条的固 ...
- 循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
在前面随笔<循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理>中介绍了在Vue + Element整合框架中,实现了动态菜单和动态路由的处理,从而可以根据 ...
- 从后台获取的数据渲染到页面中的dom操作
很多情况下页面dom都是从后台拼接字符串添加生成的新的dom元素,在编辑器中不能看到,只能通过检查看到页面的dom结构,但是这时候会发生一个问题,就是如果使用jQuery无法进行dom操作,事件和方法 ...
- nodejs获取服务器数据到页面
const Koa = require('koa'); const Router = require('koa-router'); const app = new Koa(); const route ...
- JavaScript获取html表单值验证后跳转网页中的关键点
关键代码: 1.表单部分 <form action="Depart.jsp" name="myform" method="post" ...
随机推荐
- Centos7.5 添加环境变量并生效
配置环境变量用户 jiangshan为例(base) [jiangshan@localhost ~]$ export PATH=$PATH:/usr/local/MATLAB/R2014a/bin/( ...
- 简单layer 快速上手
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HCIA SWITCHING&ROUTTING 笔记——第一章 TCP/IP基础知识(1)
视频地址:https://ilearningx.huawei.com/courses/course-v1:HuaweiX+EBGTC00000336+Self-paced/courseware/abb ...
- WUSTOJ 1341: Lake and Island(Java)
题目链接:1341: Lake and Island Description 北园孩子的专属福利来啦~学校从北区宿舍到湖心岛修建了一条通道让北园的同学们可以上去一(kuang)同(xiu)玩(en)耍 ...
- Android--自定义Dialog style
<style name="dialog" parent="@android:style/Theme.Dialog"> <item name=& ...
- vue elementui如何修改el-table头部样式
找到el-table加入红色代码 <el-table :row-style="tableRowStyle" :header-cell-style="tableHea ...
- Git和Github的介绍、简单操作、冲突(上)
目的: 1.git与github简介 2.Git与SVN区别 3.Github 的简单使用 4.下载安装Git-20-64-bit.exe 5.Git常用命令 5.1Git命令使用场景 5. ...
- [PKUSC2018]主斗地(搜索+贪心)
首先如果对子和三张牌出现在解中,那么全拆成单张显然没有问题,顺子同理.于是真正有用的牌型就只有单牌.三带一.三带二.四带二了. 暴搜jry手中的牌,然后先搜出双方的大牌型(即三张.四张牌的个数),再枚 ...
- centos7上使用git clone出现问题
centos 7 git clone时出现不支持协议版本的问题 unable to access 'https://github.com/baloonwj/TeamTalk.git/': Peer ...
- TODO-依赖注入与控制反转
交互框架之Actor与Listener的关系 https://www.cnblogs.com/mq0036/p/7473371.html