Wain's blog

算法可视化网页——水体提取

Wain ... 2022-6-1 全栈开发
  • 算法部署
  • 开发文档
 About 4 min

# 算法可视化网页——水体提取

# 项目演示

演示的视频见以下网址： https://www.bilibili.com/video/BV1St4y1p7nD (opens new window)

项目仓库： https://github.com/DevinWain/water-extractor (opens new window)

# 日志

# 2022.5.17

  • 完成dao、domain、service层的初步构建
  • 完成对photolist数据表insert的测试

后续：

  • 完成CRUD的测试
  • 构建好controller，用postman进行测试
  • 与前端的请求匹配，完成图片存储

# 2022.5.18

  • 完成UploadController的构建，可以上传图片到指定目录中
  • 完成前端上传部分的功能

后续：

  • 后端的文件路径比较乱，需要整理一下
  • 前端完成图片的展示

# 2022.5.19

  • 完成前后端的交互，可以实现上传图片并展示

后续：

  • 搭建构建一个Django的算法后端，对图片进行处理

# 2022.5.20

  • 完成Django微服务的其中一个接口

后续：

  • 在Java SpringBoot中调用该服务，并将结果返回前端显示

# 2022.6.1——0.1.0 beta

  • 重构了前端页面，展示更加美观
  • 实现了一维Otsu法及其预处理、后处理的所有接口，可以正常展示
  • 为填充小洞加入参数的滑动条，方便调参与对比结果
  • 重新构建了Github的远端仓库
  • 录制了一个演示视频

后续：

  • 完成所有参数的滑动条，调参可视化
  • 完成二维Otsu、深度学习算法的部署

# 记录一下那些坑：

# mybatis-generator

主要记录一下流程：

  1. 配置pom文件，加入相关plugin
<plugin>
  <groupId>org.mybatis.generator</groupId>
  <artifactId>mybatis-generator-maven-plugin</artifactId>
  <version>1.3.2</version>
  <configuration>
    <!-- mybatis-generator的配置文件，根据情况调整位置 -->
    <configurationFile>src/main/resources/mybatis-generator.xml</configurationFile>
    <verbose>true</verbose>
    <overwrite>true</overwrite>
  </configuration>
  <executions>
    <execution>
      <id>Generate MyBatis Artifacts</id>
      <goals>
        <goal>generate</goal>
      </goals>
    </execution>
  </executions>
  <dependencies>
    <dependency>
      <groupId>org.mybatis.generator</groupId>
      <artifactId>mybatis-generator-core</artifactId>
      <version>1.3.2</version>
    </dependency>
  </dependencies>
</plugin>
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
  1. mysql建表
  2. 配置mybatis-generator.xml，同时在resources文件夹下加入mysql-connector-java的jar包。
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE generatorConfiguration
        PUBLIC "-//mybatis.org//DTD MyBatis Generator Configuration 1.0//EN"
        "http://mybatis.org/dtd/mybatis-generator-config_1_0.dtd">
<generatorConfiguration>

    <!--JDBC驱动jar包的 路径 -->
    <classPathEntry location="src/main/resources/mysql-connector-java-8.0.13.jar"/>

    <!--defaultModelType="flat" 大数据字段，不分表 -->
    <context id="Mysql" targetRuntime="MyBatis3Simple" defaultModelType="flat">
        <property name="autoDelimitKeywords" value="true" />
        <property name="javaFileEncoding" value="utf-8" />
        <!-- 生成序列化ID-->
        <plugin type="org.mybatis.generator.plugins.SerializablePlugin" />

        <plugin type="org.mybatis.generator.plugins.ToStringPlugin" />

        <!-- 注释 -->
        <commentGenerator >
            <property name="suppressAllComments" value="true"/><!-- 是否取消注释 -->
            <property name="suppressDate" value="true" /> <!-- 是否生成注释代时间戳-->
        </commentGenerator>

        <!--数据库链接地址账号密码-->
        <jdbcConnection driverClass="com.mysql.cj.jdbc.Driver"
                        connectionURL="jdbc:mysql://localhost:3306/water_photo?serverTimezone=Asia/Shanghai"
                        userId="root"
                        password="123456">
        </jdbcConnection>

        <!-- 类型转换 -->
        <javaTypeResolver>
            <!-- 是否使用bigDecimal， false可自动转化以下类型（Long, Integer, Short, etc.） -->
            <property name="forceBigDecimals" value="false"/>
        </javaTypeResolver>

        <!--生成Model类存放位置-->
        <javaModelGenerator targetPackage="com.wain.server.domain" targetProject="src/main/java">
            <property name="enableSubPackages" value="false"/>
            <property name="trimStrings" value="true"/>
        </javaModelGenerator>

        <!-- 生成mapxml文件 -->
        <sqlMapGenerator targetPackage="mapper" targetProject="src/main/resources" >
            <property name="enableSubPackages" value="false" />
        </sqlMapGenerator>

        <!-- 生成mapxml对应client，也就是接口dao -->
        <javaClientGenerator targetPackage="com.wain.server.dao" targetProject="src/main/java" type="XMLMAPPER" >
            <property name="enableSubPackages" value="false" />
        </javaClientGenerator>

        <!-- 指定生成代码的数据表 -->
        <table tableName="photolist" enableCountByExample="true" enableUpdateByExample="true" enableDeleteByExample="true" enableSelectByExample="true" selectByExampleQueryId="true">
<!--            <generatedKey column="id" sqlStatement="Mysql" identity="true" />-->

        </table>

<!--        <table tableName="user_role" enableCountByExample="true" enableUpdateByExample="true" enableDeleteByExample="true" enableSelectByExample="true" selectByExampleQueryId="true">-->
<!--            <generatedKey column="id" sqlStatement="Mysql" identity="true" />-->
<!--        </table>-->

    </context>
</generatorConfiguration>
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
  1. 利用IDEA的Mavan侧栏运行该插件，生成代码
  2. 在dao的接口加入注解：

dao上加入@Mapper注解（Mybatis官方推荐）

  1. 配置包扫描（5、6任选一个即可）：

在启动类上配置：

@MapperScan("com.wain.server.dao")
1

同时在dao上加入@Repository注解（Mybatis不推荐）

  1. 配置application.properties
mybatis.typeAliasesPackage=com.wain.server.domain
mybatis.mapperLocations=classpath:mapper/*.xml
1
2
  1. 编写测试类验证上述配置是否正确

这里用了service层来测试，实际上可以用dao层做测试，具体参考《疯狂Spring Boot终极讲义》P301

@RunWith(SpringRunner.class)
@SpringBootTest
class ServerApplicationTests {
    
    @Autowired
    private PhotoServiceImpl photoService;
    
    @Test
    void testPhotoService() {
        Photolist photo = new Photolist();
        photo.setUrl("/src/hello");
        photo.setCreatetime(new Date());
        
        System.out.println(photoService.addPhoto(photo));
    }
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 前端的img标签

html的img标签在src的url未更新的情况下是不会刷新图片的，也就是说，哪怕你的后台图片变了，只要url不变，那么前端展示的图片就不变。

解决方案：

在url中加入查询参数，可以指定为时间戳，从而保证每次url不一致。如：\img\1.png?23123123123。

# 参考资料

Invalid bound statement (not found)错误的可能原因：https://www.bilibili.com/read/cv4957285 (opens new window)

一分钟带你学会利用mybatis-generator自动生成代码：https://zhuanlan.zhihu.com/p/91985133 (opens new window)

Last update: June 3, 2022 11:21