路飞学城详细步骤 part1

详细步骤

　　1 添加登录页面

　　　　步骤：

　　　　Header.vue 写一个登录按钮，<router-link to = ' /xx'>

　　　　在路由的 index.js中添加这个 新的路由，{'path':'xx','name':'xx',component:xx}

　　　　新建这个 xx 组件。

　　　　最终，完成 点击这个按钮，这个按钮本质是 a标签，拿到跳转的url，根据路由，拿到组件，最终在 <router-view> 中显示。

　　PS:<router-view> 组件是一个 functional 组件，渲染路径匹配到的视图组件。 vue适合单页面。　

　　Header.vue之前：

<template>
  <div>
    <div>
        <router-link to="/index">首页</router-link>
        <router-link to="/course">课程</router-link>
        <router-link to="/news">深科技</router-link>

    </div>

  </div>

</template>

<script>
  export default{
      name:'header',
      data(){
          return{

          }
      }
  }
</script>

<style>

</style>

Header.vue 之后

<template>
  <div>
    <div>
        <router-link to="/index">首页</router-link>
        <router-link to="/course">课程</router-link>
        <router-link to="/news">深科技</router-link>

    </div>
    <div>
      <p><router-link to="/login">登录</router-link> </p>
    </div>
  </div>

</template>

<script>
  export default{
      name:'header',
      data(){
          return{

          }
      }
  }
</script>

<style>

</style>

　　2 取到登录页面 input框 中数据

　　步骤

　　　　1 在template中写input框。

　　　　2 input框中加入v-model,实现表单和应用状态之间的双向绑定。

　　　　3 写一个<button>按钮，绑定click事件

　　　　4 这个事件干啥呢，通过this.username,this.password 拿到input框中的数据。（双向绑定是这样做的基础）

　　组件 login.vue的代码

<template>
    <div>
      <input type="text" name="username" placeholder="请输入用户名">姓名
      <input type="password" name="password" placeholder="请输入密码">密码
      <input type="button"  @click="loginfunc"  value="提交">
    </div>
</template>

<script>
  export default{
      name:'lgoin',
      data(){
          return{
            username:'',
            password:'',
          }
      },
    methods:{
          loginfunc(){
              let name = this.username
              let pwd = this.password
          }
    }
  }
</script>

<style>

</style>

3 往后台发送数据

　　引入axios组件，涉及到跨域，用CORS解决。

　　PS:插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种。

　　       添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

　　步骤：

　　　　1）在main.js中导入axios.

　　　　2）login.vue 利用this.$axios.request({  }) 往后台发送数据。

　　　　3）设计到跨域，可以一步解决。写一个中间件，因为解决跨域是在返回的消息上设置allow-header/method/origin/，所以中间件用到的方法是process_response。

　　　　4）后台，视图继承APIView，执行正常的逻辑。

　　在main.js中加入

import axios from 'axios'
Vue.prototype.$axios = axios

　　 login.vue

<template>
    <div>
      <input type="text" v-model="username" placeholder="请输入用户名">姓名
      <input type="password" v-model="password" placeholder="请输入密码">密码
      <input type="button"  @click="loginfunc"  value="提交">
    </div>
</template>

<script>
  export default{
      name:'lgoin',
      data(){
          return{
            username:'',
            password:'',
          }
      },
    methods:{
          loginfunc(){
//              var that = this
              this.$axios.request({
                url:'http://127.0.0.1:8000/api/v1/auth/',
                method:'POST',
                data:{
                    'username':this.username,
                    'password':this.password,

                },
                responseType: 'json',
              }).then(function (response) {
                  console.log(response)

              }).catch(function (response) {
                  console.log(response)

              })
          }
    }
  }
</script>

　　views.py

　　PS:

　　　　复杂请求和简单请求区别，在于请求方式 和 请求头ContentType。

from rest_framework.views import APIView
from rest_framework.response import Response
class AuthView(APIView):
    def options(self, request, *args, **kwargs):
        obj = Response()
        obj['Access-Control-Allow-Origin'] = '*'   #允许的url
        obj['Access-Control-Allow-Headers'] = 'Content-Type'    #允许的请求头
        obj['Access-Control-Allow-Methods'] = '*'    #允许的请求方式
        return obj

    def post(self,request,*args,**kwargs):
        print(request.data)
        return Response('')

