2、禅道数据看板(django+vue)

2024-05-05 18:32

本文主要是介绍2、禅道数据看板(django+vue),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、vue4搭建数据看板前端框架

1.1vue-cli安装省略。官方文档:https://cli.vuejs.org/
1.2命令行创建app
命令行工具iTerm输入:vue create databoard-front
在这里插入图片描述

启动服务

cd databoard-front
npm run serve

1.3也可以通过 vue ui 命令以图形化界面创建和管理项目:
在这里插入图片描述

2、设置前端的端口号为9527

2.1Vue.config.js指定前端端口


const port = process.env.port || process.env.npm_config_port || 9527
也可以不指定,因为测试环境才会取env环境的参数

npm run serve 启动时,按照配置的端口号启动

2.2Vue.config.js跨域设置代理


module.exports = {lintOnSave: false,devServer: {
​    port: port,//也可以直接写端口号
​    proxy: {'/apis': {
​        target: 'http://localhost:8002',
​        changeOrigin: true,//是否跨域
​        pathRewrite: {'^/apis': ''}}},
​    open: true,
​    overlay: {
​      warnings: false,
​      errors: true}}
},

2.3请求封装
/utils/request.js

// axios拦截器
import axios from 'axios'// create an axios instance
const service = axios.create({// 本地环境解析为"/apis",上线时解析为真正的后端地址baseURL: process.env.VUE_APP_BASE_API,// withCredentials: true, // send cookies when cross-domain requeststimeout: 5000, // request timeout// url = base url + request urlwithCredentials: true,// send cookies when cross-domain requestscrossDomain: true
})
// 设置请求次数,请求的间隙
service.defaults.retry = 3
service.defaults.retryDelay = 1000
// console.log(service)
/** **** request拦截器==>对请求参数做处理 ******/
service.interceptors.request.use(config => {return config},error => {return Promise.reject(error)}
)
/** **** respone拦截器==>对响应做处理 ******/
service.interceptors.response.use(response => {// 成功请求到数据if (response.status === 200) {return Promise.resolve(response)} else {return Promise.reject(response)}},error => {if (error.response) {// console.log('err' + error) // for debugswitch (error.response.status) {case 401:// breakreturn Promise.reject(error)case 404:breakcase 500:break}return Promise.reject(error)} else {// 处理超时的情况const config = error.config// If config does not exist or the retry option is not set, rejectif (!config || !config.retry) return Promise.reject(error)// Set the variable for keeping track of the retry countconfig.__retryCount = config.__retryCount || 0// Check if we've maxed out the total number of retriesif (config.__retryCount >= config.retry) {// Reject with the errorreturn Promise.reject(error)}// Increase the retry countconfig.__retryCount += 1// Create new promise to handle exponential backoffconst backoff = new Promise(function (resolve) {setTimeout(function () {resolve()}, config.retryDelay || 1)})// Return the promise in which recalls axios to retry the requestreturn backoff.then(function () {return service(config)})}}
)
export default service

2.4请求

import request from '@/utils/request'
export function zentaoProject (data) {return request({url: '/zentao_project/',method: 'post',data})
}

2.5vue调用

调用js

import { zentaoProject } from '@/api/zentao_query'export default {name: 'app',components: {zentaoProject},data () {zentaoProjectList:[]},created () {this.getZentaoProjectList()},method:{getZentaoProjectList () {zentaoProject().then(response => {this.zentaoProjectList = response.dataconsole.log(response.data)})},}
}

下拉框

el-select(v-model="filter.zentaoProject",clearable,value="",placeholder="版本纬度",filterable)el-option(v-for="item in zentaoProjectList",:key="item.id" :label="item.projectName", :value="item.id")
3、nginx设置代理

查看nginx地址

~ which nginx
/usr/local/bin/nginx
➜  ~ cd /usr/local/bin/bin nginx -t
nginx: the configuration file /usr/local/etc/nginx/nginx.conf syntax is ok
nginx: configuration file /usr/local/etc/nginx/nginx.conf test is successful
➜  bin

通过nginx的不同端口代理多个地址,修改配置文件nginx.conf

server {listen       9527;server_name  localhost;#此处定义映射规则,所有加了apis的接口,全部转发到8002端口号,就是本地的django工程location /apis/ {proxy_pass   http://localhost:8002/;}}

重启nginx代理

nginx -s reload
4、试试前端通过nginx代理能不能访问到后台接口

在这里插入图片描述

这篇关于2、禅道数据看板(django+vue)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/962379

相关文章

Spring 请求之传递 JSON 数据的操作方法

《Spring请求之传递JSON数据的操作方法》JSON就是一种数据格式,有自己的格式和语法,使用文本表示一个对象或数组的信息,因此JSON本质是字符串,主要负责在不同的语言中数据传递和交换,这... 目录jsON 概念JSON 语法JSON 的语法JSON 的两种结构JSON 字符串和 Java 对象互转

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

SpringBoot集成Milvus实现数据增删改查功能

《SpringBoot集成Milvus实现数据增删改查功能》milvus支持的语言比较多,支持python,Java,Go,node等开发语言,本文主要介绍如何使用Java语言,采用springboo... 目录1、Milvus基本概念2、添加maven依赖3、配置yml文件4、创建MilvusClient

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行