开发工具IDEA

废话不多说直接看效果图

柱状图
在这里插入图片描述
折线图

饼图

1:创建表

2:搭建项目

在这里插入图片描述
项目结构图

3:实体类entity

package com.example.crud.entity;public class User {private int id;private String username;private String password;private int age;public int getId() {return id;}public void setId(int id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}public String toString() {return "User{" +"id='" + id + '\'' +", username='" + username + '\'' +", password='" + password + '\'' +", age=" + age +'}';}
}

4:mapper接口

package com.example.crud.mapper;import com.example.crud.entity.User;
import org.apache.ibatis.annotations.Param;
import org.springframework.stereotype.Repository;import java.util.List;@Repository  //该注解是要与启动类中的@mapperscan配套使用
public interface usermapper {/** 查询所有用户*/List<User> userList();/** 增加保存用户*/void save(User user);/** 根据id删除用户*/int delete(Integer id);/** 根据id查找用户*/User findUserById(int id);/** 更改用户信息*/int update(User user);int adduser(@Param("username") String username, @Param("password") String password,@Param("age") int age);User userlogin(@Param("username") String username, @Param("password") String password);
}

5:service层

package com.example.crud.service;import com.example.crud.entity.User;
import com.example.crud.mapper.usermapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;@Service
public class userservice {@Autowiredprivate usermapper usermapper; //注入UserMapperpublic  int adduser(String username, String password,int age) {return usermapper.adduser(username,password,age);}/** 查询所有用户*/public List<User> userList(){return usermapper.userList();}/** 增加保存用户*/public void save(User user){usermapper.save(user);}/** 根据id删除用户*/public int delete(Integer id){return usermapper.delete(id);}/** 根据id查找用户*/public User findUserById(int id){return usermapper.findUserById(id);}/** 更改用户信息*/public int update(User user) {return  usermapper.update(user);}public User userLogin(String username, String password) {User user = usermapper.userlogin(username,password);return user;}
}

6:controller层

 @RequestMapping( "/show")@ResponseBodypublic List<User> findById(Model model) {List<User> users = userService.userList();System.err.println(users.toString());return users;}//展示柱状图@RequestMapping( "/showbar")public String show2() {return "bar";}//展示饼图@RequestMapping( "/showpie")public String show3() {return "pie";}//展示折线图@RequestMapping( "/showline")public String show4() {return "line";}

配置文件application.yml

server:port:8081
spring:#数据库配置datasource:url: jdbc:mysql://localhost:3306/test?serverTimezone=CTT&characterEncoding=utf-8driver-class-name: com.mysql.jdbc.Driverusername: rootpassword: 123456initial-size: 10max-active: 20max-idle: 8min-idle: 8#静态资源配置mvc:static-path-pattern: /**#thymeleaf模板引擎配置thymeleaf:prefix: classpath:/templates/suffix: .htmlmode: HTMLencoding: UTF-8cache: falseservlet:content-type: text/html
mybatis:#配置实体类的包路径type-aliases-package: com.example.crud.entity#配置对应的xml路径mapper-locations: classpath:mapping/*.xml

引入echarts与jQuery

为了避免找js文件出现路径问题，可以下面这样的方式引用

<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- 引入 echarts.js -->
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>

7:柱状图bar.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">$(document).ready(function(){// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));//数据加载完之前先显示一段简单的loading动画myChart.showLoading();var names=[];    //横坐标数组（实际用来盛放X轴坐标值）var values=[];    //纵坐标数组（实际用来盛放Y坐标值）$.ajax({type : "post",async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）url : "/show",    //请求发送到dataActiont处data : {},dataType : "json",        //返回数据形式为jsonsuccess : function(result) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (result) {for(var i=0;i<result.length;i++){names.push(result[i].username);values.push(result[i].age);}myChart.hideLoading();    //隐藏加载动画myChart.setOption({//加载数据图表title:{text: '用户年龄统计图'},legend: {data:['用户年龄']},xAxis: {data: names,axisLabel:{interval: 0}},yAxis: {type: 'value'},series: [{// 根据名字对应到相应的系列name: '用户年龄',type: 'bar',data: values}]});}},error : function(errorMsg) {//请求失败时执行该函数alert("图表请求数据失败!");myChart.hideLoading();}});//end ajax});
</script>
</body>
</html>

