详细步骤

　　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.usernamelet 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 = thisthis.$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'] = '*'   #允许的urlobj['Access-Control-Allow-Headers'] = 'Content-Type'    #允许的请求头obj['Access-Control-Allow-Methods'] = '*'    #允许的请求方式return objdef post(self,request,*args,**kwargs):print(request.data)return Response('111')

　　解决跨域，每个视图都要添加 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'] = '*'  # 允许的urlresponse['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('111')

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 = thisthis.$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 = thisthis.$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.usernamethat.$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': '11', 'password': '11', 'token': 'geageage111'}
<Response status_code=200, "text/html; charset=utf-8">

　　　　

转载于:https://www.cnblogs.com/654321cc/p/8569610.html

路飞学城详细步骤 part1相关推荐

  1. 路飞学城1之课程与课程详细

    前端vue import Vue from 'vue' import App from './App.vue' import router from './router' import store f ...

  2. 路飞学城python全栈开发_[Python] 老男孩路飞学城Python全栈开发重点班 骑士计划最新100G...

    简介 老男孩&路飞学城Python全栈开发重点班课程,作为Python全栈教学系列的重头戏,投入了全新的课程研发和教学精力,也是Python骑士计划的核心教学,由ALEX老师开班镇守,一线技术 ...

  3. 路飞学城Python-Day14

    转载:python之路-路飞学城-python-book [25.常用模块-logging模块详解] [26.常用模块-logging模块详解2] [27.常用模块-logging模块日志过滤和日志文 ...

  4. 路飞学城python全栈开发_python 全栈开发，Day98(路飞学城背景,django ContentType组件,表结构讲解)...

    昨日内容回顾 1. 为什么要做前后端分离?-前后端交给不同的人来编写,职责划分明确.-API (IOS,安卓,PC,微信小程序...)-vue.js等框架编写前端时,会比之前写jQuery更简单快捷. ...

  5. 路飞学城项目介绍与分析

    路飞学城项目介绍与分析 文章目录 路飞学城项目介绍与分析 一.企业的web项目类型 二.企业项目开发流程 三.立项申请阶段 四.需求分析 1. 首页 2.注册登录 3.课程列表 4.课程详情 5.购物 ...

  6. 路飞学城Python-Day46

    16-如何正确的使用类选择器及总结 一般情况下尽量不要去使用id选择器,因为id选择器有很大的限制性,id一般都是JS配合使用的,类选择器都是和CSS配合使用的,特殊性情况可以用id选择器. 类的使用 ...

  7. vue+uwsgi+nginx部署路飞学城

    路飞学城django代码 https://files.cnblogs.com/files/pyyu/luffy_boy.zip vue代码 https://files.cnblogs.com/file ...

  8. 路飞学城—Python爬虫实战密训班 第三章

    路飞学城-Python爬虫实战密训班 第三章 一.scrapy-redis插件实现简单分布式爬虫 scrapy-redis插件用于将scrapy和redis结合实现简单分布式爬虫:- 定义调度器- 定 ...

  9. Python高级全栈开发实战 老男孩课程S16+路飞学城项目+女神串讲 Python全栈直通车课程

    python高级全栈开发实战 老男孩课程S16+路飞学城项目+女神串讲 Python全栈直通车课程 Python高级全栈开发实战老男孩课程,是可以帮助同学们从零基础开始到项目开发实战的全栈课程,内容非 ...

最新文章

  1. 浅谈 UC 国际信息流推荐
  2. Stock Arbitraging
  3. ngRx 官方示例分析 - 4.pages
  4. iOS正则表达式(亲测,持续更新)
  5. docker, docker-compose安装
  6. 推荐：PHPCMS v9 安全防范教程！
  7. 《面向对象分析与设计》一1.4面向对象方法的主要优点
  8. 实现两线程的同步一（wait/notify）
  9. Aspose.OCR 22.6 for .NET//Aspose.OCR
  10. MMKV 原理以及使用
  11. Fxfactory插件:光雾滤镜插件PHYX Stylist
  12. undefined和null区别
  13. xp计算机u盘重装系统,如何用u盘装xp系统_纯净版xp系统_xp系统安装教程 - u大师...
  14. Vue.js(二) 模板语法
  15. Error: A ＜Route＞ is only ever to be used as the child of ＜Routes＞ element, never rendereddirectly
  16. 为什么中国程序员非要用英文编程，而不用汉字编程
  17. 苹果无需越狱了！通过苹果签名轻松安装IPA文件
  18. iconfont在ie8下不显示图标问题
  19. Bowtie2的安装与使用
  20. 何志强：张尚昀式的当代好青年

热门文章

  1. windoews连接linux终端,Linux Samba 与 Windoews 共享文件
  2. 5W1H分析法 什么是5W1H分析法？
  3. 简单入门到彻底搞懂防抖和节流
  4. 记面试中问到的MySQL的SQL调优问题
  5. 第9天：CSS精灵图
  6. 《深入理解Android内核设计思想》已陆续在全国各大书店及网上书店上市，感谢大家一直以来的支持~~
  7. Edge浏览器爱上WebVR
  8. 金蝶EAS DEP脚本（4）—— 控件常用脚本之设置F7的显示名称
  9. jstl json数据 ajax,JSTL，JQuery，Ajax，Json
  10. python进行词频统计_如何利用Python进行文本词频统计