1. Python技术站首页
  2. Web开发
  3. Django

django与vue的完美结合_实现前后端的分离开发之后在整合的方法

• Django

下面将为你详细讲解“Django与Vue的完美结合——实现前后端的分离开发之后在整合的方法”。

1.前言

Django和Vue都是非常流行的Web开发框架，Django是一款开源的Python Web框架，Vue是一款渐进式JavaScript框架，常用于构建单页面应用（SPA）。在Web开发中，前端与后端的分离已经成为了主流趋势，而Django和Vue的完美结合，就是基于前后端分离的开发方式实现的。

2.前后端分离开发示例

通过一个实例来介绍前后端分离开发并实现前后端分离的方式。

2.1前端开发

1.安装Vue

npm install vue --save

2.新建Vue项目

vue init webpack frontend

3.在Vue项目中使用Axios请求后端接口

import axios from 'axios'

const BASE_URL = '/api/'

export function getUsers() {
  return axios.get(`${BASE_URL}users/`)
}

export function getUser(id) {
  return axios.get(`${BASE_URL}users/${id}/`)
}

2.2后端开发

1.安装Django

pip install django

2.新建Django项目

django-admin startproject backend

3.新建Django应用

cd backend/
python manage.py startapp users

4.编写Django视图

from django.http import JsonResponse
from django.shortcuts import get_object_or_404

from .models import User

def get_users(request):
    users = User.objects.all()
    data = [{'id': user.id, 'name': user.name, 'email': user.email} for user in users]
    return JsonResponse(data, safe=False)

def get_user(request, user_id):
    user = get_object_or_404(User, id=user_id)
    data = {'id': user.id, 'name': user.name, 'email': user.email}
    return JsonResponse(data, safe=False)

2.3前后端分离后的优势

前端与后端的分离开发方式有如下优势：

1.提高开发效率，各自开发负责自己的领域，降低了开发人员之间的耦合程度。

2.前端可以选择合适的框架进行开发，可以选择好用的UI组件库进行开发，提高了前端的体验。

3.后端与前端的数据交互更加清晰明了。

3.整合前后端示例

借助Webpack将前端资源打包，然后将打包后的资源嵌入Django模板中，在templates文件夹下新建一个index.html文件，可以像下面这样嵌入Webpack打包后的JavaScript和CSS文件：

{% load static %}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Vue-Django Demo</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet">
    <link href="{% static 'css/app.39428fbe.css' %}" rel="stylesheet">
  </head>
  <body>
    <div id="app"></div>
    <script src="{% static 'js/manifest.4099bc10.js' %}"></script>
    <script src="{% static 'js/vendor.e1d11a23.js' %}"></script>
    <script src="{% static 'js/app.3db97568.js' %}"></script>
  </body>
</html>

其中{% static %}是Django模板标签，用于获取静态文件的路径，静态文件可以放在static文件夹中。

4.整合前后端完整代码

下面是整合前后端的示例代码：

4.1前端代码

// frontend/src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import '@/assets/css/base.css'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

// frontend/src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '@/views/Home.vue'
import Users from '@/views/Users.vue'
import UserDetail from '@/views/UserDetail.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/users',
    name: 'users',
    component: Users
  },
  {
    path: '/user/:id',
    name: 'user-detail',
    component: UserDetail
  }
]

const router = new VueRouter({
  routes
})

export default router

// frontend/src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import { getUsers, getUser } from '@/api/users'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    users: [],
    currentUser: null
  },
  getters: {
    users: state => state.users,
    currentUser: state => state.currentUser
  },
  mutations: {
    setUsers(state, users) {
      state.users = users
    },
    setCurrentUser(state, user) {
      state.currentUser = user
    }
  },
  actions: {
    async getUsers({ commit }) {
      const response = await getUsers()
      const users = response.data
      commit('setUsers', users)
    },
    async getUser({ commit }, id) {
      const response = await getUser(id)
      const user = response.data
      commit('setCurrentUser', user)
    }
  }
})

// frontend/src/api/users.js

import axios from 'axios'

const BASE_URL = '/api/'

export function getUsers() {
  return axios.get(`${BASE_URL}users/`)
}

export function getUser(id) {
  return axios.get(`${BASE_URL}users/${id}/`)
}

