1.工程环境搭建

1.1后端

创建springmvcplus 后端工程以maven 的形式创建的 web 工程

ssm 的一些基本的常用依赖

shell

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>com.glls.java2301</groupId>
  <artifactId>springmvcplus</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>springmvcplus Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
  </properties>

  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.12</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.springframework/spring-test -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-test</artifactId>
      <version>5.2.9.RELEASE</version>
      <scope>test</scope>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-context</artifactId>
      <version>5.2.9.RELEASE</version>
    </dependency>

    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-aspects</artifactId>
      <version>5.2.9.RELEASE</version>
    </dependency>


    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>8.0.15</version>
    </dependency>

    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis</artifactId>
      <version>3.4.6</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.alibaba/druid -->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>druid</artifactId>
      <version>1.1.10</version>
    </dependency>

    <!--分页插件-->
    <dependency>
      <groupId>com.github.pagehelper</groupId>
      <artifactId>pagehelper</artifactId>
      <version>5.1.10</version>
    </dependency>


    <!-- mybatis整合 spring -->
    <dependency>
      <groupId>org.mybatis</groupId>
      <artifactId>mybatis-spring</artifactId>
      <version>1.3.2</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/org.springframework/spring-jdbc -->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-jdbc</artifactId>
      <version>5.2.9.RELEASE</version>
    </dependency>

    <!--springmvc的依赖-->
    <dependency>
      <groupId>org.springframework</groupId>
      <artifactId>spring-webmvc</artifactId>
      <version>5.2.9.RELEASE</version>
    </dependency>


    <dependency>
      <groupId>org.projectlombok</groupId>
      <artifactId>lombok</artifactId>
      <version>1.18.20</version>
    </dependency>

    <!--文件上传-->
    <dependency>
      <groupId>commons-fileupload</groupId>
      <artifactId>commons-fileupload</artifactId>
      <version>1.4</version>
    </dependency>

    <!--servlet  需要这个依赖  并且 tomcat8 版本 要不会有 request 转换异常-->
    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>javax.servlet-api</artifactId>
      <version>4.0.1</version>
      <scope>provided</scope>
    </dependency>

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jsp-api</artifactId>
      <version>2.0</version>
      <scope>provided</scope>
    </dependency>

    <dependency>
      <groupId>javax.servlet</groupId>
      <artifactId>jstl</artifactId>
      <version>1.2</version>
    </dependency>

    <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
    <dependency>
      <groupId>com.fasterxml.jackson.core</groupId>
      <artifactId>jackson-databind</artifactId>
      <version>2.10.0</version>
    </dependency>

    <dependency>
      <groupId>com.aliyun.oss</groupId>
      <artifactId>aliyun-sdk-oss</artifactId>
      <version>3.10.2</version>
    </dependency>
    <!--easyexcel-->
    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>easyexcel</artifactId>
      <version>2.1.6</version>
    </dependency>
    <!--logback 日志-->
    <dependency>
      <groupId>org.slf4j</groupId>
      <artifactId>slf4j-api</artifactId>
      <version>1.7.25</version>
    </dependency>
    <dependency>
      <groupId>ch.qos.logback</groupId>
      <artifactId>logback-core</artifactId>
      <version>1.2.3</version>
    </dependency>
    <dependency>
      <groupId>ch.qos.logback</groupId>
      <artifactId>logback-classic</artifactId>
      <version>1.2.3</version>
    </dependency>
    <dependency>
      <groupId>log4j</groupId>
      <artifactId>log4j</artifactId>
      <version>1.2.17</version>
    </dependency>
    <dependency>
      <groupId>org.logback-extensions</groupId>
      <artifactId>logback-ext-spring</artifactId>
      <version>0.1.4</version>
    </dependency>
  </dependencies>

  <build>
    <finalName>springmvcplus</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>

    <resources>
      <!--在pom.xml文件中加上配置，让编译器把src/main/java目录下的xml文件一同编译到classes文件夹下-->
      <resource>
        <directory>src/main/java</directory>
        <includes>
          <include>**/*.xml</include>
        </includes>
      </resource>
      <resource>
        <directory>src/main/resources</directory>
        <includes>
          <include>**/*.xml</include>
          <include>**/*.properties</include>
          <include>**/*.xlsx</include>
        </includes>
      </resource>
    </resources>
  </build>
</project>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233

web.xml

