正文

新手必看！Django+Vue.js实战项目，轻松入门全栈开发

/0 浏览量
0725

引言

在数字化时代，全栈开发已成为一种趋势。Django 和 Vue.js 是两个非常流行的框架，分别用于后端和前端开发。本文将带你通过一个实战项目，轻松入门全栈开发。

Django 框架简介

Django 是一个高级的 Python Web 框架，遵循 MVT（模型-视图-模板）的设计模式。它可以帮助开发者快速构建高性能的 Web 应用程序。

Django 的特点

  • 高效率：Django 的设计哲学是“快速开发，但不牺牲质量”。
  • 安全性：Django 内置了许多安全机制，如 CSRF 保护、XSS 防护等。
  • 易用性：Django 提供了丰富的官方文档和社区支持。

Vue.js 框架简介

Vue.js 是一个渐进式的前端 JavaScript 框架，它允许开发者以简洁的方式构建用户界面。Vue.js 适用于构建任何大小的应用程序，从简单的个人博客到大型企业级应用。

Vue.js 的特点

  • 易于上手：Vue.js 的语法简单，易于学习和使用。
  • 组件化：Vue.js 支持组件化开发，提高代码的可维护性。
  • 响应式：Vue.js 提供了响应式数据绑定机制，简化了数据管理。

实战项目：博客系统

以下将介绍一个基于 Django 和 Vue.js 的博客系统实战项目。

后端：Django

  1. 创建项目：使用 Django 创建一个新的项目。
django-admin startproject blog_project
  1. 创建应用：在项目中创建一个名为 blog 的应用。
python manage.py startapp blog
  1. 配置数据库：在 settings.py 文件中配置数据库连接信息。
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': os.path.join(BASE_DIR, 'db.sqlite3'),
    }
}
  1. 定义模型：在 blog/models.py 文件中定义博客文章模型。
from django.db import models

class Article(models.Model):
    title = models.CharField(max_length=100)
    content = models.TextField()
    created_time = models.DateTimeField(auto_now_add=True)
    last_modified_time = models.DateTimeField(auto_now=True)
  1. 创建表：运行以下命令创建数据库表。
python manage.py makemigrations
python manage.py migrate
  1. 创建序列化器：在 blog/serializers.py 文件中定义序列化器。
from rest_framework import serializers
from .models import Article

class ArticleSerializer(serializers.ModelSerializer):
    class Meta:
        model = Article
        fields = '__all__'
  1. 创建 API 视图：在 blog/views.py 文件中创建 API 视图。
from rest_framework import viewsets
from .models import Article
from .serializers import ArticleSerializer

class ArticleViewSet(viewsets.ModelViewSet):
    queryset = Article.objects.all()
    serializer_class = ArticleSerializer
  1. 配置 URL：在 blog/urls.py 文件中配置 URL 路由。
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from .views import ArticleViewSet

router = DefaultRouter()
router.register(r'articles', ArticleViewSet)

urlpatterns = [
    path('', include(router.urls)),
]
  1. 配置全局 URL：在 blog_project/urls.py 文件中配置全局 URL 路由。
from django.contrib import admin
from django.urls import path, include

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

前端：Vue.js

  1. 创建项目：使用 Vue CLI 创建一个新的项目。
vue create blog-client
  1. 安装依赖：在项目目录中安装依赖。
cd blog-client
npm install axios vue-router
  1. 定义组件：在 src/components 目录中创建 ArticleList.vue 组件。
<template>
  <div>
    <h1>博客文章列表</h1>
    <ul>
      <li v-for="article in articles" :key="article.id">
        <router-link :to="{ name: 'article-detail', params: { id: article.id }}">{{ article.title }}</router-link>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      articles: []
    }
  },
  created() {
    this.fetchArticles()
  },
  methods: {
    fetchArticles() {
      axios.get('/api/articles/')
        .then(response => {
          this.articles = response.data
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>
  1. 配置路由：在 src/router/index.js 文件中配置路由。
import Vue from 'vue'
import Router from 'vue-router'
import ArticleList from '../components/ArticleList'
import ArticleDetail from '../components/ArticleDetail'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'article-list',
      component: ArticleList
    },
    {
      path: '/article/:id',
      name: 'article-detail',
      component: ArticleDetail
    }
  ]
})
  1. 创建组件：在 src/components 目录中创建 ArticleDetail.vue 组件。
<template>
  <div>
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: {}
    }
  },
  created() {
    this.fetchArticle()
  },
  methods: {
    fetchArticle() {
      const id = this.$route.params.id
      axios.get(`/api/articles/${id}/`)
        .then(response => {
          this.article = response.data
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>
  1. 运行项目：启动 Django 后端和 Vue.js 前端。
# 启动 Django 后端
python manage.py runserver

# 启动 Vue.js 前端
cd blog-client
npm run serve

现在，你可以通过访问 http://127.0.0.1:8000/ 来预览博客系统了。

总结

通过本文的实战项目，你学会了如何使用 Django 和 Vue.js 搭建一个简单的博客系统。这是一个入门全栈开发的良好起点。在实际项目中，你还可以添加更多功能，如用户认证、评论系统等。祝你在全栈开发的道路上越走越远！

-- 展开阅读全文 --