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课题及开发语言选择

以食物、疾病、用户为实体对象，建立一个能够查询食物信息，用户信息，疾病信息的数据库系统，并设计出一个独立于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)	否
无机盐	isalt	Varchar(58)	是
钙	Ca	Varchar(8)	是
磷	p	Varchar(8)	是
铁	Fe	Varchar(8)	是

中医属性表3.3

描述	列名	数据类型	是否为null值	键
食物号	Fno	Varchar(50)	否	主键/外键
中医属性	Zhongyishuxing	Varchar(40)	是
相克食物	snumber	Varchar(40)	是

疾病表3.4

描述	列名	数据类型	是否为null值	键
疾病号	Dno	Varchar(18)	否	主键
名称	Dname	Varchar(40)	否

用户信息表3.5

描述	列名	数据类型	是否为null值	键
账号	Uno	Char(18)	否	主键
姓名	Uname	Varchar(20)	否
性别	Usex	Varchar(10)	否
身高（cm）	Uhigh	Varchar(10)	是
体重（Kg）	Uweight	Varchar(10)	是

账户信息表3.6

描述	列名	数据类型	是否为null值	键
账号	Uno	Char(18)	否	主键/外键
密码	Ukey	Char(20)	否
确认密码	Urekey	Char(20)	否
昵称	Unetname	Varchar(20)	否
密保问题	Uquestion	Varchar(60)	否
密保答案	Uanswer	Varchar(60)	否

患病表3.7

描述	列名	数据类型	是否为null值	键
用户账号	Uno	Char(18)	否	主键	联合主键
疾病号	Dno	Char(18)	否	外键	联合主键
症状	Zhengzhuang	Varchar(60)	否

忌食表3.8

描述	列名	数据类型	是否为null值	键
疾病号	Dno	Varchar(18)	否	主键	联合主键
食物号	Fno	int	否	外键	联合主键
不良反应	Buliangfanying	Varchar(60)	否

饮食表3.9

描述	列名	数据类型	是否为null值	键
用户号	Uno	Char(18)	否	主键	联合主键
食物号	Fno	int	否	主键	联合主键
功效	功效	Varchar(60)	是

4.代码编写

4.1HeaTing数据库设计源码

CREATE DATABASE HealthyEating

ON PRIMARY

(NAME=' Healthy Eating Database ',

FILENAME=' F:\SQL\SQL-SubjectDesign\MDF ',

SIZE=8MB,

MAXSIZE=unlimited,

FILEGROWTH=64%)

LOG ON

(NAME=' Healthy Eating Database ',

FILENAME=' F:\SQL\SQL-SubjectDesign\NDF ',

SIZE=8MB,

MAXSIZE=unlimited,

FILEGROWTH=64MB)

4.2建立食物属性表F

create table F

(Fno int

constraint PK_Fno primary key,

Fname varchar(20) not null,

Fkind varchar(20) )

4.3建立营养含量表Y

Create table Y

(Fno int references F(Fno),

Pre char(8),

Fat char(8),

CH char(8),

Heat char(8),

Isalt char(8),

Ca char(8),

P char(8),

Fe char(8))

4.3中医属性表Z

Create table Z

(Fno int references F (Fno),

Zhongyishuxing varchar(40),

Xiangke varchar(40))

4.4疾病表D

Create table D

(Dno char(18) constraint PK_Dno primary key,

Dname varchar(40))

4.5用户信息表U

Create table U

(Uno char(18) constraint PK_Uno primary key,

Uname varchar(20) not null,

Usex varchar(20) default ‘男’,

Uage char(10) not null,

Uhigh char(10) not null,

Uweight斤 char(10) not null)

4.6账户信息表ZH

Create table ZH

(Uno char(18) references U(Uno),

Ukey char(20) not null,

Unetname varchar(20) not null,

Uquestion varchar(60) not null,

Uanswer varchar(60) not null)

4.7患病表HB

Create table HB