shell

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">

  <!-- 上下文参数 -->

  <context-param>
    <param-name>contextConfigLocation</param-name>
    <!-- spring 配置文件 -->
    <param-value>classpath:applicationContext.xml</param-value>
  </context-param>

  <!-- 封装了一个监听器,帮助加载 Spring 的配置文件 -->

  <listener>
    <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
  </listener>


  <!--配置springmvc的前端控制器-->
  <servlet>
    <servlet-name>springmvc</servlet-name>
    <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    <init-param>
      <param-name>contextConfigLocation</param-name>
      <!-- <param-value>classpath:springmvc.xml</param-value>-->
      <param-value>classpath:springmvc.xml</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>springmvc</servlet-name>
    <!--不要设置为 /* -->
    <url-pattern>/</url-pattern>
  </servlet-mapping>


  <filter>
    <filter-name>encodingFilter</filter-name>
    <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    <init-param>
      <param-name>encoding</param-name>
      <param-value>utf-8</param-value>
    </init-param>
  </filter>
  <filter-mapping>
    <filter-name>encodingFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

</web-app>

3.springmvc.xml

shell

<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xmlns:mvc="http://www.springframework.org/schema/mvc"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop.xsd
        http://www.springframework.org/schema/tx
        http://www.springframework.org/schema/tx/spring-tx.xsd
        http://www.springframework.org/schema/mvc
        http://www.springframework.org/schema/mvc/spring-mvc.xsd">

    <!-- 告知springmvc  哪些包中 存在 被注解的类 -->
    <context:component-scan base-package="com.glls.java2301" use-default-filters="false">
        <context:include-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
        <context:include-filter type="annotation" expression="org.springframework.web.bind.annotation.RestController"/>
    </context:component-scan>

    <!-- 注册注解开发驱动 -->
    <mvc:annotation-driven>

    </mvc:annotation-driven>

    <!-- 视图解析器
 作用：1.捕获后端控制器的返回值="index"
      2.解析： 在返回值的前后 拼接 ==> "/index.jsp"
-->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <!-- 前缀 -->
        <property name="prefix" value="/"></property>
        <!-- 后缀 -->
        <property name="suffix" value=".jsp"></property>
    </bean>

    <!--
额外的增加一个handler，且其requestMapping:  "/**" 可以匹配所有请求，但是优先级最低
所以如果其他所有的handler都匹配不上，请求会转向 "/**" ,恰好，这个handler就是处理静态资源的
处理方式：将请求转会到tomcat中名为default的Servlet
-->
    <mvc:default-servlet-handler/>




<!--    <mvc:interceptors>-->
<!--        <mvc:interceptor>-->
<!--            <mvc:mapping path="/inter/test1"/>-->
<!--            &lt;!&ndash;            <mvc:mapping path="/inter/test2"/>&ndash;&gt;-->
<!--            &lt;!&ndash;            <mvc:mapping path="/inter/test*"/> &lt;!&ndash; test开头 &ndash;&gt;&ndash;&gt;-->
<!--            &lt;!&ndash;            <mvc:mapping path="/**"/> &lt;!&ndash; /** 任意多级任意路径 &ndash;&gt;&ndash;&gt;-->
<!--            <mvc:exclude-mapping path="/inter/login"/>   &lt;!&ndash;不拦截此路径&ndash;&gt;-->
<!--            <bean class="com.glls.java2301.interceptor.MyInter1"></bean>   &lt;!&ndash;拦截器类&ndash;&gt;-->
<!--        </mvc:interceptor>-->
<!--    </mvc:interceptors>-->
    
    
    <!--文件上传配置-->
    <bean id="multipartResolver"  class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!-- 请求的编码格式，必须和jSP的pageEncoding属性一致，以便正确读取表单的内容，默认为ISO-8859-1 -->
        <property name="defaultEncoding" value="utf-8"/>
        <!-- 上传文件大小上限，单位为字节（10485760=10M） -->
        <property name="maxUploadSize" value="10485760"/>
    </bean>
    
    
    
</beans>

4.applicationContext.xml

shell

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:aop="http://www.springframework.org/schema/aop"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:tx="http://www.springframework.org/schema/tx"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
       http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/aop
        http://www.springframework.org/schema/aop/spring-aop.xsd
        http://www.springframework.org/schema/context
        http://www.springframework.org/schema/context/spring-context.xsd
        http://www.springframework.org/schema/tx
        http://www.springframework.org/schema/tx/spring-tx.xsd">


    <!--基于注解的形式 管理 bean-->
    <!--扫描 com.glls.java2301 下的全部组件  除了控制层-->
    <context:component-scan base-package="com.glls.java2301" use-default-filters="true">
        <context:exclude-filter type="annotation" expression="org.springframework.stereotype.Controller"/>
        <context:exclude-filter type="annotation" expression="org.springframework.web.bind.annotation.RestController"/>
    </context:component-scan>

    <!--掌握   基于 AspectJ 的 注解 的  AOP实现 配置-->
    <aop:aspectj-autoproxy></aop:aspectj-autoproxy>

    <!--配置文件参数化（参数占位符）-->
    <context:property-placeholder location="classpath:db.properties" />

    <!--与DruidDataSource集成（二选一）-->
    <bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource" init-method="init" destroy-method="close">
        <!--基本配置-->
        <!--基本配置-->
        <property name="driverClassName" value="${jdbc.driver}"/>
        <property name="url" value="${jdbc.url}"/>
        <property name="username" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>

        <!-- 配置获取连接等待超时的时间 -->
        <property name="maxWait" value="60000"/>

        <!-- 配置间隔多久才进行一次检测，检测需要关闭的空闲连接，单位是毫秒 -->
        <property name="timeBetweenEvictionRunsMillis" value="60000"/>

        <!-- 配置一个连接在池中最小生存的时间，单位是毫秒 -->
        <property name="minEvictableIdleTimeMillis" value="300000"/>
    </bean>


    <!-- 工厂bean：生成SqlSessionFactory -->
    <bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <!--数据源属性-->
        <property name="dataSource" ref="dataSource"></property>
        <!--mybatis的配置文件-->
        <property name="configLocation" value="classpath:mybatis-config.xml"></property>
    </bean>


    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--扫描mapper 接口  自动创建mapper层代理对象  交给spring管理-->
        <property name="basePackage" value="com.glls.java2301.mapper"></property>

        <property name="sqlSessionFactoryBeanName" value="sqlSessionFactory"></property>
    </bean>


    <!--整合事务 第一步   配置事务管理器-->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"></property>
    </bean>
    <!--2.基于注解的形式  开启事务的注解-->
    <tx:annotation-driven transaction-manager="transactionManager"></tx:annotation-driven>

</beans>

5.mybatis-config.xml

shell

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <typeAliases>
        <!--自动扫描包，将原类名作为别名-->
        <package name="com.glls.java2301.pojo" />
    </typeAliases>

    <plugins>
        <plugin interceptor="com.github.pagehelper.PageInterceptor"></plugin>
    </plugins>


    <mappers>
        <!--扫描xml  映射文件-->
        <package name="com.glls.java2301.mapper"/>
    </mappers>
</configuration>

6.db.properties

shell

jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.url=jdbc:mysql://localhost:3306/ssm?characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&rewriteBatchedStatements=true
jdbc.username=root
jdbc.password=123456

7.logback.xml

shell

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <appender name="stdout" class="ch.qos.logback.core.ConsoleAppender">
        <Target>System.out</Target>
        <Encoding>UTF-8</Encoding>
        <encoder>
            <pattern>%d{yyyy-MM-dd_HH:mm:ss.SSS} %5p [%t] [%c{1}]:%L - %m%n
            </pattern>
        </encoder>
    </appender>
    <appender name="logfile"
              class="ch.qos.logback.core.rolling.RollingFileAppender">
        <Encoding>UTF-8</Encoding>
        <encoder>
            <pattern>%d %p [%t] [%c]:%L - %m%n</pattern>
        </encoder>
        <filter class="ch.qos.logback.classic.filter.ThresholdFilter">
            <level>DEBUG</level>
        </filter>
        <rollingPolicy class="ch.qos.logback.core.rolling.TimeBasedRollingPolicy">
            <fileNamePattern>log/%d{yyyy-MM-dd-HH'.log'}</fileNamePattern>
        </rollingPolicy>
    </appender>
    <logger name="org.springframework" level="WARN" />
    <logger name="org.springframework.remoting" level="WARN" />
    <logger name="org.springframework.scheduling.quartz" level="WARN" />
    <logger name="org.springframework.data.jpa" level="DEBUG" />
    <logger name="org.cometd" level="WARN" />
    <logger name="ch.qos.logback" level="WARN" />
    <logger name="com.springapp.mvc" level="DEBUG" />
    <logger name="com.glls.java2301.mapper" level="DEBUG"></logger>
    <!-- <logger name="com.ibatis" level="DEBUG"></logger> -->

    <root level="ERROR">
        <appender-ref ref="stdout" />
        <appender-ref ref="logfile" />
    </root>
</configuration>

1.2前端

vscode 创建前端的工程，准备资源文件资源文件直接cv吧，等下前端页面引用正确就行

2.登录页面

java

<script>
    layui.use(['form'], function () {
        var form = layui.form,
            layer = layui.layer;

        // 登录过期的时候，跳出ifram框架
        if (top.location != self.location) top.location = self.location;

        // 粒子线条背景
        $(document).ready(function () {
            $('.layui-container').particleground({
                dotColor: '#7ec7fd',
                lineColor: '#7ec7fd'
            });
        });

        //将cookie中的数据填写入表单中
        form.val("login-form",{
            "name":$.cookie("name"),
            "password":$.cookie("password"),
            "rememberMe":$.cookie("rememberMe") == "true",
        });



        // 进行登录操作
        form.on('submit(login)', function (data) {
            data = data.field;
            if (data.name == '') {
                layer.msg('用户名不能为空');
                return false;
            }
            if (data.password == '') {
                layer.msg('密码不能为空');
                return false;
            }
            if (data.code == '') {
                layer.msg('验证码不能为空');
                return false;
            }
            //保存旧密码
            let oldPassword = data.password;
            //对密码进行md5加密
            data.password = hex_md5(oldPassword);

            //发送ajax请求,请求用户登录
            $.ajax({
                method:"POST",
                url: "http://localhost:8088/api/adminUser/login",
                data: data,
                success: (result) => {
                    if (result.code === 200) {
                        //登录成功
                        //判断时候记住密码
                        if (data.rememberMe == "true") {
                            //将cookie存至本文件下
                            $.cookie('name', data.name, {expires: 9999, path: document.location.pathname});
                            $.cookie('password', oldPassword, {expires: 9999, path: document.location.pathname});
                            $.cookie('rememberMe', data.rememberMe, {expires: 9999, path: document.location.pathname});
                        } else {
                            alert("没有勾选记住密码");
                            //没有记住密码,删除所有密码的记录
                            $.removeCookie("name",{expires: 9999, path: document.location.pathname});
                            $.removeCookie("password",{expires: 9999, path: document.location.pathname});
                            $.removeCookie("rememberMe",{expires: 9999, path: document.location.pathname});
                        }
                        //将用户数据写入到cookie中
                        $.cookie('user', JSON.stringify(result.data.currentUser) , {path: "/"});
                        //提示登录成功信息
                        layer.msg('登录成功', {time: 5000}, function () {
                            window.location = '../index.html';
                        });
                    } else {
                        layer.msg(result.msg, {time: 1000});
                    }

                },
                error: (result) => {
                    layer.msg("网络请求失败,请检查网络", {time: 1000});
                }

            })

            return false;
        });
    });
</script>

后端接受参数查询用户信息返回

java

  /**
     * 管理员登录
     *
     * @param name     管理员用户名
     * @param password 管理员密码,MD5加密后的
     * @return 返回JSON
     */
    @RequestMapping("/login")
    public R login(@RequestParam String name, @RequestParam String password, @RequestParam String code){

        AdminUser adminUser = adminUserService.login(name, password);

        //登录成功
        if (adminUser != null) {
            return R.ok().message("登陆成功").data("currentUser",adminUser);
        }
        return R.ok();
    }