// frontend/src/components/UserList.vue

<template>
  <div>
    <h2>用户列表</h2>
    <ul class="list-group">
      <li v-for="user in users" :key="user.id" class="list-group-item">
        <router-link :to="{ name: 'user-detail', params: { id: user.id } }">{{ user.name }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'UserList',
  computed: {
    ...mapGetters(['users'])
  },
  created() {
    this.$store.dispatch('getUsers')
  }
}
</script>

// frontend/src/components/UserDetail.vue

<template>
  <div>
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'UserDetail',
  computed: {
    ...mapGetters(['currentUser']),
    user() {
      return this.currentUser ? this.currentUser : {}
    }
  },
  created() {
    this.getUser()
  },
  methods: {
    getUser() {
      const id = this.$route.params.id
      this.$store.dispatch('getUser', id)
    }
  }
}
</script>

// frontend/src/views/Users.vue

<template>
  <div>
    <UserList />
  </div>
</template>

<script>
import UserList from '@/components/UserList.vue'

export default {
  name: 'Users',
  components: {
    UserList
  }
}
</script>

// frontend/src/views/Home.vue

<template>
  <div class="home">
    <h1>VUE - DJANGO DEMO</h1>
    <p>这是一个使用Vue和Django实现的Web应用程序。代码已经托管在Github上，欢迎您的传送。</p>
    <p><a href="https://github.com/Kevin-07/vue-django-demo/">查看 Github 代码</a></p>
  </div>
</template>

<style>
.home {
  margin-top: 50px;
  text-align: center;
}
</style>

// frontend/src/App.vue

<template>
  <div id="app">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <router-link class="navbar-brand" to="/">Vue-Django Demo</router-link>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item">
            <router-link class="nav-link" to="/">首页</router-link>
          </li>
          <li class="nav-item">
            <router-link class="nav-link" to="/users">用户列表</router-link>
          </li>
        </ul>
      </div>
    </nav>
    <div class="container mt-3">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
/* Put your own stylesheet here */
</style>

// frontend/src/assets/css/base.css

body {
  margin: 0;
  padding: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

a {
  color: black;
  text-decoration: none;
}

a:hover {
  color: black;
  text-decoration: none;
}

.list-group-item {
  cursor: pointer;
}

4.2后端代码

# backend/backend/settings.py

INSTALLED_APPS = [
    'users.apps.UsersConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'backend.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'backend.wsgi.application'

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}

LANGUAGE_CODE = 'zh-hans'

TIME_ZONE = 'Asia/Shanghai'

USE_I18N = True

USE_L10N = True

USE_TZ = True

static_url = '/static/'
MEDIA_URL = '/media/'

STATICFILES_DIRS = [
    BASE_DIR / 'frontend' / 'dist' / 'static',
]

STATIC_ROOT = BASE_DIR / 'static'
MEDIA_ROOT = BASE_DIR / 'media'

# backend/backend/urls.py

from django.contrib import admin
from django.urls import path
from django.conf.urls.static import static
from django.conf import settings
from django.views.generic import TemplateView

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

api_patterns = ([
    path('users/', include('users.urls')),
])

urlpatterns += api_patterns

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)

urlpatterns += [
    path('', TemplateView.as_view(template_name='index.html')),
]

# backend/users/models.py

from django.db import models

class User(models.Model):
    name = models.CharField(max_length=50)
    email = models.EmailField()

    def __str__(self):
        return self.name

# backend/users/views.py

from django.http import JsonResponse
from django.shortcuts import get_object_or_404

from .models import User

def get_users(request):
    users = User.objects.all()
    data = [{'id': user.id, 'name': user.name, 'email': user.email} for user in users]
    return JsonResponse(data, safe=False)

def get_user(request, user_id):
    user = get_object_or_404(User, id=user_id)
    data = {'id': user.id, 'name': user.name, 'email': user.email}
    return JsonResponse(data, safe=False)

# backend/users/urls.py

from django.urls import path

from .views import get_users, get_user

urlpatterns = [
    path('users/', get_users),
    path('users/<int:user_id>/', get_user),
]

# backend/users/admin.py

from django.contrib import admin

from .models import User

