兄弟，想学网站制作吗？那可得学好全栈技术！这个不仅让你做好前端页面，也能搞定后端代码。告诉你，Vue和Django，这俩强大的前后端框架搭配在一起，简直无敌了。跟着我，咱们用Vue3和Django4动手搞个全栈项目，我来一步步教你，从搭建环境到上线发布都包圆儿。
准备工作
首先得在电脑上装上Node.js跟Python。Node.js是运行Vue项目的利器，Python则是玩转Django的基础。接着下个npm和pip，这俩都是很棒的包管理工具。最后强烈推荐试试VSCode，真是太好用了！各种小插件让编程变得飞快且轻松。
创建Django项目
第一步就是找个安静地方坐下，敲敲键盘发几个指令而已。搞定这步后，我们的Django项目基础结构就搞定了，接下来的事自然就顺理成章！
django-admin startproject myproject
创建Django应用
在指定文件夹跑Django项目，真是轻松省心。用键盘就能快速开搞新的APP，接着就是后台代码！这还挺适合团队合作的，大家都清楚对方在干啥。
cd myproject python3 manage.py startapp myapp
配置Django数据库
在你找到那叫做settings.py的文件后，把要用到的Django数据库信息添上。就是告诉它你要连哪个库和这个库的类型。别慌，刚入门，用个轻巧的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)
只要按个迁移开始钮，我们已经帮你弄好了的数据模型就能轻易地上传到现在的数据库里。这么简单的操作，不仅解决了设置表格和字段的麻烦事儿，更保证了程序和数据库的设计始终保持同步！
创建Django视图
别急，前后端对接其实挺容易的，就在views.py里面加个API函数就行了。这样就能方便地换数据和处理逻辑了。比如说，你可以写个查用户信息的视图函数啥的。
python3 manage.py makemigrations python3 manage.py migrate
创建Vue项目
放个Vue项目到电脑，敲敲键盘，新的项目火速诞生！有了VueCLI这货，你就能享受拽炸天的Vue项目，顺便还能挑喜欢的插件玩儿。
配置Vue代理
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.config.js文件，瞅一眼那里，给Vue设个代理，把所有网页请求都转到你的Django后台就行了。搞定以后，你前端发的请求就会跑到后头去处理，然后再给你带回处理完的东西来展示。
创建Vue组件
vue create myproject
我们搞了个Users.vue小程序在src/views文件夹，看用户列表滴~接下来，加些代码就行，引入后端API，交给它负责显示和操作数据这些活儿~
配置Vue路由
把”Users.vue”改成你喜欢的网址，然后就能点进去看用户界面对？就在src/router/index.js文件里改。
module.exports = {
devServer: {
proxy: {
'^/api': {
target: 'http://localhost:8000',
changeOrigin: true
}
}
}
}
搞定！咱们用Vue3跟Django4搞了个全栈项目，超快的！这样一来，前后台连得特别好，网站速度嗖嗖的，工作效率也跟着上去了。
快来学习使用Vue和Django进行全栈开发！别忘了动手实践！如果有些问题或想法，赶紧告诉我哈~
export default { data() { return { users: [] } }, created() { this.getUsers() }, methods: { getUsers() { axios.get('/api/users') .then(response => { this.users = response.data.users }) } } }
- {{ user.name }} - {{ user.email }}
评论0