首页 >web前端 >Vue.js >一步一步：Vue3+Django4全栈项目实现步骤

一步一步：Vue3+Django4全栈项目实现步骤

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB原创: 2023-09-10 15:12:111531浏览

随着Web开发的不断发展，全栈开发逐渐成为了趋势。Vue和Django作为前后端开发中最受欢迎的技术栈之一，他们的组合也是十分强大的。在本文中，我们将一步一步地介绍如何使用Vue3和Django4实现一个全栈项目。

准备工作
首先，我们需要在本地安装Node.js和Python，以及相应的包管理器npm和pip。同时，我们也需要一个集成开发环境(IDE)，比如VS Code。
创建Django项目
打开终端，进入你希望创建项目的目录，执行以下命令来创建Django项目：
```
django-admin startproject myproject
```
创建Django应用
进入项目目录，执行以下命令来创建一个Django应用：
```
cd myproject
python3 manage.py startapp myapp
```

配置Django数据库
打开settings.py文件，配置数据库信息，比如使用SQLite：

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

创建数据库模型
在models.py文件中定义你的数据库模型。比如，我们创建一个User模型：

from django.db import models

class User(models.Model):
 name = models.CharField(max_length=100)
 email = models.EmailField()
 password = models.CharField(max_length=100)

执行数据库迁移
运行以下命令来执行数据库迁移：
```
python3 manage.py makemigrations
python3 manage.py migrate
```

创建Django视图
在views.py文件中编写你的Django视图函数。比如，我们创建一个获取所有用户的视图函数：

from django.shortcuts import render
from django.http import JsonResponse
from .models import User

def get_users(request):
 users = User.objects.all()
 data = [{'name': user.name, 'email': user.email} for user in users]
 return JsonResponse({'users': data})

创建Vue项目
在终端中，进入你希望创建Vue项目的目录，执行以下命令来创建Vue项目：
```
vue create myproject
```

配置Vue代理
在myproject/vue.config.js文件中配置Vue的代理，将请求代理到Django后端：

module.exports = {
  devServer: {
 proxy: {
   '^/api': {
     target: 'http://localhost:8000',
     changeOrigin: true
   }
 }
  }
}

创建Vue组件
在src/views目录下创建一个Users.vue组件，用于显示用户列表：

<template>
  <div>
 <ul>
   <li v-for="user in users" :key="user.name">
     {{ user.name }} - {{ user.email }}
   </li>
 </ul>
  </div>
</template>

<script>
export default {
  data() {
 return {
   users: []
 }
  },
  created() {
 this.getUsers()
  },
  methods: {
 getUsers() {
   axios.get('/api/users')
     .then(response => {
       this.users = response.data.users
     })
 }
  }
}
</script>

配置Vue路由
在src/router/index.js文件中配置Vue的路由，将Users.vue组件作为一个路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Users from '../views/Users.vue'

Vue.use(VueRouter)

const routes = [
  {
 path: '/',
 name: 'Users',
 component: Users
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

运行项目
分别在Django和Vue的根目录下执行以下命令来运行项目：
```
python3 manage.py runserver
npm run serve
```

现在，你可以在浏览器中访问http://localhost:8080来查看你的全栈项目了。Users组件将从Django后端获取数据，并显示在页面上。

总结：
通过上述的步骤，我们成功地实现了一个使用Vue3和Django4的全栈项目。通过将前端和后端的开发整合在一起，我们可以更高效地开发出功能强大的Web应用程序。希望本文对你有所帮助，让你更好地熟悉Vue和Django的全栈开发过程。

以上是一步一步：Vue3+Django4全栈项目实现步骤的详细内容。更多信息请关注PHP中文网其他相关文章！

Python django node.js npm pip 栈 JS ide sqlite 数据库 http

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：构建全栈应用：Vue3+Django4实战案例下一篇：掌握Vue 3中响应式原理，开发更高效的前端应用

查看更多