java遇到HTML——jsp篇

 

HTML：定义了网页有哪些元素

CSS：定义了网页元素如何呈现

JS：定义了网页元素如何与用户产生交互

 

 

HTML（HyperText Markup Language）超文本标记语言

是一种标记语言

标记语言是一套标记标签

HTML使用标记标签来描述网页

 

CSS（Cascading Style Sheets）层叠样式表

样式定义如何显示HTML元素

样式表可以内置于HTML文件中，但专业做法是独立存放

 

JS（JavaScript）一种高级编程语言

JS是可插入HTML页面的编程代码

是一种轻量级的编程语言

是一种服务于网页交互的前端编程语言

 

摘要

在目前大数据时代，人们对于信息的需求越来越大，想要了解工作学习和日常生活中所接触事物的具体信息，并且更愿意以数据的形式来准确把控事物的流程的属性。民以食为天，食物在我们日常生活中所处的地位不言而喻，因此对于人们来说，了解食物的信息也必将成为一大需求。基于此，本次课程设计选择了食物信息作为了数据库的课题，并使用SQL-server进行设计。在UI界面设计上，本组选择了JSP语言作为主要开发语言，设计出了一个Tomcat作为本地服务器的网页应用。本网页应用不仅能够进行常见食物信息的查询，而且还加入了有关中医和疾病的内容，能够满足人们对于食物信息的日常需求。

关键词：SQL-Server JSP 食物信息 数据查询

 

目录

 

1.绪论 1

1.1课题及开发语言选择 1

1.2开发环境的搭建 1

2.系统设计 2

2.1需求分析 2

2.2设计要求 2

2.3系统概要 3

3.数据库设计 4

3.1E-R图 4

3.2关系模型 5

3.3数据字典 5

4.代码编写 9

4.1HeaTing数据库设计源码 9

4.2建立食物属性表F 9

4.3建立营养含量表Y 9

4.3中医属性表Z 10

4.4疾病表D 10

4.5用户信息表U 10

4.6账户信息表ZH 10

4.7患病表HB 10

4.8饮食表YS 11

4.9疾病—食物表JS 11

4.10JDBC连接代码 11

4.11数据库连接代码 12

4.12调试JavaBean代码 12

4.13HTML、CSS及JavaScript界面设计代码（登录界面） 13

4.14HTML、CSS及JavaScript界面设计代码（主界面） 16

4.15CSS 21

5.运行界面截图 30

5.1登录界面 30

5.2主界面 30

图5.2 30

5.3查询界面 31

5.4数据库连接界面 31

1.绪论

1.1课题及开发语言选择

    以食物、疾病、用户为实体对象，建立一个能够查询食物信息，用户信息，疾病信息的数据库系统，并设计出一个独立于DBMS的用户界面。从数据库层面上，本小组以SQL Server2016为数据库开发环境，完成一个数据库系统的设计全过程，包括实例分析，逻辑结构模型提取，E-R图的绘制，关系模型及关系表的设计，及最后的代码编写建立数据库工作。从用户界面开发层面，本小组以Eclipse为开发平台，Tomcat为本地服务器，使用了JAVA Web技术中的JSP语言和HTML语言、CSS、javascript建立了一个网页界面，由登录界面、主界面、用户信息显示界面、疾病查询界面和食物查询界面五部分构成。在数据库与界面连接层面，本小组使用了JDBC语言及JavaBean技术来进行数据库与界面的连接。

1.2开发环境的搭建

    在windows10的操作系统下，选用了SQL-Server2016数据库，JDK8.1开发包，Eclipse neon3集成开发环境，Tomcat本地服务器，QQ浏览器HTML文件查看器。

SQL-Server的安装预配置非常简单，在Microsoft官网找到安装包后，只需要跟着安装引导一步步进行就好，需要注意的是我们组使用JAVA语言开发的，使用的是JDBC语言与数据库进行连接，因此必须要用SQL账户，这需要我们申请一个SQL账户。

JDK的安装配置也比较简单，在Orcle官网下载最新的JDK安装包，安装时需要记住JDK的安装位置和JRE的安装位置。安装完成后需要设置环境变量，要新建JAVA_HOME环境变量，增添或新建CLASS-PATH环境变量以及增添PATH环境变量。

Tomcat本地服务器的安装有两种下载安装方式，一种是zip文件解压安装，另一种是exe文件自行安装，我们采用的是exe安装包安装。安装时需要我们输入JRE的安装路径，它的默认的端口是8080，因为这个端口可能被占，所以我们把它修改为8088.安装完成后需要配置环境变量，方法如上，即新建TOMCAT_HOME环境变量，增加CLASS_PATH环境变量。

