前端
app.vue:
<template> <div id="app"> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">路飞学城</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><router-link to="/">首页 <span class="sr-only">(current)</span></router-link></li> <li><router-link to="/course">免费课程</router-link></li> <li><router-link to="/micro">学位</router-link></li> <li><router-link to="/publicclass">直播公开课</router-link></li> <li class="dropdown"> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <div class="nav navbar-nav navbar-right"> <div v-if="this.$store.state.token"> <span>{{this.$store.state.username}}</span> #****** <a id='logout'href="javascript:void(0)" @click="logout">注销</a>| </div> <div v-else> <span id="login"> <router-link to="/login">登录</router-link></span> </div> </div> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <router-view/> </div> </template> <script> import 'bootstrap/dist/css/bootstrap.min.css' export default { name:'app', data(){ return{ } }, methods:{ logout:function () { //唤醒vuex中的mutasions方法 this.$store.commit('ClearToken') } } } </script> <style> #logout{ padding: 0 20px; } #bs-example-navbar-collapse-1{ width: 1200px; height: 100%; margin: 0 auto; } </style>
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import course from './views/course'
import courseDetail from './views/courseDetail'
import login from './views/Login'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/login/',
name: 'login',
component: login
}
]
})
login.vue:
<template> <div class="login" > <div> <p>用户名：<input type="text" v-model="user"></p> <p>密码：<input type="password" v-model="pwd"></p> <button @click="Login">提交</button> </div> </div> </template> <script> import axios from 'axios' export default { name: "login", data() { return { user: "", pwd: "", } }, methods: { //请求数据----------------- Login: function () { var that = this; axios.request({ url:"http://localhost:8105/login/", method:"post", data:{ //input框与 data() 里的 账号是双向绑定这里就可以取到值 user:that.user, pwd:that.pwd } }).then( //返回的数据----------------- function (response) { console.log(response); if (response.data.code=='1000'){ // console.log(123); //console.log(response.data.token); // 为的是登录后显示用户名 // 传递的方法 that.$store.commit('SaveToken',{ //传递的token值 token:response.data.token, //传递的用户名 username:that.user }) } } ).catch(function () { }) } } } </script> <style scoped> </style>
store.js:
安装cookie
npm install vue-cookies
import Vue from 'vue'
import Vuex from 'vuex'
import cookie from 'vue-cookies'
Vue.use(Vuex);
export default new Vuex.Store({
state: {
// 保存到cookie里，刷新不消失
username:cookie.get('username'),
token:cookie.get('token')
},
mutations: {
//state 相当于Python的self
// 刷新即丢失，所以后续需要存储到cookie中
SaveToken:function (state,UserToken) {
state.username = UserToken.username;
state.token = UserToken.token;
// 设置cookie(以便交给state 做刷新不消失保存)
cookie.set('username',UserToken.username);
cookie.set('token',UserToken.token);
},
ClearToken:function (state) {
//赋为空值，键值对还在
state.username = null;
state.token = null;
//删除键值对
cookie.remove('username');
cookie.remove('token');
}
},
actions: {
}
})
后端：
MIDDLEWARE = [ 'api.util.mycor.CORSMiddleware', ]
from django.utils.deprecation import MiddlewareMixin class CORSMiddleware(MiddlewareMixin): def process_response(self, request, response): if request.method == "OPTIONS": response["Access-Control-Allow-Methods"] = "POST" response["Access-Control-Allow-Origin"] = "*" response["Access-Control-Allow-Headers"] = "Content-Type" return response
view
from rest_framework.views import APIView from api.models import * from rest_framework import serializers from rest_framework.response import Response from rest_framework.viewsets import ModelViewSet from api.util.Myserializers import * from django.http import JsonResponse import uuid class login(APIView): def get(self,request,*args,**kwargs): pass def post(self,request,*args,**kwargs): ret = {'code': 1000, 'msg': None,'user':None} # 获取账号 try: # user = request._request.POST.get('user') user = request.data.get("user") print(user, 'uuuuuuuuuuuuuu') pwd = request.data.get("pwd") # pwd = request._request.POST.get('pwd') print(pwd,'ppppppppppppppppppp') obj=Account.objects.filter(username=user,password=pwd).first() if not obj: ret['code'] = 1001 ret['msg'] = '用户名密码错误' token = str(uuid.uuid4()) # 有则更新，没有则创建 UserAuthToken.objects.update_or_create(user=obj, defaults={'token': token}) ret['token'] = token except Exception as e: print(e,'888888888888888888') ret['code'] = 1002 ret['msg'] = '请求异常' return JsonResponse(ret)
# 前端发送时用request._request.body或request.data.get("user")取数据
#postman:用request._request.get("user")或request.data.get("user")取数据
