总结一下你的问题，可以分为以下几点。
1、怎么使数据库中的数据动态的在前端显示？
可以通过ajax的局部刷新来实现前端页面的动态变化显示，比如选择不同的条件，页面相应的显示不同的结果。
2、怎么查询数据库？
因为你使用了ssm框架，所以你可以使用mybatis的mapper功能来进行查询，而在Mapper里面写好正确的SQL查询语句就可以了，对于多个数据库中的表显示在前端一个表格里面的情况，可以通过表连接查询，或者表之间的关系(比如一对多、一对一、多对多)来实现，查询结果选取前端需要显示的列即可，这部分是数据库上的知识。
3、页面用静态页面还是动态页面？
静态页面(比如html)或者动态页面(比如jsp)都是可以的，如果用的ajax访问，两者区别可以忽略。
4、想查哪条数据就显示哪条数据是怎么做到的？
不知道你有没有学过数据库，如果学过的话，应该知道数据库中通过SQL的条件查询可以过滤掉不需要的数据，这样子就可以根据查询的条件来获取自己想要显示在页面的数据，然后显示出来就可以了。
上面的东西，至少需要一个基本的了解，不然估计也看不懂我描述的是什么，如果看不懂的话，建议还是先学习一下下面列举的这些东西的基础知识再看：
Spring、Spring MVC、MyBatis、SQL、ajax、jQuery、json。

list[i].bookCover = "data:image/png;base64," +list[i].bookCover;
console.log(list[i].bookCover) ;
}
if(list==null){
var toastText="获取数据失败"+res.data.strMsg;
wx.showToast({
title: toastText,
icon:'',
duration:6000
});
} else {
that.setData({
list:list
})
}
}
})
wxml:
src="{{item.bookCover}}" class="card-left">
{{item.bookDesc}}
后端实现:
try {
InputStream inputStream = blob.getBinaryStream();
ByteArrayOutputStream output = new ByteArrayOutputStream();
byte[] buffer = new byte[100];
int n = 0;
while (-1 != (n = inputStream.read(buffer))) {
output.write(buffer, 0, n);
}
Base64.Encoder encoder = Base64.getEncoder();
result=encoder.encodeToString(output.toByteArray());
output.close();
} catch (SQLException | IOException e) {
e.printStackTrace();
}

做作业的时候遇到一个非常非常非常奇怪的问题。

后端函数从数据库拿到数据，然而在前端数据却怎么也显示出来。

1.先排查数据库数据有没有问题，没有。

2.检查在后端数据库能不能显示出来，能显示出来。

3.重新写一个前端页面，只显示这个数据，看看能不能显示出来。发现是可以的？？？？

甚至我重新在后端写个函数，直接返回那个不能显示数据的页面，竟然发现不能显示的数据，显示成功了？

这特喵的是为什么呢？只有可能是后端的函数写的有问题，

一条一条的修改，一条一条的排查，

我发现我只要加上

{'username': current_user}

这个变量，就会出问题，

1.难道这个变量本身有问题，会导致报错？可是并没有，这个变量在后台打印，甚至在其他页面正常显示都没问题。

2.难道，一个页面只能传递一个变量？可是老师也用了俩变量啊。跟我的一毛一样，为啥他的没问题就能正常显示呢？？？

难道是我的写法有问题？？然后我就去看了老师写法。。。发现他的虽然是俩变量，但他俩变量就只用了一个括号括起来，然而我，我用了俩括号，改成一个括号之后。。。。发现没问题了。俩数据都正常显示了。

事已至此，问题终于解决，

python的机制应该是这样，你可以从后端往前端传无数个变量，但是你必须放一个花括号里面，不然第二个数据他就不认了，他只找一次花括号……

 

 

 

一、概述

前面我们已经发布了接口，并进行了测试，一切正常后，接下来我们写前端工程。在如何将SpringBoot+Vue前后端分离项目一次打包为一个Jar包运行？这篇中，我们已经将前后端项目都导入到IDEA中了，所以目前我们的前端项目结构是这样的。用红框标注的就是我们要动的一个组件。不要问我是怎么知道要改这个组件的，我不会告诉你，是我打开那个demo页面，然后通过搜索关键字找到的。



二、digitalFlop.vue页面分析

打开digitalFlop.vue页面，可以看到目前页面是静态的，一起来分析下，注意，这些都很重要，因为将来你上手的时候，很可能代码也不是你写的，你需要对别人的代码需要进行分析，然后动点手脚改成自己的 ，这也是比较难的地方。

数据部分代码：

  data () {
    return {
      digitalFlopData: []
    }
  }

createData方法，主要是对digitalFlopData变量进行赋值：

    this.digitalFlopData = [
        {
          title: '管养里程',
          number: {
            number: [randomExtend(20000, 30000)],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#4d99fc',
              fontWeight: 'bold'
            }
          },
          unit: '公里'
        },
        {
          title: '桥梁',
          number: {
            number: [randomExtend(20, 30)],
            content: '{nt}',
            textAlign: 'right',
            style: {
              fill: '#f46827',
              fontWeight: 'bold'
            }
          },
          unit: '座'
        },
//省略后面重复的部分。。。

跟demo页面进行对照，我们发现这就是页面上显示的最上面部分



我们要做的就是将这部分内容替换成后台的动态数据。

页面的最上面部分代码：

<template>
  <div id="digital-flop">
    <div
      class="digital-flop-item"
      v-for="item in digitalFlopData"
      :key="item.title"
    >
      <div class="digital-flop-title">{{ item.title }}</div>
      <div class="digital-flop">
        <dv-digital-flop
          :config="item.number"
          style="width:100px;height:50px;"
        />
          <div class="unit">{{ item.unit }}</div>
      </div>
    </div>

    <dv-decoration-10 />
  </div>
