番外篇 vue与django 交互流程

学习了一段时间的django和vue，对于前后端开发有了一个初步的了解，这里记录一下编写的流程和思路，主要是为了后面如果遗忘从哪里开始操作做一个起步引导作用

一、Django后端

参考下前面django的文档https://moziang.blog.csdn.net/article/details/130720709

1、安装django环境

python 复制代码

//配置清华镜像源
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

python 复制代码

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

python 复制代码

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

python 复制代码

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/这个路径的别名，当需要进行访问跳转时可以根据这个别名去快速访问，不需要考虑路径的问题，比如<a href="{% url 'info' %}">点击这里查看信息</a>

5、添加接口下函数功能

正常来说，我们django是只做后端的逻辑处理，将处理好的数据通过json格式的方法返回给请求方(前端) 然后根据前端的代码做逻辑判断后显示在页面上，现在我们想要对django的/app1/info/这个路径的请求，返回一个json数据。而这些函数我们定义一个api的目录单独存放

python 复制代码

#创建api目录
mkdir   api/

PAAS/app_demo1/api/info.py

python 复制代码

from django.http import JsonResponse

#这里的函数名称开头必须小写
def paasInfo(request):
    # 定义需要返回的数据
    data = {
        "status": "success",
        "message": "Data retrieved successfully",
        "data": {
            "user": {
                "id": 123,
                "username": "张三",
                "email": "123@qq.com"
            }
        }
    }

    #返回json类型数据
    return JsonResponse(ata)

6、补全模块路由配置

python 复制代码

from django.urls import path

#通过.做相当路径导入，适用于包内导入
from .api import info

urlpatterns = [
    #添加请求路由,当访问app1或者app2时会将请求交给两个模块下的urls路由
    path("info/",info.paasInfo,name="info"),

]

7、测试访问

现在我们的后端基础的格式就完成了，下面我们测试下访问是否能返回json数据

python 复制代码

http://127.0.0.1:8000/app1/info

这里可以看到我们已经可以通过访问后端的api接口获取一些数据了，具体的其他逻辑放到下面说，我们下面开始整前端程序

二、 Vue 前端

0、切换目录

python 复制代码

#这里的目录是我们上面django的项目根目录
#我们将vue的项目目录和django的项目目录平级，方便迁移
cd C:\Users\Administrator\IdeaProjects\test1

1、安装环境

这块都是页面操作不重复编写，参考我下面的文档装下环境（完成步骤一即可）

python 复制代码

https://moziang.blog.csdn.net/article/details/134414702

2、目录结构

3、测试访问

python 复制代码

#ie浏览器会显示不出来，可以换edge
http://localhost:8080/

4、添加vue工作目录

我现在想要创建多个页面，每个页面都有独立的功能，首先我们需要先区分开文件存放的位置，没有的目录手动创建下

python 复制代码

src/components    #存放 Vue 组件文件的目录。

src/assets         #存放静态资源文件的目录，如图片、字体等。

src/views          #存放路由组件文件的目录，通常用于组织不同路由对应的页面组件。

src/api          #存放与后端 API 交互的文件

src/store        #存放 Vuex 相关的文件，用于状态管理。

src/router      #存放 Vue Router 相关的文件，用于配置路由。

5、安装路由插件

python 复制代码

npm install -g vue-router

6、定义视图函数(view)

my-vue-app/src/views/index.vue

python 复制代码

<template>
    <div>
        我是主页
    </div>
</template>

<script>
export default {
    name: "IndexView",
}
</script>

<style>
/* 这里可以添加一些页面样式 */
</style>

7、添加路由配置

my-vue-app/src/router/router.js

python 复制代码

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 router

8、注册路由

my-vue-app/src/main.js

python 复制代码

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 视图

python 复制代码

// app.vue
<template>
    <div>
        <router-view></router-view>
    </div>
</template>

<script>
export default {
    name: "App",
}
</script>

<style>
/* 这里可以添加一些全局样式 */
</style>

10、切换目录启动项目

#切换到package.json所在的目录
cd C:\Users\Administrator\IdeaProjects\test1\my-vue-app>

#启动服务
npm run serve

11、访问页面（IE浏览器打不开）

http://localhost:8081/

说明：

上面从6-11步都是为了后续开发梳理一个大致的流程

步骤6中定义了单个页面的显示信息，

