全能开发者要掌握前端与后端技能！今天教大家怎么用Vue3与Django4搭起一个全栈应用，还有一些简单的代码例子帮你上手。首先说说Vue3，这个Vue.js的新版，速度快、体积小、开发起来爽翻天！它还增加了Composition API这个神器，让你能更轻松地组织、重用组件，而且对TypeScript的支持也更给力，代码质量更高。再来说说Django4，这可是个Python写的高大上Web框架，遵循MTV（模型-模板-视图）设计模式，数据库操作和路由管理功能超强，扩展性好、安全度高。
创建Django项目及设置数据库
首先，咱们得用命令行搞点事情，把那个叫”UserManagement”的Django项目给建出来，再设定好MySQL数据库。这样，咱们就可以轻松搞定Django项目和数据库了。
创建用户相关应用
首先，得在已有的Django项目里新添一个叫”user”的小程序，它主要用来搞一些跟用户有关的事，比如注册啦、登陆，还有管理他们的信息之类的东西。
注册用户应用到配置文件
$ django-admin startproject UserManagement $ cd UserManagement $ python manage.py migrate
首先得把刚做的”user”应用加到Django项目的设置里面去。找到UserManagement/settings.py文件，在已经有的INSTALLED_APPS列表里加上这个新应用就行了。
$ python manage.py startapp user
定义用户数据模型
咱们要在user/models.py里搞个叫做User的东西，它包含用户名、密码之类的东东。这个数据模型会跟我们的数据库搭档，用来存放那些关于用户的信息~
INSTALLED_APPS = [
...
'user',
...
]
创建用户相关视图
你要做的就是把user/views.py里的代码改写成处理用户注册、登入还有修改个人资料等功能的视图函数！这样就能实现前后台的交互了。
from django.db import models
class User(models.Model):
username = models.CharField(max_length=120)
password = models.CharField(max_length=120)
使用Vue3创建应用实例
在Vue3里，用createApp这个函数来搭建你的Vue应用，然后用setup函数搞定组件的逻辑。接下来，在main.js文件里敲下代码，把Vue应用给启动起来！
from django.shortcuts import render
from django.http import JsonResponse
def register(request):
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
# 在这里进行用户注册逻辑
return JsonResponse({'message': '注册成功'})
else:
return render(request, 'register.html')
def login(request):
if request.method == 'POST':
username = request.POST.get('username')
password = request.POST.get('password')
# 在这里进行用户登录逻辑
return JsonResponse({'message': '登录成功'})
else:
return render(request, 'login.html')
def profile(request):
# 在这里进行用户个人信息管理逻辑
return render(request, 'profile.html')
编写根组件及路由管理
在src那建个叫App.vue的文件当主页，再加个router-view，这样就能显示各种页面。然后用Vue Router控制这些页面的切换，保证它们能顺畅地来回跳转和显示。
编写具体页面视图组件
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
在这个过程中，为了搞定用户注册、登录以及个人信息管理这几个环节，得先在views文件夹里头新建好Register.vue、Login.vue和Profile.vue这3个文件。别小看它们，它们可是咱们页面交互的关键！
export default { }
使用Axios发送HTTP请求
要跟后端API交流，得用Axios把HTTP请求传过去。用Axios给后端发个POST请求，然后拿着从后端回来的数据，搞定前后端的数据互动就行了。
挂载Vue应用实例到DOM元素上
$ npm install vue-router@4
首先得在main.js文件里搞定Vue的应用和路由，把它们挂载到DOM元素上。然后用app.use(router)这招装好Vue Router插件，再用app.mount(‘#app’)这个方法让Vue应用安家落户到你指定的DOM元素那儿就行了。
以下就是用Vue3跟Django4搭个全栈应用的大概步骤！如果你需要的话，还能继续美化这个应用，添加些别的功能或者提高运行速度啥的。希望这篇文章能帮你轻松跨入全栈开发门槛，学会前后端技术并运用到实际项目里去。
import { createRouter, createWebHistory } from 'vue-router'
import Register from './views/Register.vue'
import Login from './views/Login.vue'
import Profile from './views/Profile.vue'
const routes = [
{ path: '/register', component: Register },
{ path: '/login', component: Login },
{ path: '/profile', component: Profile },
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
评论0