番外篇 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

目录结构

番外篇 vue与django 交互流程_第1张图片

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/ 

番外篇 vue与django 交互流程_第2张图片

 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

 番外篇 vue与django 交互流程_第3张图片

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

二、 Vue 前端

0、切换目录

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

1、安装环境

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

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

2、目录结构

番外篇 vue与django 交互流程_第4张图片

3、测试访问

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

番外篇 vue与django 交互流程_第5张图片

 4、添加vue工作目录

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

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

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

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

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

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

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

 番外篇 vue与django 交互流程_第6张图片

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 router

8、注册路由

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 serve

11、访问页面 (IE浏览器打不开)

http://localhost:8081/

番外篇 vue与django 交互流程_第7张图片

 说明:

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

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

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

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

案例

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

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





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





添加路由,和步骤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

番外篇 vue与django 交互流程_第8张图片

番外篇 vue与django 交互流程_第9张图片

后续编写依此类推

12、定义前台主页文件

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

// app.vue




 番外篇 vue与django 交互流程_第10张图片

通过上面的方法,我们可以从主页去手动访问各个视图的路由页面实现跳转,关于样式不着急用先放着,下面我们试着通过调用后端的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

 






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
      }
    }
  }
})

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

 番外篇 vue与django 交互流程_第11张图片

 

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与django 交互流程_第12张图片

 关于数据显示就看前面vue的一些使用方法了,比如v-mode 映射数据上去 ,字典加循环之类的

 

三、关于程序dockerfile的编写

django 部分参考之前文章 https://moziang.blog.csdn.net/article/details/134195331

你可能感兴趣的:(django,python,后端)