8:折线图line.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:450px;"></div>
<script type="text/javascript">$(document).ready(function(){// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));//数据加载完之前先显示一段简单的loading动画myChart.showLoading();var names=[];    //横坐标数组（实际用来盛放X轴坐标值）var values=[];    //纵坐标数组（实际用来盛放Y坐标值）$.ajax({type : "post",async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）url : "/show",    //请求发送到dataActiont处data : {},dataType : "json",        //返回数据形式为jsonsuccess : function(result) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (result) {for(var i=0;i<result.length;i++){names.push(result[i].username);values.push(result[i].age);}myChart.hideLoading();    //隐藏加载动画myChart.setOption({//加载数据图表title:{text: '用户年龄统计图'},legend: {data:['用户年龄']},xAxis: {data: names,axisLabel:{interval: 0}},yAxis: {type: 'value'},series: [{// 根据名字对应到相应的系列name: '用户年龄',type: 'line',data: values}]});}},error : function(errorMsg) {//请求失败时执行该函数alert("图表请求数据失败!");myChart.hideLoading();}});//end ajax});</script>
</body>
</html>

9:饼图pie.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>饼状图</title><script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script><!-- 引入 echarts.js --><script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 800px;height:450px;" align="center"></div>
<script type="text/javascript">$(document).ready(function(){// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));//数据加载完之前先显示一段简单的loading动画myChart.showLoading();var values=[];//数据加载完之前先显示一段简单的loading动画myChart.showLoading();$.ajax({type : "post",async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）url : "/show",    //请求发送到dataActiont处data : {},dataType : "json",        //返回数据形式为jsonsuccess : function(data) {//请求成功时执行该函数内容，result即为服务器返回的json对象if (data) {for(var i=1;i<data.length;i++){var test={"value":data[i].age, "name":data[i].username};values.push(test);}myChart.hideLoading();    //隐藏加载动画myChart.setOption({title: {text: '爱情公寓人物受欢迎度统计',subtext: '纯属虚构',left: 'center'},legend: {orient: 'vertical',left: 'left',data: values},series: [{name: '物料来源',type: 'pie',radius: '60%',center: ['50%', '50%'],data:values,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]});}},error : function(errorMsg) {//请求失败时执行该函数alert("图表请求数据失败!");myChart.hideLoading();}});//end ajax});//刷新方法结束
</script>
</body>
</html>

10:usermapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.crud.mapper.usermapper"><!--查询所有用户--><select id="userList" resultType="User">select * from user</select><!--登录验证--><select id="userlogin" parameterType="User" resultType="User">select * from user where username=#{username} and password=#{password}</select><!--添加用户--><insert id="adduser" parameterType="User" keyProperty="id" >INSERT INTO user(username,password,age) VALUES (#{username},#{password},#{age})</insert><!--删除用户--><delete id="delete" parameterType="int">delete from user where id = #{id}</delete><!--根据id查询用户--><select id="findUserById" resultType="User">select * from user where id = #{id}</select><!--更改用户信息--><update id="update"  parameterType="user">update user set username=#{username},password=#{password} where id=#{id}</update></mapper>

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

全新的界面设计 ，将会带来全新的写作体验；
在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示；
增加了 图片拖拽 功能，你可以将本地的图片直接拖拽到编辑区域直接展示；
全新的 KaTeX数学公式 语法；
增加了支持甘特图的mermaid语法¹ 功能；
增加了 多屏幕编辑 Markdown文章功能；
增加了 焦点写作模式、预览模式、简洁写作模式、左右区域同步滚轮设置 等功能，功能按钮位于编辑区域与预览区域中间；
增加了 检查列表 功能。

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

合理的创建标题，有助于目录的生成

直接输入1次#，并按下space后，将生成1级标题。
输入2次#，并按下space后，将生成2级标题。
以此类推，我们支持6级标题。有助于使用TOC语法后生成一个完美的目录。

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

H₂O is是液体。

2¹⁰ 运算结果是 1024.

插入链接与图片

链接: link.

图片: Alt

带尺寸的图片:

居中的图片: Alt

居中并且带尺寸的图片:

当然，我们为了让用户更加便捷，我们增加了图片拖拽功能。

如何插入一段漂亮的代码片

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

// An highlighted block
var foo = 'bar';

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash

创建一个自定义列表

Markdown: Text-to-HTML conversion tool
Authors: John; Luke

如何创建一个注脚

一个具有注脚的文本。²

注释也是必不可少的

Markdown将文本转换为 HTML。

KaTeX数学公式

您可以使用渲染LaTeX数学表达式 KaTeX:

Gamma公式展示 $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ 是通过欧拉积分

$\Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,.$

你可以找到更多关于的信息 LaTeX 数学表达式here.

新的甘特图功能，丰富你的文章

关于 甘特图 语法，参考这儿,

UML 图表

可以使用UML图表进行渲染。 Mermaid. 例如下面产生的一个序列图：

这将产生一个流程图。:

关于 Mermaid 语法，参考这儿,

FLowchart流程图

我们依旧会支持flowchart的流程图：

关于 Flowchart流程图 语法，参考这儿.

导出与导入

导出

如果你想尝试使用此编辑器, 你可以在此篇文章任意编辑。当你完成了一篇文章的写作, 在上方工具栏找到 文章导出 ，生成一个.md文件或者.html文件进行本地保存。

导入

如果你想加载一篇你写过的.md文件，在上方工具栏可以选择导入功能进行对应扩展名的文件导入，
继续你的创作。

mermaid语法说明 ↩︎
注脚的解释 ↩︎

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

uni-app上传头像base64转码
uni-app上传头像base64转码首先需要调起相册，使用 uni.chooseImage 方法选择相册，点击相册里面的图片，确定可以选择图片并获取到图片的路径之后，uni-app官网有插件可以来使用，引入插件之后，使用插件的方法就可以获取base64转码。插件网址：http://ext.dcloud.net.cn/pl…...
2024/4/3 16:59:24
关于VMware安装Ubuntu18.04的问题
下载了ubuntu-18.04.3-desktop-amd64.iso，安装到vmware12中，安装了好几次都卡住不动了，浪费了很多时间。现将遇到的坑记录一下：1.新建虚拟机后会出现如下提示，记住一定要选择稍后安装。2.新建完成后，硬件设置里，至少要设置如下：3.然后一步一步安装就可以了。具体安装过…...
2024/4/27 23:33:02
NIO（二）：核心概念之_Buffer缓冲区
NIO（二）：核心概念之_Buffer缓冲区...
2024/3/29 7:59:53
Java设计模式——访问者模式（Visitor模式）详解
模式的定义与特点访问者（Visitor）模式的定义：将作用于某种数据结构中的各元素的操作分离出来封装成独立的类，使其在不改变数据结构的前提下可以添加作用于这些元素的新的操作，为数据结构中的每个元素提供多种访问方式。它将对数据的操作与数据结构进行分离，是行为类模式中…...
2024/3/29 7:59:35
java连接hbase数据库
JAVA操作Hbase数据库使用IDEA连接hbase数据库新建一个Maven项目连接hbase数据库编写java操作hbase的代码全部代码总结使用IDEA连接hbase数据库最近学习了hbase，想做下记录后面忘了再来看，也可以分享给各位小伙伴们。新建一个Maven项目奥，首先你的有一个ieda，哈哈哈哈打…...
2024/4/9 0:45:11
win10美化,让你的win10独一无二,与众不同!
文章目录1.原则2 桌面2.1 桌面图标2.2 任务栏3 字体4 开始菜单5 透明化任务栏5.1 TranslucentTB5.2 Stardock Start106 右键菜单6.1 备份6.2 修改6.3 子菜单6.4 隐藏菜单7 资源合集7.1 壁纸7.2 字体7.3 任务栏透明 1.原则美化之前,得先有一个目标对不对,笔者是一个喜欢简单的人…...
2024/3/29 7:59:33
GO语言项目目录结构
GO语言项目目录结构...
2024/3/29 7:59:33
STM32低功耗模式下GPIO如何配置最节能？
NB-IoT窄带物联网（Narrow Band Internet of Things, NB-IoT）成为万物互联网络的一个重要分支。NB-IoT构建于蜂窝网络，只消耗大约180KHz的带宽，可直接部署于GSM网络、UMTS网络或LTE网络，以降低部署成本、实现平滑升级。不脱发的程序猿9.905人订阅去订阅目录1、将未使用的GP…...
2024/3/29 12:07:58
GIT基础操作
回滚到上次提交:git revert commit-id(b8e74ac66e2b4d348d73401512aa83095c96a84f)cd d: —切换到d盘下 =====切换目录命令mkdir www —在d盘下创建www文件夹 =====创建文件夹命令cd www …...
2024/4/26 21:58:18
freecodecamp 学习javascript
let 申明的变量不能被覆盖，var 可以Const 定义的常量不能保证不被修改，可以使用 Object.freeze(obj) 来冻结...
2024/4/16 20:22:05
iOS：栈、堆、字符串常量区、全局区
内存概述 C语言的数据在运行之前，编译器会提前预留一些内存(text 代码区，BSS、data等)，这些数据不是说编译器就能生成，而是告诉程序在程序启动时先创建并分配内存，这部分数据就是全局区。全局区分程序区域和数据区域，也就是 text 和 data区域，其中 text 存放二进制代码…...
2024/3/29 12:07:55
SOME/IP RPC protocol-Request/Response Communication
Request/Response Communication请求/响应通信 One of the most common communication patterns is the request/ response pattern. One communication partner (in the following called the client) sends a request message, which is answered by another communication p…...
2024/3/29 12:07:55
NIO（三）：核心概念之_Channel通道
NIO（三）：核心概念之_Channel通道...
2024/4/2 5:14:30
1002 A+B for Polynomials (25分)
这题我自己写的,但是又臭又长.贴一下,自己的代码,毕竟是自己写的.原题如下This time, you are supposed to find A+B where A and B are two polynomials.Input Each input file contains one test case. Each case occupies 2 lines, and each line contains the information …...
2024/4/6 3:51:17
s5pv210时钟系统详解
S5PV210时钟系统 1、什么是时钟系统？时钟系统的作用？时钟系统指的由固有频率来控制的系统。作用：有了一定的频率，工作才能有序，有节奏的进行着。 2、S5PV210的时钟系统是怎么样的？ S5PV210：外部晶振+内部时钟发生器+内部PLL产生高频时钟+分频器 3、S5PV210时钟系统的工…...
2024/3/29 12:07:51
用tensorflow构建一个两层的auto-encoder
Auto-Encoder Example 本文具体数据集与源代码可从我的GitHub地址获取 https://github.com/liuzuoping/Deep_Learning_note 用tensorflow构建一个两层的auto-encoder，把图像压缩到一个低维隐层空间并重构。 Auto-Encoder 概览参考文献:Gradient-based learning applied to doc…...
2024/3/29 3:25:36
sql中几种删除语句的比较和基础用法
sql中有三种删除语句delete、drop、truncate1.delete 基础用法：delete from table(表名) [where] 用法理解：用于删除有明确定义的数据或者整个表的数据。比如：id是唯一不可重复的，delete from Student where id=5,即把id=5的唯一的一条数据删除。当然不一定只删除一条数据，…...
2024/4/10 12:37:30
ARM的体系结构
电子器件的发展方向模拟器件（模拟电视）->数字器件（数字电视）ASIC->可编程器件可编程器件的特点CPU提供固定的频率（作为指令传送的频率），CPU通过总线读取外部设备中的指令集，然后解码执行。可以被CPU执行的指令集是在这个CPU生产的时候就决定他能接受什么样的二进…...
2024/4/12 2:27:37
移动端页面元素尺寸解决方案之一
如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位.主流做法基本也都是这样做的.但是,如果html5页面是在webview中打开的,并且webview不是通常的手机视窗尺寸,而是占了部分页面,使用rem单位的转化标准就没有了通用性.面对这种情况,可以尝试以下的解决方案.使用tr…...
2024/4/12 2:35:30
ssh连接工具----xmanager5
Xmanager是一个简单易用的高性能的运行在Windows平台上的X Server软件。它能把远端Unix/Linux的桌面无缝地带到你的Windows上，甚至当你的电脑是在内网或防火墙后，你也能通过SSH协议安全的运行远端的X应用程序。特点包括： -可通过Xcongfig工具设置多个Xmanager设置； -支持多…...
2024/3/29 7:59:47

SpringBoot+Echarts实现获取数据库（mysql）数据在前台的柱状图、折线图、饼图显示