vue状态管理器(用户登录简单应用)

技术点:通过vue状态管理器,对已经登录的用户显示不同的页面:

一  vue之状态管理器应用

主要用来存储cookie信息

与vue-cookies一起使用

安装:npm install vue-cookies

1.1登录页面

<template>
    <div class="login">
        <h1>登录</h1>

        <p>用户名:<input type="text" v-model="name"></p>
        <p>密码:<input type="password" v-model="pwd"></p>

        <button @click="login" class="btn bg-danger">登录</button>
    </div>
</template>

<script>


    export default {
        data: function () {
            return {
                name:'',
                pwd:''
            }

        },
        methods: {
            login: function () {
                let _this = this
                this.$http.request({
                    url: _this.$url + 'login/',
                    method: 'post',
                    data:{'name':_this.name,'pwd':_this.pwd}
                }).then(function (response) {
                    console.log(response.data)
                    alert(_this.$store.state.name)
                    if(response.data.status==100){
                        //往stort.js的state的字典中写入值
                        // _this.$store.state.name=_this.name
                        // _this.$store.state.token=response.data.token
                        //调用store下的某个方法,用commit,第一个参数是方法名,第二个参数是参数
                        _this.$store.commit('login',response)
                    }
                    alert(_this.$store.state.name)

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

            },

        },
    }
</script>
<style>
</style>

1.2在app中

如果登录,显示用户姓名与注销,否则为登录

<template>
    <div id="app">
        <div id="nav">
            <router-link to="/">Home</router-link>
            |
            <router-link to="/about">About</router-link>
            |
            <router-link to="/course">Course</router-link>
            |
            <span class="pull-right">
                <span v-if="!this.$store.state.name">
                    <router-link to="/login">登录</router-link>
                    <router-link to="/login">注册</router-link>
                </span>
                <span v-else>
                    <span>{{this.$store.state.name}}</span>
                    <a @click="logout">注销</a>
                </span>

            </span>


        </div>
        <router-view/>
    </div>
</template>
<script>


    export default {

        methods: {
            logout: function () {
                this.$store.commit('logout')

            },

        },
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    #nav {
        padding: 30px;
    }

    #nav a {
        font-weight: bold;
        color: #2c3e50;
    }

    #nav a.router-link-exact-active {
        color: #42b983;
    }
</style>

1.3store中

import Vue from 'vue'
import Vuex from 'vuex'
import Cookie from 'vue-cookies'
Vue.use(Vuex)

export default new Vuex.Store({
    //存储全局变量
    state: {
        //不要写死,要从cookie中取
        name: Cookie.get('name'),
        token: Cookie.get('token')

    },
    mutations: {
        //    写方法,这里面写的所有方法,第一个参数,必须是state
        login:function (state,response) {
            //修改这两个变量的值
            state.name=response.data.name
            state.token=response.data.token
        //    往cookie中写数据
            Cookie.set('name',response.data.name)
            Cookie.set('token',response.data.token)

        },
        logout:function (state) {
            //修改这两个变量的值
            state.name=""
            state.token=""
        //    往cookie中写数据
            Cookie.set('name',"")
            Cookie.set('token',"")
        }


    },
    actions: {}
})

二  后台登录views

from rest_framework.views import APIView
from rest_framework.response import Response
from api import models
from api.MySer import CourseSerializer, CourseDetailSerializer, CourseCategorySerializer
from api.utils.commonUtils import MyResponse
import uuid


class Login(APIView):
    def post(self, request, *args, **kwargs):
        response = MyResponse()
        name = request.data.get('name')
        pwd = request.data.get('pwd')
        user = models.UserInfo.objects.filter(name=name, pwd=pwd).first()
        if user:
            # 得去UserToken表中存数据
            # 生成一个随机字符串,不会重复
            token = uuid.uuid4()
            models.UserToken.objects.update_or_create(user=user, defaults={'token': token})
            response.token = token
            response.name=name
            response.msg = '登录成功'
        else:
            response.msg = '用户名或密码错误'
            response.status = '101'

        return Response(response.get_dic)