番外篇 vue与django 交互流程

  • 开发
  • 29

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

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": "123@qq.com"
            }
        }
    }

    #返回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\test1

1、安装环境

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

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

2、目录结构

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

<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

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": "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

阅读全部

相关推荐

  3. 【SpringBoot3+Vue3】六【后续1】【番外篇】- （0-1临摹）

    2024-01-31 06:18:03       27 阅读

最近更新

  4. TCP协议是安全的吗?

    2024-01-31 06:18:03       16 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2024-01-31 06:18:03       16 阅读

  13. 【Python教程】压缩PDF文件大小

    2024-01-31 06:18:03       15 阅读

  18. 通过文章id递归查询所有评论（xml）

    2024-01-31 06:18:03       18 阅读

热门阅读

  4. logstash的使用

    2024-01-31 06:18:03       29 阅读

  8. React16源码: React中NewContext的源码实现

    2024-01-31 06:18:03       34 阅读

  9. 【QT+QGIS跨平台编译】之十九：【libxml2+Qt跨平台编译】（一套代码、一套框架，跨平台编译）

    2024-01-31 06:18:03       29 阅读

  10. 【ElasticSearch】概述

    2024-01-31 06:18:03       26 阅读

  14. 【遇到问题-已解决】 ModuleNotFoundError: No module named ‘torchvision.models.utils‘

    2024-01-31 06:18:03       31 阅读

  16. python如何通过git分支名获取对应的mr

    2024-01-31 06:18:03       40 阅读

  17. （Rust）LeetCode 热题 100-两数之和

    2024-01-31 06:18:03       31 阅读

  18. 【leetcode刷刷】216.组合总和III 、17.电话号码的字母组合

    2024-01-31 06:18:03       31 阅读

  19. Hive之set参数大全-21

    2024-01-31 06:18:03       20 阅读

  24. React hooks子组件暴露方法示例

    2024-01-31 06:18:03       35 阅读

  28. django heroku 部署问题汇总

    2024-01-31 06:18:03       26 阅读

  29. SpringBoot 多模块开发 笔记

    2024-01-31 06:18:03       32 阅读