基于 Vue + Django + MySQL 实现个人博客/CMS系统

靠近彗星2025-04-02 14:45

目录

[1. 环境搭建与项目初始化](#1. 环境搭建与项目初始化)

后端 (Django)

[2. 数据库模型设计](#2. 数据库模型设计)

用户认证模型 (Django Auth)

文章模型 (models.py)

全文索引优化

[3. 后端API开发 (Django REST Framework)](#3. 后端API开发 (Django REST Framework))

用户注册/登录

文章发布与搜索

[4. 前端实现 (Vue 3)](#4. 前端实现 (Vue 3))

项目初始化

核心功能实现

[5. 访问统计实现](#5. 访问统计实现)

后端中间件记录PV/UV

[6. 部署与优化](#6. 部署与优化)

关键问题解决

1. 环境搭建与项目初始化

后端 (Django)

  1. 创建Django项目

    bash 复制代码 
    django-admin startproject blog_backend
cd blog_backend
python manage.py startapp blog

  2. 安装依赖

    bash 复制代码 
    pip install django djangorestframework django-cors-headers djangorestframework-simplejwt mysqlclient

  3. 配置MySQL数据库

    修改 settings.py：

    python 复制代码 
    DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'blog_db',
        'USER': 'root',
        'PASSWORD': 'your_password',
        'HOST': 'localhost',
        'PORT': '3306',
    }
}

  4. 配置DRF和JWT

    修改 settings.py：

python 复制代码 
INSTALLED_APPS = [
    # ...
    'rest_framework',
    'corsheaders',
    'blog',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    # ...
]

CORS_ALLOW_ALL_ORIGINS = True  # 开发阶段允许所有跨域

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    )
}

2. 数据库模型设计

用户认证模型 (Django Auth)

直接使用Django内置的 User 模型，无需额外设计。

文章模型 (models.py)

python 复制代码 
from django.db import models
from django.contrib.auth.models import User

class Article(models.Model):
    title = models.CharField(max_length=200)
    content = models.TextField()  # 存储Markdown或HTML内容
    author = models.ForeignKey(User, on_delete=models.CASCADE)
    category = models.CharField(max_length=50)
    tags = models.CharField(max_length=100)  # 逗号分隔的标签，如 "Python,Web"
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.title

class Comment(models.Model):
    article = models.ForeignKey(Article, on_delete=models.CASCADE)
    user = models.ForeignKey(User, on_delete=models.CASCADE)
    content = models.TextField()
    parent_comment = models.ForeignKey('self', on_delete=models.CASCADE, null=True, blank=True)  # 树形评论
    created_at = models.DateTimeField(auto_now_add=True)

全文索引优化

在MySQL中为 Article 表添加全文索引：

sql 复制代码 
ALTER TABLE blog_article ADD FULLTEXT(title, content);

3. 后端API开发 (Django REST Framework)

用户注册/登录

  1. 序列化器 (serializers.py)

    python 复制代码 
    from rest_framework import serializers
from django.contrib.auth.models import User

class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('id', 'username', 'email', 'password')
        extra_kwargs = {'password': {'write_only': True}}

    def create(self, validated_data):
        user = User.objects.create_user(**validated_data)
        return user

  2. 视图 (views.py)

    python 复制代码 
    from rest_framework.views import APIView
from rest_framework.response import Response
from rest_framework_simplejwt.tokens import RefreshToken

class RegisterView(APIView):
    def post(self, request):
        serializer = UserSerializer(data=request.data)
        if serializer.is_valid():
            user = serializer.save()
            refresh = RefreshToken.for_user(user)
            return Response({
                'refresh': str(refresh),
                'access': str(refresh.access_token),
            })
        return Response(serializer.errors, status=400)

文章发布与搜索

  1. 文章序列化器

    python 复制代码 
    class ArticleSerializer(serializers.ModelSerializer):
    class Meta:
        model = Article
        fields = '__all__'

  2. 文章搜索接口

    使用Django ORM的全文搜索：

    python 复制代码 
    class ArticleSearchView(APIView):
    def get(self, request):
        query = request.query_params.get('q', '')
        # MySQL全文搜索语法
        articles = Article.objects.raw(
            "SELECT * FROM blog_article WHERE MATCH(title, content) AGAINST (%s)",
            [query]
        )
        serializer = ArticleSerializer(articles, many=True)
        return Response(serializer.data)

4. 前端实现 (Vue 3)

项目初始化

bash 复制代码 
npm create vue@latest blog_frontend
cd blog_frontend
npm install axios vue-router vuex quill @vueuse/core

核心功能实现

  1. Markdown渲染

    使用 marked 或 vue-markdown 库：

    html 复制代码 
    <template>
  <div v-html="compiledMarkdown"></div>
</template>

<script setup>
import { marked } from 'marked'
const compiledMarkdown = marked(props.content)
</script>

  2. 富文本编辑器集成 (Quill)

    html 复制代码 
    <template>
  <div ref="editor"></div>
</template>

<script setup>
import Quill from 'quill'
import 'quill/dist/quill.snow.css'

const editor = ref(null)
onMounted(() => {
  const quill = new Quill(editor.value, {
    theme: 'snow',
    modules: { toolbar: true }
  })
})
</script>

  3. 动态路由SEO优化

    使用 vue-router 和预渲染插件 prerender-spa-plugin：

    javascript 复制代码 
    // vue.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin')

module.exports = {
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: ['/', '/articles', '/about'],  // 预渲染的路由
      })
    ]
  }
}

