Django 路飞学城前后端分离2

推荐课程的开发

需求:

　　我们在点击推荐课程的时候,会有该推荐课程的详细页面

思路:

• 　为每一个推荐课程标签添加事件,重新加载页面
• 　同时加载成功后路由发生相应的变化

需要说明的是,vue跟jquery不同,因为vue是单页面,所有他做的只是页面组件的重建与销毁

如若你只是改变路由的话,那么页面不会有变化.

如果你只是改变组件那么路由不会发生变化.

我们开发的时候需要两个一起改变

添加事件

 <h2>推荐课程</h2>
    <ul v-for="item in detailList.recommend_course">
      <li @click="changeDetail(item.id)">{{item.title}}--->{{item.level}}</li>
    </ul>

获取数据

      methods:{
          //发送axios请求获取数据
          initDetail(nid){
          let that=this;
          this.$axios.request({
          url:`http://127.0.0.1:8000/api/v2/course/${nid}/`,
          method:'GET',
        }).then(function(ret){
          //获取成功后的回调方法
          if (ret.data.code === 1000){
            //此this非彼this 所以用that
            that.detailList=ret.data.data;
          }
        }).catch(function(ret){
        })},
          changeDetail(id){
            this.initDetail(id);
            this.$router.push({name:'detail',params:{id:id}})
          },
      },
      created(){

      },
      mounted(){
          //页面加载的时候触发
        let nid=this.$route.params.id;
        this.initDetail(nid)

跳转路径方法补充:

 this.$router.push({name:'detail',params:{id:id}})

 

那么push后面也可以接受path参数,{path:'/index'} 就会跳转到相应的视图

 

用户登录

需求:

• 　　实现用户的登录并放置vue-cookies中
• 　　并且随机生成token,访问需要登录的页面都带着token值

思路:

• 　用户登录的时候先在前端获取用户名密码、如果有token值,生成token,如果没有则创建
•    将token值和nikname返回给前端
•    前端在vue-cookies保存token值和nikname作持久化,
•    登录成功则显示nikname和注销

 

需要登录,那么表结构必须有用户名密码,和token表

class UserInfo(models.Model):
    '''用户表'''
    username=models.CharField(verbose_name='用户名',max_length=32)
    password=models.CharField(verbose_name='密码',max_length=64)
    nikname=models.CharField(max_length=32,verbose_name='昵称')
    def __str__(self):
        return self.nikname

class Token(models.Model):
    user=models.OneToOneField('UserInfo',on_delete=models.CASCADE,verbose_name='用户')
    token=models.CharField(max_length=128)

    def __str__(self):
        return self.user

model