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>

java遇到HTML——jsp篇

1.緒論

2.系統設計

3.資料庫設計

4.3建立營養含量表Y

相關推薦