vue+webapi+nginx 网页显示数据库数据实例

Vue 调用接口实力代码

getDataShuiQing(aday_begin,aday_end,atype){

          console.log('Pos tableDataShuiQing1');

          let loading = this.$loading({

            lock: true, // 显示/隐藏--默认为false

            text: "加载中，请稍候...", //显示在加载图标下方的加载文案

            background: "rgba(0,0,0,0.8)", //遮罩层颜色

            spinner: "el-icon-loading", //自定义加载图标类名

          });

          var jsons={  

            day_begin:aday_begin,

            day_end:aday_end,

            aname:'',

              }

          axios.defaults.headers.post['Content-Type'] = 'application/json';            

              axios.post('/api/base/LoadShuiQing',JSON.stringify(jsons))

              .then(res=>{

                  //console.log(res.data);

                  loading.close();

                  var json = JSON.stringify(res.data);

                  if (atype == 1)

                  {

                    this.tableDataShuiQingOne = JSON.parse(json);

                    for(var i = 0; i < this.tableDataShuiQingOne.length; i++){

                      this.tableDataShuiQingOne[i]["sdayshort"] = (this.tableDataShuiQingOne[i]["tDate"].toString()).substr(5,5)+" "+this.tableDataShuiQingOne[i]["tTime"].toString();

                    }                    

                  }  

                  else {

                    //this.tableDataShuiQingDays = JSON.parse(json);

                  }

              })

              .catch(Error=>{

                  console.log(Error);

                  this.$message('系统异常！');

              })

      },

开发模式：index.js   （webpack 模式）  proxyTable部分

module.exports = {

  dev: {

    // Paths

    assetsSubDirectory: 'static',

    assetsPublicPath: '/',

    proxyTable: {

      '/api': {

        target: 'http://192.168.88.229:5001', // replace with your target API server

        changeOrigin: true,

        //secure: false, // if your API server requires a secure connection, set this to true

        pathRewrite: {

          '^/api': '' //功能将api替换为空；如果api接口路径中含api，则屏蔽pathRewrite

        }

      }

      }

},

……

生产模式：nginx配置

location /api {

rewrite ^/api/(.*)$ /$1 break;

proxy_pass http://localhost:5001;

}