路飞学城前后端分离项目2

 路飞学城前后端分离项目2

推荐课程的开发

需求:

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

思路:

 　　为每一个推荐课程标签添加事件,重新向后台请求数据加载页面，但是url不会发生改变

　　使用router-link,因为都在在detail路由中，页面不会重新加载，所以只要url改变，页面不改变

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

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

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

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

<template>
  <div>
    <h1>课程详细页面</h1>
    <div>
      <p>{{detail.course}}</p>
      <p>{{detail.img}}</p>
      <p>{{detail.level}}</p>
      <p>{{detail.slogon}}</p>
      <p>{{detail.title}}</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><router-link :to="{name:'detail',params:{id:item.id}}">{{item.title}}</router-link></li>-->
          <li @click="changeDetail(item.id)">{{item.title}}</li>
        </ul>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        detail:{
          course:null,
          img:null,
          level:null,
          slogon:null,
          title:null,
          why:null,
          chapter:[],
          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){
            that.detail = arg.data.data
          }else{
            alert(arg.data.error)
          }
        })
      },
      changeDetail(id){
        this.initDetail(id)
        this.$router.push({name:'detail',params:{id:id}})
      }
    }
  }
</script>

<style scoped>

</style>

 vue中跳转路径方法补充:

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

 用户登录

需求:

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

思路:

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

前端登录页面

Login.vue

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

<script>
  export default {
    data() {
      return {
        username:'',
        password:''
      }
    },
    methods:{
      doLogin(){
        var that = this
        this.$axios.request({
          url:'http://127.0.0.1:8000/api/v1/auth/',
          method:'POST',
          data:{
            user:this.username,
            pwd:this.password
          },
          headers:{
            'Content-Type':'application/json',
          }
        }).then(function (arg) {
          if (arg.data.code === 1000){
            that.$store.commit('saveToken',{token:arg.data.token,username:that.username})
          }else{
            alert(arg.data.error)
          }
        }).catch(function (arg) {
          console.log('发生错误')
        })
      }
    }
  }
</script>

<style scoped>

</style>

 store目录下的store.vue

import Vue from 'vue'
import Vuex from 'vuex'
import Cookie from 'vue-cookies'

Vue.use(Vuex)

export default new Vuex.Store({
  // 组件中通过 this.$store.state.username 调用
  state: {
    username: Cookie.get("username"),  #store每次都从cookie中取值
    token:Cookie.get("token"),
  },
  mutations: {
    // 组件中通过 this.$store.commit(saveToken,参数)  调用
    saveToken: function (state, userToken) {
      state.username = userToken.username;
      state.token = userToken.token;
      Cookie.set("username", userToken.username, "20min")
      Cookie.set("token", userToken.token, "20min")

    },
    clearToken: function (state) {
      state.username = null
      state.token = null
      Cookie.remove('username')
      Cookie.remove('token')

    }
  }
})

 在store中，使用vue设置全局变量，vue-cookies保存全局变量，使其刷新后仍然存在于vue-cookies中

vuex全局变量的用法

1、创建store.js

2、main.js中   

import store from './store/store'
放到实例化里边

 组建中可以通过this.$store.state.username调用

vue-cookies的下载和使用

下载

npm install vue-cookis --save

使用:

如果登录成功,调用store的mutations方法:

关于向后台发送数据的简单请求和复杂请求

条件：
1、请求方式：HEAD、GET、POST
2、请求头信息：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type 对应的值是以下三个中的任意一个
application/x-www-form-urlencoded
multipart/form-data
text/plain

注意：同时满足以上两个条件时，则是简单请求，否则为复杂请求

复杂请求处理

如果是复杂请求,那么就会先发一个options请求到服务里进行'预检'

询问服务器是否允许我用post请求进行访问.如果是options请求过来后,

给他加上一个特殊的请求头,那么就可以通过了

