垃圾分类网站 web前端 + java后端

• 数据库设计

1. 垃圾分类知识表：

字段名称	数据类型
id（唯一标识）	BIGINT(20)
title（名称）	VARCHAR(255)
image（图片）	VARCHAR(255)
content（介绍）	VARCHAR(255)
type（类型）	BIGINT(20)

新建knowledge表：

CREATE TABLE `knowledge` (

                                   `content` varchar(255) DEFAULT NULL,

                                   `id` bigint(20) NOT NULL,

                                   `image` varchar(255) DEFAULT NULL,

                                   `title` varchar(255) DEFAULT NULL,

                                   `type` bigint(20) DEFAULT NULL,

                                   PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

插入数据（部分）：

INSERT INTO `knowledge` VALUES ('过期饼干可降解和进行生化处理，再利用为肥料或饲料，属于厨余垃圾。',3,'3.png','饼干',2)

1. 游戏计分表：

字段名称	数据类型
sno（学号）	VARCHAR(45)
name（名字）	VARCHAR(45)
score（得分）	INT(11)

新建score表：

CREATE TABLE `score` (

  `sno` varchar(45) DEFAULT NULL,

  `name` varchar(45) DEFAULT NULL,

  `score` int(11) DEFAULT NULL

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

插入数据（部分）：

INSERT INTO `score` VALUES ()

1. 用户留言表：

字段名称	数据类型
id（唯一表示）	VARCHAR(45)
sno（学号）	VARCHAR(45)
name（姓名）	VARCHAR(45)
content（内容）	VARCHAR(45)
time（时间）	VARCHAR(45)

新建message表：

CREATE TABLE `message` (

  `id` varchar(45) NOT NULL,

  `sno` varchar(45) DEFAULT NULL,

  `name` varchar(45) DEFAULT NULL,

  `content` varchar(45) DEFAULT NULL,

  `time` varchar(45) DEFAULT NULL,

  PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8;

插入数据（部分）：

INSERT INTO `message` VALUES ()

• 前后端交互接口设计

1. 发表留言接口：

接口描述

请求方式	GET
请求url	http://3.233.206.196/gcugreen/message/insert
具体功能	存储用户留言

参数说明

参数名	是否必传	参数描述	例如
sno	是	学号
name	是	名字
content	是	留言内容	垃圾分类好开心
time	是	时间	2019-11-08

返回结构

{

       "result":"success"

}

1. 图像识别垃圾类型：

接口描述

请求方式	POST
请求url	http://3.233.206.196/gcugreen/PhotoController
具体功能	调用百度AI识别图片物体再分类

参数说明

参数名	是否必传	参数描述	例如
formData	是	含有图片信息的表单对象	formData.append("file",base64)

返回结构

{

       "log_id": 7634838073168747248,

       "result_num":5,

       "result":[

              {"socre":0.982433, "root": "商品-服装", "keyword": "T恤"},

              {"socre":0.794342, "root": "Logo", "keyword": "耐克"},

              {"socre":0.571509, "root": "商品-服装", "keyword": "短袖衫"},

              {"socre":0.312479, "root": "商品-服装", "keyword": "文化衫"},

              {"socre":0.081818, "root": "商品-服装", "keyword": "队服"}

       ]

}

• 后端工作

1. SSM框架整合配置

(1)创建Maven项目，建立好相应的目录结构。

文件名	作用
src	根目录，下面有main和test。
- main	主要目录，放java代码和一些资源文件。
- - java	存放java代码。
- - resources	存放资源文件，spring，mybatis配置文件。
- - - mapper	存放dao中每个方法对应的sql。
- - - spring	存放spring相关的配置文件，有dao service web三层。
- - - webapp	存放静态资源jsp。
- - - - WEB-INF	存放web.xml。
- test	测试分支。

包名	名称	作用
dao	数据访问层（接口）	与数据打交道，在配置文件中实现接口的每个方法。
entity	实体类	与数据库的表相对应，封装dao层数据为一个对象。
service	业务逻辑（接口）	站在“使用者”的角度，写业务逻辑。
impl	业务逻辑（实现）	实现业务接口，事务控制。
web	控制器	springmvc在这里发挥作用。

(2) 使用的是maven来管理jar，在pom.xml中加入相应的依赖。在https://mvnrepository.com/搜索对应的最新版本。（部分）

<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.hph</groupId>

   <artifactId>gcugreen</artifactId>

   <version>0.0.1-SNAPSHOT</version>

   <packaging>war</packaging>

   <dependencies>

          <!-- https://mvnrepository.com/artifact/org.springframework/spring-webmvc -->

          <dependency>

                 <groupId>org.springframework</groupId>

                 <artifactId>spring-webmvc</artifactId>

                 <version>5.1.9.RELEASE</version>

          </dependency>

   </dependencies>

</project>

(3)在spring文件夹里新建spring-dao.xml文件。读入数据库连接相关参数、配置数据库连接池、配置连接属性、配置c3p0、配置SqlSessionFactory对象、扫描dao层接口、动态实现dao接口。

<?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:context="http://www.springframework.org/schema/context"

   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">

   <!-- 配置整合mybatis过程 -->

   <!-- 1.配置数据库相关参数properties的属性：${url} -->

   <context:property-placeholder

          location="classpath:jdbc.properties" />

   <!-- 2.数据库连接池 -->

   <bean id="dataSource"

          class="com.mchange.v2.c3p0.ComboPooledDataSource">

          <!-- 配置连接池属性 -->

          <property name="driverClass" value="${jdbc.driver}" />

          <property name="jdbcUrl" value="${jdbc.url}" />

          <property name="user" value="${jdbc.username}" />

          <property name="password" value="${jdbc.password}" />

          <!-- c3p0连接池的私有属性 -->

          <property name="maxPoolSize" value="30" />

          <property name="initialPoolSize" value="10" />

          <property name="minPoolSize" value="10" />

          <!-- 关闭连接后不自动commit -->

          <property name="autoCommitOnClose" value="false" />

          <!-- 获取连接超时时间 -->

          <property name="checkoutTimeout" value="10000" />

          <!-- 当获取连接失败重试次数 -->

          <property name="acquireRetryAttempts" value="2" />

   </bean>

   <!-- 3.配置SqlSessionFactory对象 -->

   <bean id="sqlSessionFactory"

          class="org.mybatis.spring.SqlSessionFactoryBean">

          <!-- 注入数据库连接池 -->

          <property name="dataSource" ref="dataSource" />

          <!-- 配置MyBaties全局配置文件:mybatis-config.xml -->

          <property name="configLocation"

                 value="classpath:mybatis-config.xml" />

          <!-- 扫描entity包 使用别名 -->

          <property name="typeAliasesPackage" value="com.hph.entity" />

          <!-- 扫描sql配置文件:mapper需要的xml文件 -->

          <property name="mapperLocations"

                 value="classpath:mapper/*.xml" />

   </bean>

   <!-- 4.配置扫描Dao接口包，动态实现Dao接口，注入到spring容器中 -->

   <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">

          <!-- 注入sqlSessionFactory -->

          <property name="sqlSessionFactoryBeanName"

                 value="sqlSessionFactory" />

          <!-- 给出需要扫描Dao接口包 -->

          <property name="basePackage" value="com.hph.dao" />

   </bean>

</beans>

(4) 因为数据库配置相关参数是读取配置文件，所以在resources文件夹里新建一个jdbc.properties文件，存放4个最常见的数据库连接属性。

jdbc.driver=com.mysql.cj.jdbc.Driver

jdbc.url=jdbc:mysql://localhost:3306/gcugreen?useSSL=false&serverTimezone=GMT%2B8&characterEncoding=UTF-8

jdbc.username=root

jdbc.password=root

(5) mybatis核心文件，在recources文件夹里新建mybatis-config.xml文件。使用自增主键、使用列别名、开启驼峰命名转换。

<?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>

   <!-- 配置全局属性 -->

   <settings>

          <!-- 使用jdbc的getGeneratedKeys获取数据库自增主键值 -->

          <setting name="useGeneratedKeys" value="true" />

          <!-- 使用列别名替换列名 默认:true -->

          <setting name="useColumnLabel" value="true" />

          <!-- 开启驼峰命名转换:Table{create_time} -> Entity{createTime} -->

          <setting name="mapUnderscoreToCamelCase" value="true" />

   </settings>

</configuration>

(6) 在spring文件夹里新建spring-service.xml文件。扫描service包所有注解@Service、配置事务管理器，把事务管理交由spring来完成、配置基于注解的声明式事务，可以直接在方法上@Transaction。

<?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: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/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">

       <!-- 扫描service包下所有使用注解的类型 -->

       <context:component-scan

              base-package="com.hph.service" />

       <!-- 配置事务管理器 -->

       <bean id="transactionManager"

              class="org.springframework.jdbc.datasource.DataSourceTransactionManager">

              <!-- 注入数据库连接池 -->

              <property name="dataSource" ref="dataSource" />

       </bean>

       <!-- 配置基于注解的声明式事务 -->

       <tx:annotation-driven

              transaction-manager="transactionManager" />

</beans>

(7) 配置web层，在spring文件夹里新建spring-web.xml文件。开启SpringMVC注解模式，可以使用@RequestMapping，@PathVariable，@ResponseBody等、对静态资源处理、配置jsp 显示ViewResolver、扫描web层 @Controller。

<?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:context="http://www.springframework.org/schema/context"

   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/mvc

   http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">

   <mvc:annotation-driven />

   <mvc:default-servlet-handler />

   <bean

          class="org.springframework.web.servlet.view.InternalResourceViewResolver">

          <property name="viewClass"

                 value="org.springframework.web.servlet.view.JstlView" />

          <property name="prefix" value="/WEB-INF/jsp/" />

          <property name="suffix" value=".jsp" />

   </bean>

   <context:component-scan

          base-package="com.hph.web" />

</beans>

(8) 修改web.xml文件。

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

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

   xmlns="http://java.sun.com/xml/ns/javaee"

   xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"

   id="WebApp_ID" version="2.5">

   <servlet>

          <servlet-name>seckill-dispatcher</servlet-name>

          <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>

          <init-param>

                 <param-name>contextConfigLocation</param-name>

                 <param-value>classpath:spring/spring-*.xml</param-value>

          </init-param>

   </servlet>

   <servlet-mapping>

          <servlet-name>seckill-dispatcher</servlet-name>

          <url-pattern>/</url-pattern>

   </servlet-mapping>

</web-app>

1. SSM框架应用实例

(1)在entity包中有三个对应的实体，垃圾分类知识Knowledge.java、用户留言Message.java、垃圾分类游戏得分Score.java。定义实体的一些属性，实现属性的get、set方法。

(2)在dao包中有三个接口KnowledgeDao.java、MessageDao.java、ScoreDao.java。定义方法，方法名要与下面mapper中配置的sql语句中的id对应。

(3)在mapper目录里有三个配置文件KnowledgeDao.xml、MessageDao.xml、ScoreDao.xml分别对应上面的三个Dao接口。mapper中namespace是该xml对应的接口全名，sql语句中的id对应方法名，resultType是返回值类型，parameterType是参数类型。

(4)进行单元测试以保证SSM框架整合配置没有错误，在test对应的package写测试方法，因为需要写很多测试方法，在测试前需要让程序读入spring-dao和mybatis等配置文件，所以就抽离出来一个BaseTest类，只要是测试方法就继承它，这样那些繁琐的重复的代码就不用写那么多了。

(5)在service包下有三个业务接口KnowledgeService.java垃圾知识业务接口、MessageService.java用户留言业务接口、ScoreService.java垃圾分类游戏业务接口。站在"使用者"角度设计接口，从三个方面：方法定义，参数，返回类型。

(6) 在service.impl包下有三个业务接口实现KnowledgeServiceImpl.java垃圾知识业务接口实现、MessageServiceImpl.java用户留言业务接口实现、ScoreServiceImpl.java垃圾分类游戏得分业务接口实现。分别使用service包中对应的接口，并实现里面的方法。

(7)单元测试业务代码，在test对应的package写测试方法。

(8)写web层，也就是Controller。在web包下有三个控制文件KnowledgeController.java实现分页查询垃圾分类知识，根据名称查询垃圾、MessageController.java查询前10条留言记录，插入用户留言，获取当前北京时间、ScoreController.java查询得分世界排名和个人排名、插入得分记录。

1. Servlet应用实例

(1)除了使用ssm框架外，不需要对数据库操作的接口使用servlet实现。

(2)实现图片识别物体使用百度AI，在service包中加入百度提供的实现通用物体和场景识别高级版所需工具类FileUtil.java、Base64Util.java、HttpUtil.java、GsonUtils.java和通过API Key和Secret Key获取的access_token的AuthService.java。

(3)实现教务系统认证，在service包中编写了ConnectJWXT.java模拟登陆教务系统，爬取页面内容、VCodeOCR.java自动识别验证码。

(4)在web包下PhotoController.java实现对图像识别物体、LoginJWXTController.java实现教务系统认证。

(5)修改web.xml文件。

<servlet>

          <description></description>

          <display-name>PhotoController</display-name>

          <servlet-name>PhotoController</servlet-name>

          <servlet-class>com.hph.web.PhotoController</servlet-class>

   </servlet>

   <servlet-mapping>

          <servlet-name>PhotoController</servlet-name>

          <url-pattern>/PhotoController</url-pattern>

   </servlet-mapping>

1. 部署上云端（AWS）

(1)使用EC2服务，服务器安装java环境、tomcat和mysql。将Maven项目导出war包，部署到服务器中。

(2)使用S3服务，将静态资源放到S3中，提高网页加载速度。

(3)使用Route 53服务，通过好记的域名访问网站，不暴露ip。

1. SSL证书

SSL证书为了方式中间人流量劫持、Https加密使网站更安全、保障用户隐私信息安全、帮助用户识别钓鱼网站、http被标记不安全、提升形象和可信度。

• 项目管理工作

1. 看板

• 版本控制报告

1. github仓库

链接https://github.com/Hph1998/gcugreen

1. 版本控制内容

序号	用途	仓库名称
1	后端项目代码管理	gcugreen
2	垃圾分类游戏前端	gcugreen
3	垃圾分类游戏新增计分	gcugreen
4	新增留言板	gcugreen
5	修复留言板bug	gcugreen

• 经验教训总结

经过了12周的时间，从一开始不知道从哪里下手，到最后基本做出了一个完整的项目。深深感受到团队开发比个人开发困难很多，自己的想法除了自己觉得好以外还要去说服自己的队友，写一些说明文档来连接前后端的开发人员。我作为团队的项目经理，也是第一次胜任这个职位，可能做得还不够好，除了进行项目的总体规划与阶段计划、组织项目组内的沟通计划，并分配好各角色的责任与权限外，还要在开发阶段不停的跟进，并完成自己的后端开发职责。

在后端开发中包括接触一点前端，因为基础不够扎实，有时候需要查资料，开发效率自然就没有那么高。深感基础真的很重要。在开发中总是会踩坑的，当然不能轻易放弃。解决问题不仅能获得成就感，而且印象深刻。

在边开发边学习软件项目管理课程中明白，整个项目采用敏捷开发。从项目初始，进行项目评估和可行性分析。到项目计划，进行需求分析，只有充分了解了用户的需求才能开发功能完整、性能良好的项目。再到任务分解，合理的分配任务到项目组成员 。最后编码阶段、项目质量检测，项目运维管理循环，这个过程遇到好多问题，主要是代码质量不高，代码的复用性不高和技术难点。

学习没有止境，在整个开发过程中学到很多新知识。掌握了web前端通过ajax访问接口并对数据处理后显示到页面上。学到了SSM框架，在教学课堂中学习的SSH在应用中用SpringMVC完全替代Struts，配合注解的方式，变成非常快捷，而且通过restful风格定义url，让地址看起来非常优雅、MyBatis替换Hibernate，因为MyBatis半自动的特点，可以完全掌控SQL，使用XML配置管理起来非常方便。Spring就太强大了，常用的AOP，事务管理，接触最多的是IOC容器，它可以装在bean。初学了云服务，使用云服务器24小时不间断运行后端服务，使用云存储随时随地获取资源，注册属于自己的域名。认识到自己还差的太远，还有很多东西要学习，不仅仅是学习皮毛，更要确定自己的方向然后学精。

课程虽然结束，关于搭建一个网站还有很多要做，比如Web安全、性能优化等。回想大学过去两年不管是自己做过的项目还是完成的大作业，都是实现功能就放着不管了。其实和我一样大部分同学包括跨界来编程的人缺乏的并不是编程能力，而是再深入对程序进行优化。拥有这个能力才有机会从众多程序员中脱颖而出。

许多奇迹，我们相信，才会存在。

源码在github，好用给个star鼓励一下

https://github.com/Hph1998/gcugreen