Django+Vue实现前后端交互

本文介绍: 2、创建 vue 项目，执行 npm init vue@la test，可参考 https://cn.vue js.org/guide/quick–start.html#creating-a-vue–application。3、下载 element–plus，npm install element–plus —s av e。3、请求 http://ip:p o rt/#/test，启动前端服务是会显示 ip:p o rt。1、下载安装 node.js，下载地址 https://nodejs.org/en。

Django 环境准备
1、下载 django，执行命令 pip install django
2、新建 django 项目，执行命令 django–admin start project my test（项目名称），以上命令会在当前目录下创建一个名为my test的Django 项目
3、运行 django 项目，执行命令 python manage.py run server
4、下载ninja，执行命令 pip install django-ninja

Django 跨域配置
1、执行命令 pip install django–cors–headers
2、在settings.py中
（1）INSTALLED_APPS里添加“co rs headers”
（2）MIDDLEWARE里添加‘co rs headers.middleware.Co rsMid dl e war e‘
（3）增加CORS_ORIGIN_ALLOW_ALL=Tr ue

Vue 环境准备
1、下载安装 node.js，下载地址 https://nodejs.o r g/en
2、创建 vue 项目，执行 npm init vue@latest，可参考 https://cn.vue js.o r g/guide/quick–start.html#creating-a-vue–application

3、下载element–plus，npm install el ement–plus —s ave
4、下载vue–router，npm install vue–route r

Vue 代码
1、App.vue 文件

&lt;template&gt;
  &lt;a-config-provider :locale="locale"&gt;
    &lt;div&gt;
      <router-view></router-view>
    </div>
  </a-config-provider>
</template>

<script setup>
</script>

<style>
#app {
  background-color: #f1f4f9;
  min-height: 100vh;
}
</style>

2、index.html 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

3、main.js 文件

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

import axios from "axios";
import { message } from "ant-design-vue";
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

// 全局配置
axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL;
message.config({ duration: 2, top: "50px", maxCount: 3 });

const app = createApp(App)
app.use(ElementPlus)
app.use(router).mount("#app");

4、inde x.js文件，配置路由。请求地址：http://ip:port/#/test

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: "/test", component: () => import("../views/TestView.vue") },
  ],
});

export default router;

5TestView.vue

<template>
  <div class="site-main">
    <el-form-item>
      <el-button type="primary" @click="getNum()">获取随机数</el-button>
      <el-input type='text' style="width: 200px;" placeholder="随机数" v-model="num"></el-input>
      <el-input-number v-model="numNo" :min="1" :max="5" />
    </el-form-item>
  </div>
</template>

<script>
import axios from "axios";

export default {

  data() {
    return {
      num: '',
      numNo: 1,
    }
  },
  methods: {
    // 生成随机数
    getNum() {
      axios.post("/getRandom",{ "numNo": this.numNo}).then(({ res, data }) => {
        this.num = data.data
      })
    }
  }
}

</script>

<style scoped>
.site-main {
  background: #fff;
  padding: 24px;
  height: 100vh;
  width: 100%;
}
</style>

python 代码
1、获取n个随机数的实现方法

import random

def createRandom(numNo):
    numList=[]
    for i in range(0,numNo):
        num = random.randint(10, 99)
        numList.append(num)
    return numList

# if __name__ == "__main__":
#     a=createRandom(2)
#     print(a)

2、与前端交互：请求 url、获取请求参数，返回结果

import json
from django.http import JsonResponse
from ninja import Router
from impl.createTest import createRandom

router = Router()

@router.post("/getRandom")
def getRandom(request):
    numNo = json.loads(request.body).get("numNo")
    numList=createRandom(numNo)
    return JsonResponse({'code': 200, 'data': numList}, charset="utf-8")

3、url patterns配置

"""proinit URL Configuration

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/3.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path
from ninja import NinjaAPI
from viewpackage import viewTest

app = NinjaAPI()
app.add_router('', viewTest.router)
urlpatterns = [
    # path('admin/', admin.site.urls),
    path('', app.urls)
]