class CORSMiddleware(MiddlewareMixin):

    def process_response(self,request,response):
        # 添加响应头

        # 允许你的域名来获取我的数据
        # response['Access-Control-Allow-Origin'] = "*"

        # 允许你携带Content-Type请求头
        # response['Access-Control-Allow-Headers'] = "Content-Type"

        # 允许你发送DELETE,PUT
        # response['Access-Control-Allow-Methods'] = "DELETE,PUT"
        response['Access-Control-Allow-Origin'] = "*"

        if request.method == "OPTIONS":
            response['Access-Control-Allow-Headers'] = "Content-Type"
            response['Access-Control-Allow-Methods'] = "PUT,DELETE"

        return response

 使用中间件为每次请求添加响应头

后端登录操作

models.py中

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

 url.py

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

 view.py中

from rest_framework.views import APIView
from rest_framework.response import Response
from django.shortcuts import HttpResponse
from api import models
import uuid


class AuthView(APIView):

    def post(self,request,*args,**kwargs):
        """
        用户登录认证
        :param request:
        :param args:
        :param kwargs:
        :return:
        """

        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())
            models.UserToken.objects.update_or_create(user=user,defaults={'token':uid})
            ret['token'] = uid
        return Response(ret)

 vue-拦截器

用拦截器实现的功能：

  在需要登录才能访问的页面,如果未登录访问就拦截下来，跳转到登录页面

登录成功后再跳到访问的页面

1、在路径中添加   meta

 {
      path: '/news',
      name: 'news',
      component: News,
      meta:{
        requireAuth:true
      }
    },

 2、main.js中

router.beforeEach(function (to, from, next) {
  if(to.meta.requireAuth){
    // 要去的url只有登陆成功后才能访问
    if (store.state.token) {
      next() #next表示去访问，本来是去哪访问就去哪访问
    } else {
      next({name: 'login',query: {backUrl: to.fullPath}})
    }
  }else{
    next()
  }
})

 3、login中做判断，跳转url

 }).then(function (arg) {
          if (arg.data.code === 1000){
            that.$store.commit('saveToken',{token:arg.data.token,username:that.username})

            var url = that.$route.query.backUrl
            if(url){
              that.$router.push({path:url})
            }else{
              that.$router.push({path:'/index'})
            }

 后端认证

用户获取到后端接口,直接不登录访问后端的接口,

如果后端没有认证的话,那么接口的内容就会被暴露

Micro.vue

<template>
  <div>
    <h1>LuffyX学位:{{title}}</h1>

  </div>
</template>

<script>
  export default {
    name: "index",
    data() {
      return {
        title:null
      }
    },
    mounted(){
      this.initMicro()
    },
    methods:{
      initMicro(){
        var that = this
        this.$axios.request({
          url:'http://127.0.0.1:8000/api/v1/micro/',
          method:'GET',
          params:{
            token:this.$store.state.token
          }
        }).then(function (arg) {
          if(arg.data.code === 1000){
            that.title = arg.data.title
          }
        })

      }
    }
  }
</script>

<style scoped>

</style>

 url.py

 url(r'^micro/$', course.MicroView.as_view()),

 auth认证

from rest_framework.authentication import BaseAuthentication
from rest_framework.exceptions import AuthenticationFailed
from api import models

class LuffyAuth(BaseAuthentication):

    def authenticate(self, request):
        token = request.query_params.get('token')
        obj = models.UserToken.objects.filter(token=token).first()
        if not obj:
            raise AuthenticationFailed({'code':1001,'error':'认证失败'})
        return (obj.user.user,obj)

 view.py中使用

class MicroView(APIView):
    authentication_classes = [LuffyAuth,]

    def get(self,request,*args,**kwargs):
        ret = {'code':1000,'title':'微职位'}
        return Response(ret)

 API的统一存放

当你写了很多API后,你就会发现你自己不知道写了哪些路由,

那么如果有人问你要接口的时候你可能会找很久.那么我们将api的路由

统一放到vue的store里

  放在api的store里有什么好处?

• 查找的时候变的方便,只要在store里查找就可以
• 发送axios请求的时候可以在store里获取

const store = new Vuex.Store({
  state: {
    apiList:{
     Course:'http://127.0.0.1:8000/api/v2/course/',
      CourseDetail:'http://127.0.0.1:8000/api/v2/course/',
      Login:'http://127.0.0.1:8000/api/v2/login/',
      Micro:'http://127.0.0.1:8000/api/v2/micro/',

    }

  },