首页 > 其他分享> 文章详细

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

2022-08-15 14:00:08 阅读：161 来源： 互联网

标签：el vue color app 分离 django VUE import 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>

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、启动前端，展示如下：

标签：el,vue,color,app,分离,django,VUE,import,Django
来源： https://www.cnblogs.com/like1824/p/16587804.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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