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

手把手教你使用Django + Vue.js 快速构建项目

• Django
yizhihongxing

我来为你讲解"手把手教你使用Django + Vue.js 快速构建项目"的完整攻略。该攻略包括两个示例说明。

简介

Django是一个Python Web框架，Vue.js是一个流行的前端框架。Django+Vue.js的组合可以快速构建一个全栈Web应用程序。攻略主要包括以下步骤：

  1. 创建Django项目
  2. 创建Vue.js项目
  3. 使用Django Rest Framework创建API
  4. 使用Vue.js进行前端开发
  5. 将Django和Vue.js集成到一起

示例一：创建一个简单的Todo List

步骤一：创建Django项目

首先在命令行中输入以下代码来创建一个Django项目：

django-admin startproject todo_list

然后进入todo_list目录：

cd todo_list

接下来，我们需要创建一个Django应用程序。在终端中输入以下命令：

python manage.py startapp todo

现在我们已经有了一个名为todo的Django应用程序，接下来我们需要在todo目录下创建一个models.py文件，该文件将定义我们的Todo项目模型。

from django.db import models

class TodoItem(models.Model):
    title = models.CharField(max_length=200)

接下来，我们需要创建一个serializers.py文件来创建一个关于Todo项目的序列化类。

from rest_framework import serializers
from .models import TodoItem

class TodoItemSerializer(serializers.ModelSerializer):
    class Meta:
        model = TodoItem
        fields = '__all__'

完成序列化器之后，我们可以开始构建API视图。在todo目录下创建views.py文件：

from rest_framework import generics
from .models import TodoItem
from .serializers import TodoItemSerializer

class TodoList(generics.ListCreateAPIView):
    queryset = TodoItem.objects.all()
    serializer_class = TodoItemSerializer

添加一个URL模式到todo应用中的urls.py：

from django.urls import path
from .views import TodoList

urlpatterns = [
    path('api/todo', TodoList.as_view())
]

现在我们已经完成了Django的设置，现在便是Vue.js的设置。

步骤二：创建Vue.js项目

为了使用 Vue.js，你需要首先安装 Node.js。在命令行中输入以下命令来确保 Node.js 已经正确安装：

node -v

接下来，我们需要安装 Vue.js。输入以下命令：

npm install vue

接下来，我们需要安装一个CLI命令行工具来创建和管理Vue项目。输入以下命令：

npm install -g vue-cli

现在我们可以创建Vue应用程序了。在终端中，输入以下命令：

vue init webpack todo_list_frontend

在创建过程中，你会被询问一些问题，如项目名称和包的类型。完成之后，在命令行中输入以下命令来安装依赖项：

cd todo_list_frontend
npm install

步骤三：使用Django Rest Framework创建API

我们已经在示例一中为Django项目创建了API视图，现在我们需要在Vue.js项目中使用这个API视图。我们首先需要安装axios库，用于在JavaScript中访问我们的API视图。在命令行中输入以下命令来安装：

npm install axios

在Vue.js项目中创建一个store.js文件，用于管理Todo项目的状态。

import axios from 'axios'

const state = {
  items: []
}

const mutations = {
  setItems(state, items) {
    state.items = items
  },
  addItem(state, item) {
    state.items.push(item)
  }
}

const actions = {
  async loadItems({commit}) {
    const response = await axios.get('/api/todo/')
    const items = response.data
    commit('setItems', items)
  },
  async addItem({commit}, title) {
    const response = await axios.post('/api/todo/', {title})
    const addedItem = response.data
    commit('addItem', addedItem)
  }
}

export default {
  state,
  mutations,
  actions
}

我们现在需要更新App.vue以使用Vuex存储Todo项目状态：

<template>
  <div>
    <h1>Todo List</h1>
    <form @submit.prevent="addItem">
      <input type="text" placeholder="Add a todo item" v-model="newItemTitle">
      <button>Add</button>
    </form>
    <ul>
      <li v-for="item in items" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
  name: 'app',
  data() {
    return {
      newItemTitle: ''
    }
  },
  mounted() {
    this.loadItems()
  },
  methods: {
    ...mapActions(['loadItems', 'addItem']),
  },
  computed: {
    ...mapState(['items'])
  }
}
</script>

现在，我们已经完成了Todo List项目的配置。接下来，我们将学习如何将Django和Vue.js集成到一起。

