上海知名建站公司,山东住房和建设庭网站,关键词爱站网,做地方网站如何盈利概要
在 Web 开发的世界里#xff0c;Django 和 Vue.js 分别是后端和前端两个非常流行的框架。Django 以其强大的后端能力、快速开发以及安全性而著称#xff0c;而 Vue.js 因其简洁、灵活和易于上手在前端开发领域广受欢迎。
本篇文章将详细介绍如何将 Django 与 Vue.js 结… 概要
在 Web 开发的世界里Django 和 Vue.js 分别是后端和前端两个非常流行的框架。Django 以其强大的后端能力、快速开发以及安全性而著称而 Vue.js 因其简洁、灵活和易于上手在前端开发领域广受欢迎。
本篇文章将详细介绍如何将 Django 与 Vue.js 结合使用打造一个现代化的 Web 应用。文章会通过一个简单的博客应用案例展示 Django 如何作为 API 服务端而 Vue.js 如何用作客户端界面。 环境准备
在我们开始之前确保您已经安装了 Python、Django、Node.js 和 npm。接下来我们将分两部分进行首先设置 Django然后配置 Vue.js。
第一部分Django 设置
创建项目
django-admin startproject blogbackend
cd blogbackend创建应用
python manage.py startapp blog定义模型
在 blog/models.py 中我们定义一个简单的 Post 模型
from django.db import modelsclass Post(models.Model):title models.CharField(max_length100)content models.TextField()def __str__(self):return self.title数据库迁移
python manage.py makemigrations blog
python manage.py migrate创建序列化器
安装 Django Rest Framework:
pip install djangorestframework在 settings.py 添加 rest_framework 到 INSTALLED_APPS。
创建 blog/serializers.py:
from rest_framework import serializers
from .models import Postclass PostSerializer(serializers.ModelSerializer):class Meta:model Postfields (id, title, content)创建视图
在 blog/views.py 中
from django.shortcuts import render
from rest_framework import generics
from .models import Post
from .serializers import PostSerializerclass PostListCreate(generics.ListCreateAPIView):queryset Post.objects.all()serializer_class PostSerializer设置URLs
添加 URL 规则到 blog/urls.py:
from django.urls import path
from .views import PostListCreateurlpatterns [path(posts/, PostListCreate.as_view(), namepost-list-create),
]并在 blogbackend/urls.py 中包含 blog 应的 urls 模块:
from django.contrib import admin
from django.urls import path, includeurlpatterns [path(admin/, admin.site.urls),path(api/, include(blog.urls)),
]现在我们的 API 已经建立完毕可以使用 Django Admin 创建一些 Post 博客文章或者使用 API 测试。 第二部分Vue.js 设置
创建 Vue.js 项目
vue create blogfrontend
cd blogfrontend安装 Vue 资源库
为了与后端通信我们将使用 axios 库。
npm install axios设置 Vue.js 组件
编辑 src/App.vue:
templatediv idapph1博客文章/h1PostList//div
/templatescript
import PostList from ./components/PostList.vueexport default {name: App,components: {PostList}
}
/script创建 src/components/PostList.vue:
templatedivdiv v-forpost in posts :keypost.idh2{{ post.title }}/h2p{{ post.content }}/p/div/div
/templatescript
import axios from axiosexport default {data() {return {posts: []}},mounted() {axios.get(http://localhost:8000/api/posts/).then(response {this.posts response.data}).catch(error {console.log(error)})}
}
/script运行 Vue.js 应用
启动 Vue.js 开发服务器
npm run serve您现在应该能够访问 http://localhost:8080/看到从 Django API 加载的文章列表。 总结
通过本文您已经学会了如何将 Django 设置为强大的后端 API以及如何使用 Vue.js 创建动态前端。这种前后端分离的架构可以让您的项目更容易扩展、维护并且更好地管理不同的开发团队。
