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

[复制链接]
查看: 140   回复: 0

164

主题

164

帖子

939

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
939
2023-9-30 08:21:27   显示全部楼层   阅读模式  
1.jpg

1.后端Django部分

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

  1. python manage.py startapp API
复制代码

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


微信截图_20230930082143.png

  • 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. ]
复制代码

  • 用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. import { createRouter, createWebHistory,createWebHashHistory  } from 'vue-router'
  2. const routes = [
  3.     { path: '/', component: home },
  4.     { path: '/list', component: list },
  5.     { path: '/log', component: log },
  6.     { path: '/reg', component: reg },
  7.     { path: '/userList', component: userList }
  8. ]

  9. const serverUrl = window.location.origin;
  10. console.log(serverUrl);
  11. const router = createRouter({
  12.     //history: createWebHistory('/threejsP/2023/9/30'),  
  13.     history: createWebHashHistory(),
  14.     routes,
  15.     // publicPath: '/threejsP/2023/9/30/',  
  16.    
  17. })
复制代码

用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,请求中间键的,连通要攻克一下。。。下一个作品有望,要憋出来了。。。


回复

使用道具 举报

您需要登录后才可以回帖   登录 立即注册

高级模式

南通谢凡软件科技有限公司