登录成功后跳转到 index.html,

3.分页列表数据

4.模糊查询

5.删除

6.编辑

7.添加

8.文件上传

9.echarts

一个基于 JavaScript 的开源可视化图表库

快速入门所有示例

使用步骤：

1.引入js

shell

 <script src="/lib/echarts.min.js"></script>
    <script src="/lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>

2.定义dom元素

shell

<div id="main" style="width: 600px;height:400px;"></div>

3.js去渲染dom元素

shell

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    //发送ajax 请求 去后段获取动态数据
    $.ajax({
        "url":"/ajax/bar",
        "success":function (result){
        // 注意 这里 ajax 请求 返回的数据格式
            var sexList= [];
            var sexCount=[];
            var arr  = result.data.sexBar;
            for(var i=0;i<arr.length;i++){
                sexList.push(arr[i].sex);
                sexCount.push(arr[i].count);
            }


            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '男女性别人数'
                },
                tooltip: {},
                legend: {
                    data: ['性别']
                },
                xAxis: {
                    data: sexList
                },
                yAxis: {},
                series: [
                    {
                        name: '性别',
                        type: 'bar',
                        data: sexCount,
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }

                    }
                ]
            };

           // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        }
    })

</script>

4.注意

后端返回的数据格式，一般这里需要咱们自己定义一些 vo 对象，来对应前端的数据

java

@Data
@AllArgsConstructor
@NoArgsConstructor
public class SexBarVo {

    private String sex;

    private Integer count;
}

1.工程环境搭建 ​

1.1后端 ​

1.2前端 ​

2.登录页面 ​

3.分页列表数据 ​

4.模糊查询 ​

5.删除 ​

6.编辑 ​

7.添加 ​

8.文件上传 ​

9.echarts ​

10.easyexcel ​

1.工程环境搭建

1.1后端

1.2前端

2.登录页面

3.分页列表数据

4.模糊查询

5.删除

6.编辑

7.添加

8.文件上传

9.echarts

10.easyexcel