步骤四：将Django和Vue.js集成到一起

我们需要使用Django来运行Vue.js应用程序。我们可以通过在Django中创建一个视图来完成这一操作。

在todo应用程序的views.py文件中，添加以下代码：

from django.views.generic import TemplateView

class Home(TemplateView):
    template_name = 'home.html'

然后，创建一个home.html文件，该文件将通过Django提供的URL路由将Vue.js项目呈现在页面上。

<!DOCTYPE html>
<html>

<head>
  <title>Todo List</title>
</head>

<body>
  <div id="app"></div>
  <script src="{% static 'js/app.js' %}"></script>
</body>

</html>

在urls.py文件中添加以下代码来指定一个URL路由：

from django.urls import path
from .views import TodoList, Home

urlpatterns = [
    path('api/todo/', TodoList.as_view()),
    path('', Home.as_view(), name='home')
]

现在你可以运行Django服务器并访问Vue.js应用程序了。

python manage.py runserver

示例一创建的Todo List项目完成。

示例二：创建一个单页面应用程序

步骤一：创建Django项目

同样，我们需要使用Django创建一个Web应用程序。输入以下命令：

django-admin startproject single_page_app

CD进入应用程序目录：

cd single_page_app

创建一个应用程序：

python manage.py startapp api

在应用程序的目录下，创建一个serializers.py文件：

from rest_framework import serializers
from .models import Post

class PostSerializer(serializers.ModelSerializer):
    class Meta:
        model = Post
        fields = '__all__'

在api应用中创建views.py，并添加以下代码：

from rest_framework import generics
from .models import Post
from .serializers import PostSerializer

class PostList(generics.ListCreateAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

class PostDetail(generics.RetrieveUpdateDestroyAPIView):
    queryset = Post.objects.all()
    serializer_class = PostSerializer

我们需要在api/urls.py中添加路由：

from django.urls import path
from .views import PostList, PostDetail

urlpatterns = [
    path('api/posts', PostList.as_view()),
    path('api/posts/<int:pk>', PostDetail.as_view())
]

定义模型，我们可以在models.py文件中定义Post模型：

from django.db import models

class Post(models.Model):
    title = models.CharField(max_length=200)
    content = models.CharField(max_length=500)

为了支持Vue.js的前端部分，我们还需要为Django设置Cors头。我们将安装django-cors-headers：

pip install django-cors-headers

在settings.py文件中，添加以下代码：

INSTALLED_APPS = [
    # ...
    'corsheaders',
    # ...
]

MIDDLEWARE = [
    # ...
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # ...
]

CORS_ORIGIN_ALLOW_ALL = True

完成所有设置后，我们将创建Vue.js前端部分。

步骤二：创建Vue.js项目

在命令行中，通过以下命令安装Vue.js：

npm install vue

创建一个Vue.js项目：

vue init webpack single_page_app_frontend

安装所有依赖项：

cd single_page_app_frontend
npm install

在App.vue中输入以下代码：

<template>
  <div>
    <h1>Single Page App</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{post.title}}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'app',
  data() {
    return {
      posts: []
    }
  },
  mounted() {
    axios.get('/api/posts/')
      .then(response => this.posts = response.data)
      .catch(error => console.log(error))
  }
}
</script>

在src/router/index.js中添加以下代码：

import Vue from 'vue'
import Router from 'vue-router'
import Posts from '@/components/Posts'
import PostDetail from '@/components/PostDetail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Posts',
      component: Posts
    },
    {
      path: '/post/:id',
      name: 'PostDetail',
      component: PostDetail
    }
  ]
})

然后在src/store.js中添加以下代码：

const state = {
  posts: []
}

const mutations = {
  setPosts(state, posts) {
    state.posts = posts
  }
}

const actions = {
  async loadPosts({commit}) {
    const response = await axios.get('/api/posts/')
    const posts = response.data
    commit('setPosts', posts)
  }
}

export default {
  state,
  mutations,
  actions
}

完整的示例二已经准备好了，我们可以将Django和Vue.js集成起来。

步骤三：将Django和Vue.js集成到一起

首先，在Vue.js项目中，创建一个新的入口文件index.html，并将其放到根目录下：

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>Single Page App</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <div id="app"></div>
    <script src="{% static 'js/manifest.js' %}"></script>
    <script src="{% static 'js/vendor.js' %}"></script>
    <script src="{% static 'js/app.js' %}"></script>