　　解决跨域，每个视图都要添加 allow-header/method/origin，所以更好的方法是写一个中间件，放在process_response中。

　　cors.py

from django.middleware.common import  CommonMiddleware
from django.utils.deprecation import MiddlewareMixin
class CORS(MiddlewareMixin):
    def process_response(self,request,response):
        response['Access-Control-Allow-Origin'] = '*'  # 允许的url
        response['Access-Control-Allow-Headers'] = 'Content-Type'  # 允许的请求头
        response['Access-Control-Allow-Methods'] = '*'
        return response

　　views.py

class AuthView(APIView):
    def post(self,request,*args,**kwargs):
        print(request.data)
        return Response('')

4  区分登录状态，即登录前页面 和登录后。两者区别是，登录前只有登录按钮。登录成功后，显示用户名和注销。

　　问题1 login.vue 这个组件把用户名，用户密码发给后台。但是，最开始的登录按钮是在 Header.vue中。 如果登录成功，Header.vue 中的登录按钮应该变为 用户名。涉及到两个组件的传值问题。即跨组件传值，

　　结局方法：利用vuex，共享某些数据。

　　vuex的适用方法（是js文件）

　　　　1）在src文件夹下新建store文件夹，在store文件夹下新建store.js

　　　　　　

　　　　2) store.js中代码如下，基本格式

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

Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    username:'xx',
    token:'',
    apilist:'',
  },
  getters:{

  },
  mutations:{

  },
  actions:{

  }
  }
)

　　3 ）在main.js中导入vuex

import axios from 'axios'
import store from './store/store'
Vue.prototype.$axios = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

　　这样，在每个vue组件中，都可以去到state中的数据。

　　下一步的流程是，state.username初始值为null，Header.vue可以拿到state.username,进行条件判断，渲染登录前，登录后不同的页面。

　　login.vue提交数据后，通过then()函数，对从后台返回的数据进行判断，如果用户登录成功，对state.username 进行重新赋值，Header.vue可以立马感受到，一旦发生变化，渲染与之对应的页面。

　　代码如下：

　　Header.vue

<template>
  <div>
    <div>
        <router-link to="/index">首页</router-link>
        <router-link to="/course">课程</router-link>
        <router-link to="/news">深科技</router-link>
        <!--<router-link to="/test">test</router-link>-->
    </div>
    <div>
      <div v-if="this.$store.state.username">
        <router-link to="/index">{{this.$store.state.username}}</router-link>
        <router-link to="" @click="logoutfuc">注销</router-link>
      </div>
      <div v-else>
        <router-link  to="/login">登录</router-link>   <!--这两种是一样的效果，第一种是通过url -->
        <!--<router-link :to="{name:'login'}">登录</router-link>  这一种是利用 路由，反向生成url。:绑定数据 -->
      </div>
    </div>
  </div>

</template>

　　Login.vue

<template>
    <div>
      <input type="text" v-model="username" placeholder="请输入用户名">姓名
      <input type="password" v-model="password" placeholder="请输入密码">密码
      <input type="button"  @click="loginfunc"  value="提交">
    </div>
</template>

<script>
  export default{
      name:'lgoin',
      data(){
          return{
            username:'',
            password:'',
          }
      },
    methods:{
          loginfunc(){
              var that = this
              this.$axios.request({
                url:'http://127.0.0.1:8000/api/v1/auth/',
                method:'POST',
                data:{
                    username:this.username,
                    password:this.password,

                },
                responseType: 'json',
              }).then(function (response) {
                  that.$store.state.username=that.username  #在这里this，是回调函数。预先声明变量that，指当前组件。

              }).catch(function (response) {
                  console.log(response)

              })
          }
    }
  }
</script>

　　总结：Login.vue 有着相当重要的功能。

　　　　　　1 登录页面，需要输入用户名，密码，取值是利用v-model双向绑定的方法，input表单输入和应用状态之间双向绑定。

　　　　　　2 点击提交按钮，触发函数，调用函数，通过axios ，提交数据给后台，

　　　　　　3 后台返回数据，axios调用回调函数then()，对数据进行判断，修改 vuex中 state中的值。

