Vue+django 實戰

部分代碼：

# -*- coding: utf-8 -*-
import json
import logging
import datetime

from django.shortcuts import render, get_object_or_404
from django.contrib.auth.models import User
from django.contrib import auth
from django.http import HttpResponseRedirect
from django.http import HttpResponse
from django.urls import reverse
from django.views.decorators.csrf import csrf_exempt
from django.contrib.auth.decorators import login_required


from .models import AuthUser
from CompanySafteyManage.models import Company
from CompanySafteyManage.models import Department
from utils.DataUtils import MySQLUtils
from utils.DateUtils import ComplexEncoder
from .models import Profile
from .models import Eduction
from .models import Workhistory
from .models import Cities
from .models import Provinces
from .models import Areas
log = logging.getLogger('scripts')


@csrf_exempt
def register(request):
    if request.method == 'POST':
        username = request.POST.get('new_username')
        password = request.POST.get('new_password')
        email = request.POST.get('new_email')
        user = User.objects.create_user(
            username=username, password=password, email=email)
        return HttpResponseRedirect("/login/")

@csrf_exempt
def get_user(request):
    user = request.user
    print(user)
    status=False
    login_user = None
    if user=='AnonymousUser':
        status = True
        login_user={'userame':user.userame}
    return HttpResponse(json.dumps({'status':status,'user':login_user}))

@csrf_exempt
def login(request):
    '''
    function: 登錄操做
    return:
    autor: 成海文
    create_date: 2018-12-1
    '''
    if request.method == 'POST':
        username = request.POST.get('username')
        password = request.POST.get('password')
        user = auth.authenticate(username=username, password=password)
        log.info(user.username)
        if user is not None and user.is_active:
            auth.login(request, user)
            return HttpResponse(json.dumps({'user':username}))
            # return HttpResponseRedirect('/company/index')
        else:
            # return render(request, 'login.html', {'msg': 'user or password is not exist'})
            return HttpResponse(json.dumps({'user': None}))
    return render(request, 'login.html', {'msg': None})


@csrf_exempt
def vaild_email(request):
    email = request.POST.get('email')
    if email is not None:
        user_set = User.objects.filter(email__exact=email)
        if len(user_set) == 0:
            return HttpResponse(json.dumps({'status': 'usable'}))
        else:
            return HttpResponse(json.dumps({'status': 'disable'}))
    else:
        return HttpResponse(json.dumps({'status': None}))


@csrf_exempt
def vaild_username(request):
    username = request.POST.get('username')
    if username is not None:
        user_set = User.objects.filter(username__exact=username)
        if len(user_set) == 0:
            return HttpResponse(json.dumps({'status': 'usable'}))
        else:
            return HttpResponse(json.dumps({'status': 'disable'}))
    else:
        return HttpResponse(json.dumps({'status': None}))


def profile_update(request, id):
    pass
    return HttpResponse(request, json.dumps({'status': 'OK'}))



def pwd_change(request, id):
    pass
    return HttpResponse(request, json.dumps({'status': 'OK'}))


def logout(request):
    auth.logout(request)
    # return HttpResponseRedirect("login")
    return HttpResponse('OK')

@login_required(login_url='/login/')
def profile_edit(request):
    company_set = Company.objects.all()
    province_set = Provinces.objects.all()
    # print(province_set)
    # print(len(province_set))
    return render(request, r'person\edit.html', {'companys': company_set,'province_set':province_set })

　　Vue

<template>
  <div id="app">
    <el-container class="s-container">
      <el-header class="s-head">
        <el-row :gutter="24">
          <el-col :span="24">
            <el-menu
              :default-active="activeIndex"
              class="el-menu-demo"
              mode="horizontal"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
            >
              <el-menu-item index="1">
                <router-link to="/foo">處理中心</router-link>
              </el-menu-item>
              <el-submenu index="2">
                <template slot="title">
                  <router-link to="/foo">個人工做臺</router-link>
                </template>
                <el-menu-item index="2-1">選項1</el-menu-item>
                <el-menu-item index="2-2">選項2</el-menu-item>
                <el-menu-item index="2-3">選項3</el-menu-item>
              </el-submenu>
              <el-menu-item index="3">
                <router-link to="/foo">消息中心</router-link>
              </el-menu-item>
              <el-menu-item index="4">
                <router-link to="/foo">訂單管理</router-link>
              </el-menu-item>

              <el-menu-item index="-1" disabled style="float:right" v-if="!isLogin">
                <el-col :span="10">
                  <el-input size="medium" v-model="userName" placeholder="請輸入用戶名"></el-input>
                </el-col>
                <el-col :span="10">
                  <el-input size="medium" type="password" v-model="passWord" placeholder="請輸入密碼"></el-input>
                </el-col>
                <el-col :span="4">
                  <el-button type="info" plain v-on:click="login">登錄</el-button>
                </el-col>
              </el-menu-item>
              <el-menu-item index="-1" disabled style="float:right" v-if="isLogin">
                <el-button type="text" disabled>{{user}}</el-button>
                <el-button type="info" plain v-on:click="logout">註銷</el-button>
              </el-menu-item>
            </el-menu>
          </el-col>
          <!-- <el-col :span="8" class="s-user">
            <el-col :span="12">
              <el-input size="medium" v-model="input" placeholder="請輸入用戶名"></el-input>
            </el-col>
            <el-col :span="12">
              <el-input size="medium" v-model="input" placeholder="請輸入密碼"></el-input>
            </el-col>
          </el-col>-->
        </el-row>
      </el-header>
      <el-main class="s-body">
        <router-view/>
      </el-main>
      <el-footer class="s-foot">
        <p class="copyright">
          2018 © 江湖科技
          <a target="_blank" href="http://119.29.153.78/">ChengHaiwen</a>  | 
          <a href="http://119.29.153.78/" title="爲將來而生" target="_blank">爲將來而生!</a>
        </p>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      activeIndex: "1",
      user: null,
      isLogin: false,
      userName: null,
      passWord: null
    };
  },
  mounted() {
    this.getUser();
  },
  methods: {
    getUser: function() {
      this.$axios.get("http://127.0.0.1:8000/user/get_user/").then(resp => {
        console.log(resp.data);
        let loginStatus = resp.data;
        this.isLogin = loginStatus.status;
        this.user = loginStatus.user;
      });
    },
    login: function() {
      var params = new URLSearchParams();
      params.append("username", this.userName);
      params.append("password", this.passWord);
      this.$axios.post("http://127.0.0.1:8000/login/", params).then(resp => {
        console.log(resp.data);
        let loginStatus = resp.data;
        this.user = loginStatus.user;
        this.isLogin = true;
      });
    },
    logout: function() {
      this.$axios.get("http://127.0.0.1:8000/logout/").then(resp => {
        console.log(resp.data);
        this.isLogin = false;
        this.user = null;
      });
    }
  }
};
</script>

<style>
.s-container {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 1200px;
  margin: 0 auto;
}
.s-head {
  padding: 0 0px;
  background-color: "#545c64";
}
.s-body {
  min-height: 960px;
  background-color: seashell;
}
.s-foot {
  background-color: #545c64;
  color: beige;
}
.s-user {
  background-color: "#545c64";
}
.login-input {
  background-color: azure;
}
</style>

　　man.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import ElementUI from "element-ui";
import App from "./App";
import "element-ui/lib/theme-chalk/index.css";
import router from "./router";
import axios from "axios";
Vue.prototype.$axios = axios;
Vue.use(ElementUI);

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>"
});