一 显示课程列表

  需求:当你点击课程,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的更多相关文章

  1. 路飞学城详细步骤 part1

    详细步骤 1 添加登录页面 步骤: Header.vue 写一个登录按钮,<router-link to = ' /xx'> 在路由的 index.js中添加这个 新的路由,{'path' ...

  2. 路飞学城Python-Day59(第五模块记录)

    HTML部分 <!DOCTYPE html> <html lang="en"> <head> <!--head标签的主要作用:文档的头部主 ...

  3. day75:luffy:路飞学城项目后端环境搭建&Git相关知识点

    目录 1.Xadmin 1.Xadmin介绍 2.Xadmin安装 3.Xadmin的使用 2.项目环境搭建 1.外部依赖 2.依赖包安装 3.搭建项目 3.Git 4.日志配置 5.异常处理 6.创 ...

  4. python 全栈开发,Day98(路飞学城背景,django ContentType组件,表结构讲解)

    昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...

  5. 路飞学城Python-Day53

    01-jquery的介绍 JS在做项目或者是实现功能的时候,用JS去操作DOM元素非常复杂,代码量大,重复性代码也多 多个元素使用for循环遍历也是非常麻烦的,对于JS使用来说加大了难度 jQuery ...

  6. 路飞学城Python-Day43

    前端                                                                                                  ...

  7. 路飞学城Python-Day14

    转载:python之路-路飞学城-python-book [25.常用模块-logging模块详解] [26.常用模块-logging模块详解2] [27.常用模块-logging模块日志过滤和日志文 ...

  8. django环境部署 crm和路飞学城

    环境依赖 yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ncurses-de ...

  9. vue+uwsgi+nginx部署路飞学城

    vue+uwsgi+nginx部署路飞学城   有一天,老男孩的苑日天给我发来了两个神秘代码,听说是和mjj的结晶 超哥将这两个代码,放到了一个网站上,大家可以自行下载 路飞学城django代码 ht ...

随机推荐

  1. JavaScript 跨域请求

    1.最简单通用的做法就是 反向代理         通过nginx搭建一个反向代理服务器,通过将跨域的请求配置成转发:此方法适用于动静分离时,很多跨域请求的情况下: server { listen 8 ...

  2. 系统相册中获取gif图片 保证取到的图片不会改变

    NSURL *imageRefURL = [info valueForKey:UIImagePickerControllerReferenceURL];                         ...

  3. currentStyle和getComputedStyle来获取外部样式

    currentStyle和getComputedStyle来获取外部样式 通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取 ...

  4. python-DB模块

    基于python的接口测试框架设计   连接数据库 首先是连接数据库的操作,最好是单独写在一个模块里, 然后便于方便的调用,基于把connection连接放在__init__()方法里 然后分别定义D ...

  5. rsync文档

    rsync文档 1.rsync filter过滤 参考http://share.blog.51cto.com/278008/567578/

  6. Spring框架xml配置文件 复杂类型属性注入——数组 list map properties DI dependency injection 依赖注入——属性值的注入依赖于建立的对象(堆空间)

    Person类中的各种属性写法如下: package com.swift.person; import java.util.Arrays; import java.util.List; import ...

  7. ios之UIPickView

    以下为控制器代码,主要用到的是UIPickerView 主要步骤:新建一个Single View Application 然后,如上图所示,拖进去一个UILabel Title设置为导航,再拖进去一个 ...

  8. PAT 乙级 1010

    题目 题目地址:PAT 乙级 1010 思路 首先一个问题就是审题不清,导致代码返工了很多次,最后还没写对: 其次对于这道题来说每次输入一组数据之后就可以输出结果,太过机械地想要套用题目给出的输出样例 ...

  9. grafana绘制图表

    安装方法 系统为ubuntu16 1首先添加以下到/etc/apt/sources.list: deb https://packagecloud.io/grafana/stable/debian/ s ...

  10. python 游戏(滑动拼图Slide_Puzzle)

    1. 游戏功能和流程图 实现16宫格滑动拼图,实现3个按钮(重置用户操作,重新开始游戏,解密游戏),后续难度,额外添加重置一次的按钮,解密算法的植入,数字改变为图片植入 游戏流程图 2. 游戏配置 配 ...