簡單Web開發流程全解——上
最近因為專業課程的緣故，在兩週時間內，從html, css, js到servlet, jsp學了一遍，趁著有空發篇文章記一下，畢竟兩週內花費了很多時間學到，不能輕易丟下。
- 伺服器
- 資料庫
- MVC架構
- 前端頁面
- 後臺實現
開發流程
伺服器
因為只是專業課程，所以沒有專門租借伺服器，而是採用了本機作為伺服器的方式。這裡採用了apache的Tomcat ，下載好相應版本之後，需要在環境變數中配置Java的路徑，然後找到Tomcat的bin目錄下，
如果是Linux雙擊.sh檔案，Windows雙擊.bat檔案
出現上方介面就說明正常運行了 如果閃退，大概是路徑問題，也就是Java環境有問題。建議採用JAVA_HOME和JRE_HOME的寫法，因為有文章說會檢測這兩個變數是否定義，我暫時還沒有驗證。 此時在瀏覽器中可以輸入 localhost:8080
如果出現下方介面，就說明配置完畢其中8080是預設開啟埠號，可以在配置檔案中修改。 而顯示內容都存放在webapps的ROOT檔案目錄下，預設開啟的網頁也可以在配置檔案中修改。
資料庫
本次採用了小型簡單的資料庫Navicat for MySQL，因為操作簡單所以被老師推薦。在使用之前，要有MySQL資料庫。這兩項處理好之後，在執行Navicat for MySQL之前，先開啟MySQL中的mysqld.exe,否則可能會出現Navicat for MySQL連線不上的情況。待mysqld.exe彈出並關閉以後，以管理員身份開啟navicat.exe。第一次連結預設沒有密碼可以直接連線，但是因為沒有密碼的資料庫無法在jdbc中連結，所以可以在使用者介面中進行管理，設定密碼。
MVC架構
這個構架很簡單，網上有很多詳細的解釋。這個模型比較好的就是可以把前端用到的html, jsp等不需要關注後端實現的地方放到一起，資料庫和實體也不需要實時修改，無論是哪一模組發生變化，只要介面不變，就無需更改，只要呼叫即可。
前端頁面
前端比較好寫，都是指令碼語言，只不過各門語言不同，會有一些語法的不同，即使我已經做完開發，對於各類語言也不是特別熟悉。所以說最好還是看專門的語法。這裡就簡單說一下遇到的注意事項：
- 注意字元格式，還是老樣子UTF-8編碼
- jsp頭部引用的庫，不管用不用的到先大概記錄一下，就當儲存格式了
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script src="js/jquery.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js"></script>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">- 介面跳轉方式很多 -可以用js指令碼寫個函式跳轉 -可以在a標籤裡寫連結 -也可以onclick觸發事件 -在本工程目錄下可以在web.xml中定義跳轉路徑
<servlet>
<servlet-name>FirstPageServlet</servlet-name>
<servlet-class>servlet.FirstPageServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>FirstPageServlet</servlet-name>
<url-pattern>/firstPage</url-pattern>
</servlet-mapping>
<servlet>- 介面可以考慮將版式和標籤分開，否則就顯得亂
- 手機端的瀏覽器適應可以簡單採用格柵系統，bootstrap裡有
- 活用meta標籤，這是個神奇的標籤。利用這個標籤，可以實現很多功能。例如實現裝置寬度查詢效，禁止使用縮放功能。
<meta name="viewport" content="width=device-width,
minimum-scale=1.0, maximum-scale=2.0; charset=UTF-8">
//展示介面是一倍大小，最大兩倍，編碼格式utf8- 如果要實現適應不同大小的介面，例如meta標籤查詢寬度之後，可以構造每個寬度下的樣式，可以利用hidden實現不用寬度下展示不同的類容。如果要使介面美觀，最好寫幾套不同的介面。
- 如果不需要實現自適應，可以在PC端的時候，設計好佈局，例如div、span模組或者box這些容器進行佈局。命名一定要規範，方便日後修改。
- js程式碼最好寫在head或者body中間，不要放到最後或者外面。
- 對於一些特殊屬性，例如readonly這些，操作的時候最好用函式進行處理。
- 對於輸入輸出流不熟悉的話，不要輕易使用document來輸出。
後端實現
後端又是一大塊東西，有時間再接著更新。
開發流程
最後，特別感謝李老師、王老師和陸老師提供的幫助。