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

xiefandaren

1.后端Django部分

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

python manage.py startapp API

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

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