路飞学城详细步骤 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

<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,进行条件判断，渲染登录前，登录后不同的页面。

　　代码如下：

　　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>

<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:{
 
  }
  }
)

<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">

路飞学城详细步骤 part1的更多相关文章

路飞学城详细步骤 part2
一显示课程列表需求:当你点击课程,course.vue在 <router-view>渲染,并不需要你进行其他点击,所欲的课程列表直接在前端显示,数据是从数据库拿到的. 补充1:生命周期 ...
路飞学城Python-Day59(第五模块记录)
HTML部分 <!DOCTYPE html> <html lang="en"> <head> <!--head标签的主要作用:文档的头部主 ...
day75:luffy:路飞学城项目后端环境搭建&Git相关知识点
目录 1.Xadmin 1.Xadmin介绍 2.Xadmin安装 3.Xadmin的使用 2.项目环境搭建 1.外部依赖 2.依赖包安装 3.搭建项目 3.Git 4.日志配置 5.异常处理 6.创 ...
python 全栈开发，Day98(路飞学城背景,django ContentType组件,表结构讲解)
昨日内容回顾 1. 为什么要做前后端分离? - 前后端交给不同的人来编写,职责划分明确. - API (IOS,安卓,PC,微信小程序...) - vue.js等框架编写前端时,会比之前写jQuery ...
路飞学城Python-Day53
01-jquery的介绍 JS在做项目或者是实现功能的时候,用JS去操作DOM元素非常复杂,代码量大,重复性代码也多多个元素使用for循环遍历也是非常麻烦的,对于JS使用来说加大了难度 jQuery ...
路飞学城Python-Day43
前端 ...
路飞学城Python-Day14
转载:python之路-路飞学城-python-book [25.常用模块-logging模块详解] [26.常用模块-logging模块详解2] [27.常用模块-logging模块日志过滤和日志文 ...
django环境部署 crm和路飞学城
环境依赖 yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ncurses-de ...
vue+uwsgi+nginx部署路飞学城
vue+uwsgi+nginx部署路飞学城有一天,老男孩的苑日天给我发来了两个神秘代码,听说是和mjj的结晶超哥将这两个代码,放到了一个网站上,大家可以自行下载路飞学城django代码 ht ...

随机推荐

spark简单入门
本文由cmd markdown编辑,原始链接:https://www.zybuluo.com/jewes/note/35032 RDD是什么? RDD是Spark中的抽象数据结构类型,任何数据在Spa ...
“流”的思维—Workflowy
3.“流”的思维—Workflowy是我最喜欢的”流“的工具(WorkFlowy - Organize your brain.)我觉得,让发散性的思维更具实施性,必须分步操作,必须有先后,必须单线程. ...
VGG16学习笔记
转载自:http://deanhan.com/2018/07/26/vgg16/ 摘要本文对图片分类任务中经典的深度学习模型VGG16进行了简要介绍,分析了其结构,并讨论了其优缺点.调用Keras中 ...
卷积网络中的通道(Channel)和特征图
转载自:https://www.jianshu.com/p/bf8749e15566 今天介绍卷积网络中一个很重要的概念,通道(Channel),也有叫特征图(feature map)的. 首先,之前 ...
Webpack2 视频教程
原文发表于我的技术博客这是我免费发布的高质量超清「Webpack 2 视频教程」.Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本 ...
html5文本超过指定行数隐藏显示省略号
这个很简单,直接贴代码就好了 HTML <span class="name">博客园是一个面向开发者的知识分享社区.自创建以来,博客园一直致力并专注于为开发者打造一个纯 ...
JS中鼠标左右键以及中键的事件
在三维场景中有时候需要判断鼠标的事件,除了使用的click事件,只有鼠标左键有效,而右键无效.而对于onmousedown.onmouseup的时候鼠标的事件左键/右键有效.详细请看w3c上的资料. ...
PAT 乙级 1019
题目题目地址:PAT 乙级 1019 思路本题没有考虑到小于1000的情况,当小于1000的时需要给vector的向量中推入0,直到向量中有四位数字,之后再进行排序并进行相关计算代码 #incl ...
docker系列之安装配置
由于docker支持内核3.8以上的,所以我们要安装centos7系统,这个系统的内核是3.10,来支持docker使用环境一.用UItralSo制作u盘启动打开找到要做u盘启动的镜像二.安装C ...
vs实用插件
Live Share 强烈推荐的一款插件,能在VS程序中打开文件并且显示他的效果.非常非常实用!,具体功能介绍在你搜索该插件时候有说明,非常非常好用的一款插件! 后续插件推荐转载参考与其他博主 1.C ...

路飞学城详细步骤 part1

路飞学城详细步骤 part1的更多相关文章

随机推荐

热门专题