番外篇 vue与django 交互流程
学习了一段时间的django和vue，对于前后端开发有了一个初步的了解，这里记录一下编写的流程和思路，主要是为了后面如果遗忘从哪里开始操作做一个起步引导作用
一、Django后端
参考下前面django的文档https://moziang.blog.csdn.net/article/details/130720709
1、安装django环境
//配置清华镜像源
pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
pip config set global.trusted-host pypi.tuna.tsinghua.edu.cn
//安装django
pip install django==4.2.1
//创建项目paas
django-admin startproject PAAS
//登录PAAS目录
cd PAAS
//创建应用
python manage.py startapp app_demo1
python manage.py startapp app_demo2目录结构
2、项目添加应用模块
vi test1\PAAS\PAAS\settings.py
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'app_demo1', #添加
#'app_demo2'
]
ALLOWED_HOSTS = ['*'] #允许所有请求访问在理想中我们需要维护一个大的平台项目，也就是paas平台，而app_demo1 和app_demo2 就是我们这个平台下负责某个功能的模块，这种模块可能有多个，为了区分他们不同模块对外提供的功能，我们首先要做的就是设置路由(urls)，app_demo2我这里演示不用，先注释了
3、添加主路由转发到模块路由
PAAS/PAAS/urls.py
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
#添加请求路由,当访问app1或者app2时会将请求交给两个模块下的urls路由
path("app1/",include("app_demo1.urls")),
#path("app2/",include("app_demo2.urls"))
]
4、添加模块路由配置
上面是将主路由指定到了模块下的子路由，我们模块下默认是没有路由文件的需要手动创建，这里我们只演示一个模块下的路由案例，另一个可以先忽略了，操作都一样
PAAS/app_demo1/urls.py
from django.urls import path
urlpatterns = [
#添加请求路由,当访问app1或者app2时会将请求交给两个模块下的urls路由
path("info/",函数方法,name="info"),
]
# 假设后端传递了路由名称为 "info" 到前端
#var url = "{% url 'info' %}";
#在模板中使用Django模板标签获取路由URL
#然后在Vue.js中使用这个url
#例如：
#this.$router.push(url); // 使用Vue Router进行页面跳转
在上面中的info 是请求接口的路径，当我们请求该接口的时候会去调用该函数，而name=info则是定义了info/这个路径的别名，当需要进行访问跳转时可以根据这个别名去快速访问，不需要考虑路径的问题，比如点击这里查看信息
5、添加接口下函数功能
正常来说，我们django是只做后端的逻辑处理，将处理好的数据通过json格式的方法返回给请求方(前端) 然后根据前端的代码做逻辑判断后显示在页面上，现在我们想要对django的/app1/info/这个路径的请求，返回一个json数据。 而这些函数我们定义一个api的目录单独存放
#创建api目录
mkdir api/ 
PAAS/app_demo1/api/info.py
from django.http import JsonResponse
#这里的函数名称开头必须小写
def paasInfo(request):
# 定义需要返回的数据
data = {
"status": "success",
"message": "Data retrieved successfully",
"data": {
"user": {
"id": 123,
"username": "张三",
"email": "[email protected]"
}
}
}
#返回json类型数据
return JsonResponse(ata)
6、补全模块路由配置
from django.urls import path
#通过.做相当路径导入，适用于包内导入
from .api import info
urlpatterns = [
#添加请求路由,当访问app1或者app2时会将请求交给两个模块下的urls路由
path("info/",info.paasInfo,name="info"),
]
7、测试访问
现在我们的后端基础的格式就完成了，下面我们测试下访问是否能返回json数据
http://127.0.0.1:8000/app1/info 
这里可以看到我们已经可以通过访问后端的api接口获取一些数据了，具体的其他逻辑放到下面说，我们下面开始整前端程序
二、 Vue 前端
0、切换目录
#这里的目录是我们上面django的项目根目录
#我们将vue的项目目录和django的项目目录平级，方便迁移
cd C:\Users\Administrator\IdeaProjects\test11、安装环境
这块都是页面操作不重复编写，参考我下面的文档装下环境（完成步骤一即可）
https://moziang.blog.csdn.net/article/details/1344147022、目录结构
3、测试访问
#ie浏览器会显示不出来，可以换edge
http://localhost:8080/
4、添加vue工作目录
我现在想要创建多个页面，每个页面都有独立的功能，首先我们需要先区分开文件存放的位置，没有的目录手动创建下
src/components #存放 Vue 组件文件的目录。
src/assets #存放静态资源文件的目录，如图片、字体等。
src/views #存放路由组件文件的目录，通常用于组织不同路由对应的页面组件。
src/api #存放与后端 API 交互的文件
src/store #存放 Vuex 相关的文件，用于状态管理。
src/router #存放 Vue Router 相关的文件，用于配置路由。
5、安装路由插件
npm install -g vue-router
6、定义视图函数(view)
my-vue-app/src/views/index.vue
我是主页
7、添加路由配置
my-vue-app/src/router/router.js
import { createRouter,createWebHistory } from 'vue-router' //引入路由插件函数
import IndexView from '@/views/index.vue' //引入被路由到的页面相关文件
//定义需要路由的组，可以定义多个 （基本都在改这个
const routes = [
{
path: '/',
name: 'IndexView', //这里是字符串哈
component: IndexView
},
]
// 创建路由
const router = createRouter({
history: createWebHistory(),
routes
});
export default router8、注册路由
my-vue-app/src/main.js
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import router from './router/router'
app.use(router); //注册路由
app.mount('#app')
9、清理app.vue 视图
// app.vue
10、切换目录启动项目
#切换到package.json所在的目录
cd C:\Users\Administrator\IdeaProjects\test1\my-vue-app>
#启动服务
npm run serve11、访问页面 （IE浏览器打不开）
http://localhost:8081/
说明：
上面从6-11步都是为了后续开发梳理一个大致的流程
步骤6中定义了单个页面的显示信息，
步骤7定义了我们具体通过访问那个路由来到达视图的位置
举个例子比如说我们现在想要加俩页面，访问/paas 和/log 两个路由到各自的页面
案例
和步骤6一样，先添加视图文件，直接复制改下页面
my-vue-app/src/views/paas.vue
paas
my-vue-app/src/views/log.vue
log
添加路由，和步骤7类似
my-vue-app/src/router/router.js
import { createRouter,createWebHistory } from 'vue-router' //引入路由插件函数
import IndexView from '@/views/index.vue' //引入被路由到的页面相关文件
import PaasView from '@/views/paas.vue'
import LogView from "@/views/log.vue";
const routes = [
{
path: '/',
name: 'IndexView',
component: IndexView
},
// 新增路由
{
path: '/paas',
name: 'PaasView',
component: PaasView
},
{
path: '/log',
name: 'LogView',
component: LogView
},
]
// 创建路由
const router = createRouter({
history: createWebHistory(),
routes
});
export default router访问测试
http://localhost:8081/paas
http://localhost:8081/log
后续编写依此类推
12、定义前台主页文件
没怎么接触过前端，之前我想自己整个前端页面方便使用一些小工具来提升效率，但碰到这块的时候我确不清楚应该怎么去调用各个层级的路由（vue还没学到路由），所以我的方法是利用app.vue文件做一个主页面的显示，通过点击按钮跳转访问vue自身的不同路由
// app.vue
主页
paas
log
通过上面的方法，我们可以从主页去手动访问各个视图的路由页面实现跳转，关于样式不着急用先放着，下面我们试着通过调用后端的api来请求和接收数据
13、vue调用后端接口
定义接口函数，在vue中通过按钮或者其他方法触发
my-vue-app/src/api/paasinfo.js
export function paasClusterInfo(method, params) {
if (method === 'GET') {
// 如果是GET请求，将参数拼接到URL上
//url += '?' + new URLSearchParams(params).toString();
return fetch('/app1/info/', {
method: 'GET', //可以是post请求 根据你后端逻辑判断即可
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok')
}
return response.json()
});
} else if (method === 'POST') {
// 如果是POST请求，将参数放在请求体中
return fetch('/app1/info/', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(params)
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok')
}
return response.json()
});
} else {
throw new Error('Unsupported method')
}
}
重新编辑paas视图，调用api函数将请求的数据打印到F12 开发工具页面
my-vue-app/src/views/paas.vue
paas
vue在请求后端的时候会存在一些问题，比如跨域请求问题，需要单独进行配置
当做如下配置后，vue中发起的url请求，比如/app1 开头的请求会直接转发到下面的url中
my-vue-app/vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
devServer: {
proxy: {
//环境内请求/app1的请求都转给下面的地址,需要重启
'/app1': {
target: 'http://localhost:8000',
changeOrigin: true
}
}
}
})
修改完上面的文件，必须要重启 ，不重启无法生效
14、关于获取的数据显示
我们接口返回的数据格式如下，我们需要在前端页面上显示出来我们需要的值
{
"status": "success",
"message": "Data retrieved successfully",
"data": {
"user": {
"id": 123,
"username": "张三",
"email": "[email protected]"
}
}
}console.log(data.status)
console.log(data.message)
console.log(data.data)这个请求方法就是正常的json值的获取了
关于数据显示就看前面vue的一些使用方法了，比如v-mode 映射数据上去 ，字典加循环之类的
三、关于程序dockerfile的编写
django 部分参考之前文章 https://moziang.blog.csdn.net/article/details/134195331