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

数据库设计

垃圾分类知识表：

字段名称	数据类型
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)

游戏计分表：

字段名称	数据类型
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 ()

用户留言表：

字段名称	数据类型
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 ()

前后端交互接口设计

发表留言接口：

接口描述

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

参数说明

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

返回结构

{

"result":"success"

}

图像识别垃圾类型：

接口描述

请求方式	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": "队服"}

]

}

后端工作

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

<artifactId>gcugreen</artifactId>

<version>0.0.1-SNAPSHOT</version>

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

<context:property-placeholder

location="classpath:jdbc.properties" />

<bean id="dataSource"

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

</bean>

<bean id="sqlSessionFactory"

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

<property name="configLocation"

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

<property name="mapperLocations"

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

</bean>

<property name="sqlSessionFactoryBeanName"

value="sqlSessionFactory" />

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

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

<context:component-scan

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

<bean id="transactionManager"

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

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

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

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查询得分世界排名和个人排名、插入得分记录。

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文件。

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

部署上云端（AWS）

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

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

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

SSL证书

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

项目管理工作

看板

版本控制报告

github仓库

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

版本控制内容

序号	用途	仓库名称
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

垃圾分类网站 web前端 + java后端相关推荐

Web前端和后端开发的区别和要求
Web前端和后端开发的区别和要求有时候自己会分不清,其实是因为前后端都了解,类似于全栈工程师,但又什么都不是很精通.那到底什么是前端.后端呢,我整理了一些企业要求级别的前端/后端基础,开发框架等. ...
Web前端和后端的区别是什么？如何区分？
Web前端和后端的区别是什么?如何区分?从前端和后端两者工作内容和负责项目是完全不同.后端:入门难深入更难,枯燥乏味,看业务逻辑代码:前端:入门简单先易后难,能看到自己做出来的展示界面,有成就感. W ...
Web前端和后端的异同
Web前端和后端?IT行业越来越火热,相较于其他的职位,Web软件开发工程师是一个技术要求较高.前景较好的工作.Web软件开发工程师可以分为Web前端和Web后端开发.那怎么区分呢?小编浏览了一些资源 ...
什么是web前端和后端？
Web前端是指构建和设计网站用户界面的技术和工具,它通常涉及使用HTML.CSS和JavaScript等技术来开发用户交互和视觉效果.前端开发人员通常专注于创建响应式布局.页面样式.动画效果和用户交互 ...
Web前端和后端有什么区别？如何区分？
Web前端和后端的区别是什么?如何区分?从前端和后端两者工作内容和负责项目是完全不同.后端:入门难深入更难,枯燥乏味,看业务逻辑代码:前端:入门简单先易后难,能看到自己做出来的展示界面,有成就感. 点 ...
那些年，我的前端/Java后端书单
全文为这些年,我曾阅读.深入理解过(或正在阅读学习.即将阅读)的一些优秀经典前端/Java后端书籍.全文为纯原创,且将持续更新,未经许可,不得进行转载.当然,如果您喜欢这篇文章,可以动手点点赞或者收藏 ...
java mysql物联网土壤智能监控web前端+java后台+数据接程序
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称 java mysql物联网土壤智能监控web前端+java后台+数据接程序视频效 ...
App前端，Web前端，后端，微信小程序到底该学啥？
互联网行业发展的速度之快,让每一个从事IT行业的人员目不暇接.作为IT行业的人才,需要不断地学习新知识,否则很容易落伍.2016年,人工智能与虚拟现实着实火了一把,当然,深入研究这两门技术的大多是大公 ...
Java Web和Java后端学习之路
摘要: 每个阶段要学习的内容甚至是一些书籍.针对Java Web和Java后端开发 java学习这一部分其实也算是今天的重点,这一部分用来回答很多群里的朋友所问过的问题,那就是我你是如何学习Java的 ...

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

垃圾分类网站 web前端 + java后端相关推荐

最新文章

热门文章