Vue3+Django4全新技术实战全栈项目(完结)

用户20505004985
104 阅读4分钟

Vue3+Django4全新技术实战全栈项目(完结)

Vue3+Django4全新技术实战全栈项目(完结)

Vue3+Django4全新技术实战全栈项目

随着互联网技术的快速发展，前端和后端技术的更新换代也日益加速。近年来，Vue3和Django4作为前端和后端技术的佼佼者，逐渐成为了许多企业和开发者首选的技术方案。本文将介绍如何使用Vue3和Django4搭建一个全栈项目，帮助读者快速掌握这两门技术。

1. 环境准备

1.1 安装Node.js

Vue3是一个基于JavaScript的前端框架，因此需要安装Node.js环境。访问Node.js官网（nodejs.org/）下载并安装最新版本。

1.2 安装Python3

Django4是一个基于Python的后端框架，因此需要安装Python3环境。访问Python官网（www.python.org/）下载并安装最新版本。

1.3 安装Vue CLI

Vue CLI是Vue官方提供的一个脚手架工具，用于快速生成Vue项目。在命令行中执行以下命令安装Vue CLI：

npm install -g @vue/cli

1.4 安装Django

在命令行中执行以下命令安装Django：

pip install django

2. 创建项目

2.1 创建Vue3项目

在命令行中执行以下命令创建一个名为vue3_project的Vue3项目：

vue create vue3_project

按照提示选择Vue3版本和其他配置项。

2.2 创建Django4项目

在命令行中执行以下命令创建一个名为django4_project的Django4项目：

django-admin startproject django4_project

进入项目目录，创建一个名为app的应用：

cd django4_project
python manage.py startapp app

3. 配置数据库

在
django4_project/django4_project/settings.py中配置数据库连接信息，这里以MySQL为例：

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'your_database_name',
        'USER': 'your_database_user',
        'PASSWORD': 'your_database_password',
        'HOST': 'your_database_host',
        'PORT': 'your_database_port',
    }
}

根据实际情况填写数据库连接信息。

4. 创建模型

在app/models.py中创建模型：

from django.db import models

class ExampleModel(models.Model):
    name = models.CharField(max_length=100)
    age = models.IntegerField()

执行以下命令生成数据库表：

python manage.py makemigrations
python manage.py migrate

5. 编写API

在app/views.py中编写一个简单的API：

from django.http import JsonResponse
from .models import ExampleModel

def example_api(request):
    if request.method == 'GET':
        examples = ExampleModel.objects.all()
        data = [{'name': example.name, 'age': example.age} for example in examples]
        return JsonResponse(data, safe=False)

在django4_project/urls.py中添加API路由：

from django.contrib import admin
from django.urls import path, include

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

在app/urls.py中添加具体的API路径：

from django.urls import path
from .views import example_api

urlpatterns = [
    path('example/', example_api),
]

6. 编写Vue3组件

在vue3_project/src目录下创建一个名为ExampleComponent.vue的组件：

<template>
  <div>
    <h1>示例组件</h1>
    <ul>
      <li v-for="item in exampleData" :key="item.id">{{ item.name }} - {{ item.age }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      exampleData: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      axios.get('http://localhost:8000/api/example/')
        .then(response => {
          this.exampleData = response.data;
        })
        .catch(error => {
          console.error(error);
        });
    },
  },
};
</script>

在vue3_project/src/App.vue中引入并使用该组件：

<template>
  <div id="app">
    <ExampleComponent />
  </div>
</template>

<script>
import ExampleComponent from './components/ExampleComponent.vue';

export default {
  components: {
    ExampleComponent,
  },
};


在vue3_project/src/main.js中注册ExampleComponent组件：

import { createApp } from 'vue' import App from './App.vue' import ExampleComponent from './components/ExampleComponent.vue'

const app = createApp(App) app.component('ExampleComponent', ExampleComponent) app.mount('#app')


# 7. 运行项目

# 7.1 运行Django后端

在命令行中进入django4_project目录，运行Django开发服务器：

python manage.py runserver


默认情况下，Django开发服务器会在http://127.0.0.1:8000/上运行。

# 7.2 运行Vue3前端

在命令行中进入vue3_project目录，运行Vue开发服务器：

npm run serve


默认情况下，Vue开发服务器会在http://localhost:8080/上运行。

# 8. 访问前端页面

在浏览器中访问http://localhost:8080/，你应该能够看到Vue3前端页面，并且能够看到从Django后端获取的数据显示在页面上。

# 9. 构建和部署

# 9.1 构建Vue3项目

在命令行中进入vue3_project目录，构建Vue项目：

npm run build


这将生成一个dist目录，其中包含静态文件，可以部署到任何静态文件服务器上。

# 9.2 部署Django项目

将Django项目部署到服务器上，可以使用Gunicorn作为WSGI服务器，配合Nginx作为反向代理服务器。具体的部署步骤可能会根据服务器环境和个人偏好有所不同。

# 10. 结束语

通过本文的介绍，你已经掌握了如何使用Vue3和Django4搭建一个全栈项目。这个项目涵盖了前端和后端的开发，以及如何将两者结合起来。你可以在此基础上继续深入学习Vue3和Django4的更多高级功能，以便在实际项目中更加得心应手。
avatar
文章
阅读
粉丝