哇，互联网技术真是越来越先进，全栈开发也就变得超级热门了。全栈可不止会前端和后端的事儿，还要了解整个网站是如何工作滴。那就让我们一起来看看最新出炉的Vue3和Django4在全栈开发中能有多厉害，还有它们的实战例子让你惊叹不已！

环境搭建

咱这就上手vue3+django4的全栈项目，得先备点儿货，所以我把python、node.js和vueCLI都拉来了。装这些跟喊朋友来家玩似的简单，只要敲敲键盘打几个字就行了

装Python：到它官网上去，有免费安装包，按照提示操作就成了。

立马下载Node.js：官网有教程，跟着做就能搞定。

安装VueCLI超容易：把npm搬回家就能搞定(就是敲个”npminstall-g@vue/cli”)。

创建Django项目

首先，咱们得弄个新的Django项目玩玩儿。这不是事儿：瞎编个数名’myproject’，Django项目搞定

启用Django超简单！只需在命令行中输个指令"django-adminstartprojectmyproject"就行了！
创建Django应用程序
接下来，来把"myapp"应用安装到你的Django项目里！别着急，首先找找你的项目文件夹，然后跟着我做：快速搞定一个名叫"myapp"的Django应用就好！
直接打开Python里的myapp程序，然后找到里面的manage.py文件按一下就好！
搞定App之后，主页就得亮相！只要在那个myproject/myproject/urls.py里面随便捣鼓几下子，就行啦～
创建Django视图
赶紧在myapp/views.py里加几个视图函数！这样别人就能开心地找到他们要的信息或页面。好的，让我简单说说怎样写出最基础的视图函数代码哈：

python

django-admin startproject myproject

从Django里，咱们用的是JsonResponse。

defhello(request):

直接丢个JSON过去，里面就两三个词：”消息”:”我们用了Vue3和Django4做全栈开发！”搞定事儿！

配置Django路由

接下来，我们需要在myapp/urls.py里设定好我的那个应用（myapp）的网站地址，这样别人不管访问什么页面都能直接找到对应的视图函数。简单点说，就像给门上了个锁，大家都能顺利进入屋子了。

fromdjango.urlsimportpath

cd myproject
python manage.py startapp myapp

from.importviews

urlpatterns=[

看这里，这条路标着’api/hello/’，就是我们的’views.hello’视图！那这个视图叫什么名字？没错，就叫’hello’。

]

from django.urls import path, include
urlpatterns = [
 path('api/', include('myapp.urls')),
]

启动Django服务器

赶紧试试那个命令，Django的服务器就能开动了！就能用API查看数据~

pythonmanage.pyrunserver

点这个链接http://127.0.0.1:8000/api/hello/看看，看到服务器发来的JSON格式数据就是没事儿了。

创建Vue项目

from django.shortcuts import render
from django.http import JsonResponse
def hello(request):
 return JsonResponse({'message': 'Hello, World!'})

开始玩Vue了快来敲这个命令，立马秒建个”myvueproject”的新Vue项目吧：

vuecreatemyvueproject

用Vue做项目就随心所欲，想要啥颜色就咋地来，看心情

配置Vue开发服务器代理

搞定Vue项目中的API调用其实很简单！只需设置下代理就能成。首先得找到vue.config.js这个文件（如果没有的话可以自己创建一个），然后把下面这段代码复制进文件里就行了：

javascript
from django.urls import path
from . import views
urlpatterns = [
 path('hello/', views.hello),
]
module.exports={

devServer:{

proxy:{

'/api':{

目标地：'http://127.0.0.1:8000'，
python manage.py runserver
    ws:true,

changeOrigin:true

}

}

}

}

创建Vue组件

快进到你的Vue项目目录src里，找到那个名叫App.vue的文件。别急别急，全部替换为这份给定的小秘方就好了！

html
vue create myvueapp

欢迎进入Vue3+Django4全栈开发！
{{message}}
exportdefault{
data(){
return{
message:”
};
},
module.exports = {
 devServer: {
     proxy: {
         '/api': {
             target: 'http://localhost:8000',
             ws: true,
             changeOrigin: true
         }
     }
 }
}

created(){
this.fetchData();
methods:{
fetchData(){
fetch(‘/api/hello/’)
得先把它转换成JSON格式，然后才能用。
  

 
{{ message }}
  


export default {
  data() {
 return {
   message: ""
 };
  },
  mounted() {
 this.fetchData();
  },
  methods: {
 fetchData() {
   fetch("/api/hello/")
     .then(response => response.json())
     .then(data => {
       this.message = data.message;
     })
     .catch(err => {
       console.log(err);
     });
 }
  }
};


.then(data=>{
this.message=data.message;
});
};
启动Vue开发服务器
使用以下命令启动Vue开发服务器：
cd myvueapp
npm run serve

npmrunserve
来看看这里,`localhost:8080`,DjangoAPI所有的详情都在这哦!
哈喽，给你分享下Vue3+Django4全栈开发步骤。首先搞定环境，接着就是建立起Django和Vue项目，记得设置路径哟。别忘做个模板和组件，还可以用AJAX拉取以后可能用到的数据！
掌握全栈开发技能，解决前端后端问题不再难！看这个实例，帮你深入理解Vue3和Django4的全栈技术。下回干活就轻松！
			    						    						    						    					    		
			    					    				    					    			
 原文链接：https://www.icz.com/technicalinformation/web/javascript/2024/04/15516.html，转载请注明出处~~~