使用Vue和djangoframwork完成登录页面构建 001

 使用Vue和djangoframwork完成登录页面构建 001

 环境的搭建

首先，我在我的电脑的F盘创建了一个文件夹 forNote，进入到这个文件夹中

F:forNote>

 vue环境的搭建

1. 安装脚手架

F:forNote>npm install vue-cli -g

2. 生成VUE项目

F:forNote>vue init webpack myproject  // 后面是项目名

 在这里进行简单的配置

F:forNote>vue init webpack myproject

? Project name y
? Project description y
? Author y
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "myproject".

   To get started:

     cd myproject
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack


F:forNote>

完成后，上面给出了一些提示，我们可以按照提示进行

3. 进入项目并安装依赖

F:forNote>cd myproject

F:forNotemyproject>npm install

　　

 4. 启动项目

F:forNotemyproject>npm run dev

　上面的代码等同于 npm start

通过上面几步，完成了vue项目的创建

python环境的搭建

 1. 创建虚拟环境

F:forNote>virtualenv venv

执行结果

F:forNote>virtualenv venv
Using base prefix 'd:\program files (x86)\python\python35'
New python executable in F:forNotevenvScriptspython.exe
Installing setuptools, pip, wheel...done.

F:forNote>

2. 激活虚拟环境

linux ： source venv/bin/activate
windows ： venvScriptsactivate

结果

(venv) F:forNote>

退出虚拟环境的命令是：deactivate

3. 检测运行环境

(venv) F:forNote>pip freeze    // 查看当前python环境安装了那些包

4. 安装依赖包

(venv) F:forNote>pip install django

(venv) F:forNote>pip install djangorestframework

 这样的话，python环境简单的配置就完成了。

前端页面的搭建

 为了少些css代码，安装一个bootstrap

 1. 安装bootstarp

F:forNotemyproject>npm install bootstrap

　　

 2. 写入配置

用 Pycharm打开刚才配置好的Vue项目myproject文件夹，将bootstrap的配置写入以下位置

"bootstrap": "^3.3.7"

3. 引用

找到下列位置，发现标红，我们需要改下配置

 修改下版本

 

 我们后面还会用到axios，这一一起配置了，步骤和上面一样

 --> npm install axios

-->  配置package.json

-->  main.js 中引用

4. login页面的书写

<template>
  <!--<img src="../assets/logo.png">-->
  <div class="outter">
    <h1 class="title">Login</h1>
    <p>
      <label for="username">Username </label>
      <input class="form-control" type="text" id="username" placeholder="Username" v-model="username">
    </p>
    <p>
      <label for="password">Password</label>
      <input class="form-control" type="password" id="password" placeholder="Password" v-model="password">
    </p>
    <span v-show="show" class="error_info">{{ error_info }}</span>
    <p>
      <input type="button" value="登录" class="btn btn-primary btn-block" v-on:click="login">
    </p>
  </div>
</template>

<script>
  // 创建cookie
  function setCookie(key, value) {
    document.cookie = key + '=' + value
  }
  // 获取cookie
  function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
      return unescape(arr[2]);
    else
      return null;
  }
  // 删除cookie
  function delCookie(name) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = getCookie(name);
    if (cval != null)
      document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
  }


  export default {
    name: 'Login',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        username: 'admin',
        password: 'admin',
        tk: '',
        error_info: '',
        show: false
      }
    },
    methods: {
      login(){
        var data = {username: this.username, password: this.password}
        var url = 'http://127.0.0.1:8000/api/v1/auth/'
        var self = this;
//              {"headers": {'Content-Type': 'application/x-www-form-urlencoded'}}
        this.$http.post(url, data).then(function (response) {
          if (response.data.code == 1002) {
            self.show = false;
            self.tk = response.data.tk;
            setCookie('tk', self.tk);
            window.location.href = "/#/index/";


          } else if (response.data.code == 1001) {
            console.log('false');
            self.show = true;
            self.error_info = '用户名或密码错误';
            console.log(getCookie('tk'))

          }
        }).catch(function (response) {
          console.log(response)
        })
      }
    }
  }
</script>

