[已解决]想学习Vue+Django

Crayonl

想学习Django跟vue框架,做前后端分离.有什么推荐的书或者视频吗?

最佳答案

月排行榜 / 总排行榜

不二如是

昨天 12:22

vue直接看官方文档

跳转到最佳答案楼层

FishC

想学习Vue+Django做前后端分离？这个方向很棒！以下是我推荐的资源，分为书籍和视频两类：

Django 学习资源：

• 书籍推荐：
  《Django企业开发实战》 - 国内实战派书籍，适合快速上手项目。
  《Django for APIs》 - 专注用Django构建REST API，前后端分离必看。
• 视频推荐：
  在B站搜索「Django REST framework教程」 - 多个中文系列教程（如莫烦Python）。
  慕课网《Django高级实战》 - 含JWT认证、API设计等分离开发核心内容。
  

Vue 学习资源：

• 书籍推荐：
  《Vue.js设计与实现》 - 深入原理，适合打基础。
  《Vue.js项目实战》 - 包含电商平台等实战案例。
• 视频推荐：
  B站搜索「Vue3+TypeScript教程」 - 推荐技术胖或尚硅谷的系列（选新版本）。
  Vue官方教程（vuejs.org） - 免费且权威，务必过一遍。
  

前后端整合关键点：
1. Django侧：
- 用Django REST Framework写API接口
- 跨域问题用django-cors-headers解决
- 示例代码：

1. 
   
2. # views.py
   
3. from rest_framework.views import APIView
   
4. class UserAPI(APIView):
   
5.     def get(self, request):
   
6.         return Response({"data": "Hello Vue!"})
   

复制代码

2. Vue侧：
- 用axios调用Django接口
- 示例代码：

1. 
   
2. // Vue组件中
   
3. axios.get('[url=http://your-django-api/users/')]http://your-django-api/users/')[/url]
   
4.   .then(response => {
   
5.     this.data = response.data;
   
6.   })
   

复制代码

学习路线建议：
1. 先掌握Django基础（模型/视图/路由）
2. 再学Django REST Framework（序列化器/视图集）
3. 同步学习Vue基础（组件/路由/Vuex）
4. 最后用axios对接两者

避坑提示：开发时启动两个服务！
- Django运行在localhost:8000
- Vue运行在localhost:8080
用npm run serve和python manage.py runserver同时启动

坚持动手写项目，比如「博客系统+管理后台」，2个月就能上手全栈开发！有具体问题随时来问~

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

不二如是

vue直接看官方文档