(Uno char(18) references U(Uno),

Dno char(18) references D(Dno),

Primary key(Uno,Dno),

Zhengzhuang varchar(60))

4.8饮食表YS

Create table YS

(Uno char(18) references table U(Uno),

Fno int references table F(Fno),

Primary key(Uno,Fno),

Gongxiao varchar(60))

4.9疾病—食物表JS

Create table JS

(Dno char(18) references table D(Dno),

Fno int references table F(Fno),

Primary key(Dno,Fno),

Buliangfanying varchar(60))

4.10JDBC连接代码

import java.sql.*;

public class Mxt {

public static void main(String[] args) {

// TODO Auto-generated method stub

String url="jdbc:sqlserver://localhost:1433; DatabaseName=HeaEating";

String driver="com.microsoft.sqlserver.jdbc.SQLServerDriver";

Statement st;

Connection con;

try{

Class.forName(driver);//加载驱动

}

catch(ClassNotFoundException event){System.out.print("无法创建驱动程式实体!");}

try{

con=DriverManager.getConnection(url,"Sun","000000");

con.setAutoCommit(true);

System.out.println("已经连接到数据库...");

st=con.createStatement();

st.close();

con.close();

}

catch(SQLException e1) {System.out.println("异常"+e1);}

}

4.11数据库连接代码

package zqq;

import java.sql.*;

public class HeaEating食物信息数据库 {

public static void main(String[] args) throws Exception{ Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");//使用class类加载驱动程

Connection conn = DriverManager.getConnection("jdbc:sqlserver://localhost:1433; DatabaseName=HeaEating", "Sun", "000000");//连接数据库

Statement stmt = conn.createStatement();//tatement接口需要通过connection接口进行实例化操作

ResultSet result = stmt.executeQuery("select * from F");//执行sql语句，结果集放在result中

while(result.next()){//判断是否还有下一行

String Fname = result.getString("Fname");//获取数据库person表中name字段的值

System.out.println(Fname);

}

result.close();

stmt.close();

conn.close();

}

4.12调试JavaBean代码

package zqq;

import java.sql.*;

public class A {

Connection conn;

Statement stmt;

ResultSet rs ;

public void init(String dburl,String db_user,String db_passwd) {

try {

Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");

conn = DriverManager.getConnection(dburl,db_user,db_passwd);

} catch(java.lang.ClassNotFoundException e) {

System.err.println("Load Driver Error: " + e.getMessage());

} catch(SQLException ex) {

System.err.println("Get Connection Error: " + ex.getMessage());

}

public ResultSet executeQuery(String sql) {

try {

stmt = conn.createStatement();

rs = stmt.executeQuery(sql);

} catch(SQLException ex) {

System.err.println("SQL Error: " + ex.getMessage());

}

return rs;

}

public void close() throws SQLException {

stmt.close();

conn.close();

}

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

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<style>

body{

background:url(aboutbg.jpg) no-repeat;

background-size:cover;

}

</style>

</head>

<body>

<h1 class="work1" id="works1">用户登录界面</h1>

</section>

<tbody>

<tr>

</tr>

</tbody>

</table>

<h1>用户信息表</h1>

<p>

<input type="radio" name="sex" value="mangers" checked>男

<input type="radio" name="sex" value="toursim" checked>女

</p>

</form>

</section>

<h1>账户信息表</h1>

<p><label>账号（同用户账号）：<input name="Uno" type="tel" placeholder="请输入您的账号"></label></p>

</table>

</form>

</section>

</div>

<tr>

</tr>

</table>

</section>h

</body>

</html>

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

<%@ page language="java" import="java.util.*, java.sql.*" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>HeaEating</title>

</head>

<body>

<ul>

<li><a href="#about" class="main-link">信息显示界面</a></li>

<li><a href="#service" class="main-link">疾病查询界面</a></li>

<li><a href="#portfolio" class="main-link">食物查询界面</a></li>

</ul>

</nav>

<h1>HeaEating</h1>

<h2>食物信息数据库</h2>

</section>

<tbody>

<tr>

</tr>

</tbody>

</table>

<h1>用户信息表</h1>

<form>

<p>

<input type="radio" name="sex" value="mangers" checked>男

<input type="radio" name="sex" value="toursim" checked>女

</p>

</form>

</article>

<h1>账户信息表</h1>

<form>

<p><label>账号（同用户账号）：<input name="Uno" type="tel" placeholder="请输入您的账号"></label></p>

</table>

</form>

</article>

</div>

</section>

</section>

<ul >

</ul >

</div>

<ul >

</ul >

</div>

<ul >

</ul >

</div>

<tr>

</select></td>

</tr> <br>

<tr>

</tr><br>

<tr>

</tr><br>

<tr>

</tr> <br>

<tr>

</tr> <br>

</article>

</article>

</article>

</article>

</article>

</article>

</article>

</article>

</article>

<button id="close">Close me</button>

</div>

</div>

</section>

if (!window.localStorage) {

document.getElementById("iealert").style.display = "block";

}

</script>

</body>

</html>

4.15CSS

@charset "UTF-8";

margin: 0;

padding: 0;

box-sizing:border-box;

font-family:"Helvetica Neue", Helvetica, sans-serif;

}

html, body{

width:100%;

height:100%;

overflow:hidden;

}

body{

background:#3498DB;

position:relative;

}

#nav {

position:absolute;

width:94%;

top:50px;

left:3%;

z-index:200;

padding-bottom:20px;

border-bottom:5px solid rgba(255,255,255,.6);

}

#nav ul li{

list-style:none;

display:inline-block;

margin-right:2em;

}

#nav ul li a{

color:rgba(255,255,255,.8);

font-size:1.25em;

text-transform:uppercase;

text-decoration:none;

transition:all .5s;

-webkit-transition:all .5s;

}