</template>

这部分也很重要，不过不用我们自己写，但我们要知道他干了啥，就是对digitalFlopData进行遍历，然后在页面的最上面显示出来。

经过上面的分析，我们已经知道了我们要做的事情，接下来开工。

三、项目中引入异步组件axios

在vue中通常使用axios来发送异步的ajax请求，我们需要在前端工程中引入对该组件的支持。

dataV的这个demo工程中是没有axios组件的，所以需要我们引入一下。

package.json中添加axios和vue-axios

"dependencies": {
    "@jiaminghi/data-view": "^2.4.4",
    "axios": "^0.19.1",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "vue": "^2.6.10",
    "vue-axios": "^2.1.5"
  },

main.js中导入



这样就可以使用了。

四、使用axios发送ajax请求获取数据

  methods: {
    createData () {
      this.$http.post('/DigitalFlop', {
      }).then(response=>{
        this.digitalFlopData = [
          {
            title: '参与博主',
            number: {
              number: [response.data.blogernum],
              content: '{nt}',
              textAlign: 'center',
              style: {
                fill: '#4d99fc',
                fontWeight: 'bold'
              }
            },
            unit: '人'
          },
          {
            title: '累计投票',
            number: {
              number: [response.data.allvotenum],
              content: '{nt}',
              textAlign: 'right',
              style: {
                fill: '#f46827',
                fontWeight: 'bold'
              }
            },
            unit: '票'
          },
          {
            title: '访问次数',
            number: {
              number: [response.data.allviewnum],
              content: '{nt}',
              textAlign: 'right',
              style: {
                fill: '#40faee',
                fontWeight: 'bold'
              }
            },
            unit: '次'
          }
        ]
      }).catch(function (error) {
        console.log(error)
      })
    }
  }

我们只有三个维度，所以只保留三个对象就可以了。

通过 this.$http.post('/DigitalFlop'),发送请求
	
通过 response=>进行结果集的处理
	
通过this.digitalFlopData = []的方式进行属性赋值
为什么不采取this.digitalFlopData.某某属性的方式进行赋值，而要采用整体对象的方式进行赋值呢？

dataV的官方文档说的很清楚：



配置钩子函数去调用这个方法：

  mounted () {
    const { createData } = this
    createData()
    setInterval(createData, 60000)
  }

五、设置vue的跨域请求

通过前面的代码，貌似前后端已经调通了呢。但只能说你too young to simple！

不要忘记，我们的项目是前后端分离开发的，现在我们的请求路径是'/DigitalFlop'，而现在前端项目和后端项目的端口号是不一样的，目前前端项目的端口号是8080，那我们启动就会去访问'http://localhost:8080/DigitalFlop'这个地址。而前面我们已经测试过了，我们后端接口的访问地址是'http://localhost:8888/DigitalFlop'，端口不一样，这样我们是无法访问到后端工程的。

此时应该设置前端的跨域代理，找到vue.config.js文件进行配置即可

module.exports = {
  lintOnSave: false,
  devServer: {
    port: 8081, // 端口
    proxy: {
      '/': {
        // 后端API地址
        target: 'http://localhost:8888/',
        // 代理 websockets
        ws: true,
        // 跨域
        changeOrigin: true
      }
    }
  },
  publicPath: process.env.NODE_ENV === 'production'
    ? './'
    : '/'
}


设置前端运行的端口为8081
	
设置一个proxy，将前端请求代理到后端的8888端口
	
设置changeOrigin为true，允许跨域访问
经过这样的配置后，我们就能拿到后端数据并在页面上展示了。

六、跨域的其他做法

前面是前端跨域的设置方式，其实对于SpringBoot项目，我们也可以设置后端全局允许跨域，只要在启动类中加入如下Bean即可：

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**");
            }
        };
    }

也可以设置具体的某个controller方法跨域，只需要在方法上加注解@CrossOrigin("*")即可：

    @CrossOrigin("*")
    @PostMapping("DigitalFlop")
    @ResponseBody
    public Map<String ,Object> DigitalFlop() throws Exception{
        return csdnTopNService.DigitalFlop();
    }

道路千万条，安全第一条哦！

七、开发时在此处的一个迷茫点及解决方案

最开始因为前后端端口导致的跨域问题，我是直接配置了SpringBoot的全局允许跨域，然后前端请求的地方，写成了'http://localhost:8888/DigitalFlop'这样的完整地址，这样在开发阶段是没有问题的，但当把前端项目打包到Jar包中时，这样就不行了，因为会去访问localhost的的服务，这样肯定访问不到，那就会报错了，我开始的解决办法是，在打包前，把http://localhost:8888这部分去掉再打包，这样部署上去后就没有问题了。但比较麻烦，请求的地址老是要改来改去麻烦。

造成这种现象的原因是，开发阶段前后端分离，端口不一样，而部署时因为前端代码会打包到后端的Jar包中，就相当于部署阶段前后端的端口又一致了。所以才出现了这种情况。这个问题在dubbo-admin的说明文档里也有介绍：



然后我就查看了dubbo-admin的配置方式



代码如下：

'use strict'

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/': {
        target: 'http://localhost:8080/',
        changeOrigin: true,
        pathRewrite: {
          '^/': '/'
        }
      }
    },

    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-

    useEslint: true,

    showEslintErrorsInOverlay: false,

    //省略后面部分
}


然后我就按照这种方式，在前端工程中新建了这个文件夹和这个文件，但限于能力有限，不知道为何该文件的配置不生效，我工程中是在vue.config.js文件中生效的，于是找到了vue.config.js的配置方式。

问题完美解决，over！