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)