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'personedit.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;
   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/>"
});