<style scoped>
  .outter {
    width: 400px;
    margin: 0 auto;
    position: relative;
    top: 150px;
  }

  label {
    float: left;
  }

  p {
    margin-top: 10px;
  }

  #username, #password {
    text-indent: 6px;
  }

  .error_info {
    color: red;
    float: right;
    position: relative;
    top: -5px;
  }
</style>

5.  路由配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Login from '@/components/Login'                // 导入文件

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/login/',               // 配置路由
      name: 'Login',                 // 设置别名
      component: Login               // 路由对应的页面
    }
  ]
})

后端页面的搭建

1. 创建django项目

2. 创建表

from django.db import models

# Create your models here.
class UserInfo(models.Model):
    username = models.CharField(max_length=64, verbose_name='用户名')
    password = models.CharField(max_length=64, verbose_name='密码')
    email = models.EmailField(blank=True, null=True, verbose_name='邮箱')

    def __str__(self):
        return self.username

class Token(models.Model):
    user = models.OneToOneField(to="UserInfo", verbose_name='用户')
    value = models.CharField(max_length=64, verbose_name='Token值')

3. 配置路由url

from django.conf.urls import url
from django.contrib import admin
from app01 import views

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^api/(?P<version>w+)/auth/$', views.AuthView.as_view(), name="auth"),  # 登录验证的路由
]

4.写视图类

from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
from rest_framework.views import APIView
from app01 import models
from app01.utils.tools.tools import gen_token
from rest_framework.request import Request


# pip install djangorestframework
class AuthView(APIView):
    """
    登录验证
    """
    def get(self, request, *args, **kwargs):
        """
        处理get请求的函数，暂时用不到
        """
        self.dispatch

        return HttpResponse("....")

    def post(self, request, *args, **kwargs):
        """
        处理post请求的函数，这里主要用来提交登录用户信息并验证返回token值
        """
        username = request.data.get('username')
        password = request.data.get('password')
        user_obj = models.UserInfo.objects.filter(username=username, password=password).first()

        if user_obj:
            # 如果验证成功，为该用户创建一个Token值，下次带过来，作为登录的标志
            tk = gen_token(username)
            # 如果有这条记录就跟新，如果没有这条记录就创建
            models.Token.objects.update_or_create(user=user_obj, defaults={'value': tk})
            # 验证成功，返会code：1002以及tk的值
            response = JsonResponse({'code': 1002, 'username': username, 'tk': tk})
        else:
            # 验证失败，返会code：1001
            response = JsonResponse({'code': 1001})
        # 由于是 cors，所以需要设置响应头
        response['Access-Control-Allow-Origin'] = 'http://localhost:8080'

        return response

    def options(self, request, *args, **kwargs):
        """
        本次登录的功能是cors中的复杂请求，所以需要先通过option进行预检        
        """
        # 本次预检返回的内容不重要
        response = HttpResponse('')
        # 设置允许访问的地址
        response['Access-Control-Allow-Origin'] = 'http://localhost:8080'
        # 设置允许的提交方式
        response['Access-Control-Allow-Methods'] = 'POST, GET, PUT, DELETE'
        # 设置可以携带的请求头
        response['Access-Control-Allow-Headers'] = "Content-Type"
        return response

#! /usr/bin/env python
# -*- coding: utf-8 -*-
# __author__ = "Always"
# Date: 2017/11/25


def gen_token(username):
    """
    使用用户的用户名以及时间戳进行sha224加密，作为登录的标识
        下次访问可以直接携带这个参数过来就可以了
    """
    import time
    import hashlib
    sha1 = hashlib.sha224()
    sha1.update(username.encode('utf-8'))
    sha1.update(str(time.time()).encode('utf-8'))
    return sha1.hexdigest()

5. 运行django项目查看结果

结果完成，

其它

自动执行：加载完页面后就会执行

<script>
  export default {
    name: 'HelloWorld',
    data () {
      return {
        course_list: []
      }
    },
    mounted: function () {  // 默认执行下面的代码
      this.getCourse()
    },
    methods: {
      getCourse: function () {
        var self = this
        this.$axios.request({
          url: this.$store.state.apiList.courses,
          method: 'GET'
        }).then(function (response) {
          console.log(response.data.data)
          self.course_list = response.data.data
        }).catch(function (response) {
          console.log(response)
        })
      }
    }
  }
</script>