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

时间  2019-11-21
标签 后端 分离 项目 繁體版
原文   原文链接

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

推荐课程的开发

需求:前端

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

思路:python

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

　　使用router-link,由于都在在detail路由中，页面不会从新加载，因此只要url改变，页面不改变ios

须要说明的是,vue跟jquery不一样,由于vue是单页面,全部他作的只是页面组件的重建与销毁vuex

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

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

咱们开发的时候须要两个一块儿改变json

<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中跳转路径方法补充:axios

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全局变量的用法

一、建立store.js

二、main.js中    

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

 组建中能够经过this.$store.state.username调用

vue-cookies的下载和使用

下载

npm install vue-cookis --save

使用:

若是登陆成功,调用store的mutations方法:

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

条件：
一、请求方式：HEAD、GET、POST
二、请求头信息：
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-拦截器

用拦截器实现的功能：

  在须要登陆才能访问的页面,若是未登陆访问就拦截下来，跳转到登陆页面

 

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

一、在路径中添加   meta

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

 二、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()
  }
})

 三、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/',

    }

  },

 

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程