【Vue+Django】前后端分离简单设定--20230203

Vue前端请求数据

api/index.js 设定api接口

//请求数据
export const reqTrainingRequestData = ()=> requests({url:'/api_TrainingRequest_data/',method:'get'});

index.vue发请求

 <button @click="getTrainingRequestData">获取ajax数据</button>


  methods: {
    // 发请求
    async getTrainingRequestData(){
      console.log('发请求')
      let result = await reqTrainingRequestData()
      console.log('result',result)
    },
  },

vue.config.js防止跨域

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  devServer: {
    //代理服务器解决跨域
    proxy: {
        //会把请求路径中的/api换为后面的代理服务器
        '/api': {
            //提供数据的服务器地址
            //target: 'http://gmall-h5-api.atguigu.cn',
	          target: 'http://127.0.0.1:8000',
          }
      },
    }
})

Django后端处理逻辑

利用json模块传送数据，同时用正则re_path来处理url。

views.py利用json模块传送数据

# Json分享数据
def api_TrainingRequest_data(request,plant_id = '',dept_code='',employee_id=''):
    print('api_TrainingRequest_data收到数据请求')
    ### 筛选出对应数据
    TrainingRequest_objects_all = TrainingRequest.objects.all()
    TrainingRequest_objects = TrainingRequest_objects_all
    if plant_id:
        TrainingRequest_objects = TrainingRequest_objects & TrainingRequest_objects_all.filter(plant_id=plant_id)
    if dept_code:
        TrainingRequest_objects = TrainingRequest_objects & TrainingRequest_objects_all.filter(dept_code=dept_code)
    if employee_id:
        TrainingRequest_objects = TrainingRequest_objects & TrainingRequest_objects_all.filter(employee_id=employee_id)

    TrainingRequest_data= []

    ### 把数据塞进list里面
    for i in TrainingRequest_objects:
        TrainingRequest_data.append({
            'plant_id':i.plant_id,
            'dept_code':i.dept_code,
            'employee_id':i.employee_id,
            'employee_name':i.employee_name,
            'question2-Q':'Q2_',
            'question2-A':i.question2.split('|'),
            'question3-Q':'Q3_',
            'question3-A':i.question3.split('|'),
            'question4-Q':'Q4_',
            'question4-A':i.question4.split('|'),
            'question5-Q':'Q5_',
            'question5-A':i.question5.split('|'),
            'question6-Q':'Q6_',
            'question6-A':i.question6.split('|'),
			........

        })
    return HttpResponse(json.dumps(TrainingRequest_data,ensure_ascii=False,indent=4),content_type='application/json')

urls.py用正则re_path来处理url

from  django.urls  import re_path

urlpatterns = [
	......
    path('api/api_TrainingRequest_data/', views.api_TrainingRequest_data, name='api_TrainingRequest_data'),
    ### * 0或多，+至少1，? 0或1
    re_path('api/api_TrainingRequest_data/(?P<plant_id>[A-Z0-9]*)/(?P<dept_code>[A-Za-z0-9]*)/(?P<employee_id>[A-Za-z0-9]*)/', views.api_TrainingRequest_data, name='api_TrainingRequest_data'),
]

效果：

前端发请求

后端收到请求，返回数据

前端收到数据

参考链接

django框架——路由系统（正则表达式）
https://blog.csdn.net/xmxt668/article/details/89504320