步骤7定义了我们具体通过访问那个路由来到达视图的位置

举个例子比如说我们现在想要加俩页面，访问/paas 和/log 两个路由到各自的页面

案例

和步骤6一样，先添加视图文件，直接复制改下页面

my-vue-app/src/views/paas.vue

python 复制代码

<template>
    <div>
        paas
    </div>
</template>

<script>
export default {
    name: "PaasView",
}
</script>

<style>
/* 这里可以添加一些页面样式 */
</style>

my-vue-app/src/views/log.vue

python 复制代码

<template>
    <div>
        log
        
    </div>
</template>

<script>
export default {
    name: "LogView",
}
</script>

<style>
/* 这里可以添加一些页面样式 */
</style>

添加路由，和步骤7类似

my-vue-app/src/router/router.js

python 复制代码

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

访问测试

python 复制代码

http://localhost:8081/paas
http://localhost:8081/log

后续编写依此类推

12、定义前台主页文件

没怎么接触过前端，之前我想自己整个前端页面方便使用一些小工具来提升效率，但碰到这块的时候我确不清楚应该怎么去调用各个层级的路由（vue还没学到路由），所以我的方法是利用app.vue文件做一个主页面的显示，通过点击按钮跳转访问vue自身的不同路由

python 复制代码

// app.vue
<template>
    <div>
        <router-view></router-view>
          <!--        添加html跳转路由-->
        <router-link to="/">主页</router-link>
        <router-link to="/paas">paas</router-link>
        <router-link to="/log">log</router-link>
    </div>
</template>

<script>
export default {
    name: "App",
}
</script>

<style>
/* 这里可以添加一些全局样式 */
</style>

通过上面的方法，我们可以从主页去手动访问各个视图的路由页面实现跳转，关于样式不着急用先放着，下面我们试着通过调用后端的api来请求和接收数据

13、vue调用后端接口

定义接口函数，在vue中通过按钮或者其他方法触发

my-vue-app/src/api/paasinfo.js

javascript 复制代码

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

javascript 复制代码

<template>
    <div>
        paas
        <Button @click="getChange">按钮</Button>
    </div>
</template>

<script>
// 导入api
import { paasClusterInfo } from '@/api/paasinfo'

export default {
    name: "PaasView",
    methods: {
        async getChange() {
            console.log("输出个信息，证明函数执行了,再有报错就是下面请求的问题")
            try {
                const data = await paasClusterInfo('GET','action=list')  // 调用paasClusterInfo需要加上括号()
                console.log(data)
            } catch (error) {
                console.error("An error occurred:", error)
            }
        }
    }
}
</script>

<style>
/* 这里可以添加一些页面样式 */
</style>

vue在请求后端的时候会存在一些问题，比如跨域请求问题，需要单独进行配置

当做如下配置后，vue中发起的url请求，比如/app1 开头的请求会直接转发到下面的url中

my-vue-app/vue.config.js

javascript 复制代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  devServer: {
    proxy: {
      //环境内请求/app1的请求都转给下面的地址,需要重启
      '/app1': {
        target: 'http://localhost:8000',
        changeOrigin: true
      }
    }
  }
})

修改完上面的文件，必须要重启，不重启无法生效

14、关于获取的数据显示

我们接口返回的数据格式如下，我们需要在前端页面上显示出来我们需要的值

python 复制代码

{
    "status": "success",
    "message": "Data retrieved successfully",
    "data": {
        "user": {
            "id": 123,
            "username": "张三",
            "email": "123@qq.com"
        }
    }
}

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

番外篇 vue与django 交互流程

一、Django后端

1、安装django环境

2、项目添加应用模块

3、添加主路由转发到模块路由

4、添加模块路由配置

5、添加接口下函数功能

6、补全模块路由配置

7、测试访问

二、 Vue 前端

0、切换目录

1、安装环境

2、目录结构

3、测试访问

4、添加vue工作目录

5、安装路由插件

6、定义视图函数(view)

7、添加路由配置

8、注册路由

9、清理app.vue 视图

10、切换目录启动项目

11、访问页面 （IE浏览器打不开）

说明：

案例

12、定义前台主页文件

13、vue调用后端接口

14、关于获取的数据显示

三、关于程序dockerfile的编写

11、访问页面（IE浏览器打不开）