class UserAdmin(admin.ModelAdmin):
    list_display = ['id', 'name', 'email']

admin.site.register(User, UserAdmin)

# backend/users/apps.py

from django.apps import AppConfig

class UsersConfig(AppConfig):
    name = 'users'

5.总结

通过上述示例可知，Django与Vue的完美结合，在前后端分离的基础上，结合Webpack将前端资源打包，然后将打包后的资源嵌入Django模板中，可以实现前后端的无缝衔接。在开发过程中，可以对前端和后端分别进行优化和管理，提高开发效率。同时，前后端分离的方式还可以实现前后端的部署与维护分离，对于复杂的应用程序具有较好的可维护性和扩展性。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：django与vue的完美结合_实现前后端的分离开发之后在整合的方法 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月16日
下一篇 2023年5月16日

相关文章

  • Django–用户认证组件auth（登录用-依赖session，其他用）

    一、用户认证组件auth介绍 二、auth_user表添加用户信息 三、auth使用示例 四、auth封装的认证装饰器 五、自定义 一、用户认证组件auth介绍 解决的问题： 之前是把is_login=True放在session里来判断用户是否登录之前的操作，在覆盖的时候有问题。例如两个用户先后登录，第一个用户key-value比较多，第二个key-valu…

    Django 2023年4月12日
    00

  • Django 生命周期

    Django 生命周期为： 用户请求发起对url的请求→ wsgiref模块→django中间件→django（视图url对应函数，模型数据库交互，html模版渲染）→django中间件 → wsgiref模块 →用户看到的页面。   from wsgiref.simple_server import make_server def RunServer(en…

    Django 2023年4月11日
    00

  • [django]django 3种返回json方法

    django 3种返回json方法 1.手动组装字典返回 from django.http import JsonResponse, HttpResponse from django.shortcuts import render from app01.models import Book # Create your views here. def get_…

    Django 2023年4月10日
    00

  • django：token认证，以及http401和http403的区别

    首先token认证环境搭建： 安装模块：pip install djangorestframework 在settings中添加参数： 如图： 继续添加REST_FRAMEWORK项： 如图： 配置如下： REST_FRAMEWORK = { # 权限验证，全局配置 “DEFAULT_PERMISSION_CLASSES”:( ‘rest_framework…

    Django 2023年4月12日
    00
  • django框架学习：二十二.django表单提交-get请求 Django

    django框架学习：二十二.django表单提交-get请求

    ————恢复内容开始———— 在登录的时候，输入框里输入账号，密码提交，从前端页面将账号密码等信息提交到服务端，服务端接收数据后根据提交的数据进行相应的处理，返回相应的响应。这一套流程下来就是今天学习的内容，表单的提交，涉及到前后端数据的交互。 from表单 用户表单是web开发的一项基本的功能，Django的表单功能由For…

    2023年4月10日
    00

  • Anaconda+django写出第一个web app（一）

    在安装好Anaconda和django之后，我们就可以开始创建自己的第一个Web app，那么首先创建一个空文件夹，之后创建的文件都在这个文件夹内。 启动命令行进入此文件夹内，可以先通过如下命令查看一下自己的python版本和django版本。  python –version  django-admin –version  我的python和djang…

    Django 2023年4月11日
    00

  • Python的Django框架使用入门指引

    Python的Django框架使用入门指引 什么是Django Django是一个高级Web应用框架，使用Python编写。它帮助开发人员轻松地构建和维护复杂的Web应用程序。Django相对于其他Web框架的优势在于它的可扩展性，开发速度快和安全性高。 Django的安装 要安装Django，您需要安装Python。在安装Python之后，可以在命令行中使…

    Django 2023年5月16日
    00

  • Django笔记二十二之多数据库操作

    本文首发于公众号：Hunter后端原文链接：Django笔记二十二之多数据库操作 这一篇笔记介绍一下多数据库操作。 在第十篇笔记的时候，简单介绍过 using() 的使用方法，多个数据库就是通过 using(db_alias) 的方式来来指定选中的数据库，这里介绍一下同步库表结构时候的操作。 定义方式 同步命令 指定数据库操作 1、定义方式 在 settin…

    Django 2023年4月13日
    00
合作推广
合作推广
分享本页
返回顶部