2、禅道数据看板（django+vue）

本文主要是介绍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）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---