VUE+Django前后端分离-第一部分

一、创建django项目

1、创建django项目

在指定目录下，用django-admin startproject django_vue创建Django项目

2、在django项目下创建应用

 2.1 在django_vue目录下通过命令python manage.py startapp app 创建应用

2.2 将app加到settings配置项中

  2.3 新建接口

在app目录下的views里我们新增一个test-api接口，同时新增一个url.py文件，将新建接口添加到路由中

新建接口：

from django.shortcuts import render
from django.http import JsonResponse
from django.views.decorators.http import require_http_methods

# Create your views here.
@require_http_methods(["GET"])
def test_api(request):
    response = {}
    try:
        response['msg'] = 'success'
        response['data'] = 'django,vue 搭建前后端分离平台成功'
    except:
        response['msg'] = 'fail'
        response['data'] = 'django,vue 搭建前后端分离平台失败'
    return JsonResponse(response)

新加路由：

from django.urls import path
from . import views

urlpatterns = [
    path('testapi', views.test_api),
]

同时将app目录下的urls添加到django_vue下的url中，才可以完成完整的路由配置

from django.contrib import admin
from django.urls import path,include


urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/',include('app.urls'))
]

 启动Django项目，调用接口判断接口是否正常

 

二、前端环境搭建

1、在django_vue项目根目录下，创建前端工程appweb

vue-init webpack appweb

2、安装VUE依赖模块

npm install

npm install vue-resource

npm install element-ui

3、启动前端工程

npm run dev

此时项目入口为HelloWorld，位于src/components下面

三、前端页面布局

1、修改项目入口，将HelloWorld.vue删除，替换为index.vue

参考文档：https://blog.csdn.net/qq_34670974/article/details/100528064

index.vue：

<template>
  <div class="container">
      <el-container>
        <el-header>Header</el-header>
        <el-container>
          <el-aside width="200px">Aside</el-aside>
          <el-main>Main</el-main>
        </el-container>
      </el-container>
  </div>
</template>

<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }

  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }

  .el-main {
    background-color: #FFFFFF;
    color: #333;
    text-align: left;

  }

  body > .el-container {
    margin-bottom: 40px;
  }

  .container{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height:100%;
  }
  .el-submenu [class^=el-icon-]{
    height: 20px;
  }
</style>

同时修改src/router中对应的入口路由：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'index',
      component: index
    }
  ]
})

 

2、初始化vue实例中需要的插件

修改src/main.js文件：

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import VueResource from 'vue-resource'
import 'element-ui/lib/theme-chalk/index.css'

Vue.config.productionTip = false

Vue.use(ElementUI)
Vue.use(VueResource)
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3、启动前端，展示如下：