Django环境准备
1、下载django，执行命令 pip install django
2、新建django项目，执行命令 django-admin startproject mytest（项目名称），以上命令会在当前目录下创建一个名为mytest的Django项目
3、运行django项目，执行命令 python manage.py runserver
4、下载ninja，执行命令pip install django-ninja
Django跨域配置
1、执行命令 pip install django-cors-headers
2、在settings.py中
（1）INSTALLED_APPS里添加“corsheaders”
（2）MIDDLEWARE里添加'corsheaders.middleware.CorsMiddleware'
（3）增加CORS_ORIGIN_ALLOW_ALL=True
Vue环境准备
1、下载安装node.js，下载地址 https://nodejs.org/en
2、创建vue项目，执行npm init vue@latest，可参考 https://cn.vuejs.org/guide/quick-start.html#creating-a-vue-application
3、下载element-plus，npm install element-plus --save
4、下载vue-router，npm install vue-router
Vue代码
1、App.vue文件
<template>
<a-config-provider :locale="locale">
<div>
<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 ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
const app = createApp(App)
app.use(ElementPlus)
app.use(router).mount("#app");
4、index.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;
6、TestView.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("http://127.0.0.1:8000/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 iin range(0,numNo):
num = random.randint(10,99)
numList.append(num)
return numList
2、与前端交互：请求url、获取请求参数，返回结果
import json
from django.httpimport JsonResponse
from ninjaimport Router
from impl.createTestimport 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、urlpatterns配置
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)
]
页面显示：
1、启动后端服务：python manage.py runserver
2、启动前端服务：npm run dev
3、请求http://ip:port/#/test，启动前端服务是会显示ip:port
