路飞学城详细步骤 part2
一 显示课程列表
需求:当你点击课程,course.vue在 <router-view>渲染,并不需要你进行其他点击,所欲的课程列表直接在前端显示,数据是从数据库拿到的。
补充1:生命周期钩子:mounted
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
1 完成这个功能的vue组件框架
<template>
<ul>
<a v-for="(item,index) in course_list">{{item.name}}
</ul>
</template>
<script>
export default{
name:'xx',
data(){
return{
course_list:[]
}
}
mounted(){
this.func1()
}
methods:{
func1(){
var that = this
this.$axios.request({
}
).then(function(response){
that.course_list = response.data
})
}
}
}
</script>
<style>
</style>
实际代码
Course.vue
<template>
<div>
<p>{{msg}}</p>
<ul>
<li v-for="(item,index) in course_list">{{item.id}} {{item.name}}</li>
</ul>
</div>
</template> <script>
export default{
name:'course',
data(){
return {
msg: '这是课程页面',
course_list: []
}
},
mounted(){
this.initcourse()
},
methods:{
initcourse(){
var that = this
this.$axios.request({
url:this.$store.state.apilist.course, // 更合理的方式使吧url统一放在vuex中,方便维护。
method:'GET',
params:{ //以 127.0.0.1:8000/api/v1/course/?token=gaegaeg3523的样式访问
token:this.$store.state.token, // 因为是get请求,没有请求体,所以没有 data这个key值,与之对应的是有params这个key。
}
}).then(function (response) {
console.log(response.data,typeof response.data); // 类型是object 对象
that.course_list = response.data
})
}
}
}
</script> <style> </style>
页面显示
2 需求 :到了上一步,感觉差不多了。实际上,点击每个课程,都应该跳转到显示每个课程详细信息的页面。
对Course.vue 和 路由的 index.js 进行如下修改。
Course.vue
<template>
<div>
<p>{{msg}}</p>
<ul>
<router-link v-for="(item,index) in course_list" :to="{path:'/course/detail/'+item.id}"> {{item.name}}</router-link> <!--这里感觉带冒号是与路由中的数据吻合 -->
</ul>
</div>
</template>
index.js
{
path: '/course/detail/:id', //:id 表示动态的
name: 'coursedetail',
component: CourseDetail,
},
需求:有个问题,在这个页面中如何获取具体的课程的id。因为要 需要根据具体的id,获取数据库的详细信息。
在CourseDetail.vue中 ,this.$route.params.id 便可以获取到跳转的id值。 这个 'id' 是与index.js中的 :id 是相对应的。 index.js中改为 :xx,在CourseDetail中便是用this.$route.params.xx获取。
剩下的代码就可以完成,后台的路由改动需要注意下。
前端代码
Course.vue
<template>
<div>
<p>{{msg}}</p>
<ul v-for="(item,index) in course_list">
<li>
<router-link :to="{path:'/course/detail/'+item.id}"> <div>{{item.name}}</div></router-link>
</li>
</ul>
</div>
</template> <script>
export default{
name:'course',
data(){
return {
msg: '这是课程页面',
course_list: []
}
},
mounted(){
this.initcourse()
},
methods:{
initcourse(){
var that = this
this.$axios.request({
url:this.$store.state.apilist.course,
method:'GET',
params:{
token:this.$store.state.token,
}
}).then(function (response) {
console.log(response.data,typeof response.data);
that.course_list = response.data
})
}
}
}
</script> <style> </style>
Course.vue
<template>
<div>
<p>{{msg}}</p>
课程id:{{courseid}}
课程:{{detail.name}}
价格:{{detail.price}}
周期:{{detail.period}}
</div>
</template> <script>
export default{
name:'coursedetail',
data(){
return {
msg: '这是详细的课程信息',
courseid:this.$route.params.id, //获取 课程id
detail:{}
}
},
mounted(){
this.coursedetail()
},
methods:{
coursedetail(){
let that = this;
var url = this.$store.state.apilist.course + this.courseid + '/'; // 拼接 要访问的后台api,一定注意,最后面要加 '/',排错拍了一个多小时。
this.$axios.request({
// url:'http://127.0.0.1:8000/api/v1/course/'+this.$route.params.id,
url:url,
method:'GET',
params:{
token:this.$store.state.token,
},
}
).then(function (response) {
that.detail = response.data;
})
}
}, }
</script> <style> </style>
后台代码
收获:两个不同的路由,可以走一个视图。因为,url 后面的(\d+) 是可以视图的参数 (*args,**kwargs)。在视图中,对args,kwargs进行判断区分即可。
urls.py。
urlpatterns = [
url(r'^(?P<version>[v1|v2]+)/auth/$',views.AuthView.as_view() ),
url(r'^(?P<version>[v1|v2]+)/course/$',views.CourseView.as_view() ),
url(r'^(?P<version>[v1|v2]+)/course/(?P<pk>\d+)/$',views.CourseView.as_view() ),
]
views.py
class CourseView(APIView):
def get(self,request,*args,**kwargs):
pk = kwargs.get('pk')
print(pk)
if not pk:
ret = [{'id':,'name':'python基础'},
{'id':,'name':'面向对象'}
]
return Response(ret)
else:
ret = {'name': 'python基础',
'price': '',
'period': '',
}
return Response(ret)
3 实现每个课程页面有其关联课程。关联课程可以跳转。
思路 1 this.$router.push(),可以实现导航到不同的url。
2 利用 <router-link :to="">的方式实现页面跳转,会有这样一个问题。 api/v1/course/2 --> api/v1/course/3,在浏览器上,路径的url的确会发生改变,但是因为这两个url在vue路由中匹配的是同一个地址,只是 后面的 id不同。这种情况下,页面是不会刷新的,尽管手动刷新是可以的。这不是个好的方法。
3 手动写函数,在函数中,利用router.push()跳转页面。然后,执行 初始化页面的方法。
Course.vue
<template>
<div>
<p>{{msg}}</p>
<p>课程id:{{courseid}}</p>
<p> 课程:{{detail.name}}</p>
<p>价格:{{detail.price}}</p>
<p> 周期:{{detail.period}}</p>
推荐课程:
<ul>
<li v-for="(item,index) in this.detail.recommend"><a href="" @click="changeurl(item.id)">{{item.name}}</a></li>
</ul>
</div>
</template> <script>
export default{
name:'coursedetail',
data(){
return {
msg: '这是详细的课程信息',
courseid:this.$route.params.id,
detail:{}
}
},
mounted(){
this.initcoursedetail()
},
methods:{
initcoursedetail(){
let that = this;
var url = this.$store.state.apilist.course + this.courseid + '/';
this.$axios.request({
// url:'http://127.0.0.1:8000/api/v1/course/'+this.$route.params.id,
url:url,
method:'GET',
params:{
token:this.$store.state.token,
},
}
).then(function (response) {
that.detail = response.data;
})
},
changeurl(courseid){
this.courseid = courseid;
this.$router.push({name:'courseDetail',params:{id:courseid}}); // 注意,name: '',一定要加。是去路由中去找这个名称,反向生成。
this.initcoursedetail() // 初始化页面,拿到当前页面的id,从数据库中取值,666
}
}, }
</script> <style> </style>
4 路由和视图的逼格更高点
之前的view.py
class CourseView(APIView):
def get(self,request,*args,**kwargs):
pk = kwargs.get('pk')
print(pk)
if not pk:
ret = [{'id':,'name':'python基础'},
{'id':,'name':'面向对象'}
]
return Response(ret)
else:
ret = {'name': 'python基础',
'price': '',
'period': '',
'recommend':[{'id':,'name':'基本数据类型'}],
}
return Response(ret)
urls.py
urlpatterns = [
url(r'^(?P<version>[v1|v2]+)/auth/$',views.AuthView.as_view() ),
url(r'^(?P<version>[v1|v2]+)/course/$',views.CourseView.as_view() ),
url(r'^(?P<version>[v1|v2]+)/course/(?P<pk>\d+)/$',views.CourseView.as_view() ),
改之后
views.py
class CourseView(GenericViewSet): #继承GenericViewSet
def list(self,request,*args,**kwargs):
ret = [{'id':,'name':'python基础'},
{'id':,'name':'面向对象'}
]
return Response(ret)
def retrieve(self,request,*args,**kwargs):
pk = kwargs.get('pk')
ret = {'name': 'python基础',
'price': '',
'period': '',
'recommend': [{'id': , 'name': '基本数据类型'}],
}
urls.py
urlpatterns = [
url(r'^(?P<version>[v1|v2]+)/auth/$',views.AuthView.as_view() ),
url(r'^(?P<version>[v1|v2]+)/course/$',views.CourseView.as_view({'get':'list'}) ),
url(r'^(?P<version>[v1|v2]+)/course/(?P<pk>\d+)/$',views.CourseView.as_view({'get':'retrieve'}) ),
]
这样就不在视图里对情况进行判断,而是通过 最开始的路由分发的时候就做好对应关系,更简洁。
根据url,找到对应的视图,对此url的访问方式不同,依照as_views()后面的对应关系,执行这个视图的不同方法。api/course/ 和 api/course/1/ 是两个不同的url,记住,尽管可以走同一个视图。
路飞学城详细步骤 part2的更多相关文章
- 路飞学城详细步骤 part1
详细步骤 1 添加登录页面 步骤: Header.vue 写一个登录按钮,<router-link to = ' /xx'> 在路由的 index.js中添加这个 新的路由,{'path' ...
- 路飞学城Python-Day59(第五模块记录)
HTML部分 <!DOCTYPE html> <html lang="en"> <head> <!--head标签的主要作用:文档的头部主 ...
- day75:luffy:路飞学城项目后端环境搭建&Git相关知识点
目录 1.Xadmin 1.Xadmin介绍 2.Xadmin安装 3.Xadmin的使用 2.项目环境搭建 1.外部依赖 2.依赖包安装 3.搭建项目 3.Git 4.日志配置 5.异常处理 6.创 ...
- python 全栈开发,Day98(路飞学城背景,django ContentType组件,表结构讲解)
昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...
- 路飞学城Python-Day53
01-jquery的介绍 JS在做项目或者是实现功能的时候,用JS去操作DOM元素非常复杂,代码量大,重复性代码也多 多个元素使用for循环遍历也是非常麻烦的,对于JS使用来说加大了难度 jQuery ...
- 路飞学城Python-Day43
前端 ...
- 路飞学城Python-Day14
转载:python之路-路飞学城-python-book [25.常用模块-logging模块详解] [26.常用模块-logging模块详解2] [27.常用模块-logging模块日志过滤和日志文 ...
- django环境部署 crm和路飞学城
环境依赖 yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ncurses-de ...
- vue+uwsgi+nginx部署路飞学城
vue+uwsgi+nginx部署路飞学城 有一天,老男孩的苑日天给我发来了两个神秘代码,听说是和mjj的结晶 超哥将这两个代码,放到了一个网站上,大家可以自行下载 路飞学城django代码 ht ...
随机推荐
- JavaScript 跨域请求
1.最简单通用的做法就是 反向代理 通过nginx搭建一个反向代理服务器,通过将跨域的请求配置成转发:此方法适用于动静分离时,很多跨域请求的情况下: server { listen 8 ...
- 系统相册中获取gif图片 保证取到的图片不会改变
NSURL *imageRefURL = [info valueForKey:UIImagePickerControllerReferenceURL]; ...
- currentStyle和getComputedStyle来获取外部样式
currentStyle和getComputedStyle来获取外部样式 通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取 ...
- python-DB模块
基于python的接口测试框架设计 连接数据库 首先是连接数据库的操作,最好是单独写在一个模块里, 然后便于方便的调用,基于把connection连接放在__init__()方法里 然后分别定义D ...
- rsync文档
rsync文档 1.rsync filter过滤 参考http://share.blog.51cto.com/278008/567578/
- Spring框架xml配置文件 复杂类型属性注入——数组 list map properties DI dependency injection 依赖注入——属性值的注入依赖于建立的对象(堆空间)
Person类中的各种属性写法如下: package com.swift.person; import java.util.Arrays; import java.util.List; import ...
- ios之UIPickView
以下为控制器代码,主要用到的是UIPickerView 主要步骤:新建一个Single View Application 然后,如上图所示,拖进去一个UILabel Title设置为导航,再拖进去一个 ...
- PAT 乙级 1010
题目 题目地址:PAT 乙级 1010 思路 首先一个问题就是审题不清,导致代码返工了很多次,最后还没写对: 其次对于这道题来说每次输入一组数据之后就可以输出结果,太过机械地想要套用题目给出的输出样例 ...
- grafana绘制图表
安装方法 系统为ubuntu16 1首先添加以下到/etc/apt/sources.list: deb https://packagecloud.io/grafana/stable/debian/ s ...
- python 游戏(滑动拼图Slide_Puzzle)
1. 游戏功能和流程图 实现16宫格滑动拼图,实现3个按钮(重置用户操作,重新开始游戏,解密游戏),后续难度,额外添加重置一次的按钮,解密算法的植入,数字改变为图片植入 游戏流程图 2. 游戏配置 配 ...