Eclipse neon3的安装配置也很简单，只要注意它的工作空间位置就好。安装后需要做的就是为基础的Eclipse开发环境增加新的功能，这需要用到help选项里的安装新插件，本次开发需要用到的插件有language语言包、JAVA Web开发包、Server服务器包。将插件配置好之后就需要为Eclipse配置Tomcat服务器，此步骤较复杂，不再详述。将服务器配置好之后就可以新建Web项目进行开发了。

2.系统设计

2.1需求分析

食物是国民经济的一个大产业,人类生存、社会发展、经济增长和科技进步是推动食物发展从一个阶段上升到另一个更高阶段的根本动因，食物其发展不仅关系到人民的生活水平和营养状况,而且关系到社会的稳定、经济的繁荣和国家的持续发展。近年来,科技进步已逐渐渗透到食物发展的各个环节,信息经济社会己经到来,食物的种类、生产与消费环境都发生了重大变化,  拓宽了食物发展的空间。随着经济水平的提高,居民对食物的需求也不再是简单地停留在吃饱上,而是对如何才能吃得更好、更安全和更营养有了进一步的需求,伴随信息化的日益发展,产生了新的需求一食物信息需求。进入新阶段后,在生产、消费、技术、流通和管理等各方面都在强有力地驱动食物发展向更高阶段递进，食物信息需求己表现出日渐急迫的趋势。信息化大潮在为我国各个传统行业注入活力的同时,也对各行业在新时期的发展提出了挑战,食物信息需求就是食物发展新阶段中存在的一些不和谐现象所必须要面对的问题,也是我国食物可持续发展进程中不可回避的问题,食物信息需求与共享的核心是食物信息资源的共建共享,是一项需要全社会共同参与的长效工作，而且对增加人们对食物信息的了解，促进人民群众的饮食健康水平有着重要的意义。

2.2设计要求

    根据数据库应用系统设计过程，通过需求分析和系统分析，进行数据库的概念结构设计、逻辑结构设计等工作：

①　需求分析，具体涉及到可行性分析、业务背景的组织结构和业务流程分析、及系统功能提取等内容；

②　数据模型设计，规范的做出整个系统的E-R图；

③　数据字典及数据库结构设计，具体到每个实体或联系的二维关系表，每个表中的字段、属性及完整性约束；

④　题目所设计数据库系统的整体架构及其UI界面设计，在界面设计时考虑数据的输入输出项；

⑤　必要的sql程序代码；

⑥　数据库连接运行界面；

⑦　项目成员分工详情；

2.3系统概要

系统结构图如下示。本食物信息数据库查询系统要实现的功能有，查询常见食物的所属种类、所含的营养元素、中医属性、中医功效、相克食物及相忌的疾病等；实现用户的登录和账户信息的显示（包括昵称和密保问题使网页更加人性化）；通过用户所输入的身高和体重计算其健康指数，并在用户信息显示界面将其显示出来。

3.数据库设计

3.1E-R图

数据库的概念模型如下E-R图示。

3.2关系模型

①　食物实体对应的关系模式：  

    食物（食物号，食物名称，食物种类）

②　疾病实体对应的关系模式：

    疾病（疾病号，疾病名称）

③　中医属性的关系模式：

    中医属性（食物号，中医属性，相克食物）

④　营养含量对应的关系模式：

    营养含量（食物号，蛋白质，脂肪，碳水化合物，卡路里，无机盐，钙，磷，铁）

⑤　疾病—食物联系的关系模式：

    疾病—食物（疾病号，食物号，不良反应）  

⑥　用户信息实体对应的关系模式：

    用户信息（用户帐号，用户名，性别，年龄，身高，体重）  

⑦　账户信息实体对应的关系模式：

        账户信息（用户账号，用户密码，昵称，问题，答案）

⑧　饮食对应的关系模式：

    饮食（用户账号，食物号，功效）

⑨　患病对应的关系模式

        患病（用户账号，患病号，症状）

  3.3数据字典

食物信息表3.1 

描述	列名	数据类型	是否为NULL值	键
食物号	Fno	Varchar(8)	否	主键
食物名	Fname	Varchar(8)	否
食物种类	Fkind	Varchar(8)	否

营养元素表3.2

描述	列名	数据类型	是否为null值	键
食物号	FNo	Varchar(8)	否	主键/外键
蛋白质	Pre	Varchar(8)	否
脂肪	Fat	Varchar(8)	否
碳水化合物	CH	Varchar(8)	否
热量	heat	Varchar(8)