</body>
</html>

我们还需要创建一个Django视图来向前端传递静态HTML：

from django.views.generic import TemplateView

class Home(TemplateView):
    template_name = 'index.html'

在urls.py文件中，我们需要添加以下路由：

from django.urls import path
from .views import Home, PostList, PostDetail

urlpatterns = [
    path('api/posts/', PostList.as_view()),
    path('api/posts/<int:pk>/', PostDetail.as_view()),
    path('', Home.as_view(), name='home'),
]

再次运行Django服务器：

python manage.py runserver

现在打开浏览器并前往http://localhost:8000。您应该能够看到示例二的Single Page App项目。

以上便是“手把手教你使用Django + Vue.js 快速构建项目”的完整攻略。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：手把手教你使用Django + Vue.js 快速构建项目 - Python技术站

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

相关文章

  • 详解Django的CSRF认证实现

    Django的CSRF认证实现是一种保护用户免受跨站请求攻击（Cross-site request forgery，CSRF）的攻击。下面是详细的攻略，包含两个示例说明。 一、什么是CSRF攻击？ CSRF攻击是利用用户在已经认证的网站上执行特定的操作，使得用户在不知情的情况下执行不良操作。例如，假设某个银行网站使用GET请求将用户的资金转移，黑客可以发邮件…

    Django 2023年5月16日
    00

  • Python – Django – JsonResponse 对象

    用 json 模块和 HttpResponse 返回生成的 json views.py： from django.shortcuts import render, HttpResponse import json # json 测试 def json_test(request): data = {“name”: “Jack”, “age”: 18} hobb…

    Django 2023年4月10日
    00

  • Apache部署Django项目图文详解

    下面是详细讲解“Apache部署Django项目图文详解”的完整攻略。 1. 安装Apache和mod_wsgi模块 在Ubuntu系统中可以通过以下命令来安装Apache Web服务器： sudo apt-get update sudo apt-get install apache2 在安装Apache后，我们需要安装mod_wsgi模块来支持Django…

    Django 2023年5月16日
    00

  • django自定义标签错误 ‘my_tag’ is not a registered tag library.

    解决办法： 在settings里的 加上红色的部分，my_tag为自定义的标签函数 后面的为其地址  TEMPLATES = [ { ‘BACKEND’: ‘django.template.backends.django.DjangoTemplates’, ‘DIRS’: [os.path.join(BASE_DIR, ‘templates’)] , ‘AP…

    Django 2023年4月11日
    00

  • Python Django 实现简单注册功能过程详解

    下面我将详细讲解“Python Django 实现简单注册功能过程”的完整攻略。本攻略分为以下几个部分： 创建 Django 项目和应用 安装、配置和使用 Django 自带的认证系统 自定义认证系统 实现简单注册功能 示例一：使用 Django 自带的认证系统实现注册和登录功能 示例二：自定义认证系统实现注册和登录功能 1. 创建 Django 项目和应用…

    Django 2023年5月16日
    00

  • Django实现表单验证

    Django是一款成熟的web开发框架，其内置了表单验证机制，方便我们实现表单数据的验证。下面就来详细讲解Django实现表单验证的完整攻略。 1. 创建表单类 首先，我们需要创建一个表单类，在models.py中定义表单字段，例如： from django import forms class LoginForm(forms.Form): username…

    Django 2023年5月16日
    00
  • Django笔记十五之in查询及date日期相关过滤操作 Django

    Django笔记十五之in查询及date日期相关过滤操作

    这一篇介绍关于范围，日期的筛选 in range date year week weekday quarter hour 1、in in 对应于 MySQL 中的 in 操作，可以接受数组、元组等类型数据作为参数： Blog.objects.filter(id__in=[1,2,3]) 对应的 SQL 是： select * from blog_blog w…

    2023年4月10日
    00

  • django模板语法学习（模板变量，for循环，if语句）

    首先通过django内置的模板需要达到的效果：数据加模板就形成了html页面。 如图： 总所周知，django的mvt模式，是属于前后端不分离的模式。所有得先在templates目录下新建一个personinfo.html文件 如图： 模板内容如下： <!DOCTYPE html><html lang=”en”><head&gt…

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