#nav ul li a:hover{

color:#FFF;

}

section{

width:100%;

height:100%;

position:absolute;

}

#about, #service, #portfolio{

top:100%;

}

#home{

background:url(../images/homebg.jpg) no-repeat ;

background-size:1366px 768px;

}

#about{

background:url(../images/aboutbg.jpg) no-repeat ;

background-size:1366px 768px;

}

.a{

clear:both;

width:900px;

height:400px;

margin:0px auto;

}

.b{

height:500px;

width:400px;

float:left;

}

.c{

height:500px;

width:400px;

float:right;

}

body{

width: 100%;

height: 100%;

font-family: 'Open Sans',sans-serif;

margin: 0;

background-color: #4A374A;

}

h1{

font-size: 2em;

margin: 0.67em 0;

}

#service{

background:url(C:\Users\DELL\workspace\HeaEating食物信息数据库\WebContent\WEB-INF\images\servicebg.jpg) no-repeat ;

background-size:1366px 768px;

}

#portfolio{

background:url(../images/portfoliob.jpg) no-repeat ;

background-size:1366px 768px;

}

#home h1{

font-size:4em;

text-transform:uppercase;

width:6em;

line-height:1;

font-family:"Arial Black", Gadget, sans-serif;

color:#FFF;

position:absolute;

left:35%;

top:35%;

}

#home h2{

font-size:4em;

text-transform:uppercase;

width:10em;

line-height:1;

font-family:"Arial Black", Gadget, sans-serif;

color:#FFF;

position:absolute;

left:33%;

top:55%;

}

#service h1{

font-size:6.5em;

text-transform:uppercase;

line-height:1;

color:#FFF;

padding-bottom:.25em;

}

#portfolio{

padding-left:25%;

padding-top:5%;

}

#portfolio ul li{

list-style:none;

display:inline-block;

margin-right:10em;

margin-bottom:3em;

}

#portfolio article{

display:none;

}

.portfolio-link{

font-size:0;

width:100px;

height:100px;

border-radius:50%;

border:3px solid #FFF;

display:block;

opacity:.6;

transition:all .5s;

-webkit-transition:all .5s;

}

