Django+Vue3全栈开发实战:从零搭建博客系统

在这里插入图片描述

文章目录

    • 1. 开发环境准备
    • 2. 创建Django项目与配置
    • 3. 设计数据模型与API
    • 4. 使用DRF创建RESTful API
    • 5. 创建Vue3项目与配置
    • 6. 前端页面开发与组件设计
    • 7. 前后端交互与Axios集成
    • 8. 项目优化与调试
    • 9. 部署上线
    • 10. 总结与扩展
      • 10.1 项目总结
        • 10.1.1 技术栈回顾
        • 10.1.2 项目亮点
      • 10.2 扩展方向
        • 10.2.1 功能扩展
        • 10.2.2 技术扩展
      • 10.3 最佳实践
        • 10.3.1 后端最佳实践
        • 10.3.2 前端最佳实践
      • 10.4 常见问题与解决方案
        • 10.4.1 后端常见问题
        • 10.4.2 前端常见问题
      • 10.5 参考资料与扩展阅读

1. 开发环境准备

# 检查Python版本
python --version  # 要求3.8+# 安装虚拟环境工具
pip install virtualenv# 检查Node.js版本
node -v  # 要求16+

2. 创建Django项目与配置

# 创建项目目录
mkdir blog_project && cd blog_project# 创建虚拟环境
virtualenv venv
source venv/bin/activate  # Linux/Mac
venv\Scripts\activate    # Windows# 安装Django
pip install django# 创建项目
django-admin startproject backend
cd backend# 创建应用
python manage.py startapp blog

配置settings.py:

INSTALLED_APPS = [...'rest_framework','corsheaders','blog.apps.BlogConfig'
]MIDDLEWARE = [...'corsheaders.middleware.CorsMiddleware',
]CORS_ALLOW_ALL_ORIGINS = True

3. 设计数据模型与API

models.py:

from django.db import models
from django.contrib.auth.models import Userclass Post(models.Model):title = models.CharField(max_length=200)content = models.TextField()author = models.ForeignKey(User, on_delete=models.CASCADE)created_at = models.DateTimeField(auto_now_add=True)updated_at = models.DateTimeField(auto_now=True)def __str__(self):return self.title

执行迁移:

python manage.py makemigrations
python manage.py migrate

4. 使用DRF创建RESTful API

serializers.py:

from rest_framework import serializers
from .models import Postclass PostSerializer(serializers.ModelSerializer):author = serializers.ReadOnlyField(source='author.username')class Meta:model = Postfields = '__all__'

views.py:

from rest_framework import viewsets
from .models import Post
from .serializers import PostSerializerclass PostViewSet(viewsets.ModelViewSet):queryset = Post.objects.all()serializer_class = PostSerializerdef perform_create(self, serializer):serializer.save(author=self.request.user)

urls.py:

from django.urls import path, include
from rest_framework.routers import DefaultRouter
from blog import viewsrouter = DefaultRouter()
router.register(r'posts', views.PostViewSet)urlpatterns = [path('api/', include(router.urls)),
]

5. 创建Vue3项目与配置

npm init vue@latest frontend
cd frontend
npm install
npm run dev

安装必要依赖:

npm install axios vue-router@4 pinia

配置main.js:

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')

6. 前端页面开发与组件设计

PostList.vue组件示例:

<template><div class="post-list"><div v-for="post in posts" :key="post.id" class="post-card"><h3>{{ post.title }}</h3><p>{{ post.content.substring(0, 100) }}...</p><div class="meta"><span>作者:{{ post.author }}</span><span>发布时间:{{ formatDate(post.created_at) }}</span></div></div></div>
</template><script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'const posts = ref([])const fetchPosts = async () => {try {const response = await axios.get('http://localhost:8000/api/posts/')posts.value = response.data} catch (error) {console.error('获取文章失败:', error)}
}const formatDate = (dateString) => {return new Date(dateString).toLocaleDateString()
}onMounted(() => {fetchPosts()
})
</script><style scoped>
.post-list {max-width: 800px;margin: 0 auto;
}
.post-card {background: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>

7. 前后端交互与Axios集成

创建axios实例:

// src/utils/http.js
import axios from 'axios'const instance = axios.create({baseURL: 'http://localhost:8000/api',timeout: 5000,headers: {'Content-Type': 'application/json'}
})export default instance

使用Pinia状态管理:

// stores/postStore.js
import { defineStore } from 'pinia'
import http from '@/utils/http'export const usePostStore = defineStore('post', {actions: {async createPost(postData) {try {const response = await http.post('/posts/', postData)return response.data} catch (error) {throw error.response.data}}}
})

8. 项目优化与调试

配置Django静态文件:

# settings.py
STATIC_URL = '/static/'
STATIC_ROOT = BASE_DIR / 'staticfiles'

Vue生产构建:

npm run build

配置WhiteNoise中间件:

MIDDLEWARE = ['whitenoise.middleware.WhiteNoiseMiddleware',...
]STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'

9. 部署上线

使用Gunicorn部署Django:

pip install gunicorn
gunicorn backend.wsgi:application --bind 0.0.0.0:8000

配置Nginx:

server {listen 80;server_name example.com;location /api {proxy_pass http://localhost:8000;proxy_set_header Host $host;}location / {root /path/to/vue/dist;try_files $uri $uri/ /index.html;}
}

10. 总结与扩展

10.1 项目总结

在本项目中,我们通过Django和Vue3实现了一个全栈博客系统,涵盖了从前端到后端的完整开发流程。以下是项目的主要技术点总结:

10.1.1 技术栈回顾
  1. 后端技术栈

    • Django:作为核心框架,提供了强大的ORM、路由管理、模板引擎等功能。
    • Django REST Framework (DRF):用于快速构建RESTful API,支持序列化、视图集、权限控制等功能。
    • 数据库:使用SQLite作为开发数据库,支持无缝迁移到MySQL或PostgreSQL。
    • 身份验证:通过Django内置的User模型和DRF的TokenAuthentication实现用户认证。
    • CORS:通过django-cors-headers解决跨域问题,确保前后端分离架构的正常运行。
  2. 前端技术栈

    • Vue3:作为前端框架,提供了组合式API、响应式数据绑定、组件化开发等特性。
    • Pinia:用于状态管理,替代Vuex,提供更简洁的API和TypeScript支持。
    • Axios:用于发送HTTP请求,与后端API进行数据交互。
    • Vue Router:实现前端路由管理,支持动态路由、嵌套路由等功能。
    • Element Plus:作为UI组件库,提供丰富的组件和样式,加速页面开发。
  3. 开发工具

    • VS Code:作为主要开发工具,配合插件(如Vetur、ESLint、Prettier)提升开发效率。
    • Postman:用于API调试和测试。
    • Git:用于版本控制,支持团队协作开发。
  4. 部署方案

    • Nginx:作为反向代理服务器,处理静态文件请求和负载均衡。
    • Gunicorn:作为WSGI服务器,用于部署Django应用。
    • Docker:通过容器化技术简化部署流程,支持跨平台运行。
10.1.2 项目亮点
  1. 前后端分离架构

    • 前端和后端完全解耦,通过API进行数据交互,提高了开发效率和可维护性。
    • 前端可以独立部署,支持多平台(如Web、移动端)共享同一套API。
  2. 模块化设计

    • 后端通过Django的App机制将功能模块化,便于扩展和维护。
    • 前端通过Vue3的组件化开发,实现了高内聚、低耦合的代码结构。
  3. 响应式设计

    • 前端页面采用响应式布局,适配不同设备(PC、平板、手机)。
    • 使用Element Plus的栅格系统和组件,快速构建美观的UI。
  4. 性能优化

    • 后端通过DRF的分页、缓存、查询优化等技术提升API性能。
    • 前端通过懒加载、代码分割、图片压缩等技术减少页面加载时间。
  5. 安全性

    • 后端通过Django的CSRF保护、XSS防护、SQL注入防护等机制确保数据安全。
    • 前端通过Axios的请求拦截器和响应拦截器处理错误和权限验证。

10.2 扩展方向

10.2.1 功能扩展
  1. 用户认证与权限管理

    • 实现基于JWT(JSON Web Token)的身份验证,支持无状态认证。
    • 添加角色管理功能(如管理员、普通用户),实现细粒度的权限控制。
  2. 文件上传与存储

    • 支持用户上传头像、文章封面等文件。
    • 使用云存储服务(如AWS S3、阿里云OSS)存储静态文件。
  3. 评论与点赞功能

    • 实现文章评论功能,支持嵌套评论和分页加载。
    • 添加点赞功能,记录用户的点赞行为。
  4. 搜索与过滤

    • 实现全文搜索功能,使用Elasticsearch或Django的django-filter库。
    • 支持按标签、分类、时间等条件过滤文章。
  5. 实时通知

    • 使用WebSocket实现实时通知功能(如新评论、点赞提醒)。
    • 集成第三方通知服务(如Firebase Cloud Messaging)。
  6. 国际化与多语言支持

    • 使用Django的django-i18n实现后端多语言支持。
    • 使用Vue3的vue-i18n实现前端多语言切换。
10.2.2 技术扩展
  1. TypeScript支持

    • 将Vue3项目迁移到TypeScript,提升代码的可维护性和类型安全性。
    • 配置ESLint和Prettier,统一代码风格。
  2. GraphQL集成

    • 使用GraphQL替代RESTful API,提供更灵活的数据查询能力。
    • 集成Apollo Client作为前端GraphQL客户端。
  3. 微服务架构

    • 将单体应用拆分为多个微服务(如用户服务、文章服务、评论服务)。
    • 使用Docker和Kubernetes实现容器化部署和动态扩缩容。
  4. Serverless架构

    • 将部分功能(如图片处理、邮件发送)迁移到Serverless平台(如AWS Lambda)。
    • 使用Vercel或Netlify部署前端应用。
  5. 自动化测试

    • 使用Pytest和Django的测试工具编写后端单元测试和集成测试。
    • 使用Jest和Vue Test Utils编写前端单元测试和组件测试。
  6. CI/CD集成

    • 使用GitHub Actions或GitLab CI实现持续集成和持续部署。
    • 配置自动化测试、代码检查和部署流程。

10.3 最佳实践

10.3.1 后端最佳实践
  1. 代码结构优化

    • 使用Django的App机制将功能模块化,避免单个App过于臃肿。
    • 将业务逻辑放在Service层,减少视图函数的复杂度。
  2. API设计规范

    • 遵循RESTful API设计原则,使用合适的HTTP方法和状态码。
    • 使用版本控制(如/api/v1/posts)确保API的兼容性。
  3. 数据库优化

    • 使用索引加速查询,避免全表扫描。
    • 使用select_relatedprefetch_related优化关联查询。
  4. 缓存机制

    • 使用Redis缓存频繁访问的数据(如文章列表、用户信息)。
    • 使用Django的缓存框架实现页面级缓存和片段缓存。
  5. 日志记录

    • 使用Python的logging模块记录关键操作和错误信息。
    • 配置日志轮转和分级存储,便于问题排查。
10.3.2 前端最佳实践
  1. 组件化开发

    • 将页面拆分为多个可复用的组件,提高代码的可维护性。
    • 使用插槽(Slot)和Props实现组件的灵活配置。
  2. 状态管理

    • 使用Pinia集中管理全局状态,避免组件间直接传递数据。
    • 将异步操作(如API请求)放在Store中,减少组件的复杂度。
  3. 性能优化

    • 使用懒加载和代码分割减少首屏加载时间。
    • 使用v-ifv-show优化DOM渲染性能。
  4. 错误处理

    • 使用Axios的拦截器统一处理请求错误和响应错误。
    • 在组件中显示友好的错误提示,提升用户体验。
  5. SEO优化

    • 使用Vue Router的meta标签设置页面标题和描述。
    • 使用SSR(服务器端渲染)或预渲染技术提升SEO效果。

10.4 常见问题与解决方案

10.4.1 后端常见问题
  1. 跨域问题

    • 解决方案:使用django-cors-headers中间件,配置CORS_ALLOW_ALL_ORIGINS或白名单。
  2. 数据库迁移失败

    • 解决方案:检查模型定义是否正确,删除迁移文件并重新生成。
  3. 性能瓶颈

    • 解决方案:使用Django Debug Toolbar分析性能问题,优化查询和缓存。
  4. 安全性问题

    • 解决方案:启用Django的安全中间件,定期更新依赖库。
10.4.2 前端常见问题
  1. 页面加载慢

    • 解决方案:使用懒加载、代码分割、CDN加速等技术优化加载速度。
  2. 组件通信复杂

    • 解决方案:使用Pinia集中管理状态,减少组件间的直接通信。
  3. API请求失败

    • 解决方案:检查网络连接、API地址和请求参数,使用拦截器统一处理错误。
  4. 浏览器兼容性问题

    • 解决方案:使用Babel和PostCSS处理兼容性问题,测试主流浏览器。

10.5 参考资料与扩展阅读

  1. 官方文档

    • Django官方文档
    • Vue3官方文档
    • DRF官方文档
  2. 推荐书籍

    • 《Django for Beginners》
    • 《Vue.js设计与实现》
    • 《RESTful API设计指南》
  3. 在线课程

    • Django全栈开发实战
    • Vue3高级开发技巧
  4. 开源项目

    • Django博客系统
    • Vue3管理后台

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/70453.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django 5实用指南(五)模板系统

Django5的模板系统是其核心功能之一&#xff0c;允许开发者将动态数据嵌入到HTML模板中&#xff0c;并根据不同的业务需求渲染页面。Django模板系统基于 Django模板语言&#xff08;DTL&#xff09;&#xff0c;它提供了一些强大的功能&#xff0c;如模板标签、过滤器、条件语句…

uni-app开发app时 使用uni.chooseLocation遇到的问题

问题一&#xff1a;不显示 问题二&#xff1a;选择地址列表一直在加载中 因为 uni-app 接口文档 中已经说明&#xff0c;使用腾讯的话需要开启云服务&#xff0c;具体可看官网&#xff0c;这就是为什么使用时直接不显示的原因&#xff0c;所以我使用的高德&#xff0c;但又出现…

推荐系统-排序模型

本次学习的重点是FM系列和WideNDeep系列。其实这两个模型是存在因果关系的。从最初的LR模型开始&#xff0c;因为缺失高效的特征交互方式&#xff0c;产生了FM模型&#xff0c;即通过向量内积代替特征之间的两两交互的参数。最后DNN的引入可以建模更高阶的特征。但是DNN如何与F…

体验用ai做了个python小游戏

体验用ai做了个python小游戏 写在前面使用的工具2.增加功能1.要求增加视频作为背景。2.我让增加了一个欢迎页面。3.我发现中文显示有问题。4.我提出了背景修改意见&#xff0c;欢迎页面和结束页面背景是视频&#xff0c;游戏页面背景是静态图片。5.提出增加更多游戏元素。 总结…

c#爬取数据并解析json

安装 Newtonsoft.Json Install-Package Newtonsoft.Json代码 HttpClient client new HttpClient();// 获取网页内容HttpResponseMessage response client.GetAsync("https://opentdb.com/api.php?amount10&category18&difficultyeasy&typemultiple"…

计算机毕业设计Python农产品推荐系统 农产品爬虫 农产品可视化 农产品大数据(源码+LW文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

【分布式理论13】分布式存储:数据存储难题与解决之道

文章目录 一、数据存储面临的问题二、RAID磁盘阵列的解决方案1. RAID概述2. RAID使用的技术3. RAID的代表性等级 三、分布式存储的新思路1. 分布式存储背景与特点2. 分布式存储的组成要素 一、数据存储面临的问题 在单机系统时代&#xff0c;当数据量不断增加、硬盘空间不够时…

高德地图android sdk(备忘)

依赖 // 权限请求框架&#xff1a;https://github.com/getActivity/XXPermissions implementation com.github.getActivity:XXPermissions:20.0 // https://mvnrepository.com/artifact/com.amap.api/navi-3dmap-location-search implementation com.amap.api:navi-3dmap-loca…

DeepSeek、微信、硅基流动、纳米搜索、秘塔搜索……十种不同方法实现DeepSeek使用自由

为了让大家实现 DeepSeek 使用自由&#xff0c;今天分享 10 个畅用 DeepSeek 的平台。 一、官方满血版&#xff1a;DeepSeek官网与APP 首推&#xff0c;肯定是 DeepSeek 的官网和 APP&#xff0c;可以使用满血版 R1 和 V3 模型&#xff0c;以及联网功能。 网址&#xff1a; htt…

自动化之ansible(二)

一、ansible中playbook&#xff08;剧本&#xff09; 官方文档&#xff1a; Ansible playbooks — Ansible Community Documentation 1、playbook的基本结构 一个基本的playbook由以下几个主要部分组成 hosts: 定义要执行任务的主机组或主机。 become: 是否需要使用超级用户…

python 神经网络教程,神经网络模型代码python,小白入门基础教程

文章目录 前言1. 神经网络基础概念1.1 神经元1.2 激活函数1.3 神经网络结构1.4 安装 Python1.5 选择开发环境2. 使用numpy构建简单神经网络 3. 使用PyTorch构建复杂神经网络 前言 本教程旨在为广大初学者和有一定基础的开发者提供一个系统、全面且深入的 Python 神经网络学习指…

SOME/IP--协议英文原文讲解10

前言 SOME/IP协议越来越多的用于汽车电子行业中&#xff0c;关于协议详细完全的中文资料却没有&#xff0c;所以我将结合工作经验并对照英文原版协议做一系列的文章。基本分三大块&#xff1a; 1. SOME/IP协议讲解 2. SOME/IP-SD协议讲解 3. python/C举例调试讲解 4.2.2 Req…

Spring框架基本使用(Maven详解)

前言&#xff1a; 当我们创建项目的时候&#xff0c;第一步少不了搭建环境的相关准备工作。 那么如果想让我们的项目做起来方便快捷&#xff0c;应该引入更多的管理工具&#xff0c;帮我们管理。 Maven的出现帮我们大大解决了管理的难题&#xff01;&#xff01; Maven&#xf…

用大内存主机下载Visual Studio

用一台内存达到128G的主机下载Visual Studio 2022&#xff0c;用的是公司网络。下载速度让我吃了一惊&#xff0c;没人用网络了&#xff1f;还是网站提速了&#xff1f;以前最大只能达到5MB/秒。记录这段经历&#xff0c;是用来分析公司网络用的......

Ubuntu20.04.2安装Vmware tools

软件版本&#xff1a;Vmware Workstation Pro 17.6.2 操作系统镜像文件&#xff1a;ubuntu-20.04.2-desktop-amd64 方式1&#xff1a;用iso镜像安装 没用这种方法&#xff0c;太麻烦 方式2&#xff1a;用apt安装Open VM Tools 如果你使用的是较新的Ubuntu版本&#xff08;如…

Mac系统下使用Docker快速部署MaxKB:打造本地知识库问答系统

随着大语言模型的广泛应用&#xff0c;知识库问答系统逐渐成为提升工作效率和个人学习的有力工具。MaxKB是一款基于LLM&#xff08;Large Language Model&#xff09;大语言模型的知识库问答系统&#xff0c;支持多模型对接、文档上传和自动爬取等功能。本文将详细介绍如何在Ma…

2526考研资料分享 百度网盘

通过网盘分享的文件&#xff1a;01、2026【考研数学】 链接: https://pan.baidu.com/s/1N-TlXcCKMcX1U-KBr0Oejg?pwducbe 提取码: ucbe 提取码:98wg--来自百度网盘超级会员v3的分享 通过网盘分享的文件&#xff1a;01、2026【考研政治】 链接: https://pan.baidu.com/s/1N-T…

【信息系统项目管理师-案例真题】2013下半年案例分析答案和详解

更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 试题一【问题‍ 1】(12 分)【问题‍ 2】(10 分)【问题 3】( 3 分 )试题二【问题‍ 1】(3‍ 分)【问题‍ 2】(10‍ 分)【问题‍ 3】(3‍ 分)【问题‍ 4】(9‍ 分)试题三【问题‍ 1】(12‍ 分)‍【问题‍ 2】(8‍…

idea连接gitee(使用idea远程兼容gitee)

文章目录 先登录你的gitee拿到你的邮箱找到idea的设置选择密码方式登录填写你的邮箱和密码登录成功 先登录你的gitee拿到你的邮箱 具体位置在gitee–>设置–>邮箱管理 找到idea的设置 选择密码方式登录 填写你的邮箱和密码 登录成功

UNIAPP开发之利用阿里RTC服务实现音视频通话后端THINKPHP5

下面是一个使用ThinkPHP 5实现后端逻辑的示例。我们将创建一个简单的ThinkPHP 5项目来处理生成推流和播流地址的请求。 后端部分&#xff08;ThinkPHP 5&#xff09; 1. 初始化ThinkPHP 5项目 首先&#xff0c;确保你已经安装了Composer。然后使用Composer创建一个新的Think…