推荐课程及用户登录

<template>
  <div>
        <h1>课程详细页面</h1>
        <p>课程标题：{{detail.title}}</p>
        <p>图片：{{detail.img}}</p>
        <p>课程难度：{{detail.level}}</p>
        <p>课程口号：{{detail.slogon}}</p>

        <p>为什么要学？{{detail.why}}</p>
        <div>
          章节：
          <ul v-for="item in detail.chapter">
            <li>{{item.name}}</li>
          </ul>
        </div>

        <div>
          <h3>推荐课程：</h3>
          <ul v-for="item in detail.recommends">
            <li @click="changeDetail(item.id)">{{item.title}}</li>   //这里绑定一个点击事件，把ID传入
          </ul>
        </div>

  </div>

</template>

<script>
    export default {
        name: "detail",
      data(){
          return {
            detail:{
              charter:[],
              course:null,
              level:null,
              img:null,
              title:null,
              slogon:null,
              why:null,
              recommends:[]
            }
          }
      },
      mounted(){
          var id=this.$route.params.id;
          this.initDetail(id)
      },
      methods:{
        initDetail(nid){

          var that = this;
          this.$axios.request({
              url:‘http://127.0.0.1:8000/api/v1/course/‘+nid+‘/‘,
              method:"GET",

          }).then(function (arg) {
            if (arg.data.code ===1000){
               console.log(arg.data);
                that.detail=arg.data.data
            }else{
              alert(arg.data.error)
            }

          })
        },
        changeDetail(id){
          this.initDetail(id);    //只绑定这一个那么页面跳转，URL不跳
          this.$router.push({name:‘detail‘,params:{id:id}}) //只绑定这一个，URL跳转，页面不变     所以需要2个进行配合变化。
        }
    }
    }
</script>

<style scoped>

</style>

<template>
  <div>
    <h1>用户登录</h1>
    <p><input type="text" placeholder="请输入用户名" v-model="username"></p>
    <p><input type="password" placeholder="请输入密码" v-model="password"></p>
    <p><input type="button" @click="doLogin" value="登录"></p>
  </div>
</template>

<script>
    export default {
        name: "login",
        data(){
          return {
            username:"",  //跟上面的v-model做一个双向绑定
            password:"",
          }
        },
      methods:{
          doLogin(){     //点击按钮，做一个登录
            var that=this   //这是在函数外把this赋值给that,axios里面的this就改变了，不是原来的this
            this.$axios.request({
              url:‘http://127.0.0.1:8000/api/v1/auth/‘,
              method:"POST",
              data:{

                user:this.username,   //发送post请求，把用户名和密码传送过去。
                pwd:this.password,

              },
              headers:{
                "Content-Type":"application/json"   //记得加一个头，告诉服务器是json数据.
              }
            }).then(function (arg) {
              if(arg.data.code===1000){
                 console.log(arg);
                 that.$store.state.token=arg.data.token;   //取到服务器响应的token值
                 that.$store.state.username=that.username; //取到用户输入的用户名
                 that.$store.commit(‘saveToken‘,{token:arg.data.token,username:that.username})  发送一个保存token值和用户名的信号。
              }else {
                alert(arg.data.error)
              }

            }).catch(function (arg) {
              console.log("发生错误")
            })
          }
      }
    }
</script>

<style scoped>

</style>

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import Cookie from ‘vue-cookies‘   //导入cookies 

Vue.use(Vuex)

export default new Vuex.Store({
  // 组件中通过 this.$store.state.username 调用
  state: {
    username: Cookie.get("username"),    //这里如果还是原来的null的话，一刷新，全局变量就没了，刷新后因为下面蛇者了cookie，所以通过cookie去取这两个值。
    token:Cookie.get("token"),
  },
  mutations: {
    // 组件中通过 this.$store.commit(saveToken,参数)  调用
    saveToken: function (state, userToken) {
      state.username = userToken.username;      //这里通过上面那一步调用拿到用户名
      state.token = userToken.token;            //拿到token
      Cookie.set("username", userToken.username, "20min");   //设置一个cookie值。
      Cookie.set("token", userToken.token, "20min")

    },
    clearToken: function (state) {
      state.username = null;              //这里点击注销把用户名和token变为空，并且把cookie移除。
      state.token = null;
      Cookie.remove(‘username‘);
      Cookie.remove(‘token‘)

    }
  }
})

 url(r‘^auth/$‘,account.AuthView.as_view()),

class UserInfo(models.Model):
    user=models.CharField(max_length=32)
    pwd=models.CharField(max_length=64)

class UserToken(models.Model):
    user=models.OneToOneField(to="UserInfo",on_delete=models.CASCADE)
    token=models.CharField(max_length=128)

from rest_framework.views import APIView
from rest_framework.response import Response
from api import models
import uuid

class AuthView(APIView):
    def post(self,request,*args,**kwargs):
        ret = {‘code‘:1000}
        user=request.data.get("user")
        pwd=request.data.get("pwd")
        user=models.UserInfo.objects.filter(user=user,pwd=pwd).first()  #首先拿到这个用户对象
        if not user:
            ret[‘code‘]=1001
            ret[‘error‘]=‘用户名或者密码错误‘
        else:
            uid=str(uuid.uuid4())    #存在的话设置一个token字符串
            models.UserToken.objects.update_or_create(user=user,defaults={‘token‘:uid})  #给登录用户创造或者更新一条数据
            ret[‘token‘]=uid   #前端也返回一个token.
        return Response(ret)