　　　　　　4 Header.vue 实时监听 state 中的值，发生变化，渲染不同的页面。

　　　　　

　　小问题：

　　　　　　1 <router-link></router-link>必须有to属性，其才会在页面中显示。这是试出来的结果。

　　　　　　2 <router-link to='/index'> 和 <router-link :to='{name:'index'}'>效果是一样的。前面是通过url找到组件，后面是通过路由，找到name，通过反向生成，找到组件。

　　　　　　3 v-else必须紧跟着v-if，官方文档中这样说。

5   登录成功后，在cookie中保存用户名，token。

　　用到vue-cookies组件，vuex组价。

　　经过第4步，可以简单的实现区分登录前后的状态。代码比较粗糙，vuex的有些方法也没有用到。进行如下修改。

　　在第四步中，登录状态是login函数的回调函数then方法，这是不合理的。如果每个页面都有，那在每个组件都都要写一遍。vuex 中mutations方法，专门提供方法，可以对state中的数据进行修改。而不同组件只需这段代码   this/that.$store.commit('mutations中的函数','函数需要的参数')。commit 表示触发。

　　store.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    username:Cookies.get('username'),  // Cookies的作用在于，即便页面重新刷新，该有的数据依然存在cookie中，了不起。很大的作用。
    token:Cookies.get('token'),
    // apilist:'',
  },
  getters:{

  },
  mutations:{
    saveToken:function (state,response) {
      state.username = response.username;   //response类型是object,取值用 . ，不能用get('username')
      state.token = response.token;
      Cookies.set('username',response.username,'20min');
      Cookies.set('token',response.token,'20min')
    },
    clearToken:function (state) {
      state.username = null;
      state.token = null;
      Cookies.remove('username');
      Cookies.remove('token')
    }

  },
  actions:{

  }
  }
)

　　Login.vue

<template>
    <div>
      <input type="text" v-model="username" placeholder="请输入用户名">姓名
      <input type="password" v-model="password" placeholder="请输入密码">密码
      <input type="button"  @click="loginfunc"  value="提交">
    </div>
</template>

<script>
  export default{
      name:'lgoin',
      data(){
          return{
            username:'',
            password:'',
          }
      },
    methods:{
          loginfunc(){
              var that = this
              this.$axios.request({
                url:'http://127.0.0.1:8000/api/v1/auth/',
                method:'POST',
                data:{
                    username:this.username,
                    password:this.password,

                },
                responseType: 'json',
              }).then(function (response) {
//                  that.$store.state.username=that.username
                    that.$store.commit('saveToken',response.data);  // response.data才能拿到其中数据。还有是that 注意！！！！！
                    console.log(response.data,typeof response.data)  //response.data 的数据类型是object，取值通过 .
              }).catch(function (response) {
                  console.log(response)

              })
          }
    }
  }
</script>

　　Header.vue

<template>
  <div>
    <div>
        <router-link to="/index">首页</router-link>
        <router-link to="/course">课程</router-link>
        <router-link to="/news">深科技</router-link>
        <!--<router-link to="/test">test</router-link>-->
    </div>
    <div>
      <div v-if="this.$store.state.username">
        <router-link to="/index">{{this.$store.state.username}}</router-link>
        <a @click="logoutfuc">注销</a>
      </div>
      <div v-else>
        <router-link  to="/login">登录</router-link>   <!--这两种是一样的效果，第一种是通过url -->
        <!--<router-link :to="{name:'login'}">登录</router-link>  这一种是利用 路由，反向生成url。:绑定数据 -->
      </div>
    </div>
  </div>

</template>

<script>
  export default{
      name:'Header',
      data(){
          return{

          }
      },
      methods:{
          logoutfuc(){
            this.$store.commit('clearToken')
          }
      }
  }
</script>

　　views.py　

class AuthView(APIView):
    def post(self,request,*args,**kwargs):
        ret = {
            'username':request.data.get('username'),
            'password':request.data.get('password'),
            'token':'geageage111'
        }
        print(ret)
        print(Response(ret))
        return Response(ret)

　　输出：

　　　　注意Response！！！ 所以，前端取值，需要调用.data。

{'username': '', 'password': '', 'token': 'geageage111'}
<Response status_code=, "text/html; charset=utf-8">