正文

学会Django+Vue.js，打造全栈项目实例教程解析

/0 浏览量
0725

在当今的Web开发领域，全栈开发者的需求日益增长。Django和Vue.js是两个非常流行的框架，分别用于后端和前端开发。学会使用这两个框架，你可以轻松构建出功能完善的全栈项目。本文将为你提供一个实例教程，带你一步步学会如何使用Django和Vue.js打造一个全栈项目。

一、准备工作

在开始之前，请确保你的开发环境已经准备好以下工具：

  • Python 3.x
  • Django 2.x
  • Node.js
  • npm（Node.js的包管理器）
  • Vue CLI（Vue.js的命令行工具）

二、创建Django项目

  1. 安装Django：

    pip install django

  2. 创建一个新的Django项目：

    django-admin startproject myproject

  3. 进入项目目录：

    cd myproject

  4. 创建一个应用：

    python manage.py startapp myapp

  5. 配置数据库（如SQLite）： 在myproject/settings.py文件中，找到DATABASES配置项，并设置如下：

    DATABASES = {
   'default': {
       'ENGINE': 'django.db.backends.sqlite3',
       'NAME': BASE_DIR / 'db.sqlite3',
   }
}

  6. 运行数据库迁移：

    python manage.py makemigrations
python manage.py migrate

  7. 启动Django服务器：

    python manage.py runserver

此时，你的Django后端已经准备好了。

三、创建Vue.js项目

  1. 安装Vue CLI：

    npm install -g @vue/cli

  2. 创建一个新的Vue.js项目：

    vue create myvueapp

  3. 进入项目目录：

    cd myvueapp

  4. 安装Vue Router（用于页面路由）：

    npm install vue-router

  5. 创建路由配置文件src/router/index.js： “`javascript import Vue from ‘vue’ import Router from ‘vue-router’ import Home from ‘../views/Home.vue’

Vue.use(Router)

export default new Router({

 mode: 'history',
 routes: [
   {
     path: '/',
     name: 'home',
     component: Home
   }
 ]

})


6. 在`src/components`目录下创建`Home.vue`组件：
   ```vue
   <template>
     <div>
       <h1>Welcome to My Project</h1>
     </div>
   </template>

   <script>
   export default {
     name: 'Home'
   }
   </script>
  1. 运行Vue.js项目： 
    
npm run serve

此时，你的Vue.js前端已经准备好了。

四、整合Django和Vue.js

  1. 在Django项目中创建一个名为templates的目录，并在该目录下创建一个名为index.html的文件。这个文件将作为你的前端入口页面。

  2. 在index.html中，引入Vue.js和Vue Router：

    <!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>My Project</title>
 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.js"></script>
</head>
<body>
 <div id="app"></div>
 <script>
   const router = new VueRouter({
     routes: [
       {
         path: '/',
         name: 'home',
         component: () => import('../components/Home.vue')
       }
     ]
   })


   const app = new Vue({
     router
   }).$mount('#app')
 </script>
</body>
</html>

  3. 修改Django项目中的urls.py文件，添加前端路由： “`python from django.contrib import admin from django.urls import path from . import views

urlpatterns = [

   path('admin/', admin.site.urls),
   path('', views.index, name='index'),

]


4. 在`myapp/views.py`中创建一个`index`视图：
   ```python
   from django.shortcuts import render

   def index(request):
       return render(request, 'index.html')

现在，当你访问Django服务器的根URL时，你应该能看到由Vue.js渲染的页面。

五、全栈项目实例教程解析

以上步骤为你提供了一个全栈项目的框架。以下是一些实例教程解析：

1. 后端API开发

在Django项目中，你可以使用Django REST framework来创建RESTful API。以下是一个简单的例子：

  1. 安装Django REST framework：

    pip install djangorestframework

  2. 在myapp应用中创建一个名为serializers.py的文件，定义一个序列化器： “`python from rest_framework import serializers from .models import MyModel

class MyModelSerializer(serializers.ModelSerializer):

   class Meta:
       model = MyModel
       fields = '__all__'


3. 在`myapp/models.py`中创建一个模型：
   ```python
   from django.db import models

   class MyModel(models.Model):
       name = models.CharField(max_length=100)
       description = models.TextField()
  1. 在myapp/views.py中创建一个视图： “`python from rest_framework import generics from .models import MyModel from .serializers import MyModelSerializer

class MyModelListCreateAPIView(generics.ListCreateAPIView):

   queryset = MyModel.objects.all()
   serializer_class = MyModelSerializer


5. 在Django项目的`urls.py`中添加路由：
   ```python
   from django.urls import path
   from . import views

   urlpatterns = [
       path('admin/', admin.site.urls),
       path('api/mymodels/', views.MyModelListCreateAPIView.as_view(), name='mymodels-list-create'),
   ]

现在，你可以通过Django REST framework提供的API来访问和管理MyModel数据。

2. 前端页面开发

在Vue.js项目中，你可以使用Vue Router来管理页面路由，并使用Vue组件来构建页面。以下是一个简单的例子：

  1. 在src/components目录下创建一个名为List.vue的组件： “`vue 


2. 在`src/router/index.js`中添加路由：
   ```javascript
   import Vue from 'vue'
   import Router from 'vue-router'
   import List from '../components/List.vue'

   Vue.use(Router)

   export default new Router({
     mode: 'history',
     routes: [
       {
         path: '/',
         name: 'home',
         component: () => import('../components/Home.vue')
       },
       {
         path: '/list',
         name: 'list',
         component: List
       }
     ]
   })
  1. 在src/App.vue中添加导航链接： “`vue

“`

现在，当你访问Vue.js项目的/list路由时，你应该能看到从Django后端获取的MyModel数据列表。

通过以上步骤，你已经学会如何使用Django和Vue.js打造一个全栈项目。当然，这只是一个简单的例子，实际开发中可能需要处理更复杂的需求和问题。但希望这个教程能为你提供一个良好的起点。

-- 展开阅读全文 --