这篇博客讲述了如何在Vue应用中向后端请求课程数据，并在页面上展示。首先，介绍了Vue项目的结构和路由配置，然后展示了如何在Vue组件中使用axios发送GET请求获取课程列表，并使用v-for进行数据绑定展示。接着，博主讨论了后端Django创建数据模型、序列化以及API视图的实现。最后，前端在课程详细页面中接收并显示从后端获取的课程详细信息。
1.Vue结构
App.vue
首页
课程
微职位
深科技
name:'App'}
font-family: 'Avenir', Helvetica, Arial, sans-serif;
color: #2c3e50;
}
这里进行利路由设置，那么需要在index中进行挂载
import Vue from 'vue'import Router from'vue-router'
//导入模块
import Index from '../components/Index' import Course from'../components/Course'import Micro from'../components/Micro'import News from'../components/News'import Detail from'../components/Detail'Vue.use(Router);
exportdefault newRouter({
routes: [
{
path:'/index',
name:'index',
component: Index
},
{
path:'/course',
name:'course',
component: Course
},
{
path:'/detail/:id',
name:'detail',
component: Detail
},
{
path:'/micro',
name:'micro',
component: Micro
},{
path:'/news',
name:'news',
component: News
}
],
mode:'history' //取出url里面的#号})
在main.js中导入axios，和ajax一样。
import Vue from 'vue'import App from'./App'import router from'./router'import axios from'axios'
//在vue的全局变量中设置了$axios=axios//以后每个组件使用时：this.$axios
Vue.prototype.$axios=axios;
Vue.config.productionTip= false;/*eslint-disable no-new*/
newVue({
el:'#app',
router,
components: { App },
template:''})
View Code
在课程中向后端发送请求并用v-for进行展示
课程列表
- { {row.title}}
//这里利用：to来传入一个课程的ID，这样可以知道点击哪个课程的详细页。
name:"course",
data(){return{
msg:"课程",
courseList:[
]
}
},
mounted:function() {//vue页面刚加载时执行
this.initCourse()
},
methods:{
initCourse:function() {//去通过ajax向接口发送请求并获取课程列表数据
//axios/jquery
//第一步在main.js中配置
//第二部使用axios发送请求
最低0.47元/天 解锁文章
扫一扫
4747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