5. 访问统计实现

后端中间件记录PV/UV

  1. 创建访问记录模型

    python 复制代码 
    class AccessLog(models.Model):
    ip = models.CharField(max_length=50)
    path = models.CharField(max_length=200)
    user = models.ForeignKey(User, null=True, on_delete=models.SET_NULL)
    created_at = models.DateTimeField(auto_now_add=True)

  2. 中间件统计访问量

    python 复制代码 
    class AccessLogMiddleware:
    def __init__(self, get_response):
        self.get_response = get_response

    def __call__(self, request):
        response = self.get_response(request)
        AccessLog.objects.create(
            ip=request.META.get('REMOTE_ADDR'),
            path=request.path,
            user=request.user if request.user.is_authenticated else None
        )
        return response

6. 部署与优化

  1. MySQL全文索引查询优化

    确保MySQL版本 >= 5.6，并配置索引：

    sql 复制代码 
    CREATE FULLTEXT INDEX ft_idx ON blog_article(title, content);

  2. Nginx配置反向代理

    sql 复制代码 
    server {
    listen 80;
    server_name your_domain.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;
    }
}

  3. 性能优化

    • 使用 django-debug-toolbar 分析查询

    • Vue路由懒加载：

      javascript 复制代码 
      const routes = [
  { path: '/article/:id', component: () => import('./views/ArticleDetail.vue') }
]

关键问题解决

  1. 跨域配置

    使用 django-cors-headers，确保前端能访问后端API。

  2. 树形评论渲染

    前端递归组件实现：

    html 复制代码 
    <template>
  <div v-for="comment in comments" :key="comment.id">
    <div>{{ comment.content }}</div>
    <CommentTree v-if="comment.replies" :comments="comment.replies"/>
  </div>
</template>

  3. JWT Token自动刷新

    使用Axios拦截器：

    javascript 复制代码 
    axios.interceptors.response.use(response => response, error => {
  if (error.response.status === 401) {
    return refreshToken().then(() => {
      return axios(error.config)
    })
  }
  return Promise.reject(error)
})

通过以上步骤，你可以逐步搭建一个功能完整的博客系统。建议先从基础功能（如文章发布）开始，逐步迭代添加评论、搜索等模块。

相关推荐
Jackson@ML1 小时前
如何快速高效学习Python？
开发语言·python
傻啦嘿哟1 小时前
Python正则表达式：用“模式密码“解锁复杂字符串
linux·数据库·mysql
sunbyte2 小时前
Tailwind CSS 初学者入门指南：项目集成，主要变更内容！
前端·css
UFIT2 小时前
Python函数与模块笔记
开发语言·python
言之。2 小时前
别学了，打会王者吧
java·python·mysql·容器·spark·php·html5
可爱的秋秋啊2 小时前
vue3，element ui框架中为el-table表格实现自动滚动,并实现表头汇总数据
前端·vue.js·笔记·elementui
一夜枫林2 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
YiSLWLL3 小时前
使用Tauri 2.3.1+Leptos 0.7.8开发桌面小程序汇总
python·rust·sqlite·matplotlib·visual studio code
花酒锄作田3 小时前
[flask]自定义请求日志
python·flask
IT瘾君4 小时前
JavaWeb：Html&Css
前端·html
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑03我决定放弃搞 Java 了04Coze扣子平台完整体验和实践（附国内和国际版对比）05YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】06DeepSeek各版本说明与优缺点分析07yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记08苍穹外卖面试总结09如何在WPS和Word/Excel中直接使用DeepSeek功能10【2025年最新】OpenWrt 更换国内源的指南（图形界面版)