-
ssm把后端数据传到前端_Ssm框架下怎么把数据库数据动态显示到前端页面?
2021-01-13 12:11:111、怎么使数据库中的数据动态的在前端显示?可以通过ajax的局部刷新来实现前端页面的动态变化显示,比如选择不同的条件,页面相应的显示不同的结果。2、怎么查询数据库?因为你使用了ssm框架,所以你可以使用mybatis...总结一下你的问题,可以分为以下几点。
1、怎么使数据库中的数据动态的在前端显示?
可以通过ajax的局部刷新来实现前端页面的动态变化显示,比如选择不同的条件,页面相应的显示不同的结果。
2、怎么查询数据库?
因为你使用了ssm框架,所以你可以使用mybatis的mapper功能来进行查询,而在Mapper里面写好正确的SQL查询语句就可以了,对于多个数据库中的表显示在前端一个表格里面的情况,可以通过表连接查询,或者表之间的关系(比如一对多、一对一、多对多)来实现,查询结果选取前端需要显示的列即可,这部分是数据库上的知识。
3、页面用静态页面还是动态页面?
静态页面(比如html)或者动态页面(比如jsp)都是可以的,如果用的ajax访问,两者区别可以忽略。
4、想查哪条数据就显示哪条数据是怎么做到的?
不知道你有没有学过数据库,如果学过的话,应该知道数据库中通过SQL的条件查询可以过滤掉不需要的数据,这样子就可以根据查询的条件来获取自己想要显示在页面的数据,然后显示出来就可以了。
上面的东西,至少需要一个基本的了解,不然估计也看不懂我描述的是什么,如果看不懂的话,建议还是先学习一下下面列举的这些东西的基础知识再看:
Spring、Spring MVC、MyBatis、SQL、ajax、jQuery、json。
-
怎么用json把后端的数据传到前端html界面显示,javascript要怎么写?
2017-11-30 12:54:54//后端代码 public JsonResult SendData() ... //怎么把这个“刘伟”替换成动态的,由后端发送的? ; z-index:2; top:100px">教工号:2432012522 //怎么把这个“2432012522”替换成动态的,由后端发送的? </div> -
后端blob 怎么显示在页面_将数据库保存的blob图片流传到前端显示出来
2020-12-22 17:23:22list[i].bookCover = "data:image/png;base64," +list[i].bookCover;console.log(list[i]....}if(list==null){var toastText="获取数据失败"+res.data.strMsg;wx.showToast({title: toastText,icon:'',duration:6...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();
}
-
day59 后端传给前端数据,前端不显示的问题。
2020-01-07 13:57:10后端函数从数据库拿到数据,然而在前端数据却怎么也显示出来。 1.先排查数据库数据有没有问题,没有。 2.检查在后端数据库能不能显示出来,能显示出来。 3.重新写一个前端页面,只显示这个数据,看看能不能显示...做作业的时候遇到一个非常非常非常奇怪的问题。
后端函数从数据库拿到数据,然而在前端数据却怎么也显示出来。
1.先排查数据库数据有没有问题,没有。
2.检查在后端数据库能不能显示出来,能显示出来。
3.重新写一个前端页面,只显示这个数据,看看能不能显示出来。发现是可以的????
甚至我重新在后端写个函数,直接返回那个不能显示数据的页面,竟然发现不能显示的数据,显示成功了?
这特喵的是为什么呢?只有可能是后端的函数写的有问题,
一条一条的修改,一条一条的排查,
我发现我只要加上
{'username': current_user}
这个变量,就会出问题,
1.难道这个变量本身有问题,会导致报错?可是并没有,这个变量在后台打印,甚至在其他页面正常显示都没问题。
2.难道,一个页面只能传递一个变量?可是老师也用了俩变量啊。跟我的一毛一样,为啥他的没问题就能正常显示呢???
难道是我的写法有问题??然后我就去看了老师写法。。。发现他的虽然是俩变量,但他俩变量就只用了一个括号括起来,然而我,我用了俩括号,改成一个括号之后。。。。发现没问题了。俩数据都正常显示了。
事已至此,问题终于解决,
python的机制应该是这样,你可以从后端往前端传无数个变量,但是你必须放一个花括号里面,不然第二个数据他就不认了,他只找一次花括号……
-
大屏监控系统实战(8)-前端请求后端获取数据并显示
2020-01-22 11:05:02这篇中,我们已经将前后端项目都导入到IDEA中了,所以目前我们的前端项目结构是这样的。用红框标注的就是我们要动的一个组件。不要问我是怎么知道要改这个组件的,我不会告诉你,是我打开那个demo页面,然后通过搜索...一、概述
前面我们已经发布了接口,并进行了测试,一切正常后,接下来我们写前端工程。在如何将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!
-
后端实时获取类似json格式的数据,获取后进行处理,传向前端页面,前端可以实时显示处理后的数据?
2019-03-06 16:08:351. 后端每隔一短时间后就会获取到传感器的温度等数据,然后进行数据解析,前端会实时获取到来自后端所处理的数据。 1. 例如我们电脑CPU的实时数据显示,我们可以清楚的看CPU的变化。 请问各位大佬,这个应该怎么做... -
springboot怎么把从多个表查询到的数据显示到前端_大数据平台日志存储分析系统解决方案...
2020-12-14 03:36:22大数据平台日志存储分析系统是在大数据平台下,针对业务系统产生的日志记录进行存储和分析。日志数据来自ElasticSearch存储的日志历史数据,并将需要存储和分析的日志数据从Elastic...Web前端通过调用后端API检... -
前端如何接收后端传递过来的集合,并成功显示???
2021-01-21 03:20:22Map等都可以啊,关键是需要ajax去接收,那么ajax接收的json数据是一个大块数据,接收到之后再进行拆分,这时ajax希望得到的,而不是多个对象分开的,你可以理解为把多个对象进行打包,然后统一给前端,这种情况前端... -
Layui获取到后端传来的图片地址,如何在img标签中显示?
2020-12-09 09:52:17现在我前端已经获取到这个字段的数据了,. 应该如何在img里显示? <p style="text-align:center"><img alt="" height="704" src="https://img-ask.csdnimg.cn/upload/1607478601646.png" width="1127" /></p> 这是... -
关于JavaDate数据返回到前端变数字的问题(并引申到前后端时间的传输)
2019-10-07 11:29:07不知道为什么,前端显示的所有数据项都没有错,就只有时间那一项很奇怪,是一串数字,而且这个数字在数据库怎么都找不到…… 然后我在后端从service到controller都debug了一遍,发现数据都没有错,拿的都是时间啊... -
数据库时间存的是int型,前端传入date型数据该怎么查到具体某月某日
2019-09-17 14:33:08首先应用场景是app上有个用户可以选择年月的入口,前端传入date字符串如'2019/09',但是后端设计的时候在存储的时候就将时间存储为了int型时间,也就是date存入时需要进行一次转换,具体为什么要将数据库设计成这样... -
java date 数字_关于JavaDate数据返回到前端变数字的问题(并引申到前后端时间的传输)...
2021-02-12 22:21:05不知道为什么,前端显示的所有数据项都没有错,就只有时间那一项很奇怪,是一串数字,而且这个数字在数据库怎么都找不到……然后我在后端从service到controller都debug了一遍,发现数据都没有错,拿的都是时间啊。... -
java 传回下拉框数字_关于JavaDate数据返回到前端变数字的问题(并引申到前后端时间的传输)...
2021-02-26 11:12:13不知道为什么,前端显示的所有数据项都没有错,就只有时间那一项很奇怪,是一串数字,而且这个数字在数据库怎么都找不到……然后我在后端从service到controller都debug了一遍,发现数据都没有错,拿的都是时间啊。... -
《前端》Element ui 表格(Table)组件中前端实现数据分页和模糊查询--未看
2020-10-21 15:52:49(4条消息) Element ui 表格(Table)组件中前端实现数据分页和模糊查询_明天也要努力的博客-... 如果拿的数据是动态的,那就只能在点击【搜索】按钮时发送请求给后端,然后重新绑定到表格并显示 本觉得这个问题实在... -
前端权限怎么弄,如何根据权限限制其能否进入该模块
2019-12-24 10:21:27简介: 软件开发中的权限管理是常见的...首先软件的菜单的做成“活的”,即,菜单不能是纯粹的静态的,而应该是根据后端返回来的数据,来显示菜单的。 菜单如何做成活的? 1、后端给前端返回菜单数据 ... -
前端请求restful风格接口怎么传参_浅谈Restful API 的请求规范
2020-12-24 10:35:11前言在SpringMVC架构上进行开发,开发者一直在使用jsp、valocity...更糟糕的是,将数据渲染到页面模版上时,往往都会出现排版、样式错乱的情况,需由后端工程师自己调试,或请前端工程师在后端的开发环境进行调试... -
前后端如何进行数据交互
2020-12-22 14:28:402、后端是怎么接收到前端发送过来的数据? 3、后端怎么对前端发送来的数据进行处理? 4、处理完之后又怎么写入数据库,以及给前端返回处理结果? 网站数据处理主要分为三层。 第一层,表示层,这部分可以用HTML代码... -
前端面试题:后台管理系统的权限怎么弄,如何根据权限展示不同的页面
2019-12-20 19:17:51简介: 后台管理系统中的权限管理是常见的问题,因为,后端管理牵扯到不同工作人员的职责... 1、首先后台管理系统的菜单的做成“活的”,即,菜单不能是纯粹的静态的,而应该是根据后端返回来的数据,来显示菜单的... -
前端接收不到后台发来的JSON问题原因
2016-11-28 09:14:20昨天在做一个头像上传的功能,要求选择完成图片以后立刻完成上传功能并且在页面上显示,需要用到异步上传,就是用了ajaxSubmit()进行表单的上传操作,但是不管怎么弄前台都接收不到后端发来的json数据,设置dataType... -
xml 文件打开全是null 怎么让它正常显示_JSON与XML的比较
2020-12-03 09:57:37数据传输的方向有两个,一个是从前端传到后端,再一个就是从后端转向前端。那我们设想一下我们的运行环境。我们有数据库存放数据。我们有程序来读取数据库,来写数据库。对于程序以外的程序来说,这些数据都是放在黑... -
项目小结(1)——报表中对于60w的数据量,怎么进行sql查询优化
2021-02-02 10:56:47近期要做一个项目是展示一个报表,要对后端传来的数据,在前端进行展示并进行相同单元格的合并显示同时在打印页面也要进行单元格合并,框架使用的是bootstraptable,接下来我分成前端显示的单元格合并,和打印时的... -
前端面试题
2018-08-24 09:32:001.call和apply的区别 ...6.从输入url到显示网页,后台发生了什么 7.谈谈你对This的理解 8.请用js实现一个继承 9.哪些操作会造成内存泄漏 10.在项目开发过程中你是怎么和后端进行交互的? 11.清除浮... -
前端局部自动刷新_2020Web前端高频面试题及答案解析
2021-01-05 07:24:19解析:hash模式会在url上显示'#',而history模式没有刷新页面时,hash模式可以正常加载到hash值对应的页面,history模式没有处理的话,会返回404,一般需要后端将所有页面都配置重定向到首页路由兼容性上,hash模式... -
浅析基于WEB前端页面的页面内容搜索的实现思路
2020-12-07 05:07:30表单获取关键字 –> 传入后端SQL语句处理 –>数据返回给前端显示 今天突然到游览器的Ctrl+F的这个功能怎么实现的,把数据一次放在页面上,然后在用JS 去匹配页面的内容。 不管怎么样,现在完成了功能,然后在做... -
sql怎么实现某一列拼接成一行显示_网页端实现sql的AppendLine拼接转换
2021-01-18 09:11:06实现的主要功能点设置背景图透明实现sql的数据转换目录 一、应用场景二、代码示例:前端控件三、代码示例:前端样式四、代码示例:后端字符串转换五、最终效果图一、应用场景 当我们在sql server中写好sql执行通过... -
vue+ant design中关于图片请求不显示的问题。
2020-11-09 14:45:31遇到这么个问题,后端给前端传递了图片流,按道理来说,前端通过img标签就可以引入显示,当时我的却怎么也不显示。 本来应该显示出来的,那我们就直接打印一下reponse的数据吧 里面是一堆图片流代表我们都从后端... -
SegmentFault 技术周刊 Vol.3 - 前后端分离与前端工程化
2016-12-21 11:17:34简单的说,就是前端负责浏览器端用户交互界面和逻辑等,显示数据;后端负责数据的处理和存储等,提供数据。要详细说……还是要具体到项目里理解,再编就编不下去了。还是看我们这一期的周刊吧。 -
vue怎么渲染一个对象的各种属性到一个card里?
2020-10-19 23:08:581.问题描述,我从后端接收到的数据是一个对象list,例如这样的List=[{name:"张三",age:18,sex:"女"},{name:"李四",age:20,sex:"男"},{name:"王二麻子",age:21,sex:"女"}],我想在前端把它展示为: 姓名:XX ...
-
link.py(python3.x)
-
回顾知识点1
-
删除win10自带杀毒软件.iso
-
第六课 NIO.2 & 自动资源管理
-
深度学习-语音识别实战(Python).rar
-
PowerBI重要外部工具详解
-
亲历300家企业私域运营增长,我们发现了3条深律和2个要点
-
尚硅谷_授课须知.pdf
-
okex_swap_orderbook.BTCUSDT.20200415.csv.tar.gz
-
MySQL 高可用工具 heartbeat 实战部署详解
-
L2-013 红色警报 (25 分)
-
JMETER 性能测试基础课程
-
A6jc5.1.rar
-
MySQL Router 实现高可用、负载均衡、读写分离
-
用php的定界符EOT需要留个心眼
-
DHCP 动态主机配置服务(在Linux环境下,配置单网段或跨网段提)
-
Samba 服务配置与管理
-
pygame键盘输入框拓展(这个包特别简单,也不用加别的复杂的拓展,小白都可以直接简单使用)
-
windows chrome安装画图插件Gliffy Diagrams
-
物联网基础篇:快速玩转MQTT