使用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:\forNote\myproject>npm install

　　

4. 启动项目

F:\forNote\myproject>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:\forNote\venv\Scripts\python.exe
Installing setuptools, pip, wheel...done.

F:\forNote>

2. 激活虚拟环境

linux ： source venv/bin/activate
windows ： venv\Scripts\activate

结果

(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:\forNote\myproject>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>

Login页面

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值')

models.py

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"),  # 登录验证的路由
 ]

urs.py

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

Views.py

 #! /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()

Token方法

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>