ruoyi-vue,调用python的flask后端接口获取数据配置

一、springboot不需要动,启动起来就行。

二、vue项目

1. vue.config.js,在devServer中加入

      ['connect-python']: {
        target: `http://127.0.0.1:5000`,
        changeOrigin: true,
        pathRewrite: {
          ['^/connect-python']: ''
        }
      }

改完后的devServer应该是如下:

  devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      ['connect-python']: {
        target: `http://127.0.0.1:5000`,
        changeOrigin: true,
        pathRewrite: {
          ['^/connect-python']: ''    
        //表示将/connect-python的变成空,
        //即本来是localhost:5000/connect-python/test变成localhost:5000/test
        //  /test应该是你flask后端的路由
        }
      }

    },
    disableHostCheck: true
  },

上面代码中,connectpython是你要转发的路由前缀,随便写啥都行,target里面填写的就是你要调用的的python-flask后端的地址(注意引号格式)

2. 在request.js同目录下(src/utils/)新建一个requestPython.js,里面内容全部复制request.js就行,只需要改动一个地方,将process.env.VUE_APP_BASE_API改成connectpython,也就是在vue.config.js中添加的那个路由转发前缀。

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项,表示请求URL公共部分
  baseURL: '/connect-python',
  // 超时
  timeout: 10000
})

3. 按照若依添加新功能的步骤建立好你自己的模块,如:

views/app/demo/index.vue

api/app/demo/connectdemo.js

需要注意的是,在connect.js中要导入requestPython.js,然后在里面写的应该是对应的flask后端的接口。

坑:

vue.config.js的转发前缀最好起一个不容易重复的名字(例如带杠之类的),不然可能会导致刷新404。

我之前就是用的python作为路由转发前缀,然后ruoyi项目中新模块的菜单路由地址是pythonconnect,结果就导致我一刷新就404

这是因为pythonconnect里面有python,就导致路由被转发成了localhost:5000/connect,自然刷新变成了404。

你可能感兴趣的:(vue.js,python,flask)