前后端django+VUE API项目搭建流程

xiefandaren

1.后端Django部分

• 类似之前一样新建一个app
  

1. python manage.py startapp API
   

复制代码

• API文件夹挂载到程序上面
  

• url创建访问路径
  

1. from django.urls import path
   
2. from app1 import views
   
3. from API.views import *
   
4. urlpatterns = [
   
5.     # path('admin/', admin.site.urls),
   
6.     path('depart/list', views.departList)
   
7. ]
   
8. urlpatterns += [
   
9.     path('api/responseJson',responseJson)
   
10. 
    
11. ]

复制代码

• 用JsonResponse返回我们的对象列表，python 叫字典
  

1. from django.shortcuts import render
   
2. from django.http import HttpResponse, JsonResponse
   
3. import json
   
4. # Create your views here.
   
5. def responseJson(request):
   
6.     result = json.dumps({'name': '老王'})
   
7.     # return HttpResponse(result)
   
8.     return JsonResponse({'name': '老王'})
   

复制代码

2.前端VUE部分

安装路由

1. npm install vue-router@4

复制代码

安装ajxs

1. npm install axios
   

复制代码

安装less

1. npm i less-loader less --save-dev

复制代码

前端测试 API接口地址

https://www.xiefansq.cn/threejsP/2023/10/1/#/

vue3路由设置里面要注意 历史模式和哈希模式 历史模式 打包后代码上服务端会有问题

下面注释得历史模式就我学习中卡了很长时间东西

1. 
   
2. import { createRouter, createWebHistory,createWebHashHistory  } from 'vue-router'
   
3. const routes = [
   
4.     { path: '/', component: home },
   
5.     { path: '/list', component: list },
   
6.     { path: '/log', component: log },
   
7.     { path: '/reg', component: reg },
   
8.     { path: '/userList', component: userList }
   
9. ]
   
10. 
    
11. const serverUrl = window.location.origin;
    
12. console.log(serverUrl);
    
13. const router = createRouter({
    
14.     //history: createWebHistory('/threejsP/2023/9/30'),  
    
15.     history: createWebHashHistory(),
    
16.     routes,
    
17.     // publicPath: '/threejsP/2023/9/30/',  
    
18.    
    
19. })
    

复制代码

用Python框架django写后端API接口，使用postman调试测试接口，深入学了一下路由与vue3框架混合书写流程，搭建了一个对接接口的，基础班的测试小样板案例我发现网上现有的免费Python教程，有点滞后市场，怎么还在讲一体混合开发不应该直接上来肛，前后端分离嘛。。。他们这个开发案例还是用django搞的路由，一些遍历的语法批量现实，调用django的｛%%｝这种形式标签我人都傻了，这特么不是现在vue干的事情嘛。。。不过特么的后端写路由，确实简单好多，你做功能时候就会规划URL。。。现有，关于django和vue的，前后端分离的开发教程，网上非常稀少。。。但实际工作好些后端似乎就是，光写结构，给你那个json数据了，还有数据的处理。。。渲染显示事情，基本都给到vue框架，前端来做。。。就是django落后现有免费课程，使用vue，竟然还是cdn方式用，然后还有用什么juquery和bootstrap框架。。。这些可能15年左右流行框架我就没有经历学过。。。总之还好深入学了前端，要是直接看免费django课，就直接学习跑偏。。。慢慢学习体验django后就发现，django尤其混合开发介入，HTML部分跟vue很像很像，还有Python比JAVA好很多，就是每行代码结尾，不要写什么分号，也不用定制数据类型，直接夸夸往上赋值就行了，跟js书写习惯相近，书写形式也是较为懒散，所以前端要往后端技术栈扩散，django非常合适。。，要是我把这套学通了，再去结合threejs。。。emmm可以做很精彩东西，现在就是还有ajxs，请求中间键的，连通要攻克一下。。。下一个作品有望，要憋出来了。。。