.portfolio-link:hover{

opacity:1;

width:130px;

height:130px;

transform:translateY(-15px);

-webkit-transform:translateY(-15px);

}

#div1 ul li:nth-child(1) a{

background:url(../images/work1.jpg) no-repeat;

background-size:cover;

}

#div1 ul li:nth-child(2) a{

background:url(../images/work2.jpg) no-repeat;

background-size:cover;

}

#div1 ul li:nth-child(3) a{

background:url(../images/work3.jpg) no-repeat;

background-size:cover;

}

#div2 ul li:nth-child(1) a{

background:url(../images/work4.jpg) no-repeat;

background-size:cover;

}

#div2 ul li:nth-child(2) a{

background:url(../images/work5.png) no-repeat;

background-size:cover;

}

#div2 ul li:nth-child(3) a{

background:url(../images/work6.jpg) no-repeat;

background-size:cover;

}

#div3 ul li:nth-child(1) a{

background:url(../images/work7.jpg) no-repeat;

background-size:cover;

}

#div3 ul li:nth-child(2) a{

background:url(../images/work8.jpg) no-repeat;

background-size:cover;

}

#div3 ul li:nth-child(3) a{

background:url(../images/work9.jpg) no-repeat;

background-size:cover;

}

#popup{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

transition:all .25s;

-webkit-transition:all .25s;

visibility:hidden;

opacity:0;

}

#popup-content{

position:absolute;

z-index:200;

width:900px;

height:440px;

left:50%;

top:50%;

margin-left:-450px;

margin-top:-220px;

padding:30px 50px;

box-sizing:border-box;

background:#FFF;

box-shadow:0 10px 15px rgba(0,0,0,.2);

transition:all .5s;

-webkit-transition:all .5s;

transform:translateY(100px);

-webkit-transform:translateY(100px);

}

#popup.show{

visibility:visible;

opacity:1;

}

#popup-content.show{

transform:translateY(0px);

-webkit-transform:translateY(0px);

}

#popup-bg{

position:absolute;

z-index:100;

width:100%;

height:100%;

background:rgba(0,0,0,.6);

}

#close{

background:#E74C3C;

width:50px;

height:50px;

border:0;

font-size:0;

position:absolute;

right:30px;

top:30px;

z-index:250;

}

#close:hover{

background:#555;

}

#close::before, #close::after{

content:'';

width:50px;

height:2px;

background:#FFF;

display:block;

}

#close::before{

-webkit-transform:rotate(45deg);

transform:rotate(45deg);

}

#close::after{

-webkit-transform:translateY(-2px) rotate(-45deg);

transform:translateY(-2px) rotate(-45deg);

}

#popup-holder{

padding-left:400px;

text-align:left;

}

#popup-holder img{

position:absolute;

left:30px;

}

#popup-holder h2{

text-transform:uppercase;

font-size:4em;

color:#1abc9c; /*绿色*/

padding-bottom:.5em;

}

#popup-holder p{

font-size:1.15em;

color:#777; /*灰色*/

line-height:1.5;

margin-bottom:1em;

}

java遇到HTML——jsp篇

摘要

目录

1.绪论

1.1课题及开发语言选择

1.2开发环境的搭建

2.系统设计

2.1需求分析

2.2设计要求

2.3系统概要

3.数据库设计

3.1E-R图

3.2关系模型

3.3数据字典

4.代码编写

4.1HeaTing数据库设计源码

4.2建立食物属性表F

4.3建立营养含量表Y

4.3中医属性表Z

4.4疾病表D

4.5用户信息表U

4.6账户信息表ZH

4.7患病表HB

4.8饮食表YS

4.9疾病—食物表JS

4.10JDBC连接代码

4.11数据库连接代码

4.12调试JavaBean代码

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

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

4.15CSS

5.运行界面截图

5.1登录界面

5.2主界面

5.3查询界面

5.4数据库连接界面

Have a nice life!

猜你喜欢