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

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

268

主题

268

帖子

1509

积分

管理员

Rank: 9Rank: 9Rank: 9

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

1.后端Django部分

  • 类似之前一样新建一个app
python manage.py startapp API
  • API文件夹挂载到程序上面


微信截图_20230930082143.png

  • url创建访问路径

from django.urls import path
from app1 import views
from API.views import *
urlpatterns = [
    # path('admin/', admin.site.urls),
    path('depart/list', views.departList)
]
urlpatterns += [
    path('api/responseJson',responseJson)

]
  • 用JsonResponse返回我们的对象列表,python 叫字典
from django.shortcuts import render
from django.http import HttpResponse, JsonResponse
import json
# Create your views here.
def responseJson(request):
    result = json.dumps({'name': '老王'})
    # return HttpResponse(result)
    return JsonResponse({'name': '老王'})
2.前端VUE部分

安装路由
npm install vue-router@4
安装ajxs
npm install axios

安装less
npm i less-loader less --save-dev
前端测试 API接口地址

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

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

下面注释得历史模式就我学习中卡了很长时间东西
import { createRouter, createWebHistory,createWebHashHistory  } from 'vue-router'
const routes = [
    { path: '/', component: home },
    { path: '/list', component: list },
    { path: '/log', component: log },
    { path: '/reg', component: reg },
    { path: '/userList', component: userList }
]

const serverUrl = window.location.origin; 
console.log(serverUrl);
const router = createRouter({
    //history: createWebHistory('/threejsP/2023/9/30'),  
    history: createWebHashHistory(),
    routes,
    // publicPath: '/threejsP/2023/9/30/',  
    
})
用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,请求中间键的,连通要攻克一下。。。下一个作品有望,要憋出来了。。。


回复

使用道具 举报

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

高级模式

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