男神女神配 社區交友網 —— 之 主頁 詳細解說

1、項目背景javascript

   1. 開發平臺、開發工具css

      (1)後臺數據庫採用:MySQL Workbench 6.1 CE。html

     (2)代碼編寫平臺採用:Eclipse Java EE IDE for Web Developers;HBuilder;eclipse;IntelliJ IDEA 14.1.1。前端

     (3)主要插件:jdk1.6.0_10;mysql-connector-java-5.1.30-bin.jar;apache-tomcat-7.0.54;SpringExample03;apache-maven-3.3.1-bin。html5

   2. 需求分析java

    隨着internet技術的發展,網站的做用顯得愈來愈重要,各類各樣的網站正成倍的迅速增加,面對各類網站,論壇的發展,人們開始更多的在網上交流,而留言板做爲網站的一個重要組成部分,是你們交流的一個很好的平臺,也是廣大用戶對於網站全部者反饋意見的一個重要途徑,同時留言板做爲一個最簡單的BBS應用,瀏覽者能夠以張貼留言的方式來給站長或其餘瀏覽者進行留言或提問,經過這樣的系統,能夠作到信息的規範管理、科學統計和快速的發表言論。因爲計算機和網絡的普及,若是創建一個留言板模塊的話,人們即可以經過網絡的登錄成爲會員,取得發表言論上的資格,也使得留言板管理工做系統化、規範化、自動化。mysql

 


 

2、詳細設計與分析jquery

  1. 概念結構設計web

    (1)模塊設計sql

            用戶:

           管理員:

    (2)系統分析

          留言板管理系統 前端 的主要功能:

用戶註冊或者登陸(登陸註冊不屬於我負責的模塊,即單單我這個系統的話,系統默認已存在用戶信息,但系統後臺可管理用戶信息)。

♠ 用戶發表主題內容。

♠ 用戶查看全部發帖。

♠ 用戶回覆帖子信息。

         留言板管理系統 後臺 的主要功能:

♠ 管理員經過數據庫後臺輸密碼登錄。

♠ 管理員修改用戶已註冊的信息內容。

♠ 管理員增長評論內容(回覆用戶)。

♠ 管理員刪除用戶發帖或回覆的信息。

♠ 管理員修改用戶發帖或回覆的信息。

♠ 管理員查找留言板上用戶發帖信息。

 

         前臺頁面展現(四幅圖均爲同一個頁面,只是截圖功能不能一會兒把整個頁面都截取下來):

 

 

 

 

  

 

           

             E-R圖:

    (3)物理結構設計

              用戶需求具體管理系統提供保存、更新、查詢、維護,這就需求數據庫結構能充分知足各類信息的輸入與輸出,實現有組織地、動態地存儲大量關聯數據,方便用戶訪問系統中的數據,它與文件系統的重要區別是數據的充分共享,交叉訪問,與應用程序的高度獨立性。

 


 

3、數據庫

    1. 數據庫實施:

     (1)在eclipse中與數據庫鏈接,代碼以下

 1 package yys;
 2 import java.sql.Connection;
 3 import java.sql.DriverManager;
 4 import java.sql.SQLException;
 5 import java.util.Properties;
 6 import javax.swing.JOptionPane;
 7 import com.mysql.jdbc.Statement;
 8 public class QDDS {
 9     public static void main(String[] args) {
10         try {
11             String url = "jdbc:mysql://127.0.0.1:3306/yys";
12             try {
13                 Class.forName("com.mysql.jdbc.Driver");
14             } catch (ClassNotFoundException e) {
15                 // TODO Auto-generated catch block
16                 e.printStackTrace();
17             }
18             String username = "root";
19             String pw = "yuyashi994+--+";
20             Connection conn = DriverManager.getConnection(url, username, pw);
21             // 這兩句異常處理,try catch一下
22             System.out.println("註冊驅動成功");
23             System.out.println("鏈接數據庫成功");
24         } catch (SQLException e) {
25             e.printStackTrace();
26         }
27     }
28 }
註冊鏈接

 

                 程序結果截圖:

           

          註冊鏈接成功後,即可以經過Java、SQL語句建立數據庫了,部分代碼以下:

 1 java.sql.Statement stmt = conn.createStatement();// 建立SQL命令對象
 2             // 建立表
 3             System.out.println("開始建立表");
 4             String query = "create table TABLE11(ID NCHAR(2),NAME NCHAR(10))";
 5             // 建立表SQL語句
 6             stmt.executeUpdate(query);
 7             //輸入數據
 8             System.out.println("開始插入數據");
 9             // 插入數據SQL語句
10             String a1 = "INSERT INTO TABLE11 VALUES('1','靜香')";
11             String a2 = "INSERT INTO TABLE11 VALUES('2','阿呆')";
12             String a3 = "INSERT INTO TABLE11 VALUES('3','小明')";
13             String a4 = "INSERT INTO TABLE11 VALUES('4','蔥頭')";
14             // 執行SQL命令對象
15             stmt.executeUpdate(a1);
16             stmt.executeUpdate(a2);
17             stmt.executeUpdate(a3);
18             System.out.println("插入數據成功");
19             // 執行SQL命令對象
20             System.out.println("表建立成功");
set up table     

                程序結果截圖:

    (2)在Eclipse Java EE IDE for Web Developers中編寫html5代碼以下:

  1 <!--
  2     做者:543488944@qq.com
  3     時間:2015-05-30
  4     描述:男神女神配社區交友網
  5 -->
  6 <!DOCTYPE html>
  7 <html>
  8 
  9     <head lang="en">
 10         <meta http-equiv="content-type" content="text/html" ; charset="utf-8" />
 11         <title>男神女神配</title>
 12         <link rel="stylesheet" type="text/css" href="css/geshi.css">
 13         <meta http-equiv="X-UA-Compatible" content="IE=edge">
 14         <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
 15         <meta name="format-detection" content="telephone=no">
 16         <meta name="renderer" content="webkit">
 17         <meta http-equiv="Cache-Control" content="no-siteapp" />
 18         <link rel="alternate icon" type="image/png" href="assets/i/favicon.png">
 19         <link rel="stylesheet" href="assets/css/amazeui.min.css" />
 20         <script src="assets/js/jquery.min.js"></script>
 21         <script src="assets/js/amazeui.min.js"></script>
 22 
 23         <style>
 24             .header {
 25                 text-align: center;
 26             }
 27             .header h1 {
 28                 font-size: 200%;
 29                 color: #333;
 30                 margin-top: 30px;
 31             }
 32             .header p {
 33                 font-size: 14px;
 34             }
 35         </style>
 36 
 37         <style type="text/css">
 38             body {
 39                 margin: 8px 60px 30px 60px;
 40             }
 41         </style>
 42 
 43     </head>
 44 
 45     <body style="background: url(img/img.jpg) fixed no-repeat; background-size: cover;">
 46         <div style="padding-left: 35px;">
 47             <font color="white" size="7" face="copperplate gothic light"><B>男神女神配<B></font>
 48         </div>
 49         <br>
 50         <br>
 51         <!--
 52         <button  id="doc-scroll-to-btm" class="am-btn am-btn-primary"></button>
 53         <script>
 54             $('#doc-scroll-to-btm').on('click', function() {
 55                 var $w = $(window);
 56                 $w.smoothScroll({position: $(document).height() - $w.height()});
 57               });
 58         </script>
 59         -->
 60         <br>
 61         <br>
 62         <br>
 63         <br>
 64 
 65         <ol class="am-breadcrumb">
 66             <li><a href="http://127.0.0.1:8020/QDDS/QDDS.html" class="am-icon-home">首頁</a>
 67             </li>
 68             <li><a href="http://search.zhenai.com/search/getfastmdata.jsps">搜索</a>
 69             </li>
 70             <li><a href="http://profile.zhenai.com/activity/activityIndex.jsps?ddid=kt">最新活動</a>
 71             </li>
 72             <li class="am-active">內容</li>
 73         </ol>
 74 
 75         <div class="am-slider am-slider-default am-slider-carousel" data-am-flexslider="{itemWidth: 200, itemMargin: 5}">
 76             <ul class="am-slides">
 77                 <li>
 78                     <img src="img/1.jpg" />
 79                 </li>
 80                 <li>
 81                     <img src="img/2.jpg" />
 82                 </li>
 83                 <li>
 84                     <img src="img/3.jpg" />
 85                 </li>
 86                 <li>
 87                     <img src="img/4.jpg" />
 88                 </li>
 89                 <li>
 90                     <img src="img/5.jpg" />
 91                 </li>
 92                 <li>
 93                     <img src="img/6.jpg" />
 94                 </li>
 95                 <li>
 96                     <img src="img/7.jpg" />
 97                 </li>
 98                 <li>
 99                     <img src="img/8.jpg" />
100                 </li>
101                 <li>
102                     <img src="img/9.jpg" />
103                 </li>
104                 <li>
105                     <img src="img/10.jpg" />
106                 </li>
107                 <li>
108                     <img src="img/11.jpg" />
109                 </li>
110                 <li>
111                     <img src="img/12.jpg" />
112                 </li>
113                 <li>
114                     <img src="img/13.jpg" />
115                 </li>
116                 <li>
117                     <img src="img/14.jpg" />
118                 </li>
119                 <li>
120                     <img src="img/15.jpg" />
121                 </li>
122                 <li>
123                     <img src="img/16.jpg" />
124                 </li>
125                 <li>
126                     <img src="img/17.jpg" />
127                 </li>
128                 <li>
129                     <img src="img/18.jpg" />
130                 </li>
131             </ul>
132         </div>
133         <br>
134         <br>
135 
136         <!--
137         <table border="1" align="center" width="50%">
138             <tr><td align="center">aa</td>
139                 <td align="center">bb</td>
140                 <td align="center">cc</td>
141             </tr>
142             <tr><td align="center">dd</td>
143                 <td align="center">ee</td>
144                 <td align="center">ff</td>
145             </tr>
146             <tr><td align="center">aa</td>
147                 <td align="center">bb</td>
148                 <td align="center">cc</td>
149             </tr>
150             <tr><td align="center">dd</td>
151                 <td align="center">ee</td>
152                 <td align="center">ff</td>
153             </tr>
154             <br>
155         </table>}
156         -->
157 
158         <div class="am-g">
159             <div class="am-u-sm-6" style="border:3px solid pink;width:520px;height:430px">
160                 <div>
161                     <div class="am-u-sm-7">
162                         <br>
163                         <img src="img/sexicon.jpg" />
164                     </div>
165                     <div class="am-u-sm-5">
166                         <br>
167                         <br>
168                         <br>
169                         <br>
170                         <font color="#009CDA" size="6" face="copperplate gothic light"><B>男神女神配<B></font>
171                         <div>
172                             <br>
173                             <br>
174                             <br>
175                             <br>
176                         </div>
177                     </div>
178                 </div>
179                 <form>
180                     &nbsp;&nbsp;&nbsp;&nbsp;
181                     <input type="text">&nbsp;&nbsp;&nbsp;用戶名 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
182                     <a href=" http://www.baidu.com"><font color="#009CDA">註冊賬號</font></a>
183                     <br>
184                     <br> &nbsp;&nbsp;&nbsp;&nbsp;
185                     <input type="password">&nbsp;&nbsp;&nbsp;輸密碼 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
186                     <a href=" http://www.baidu.com"><font color="#009CDA">找回密碼</font></a>
187                     <br>
188                     <br> &nbsp;&nbsp;&nbsp;&nbsp;記住密碼&nbsp;&nbsp;&nbsp;
189                     <input type="checkbox">&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;自動登陸&nbsp;&nbsp;&nbsp;
190                     <input type="checkbox"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Good Luck
191                     <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
192                     <input type="button" value="   安全登陸   " onclick="javascript:alert('年紀小小就學人交友?快去學習去!!');"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;to Seek Your Destiny &nbsp;
193                     <img src="img/favicon.ico" width="20" height="20">
194                 </form>
195             </div>
196             <div class="am-u-sm-6">
197                 <section data-am-widget="accordion" class="am-accordion am-accordion-gapped" data-am-accordion='{  }'>
198                     <dl class="am-accordion-item am-active">
199                         <dt class="am-accordion-title">愛的宣言</dt>
200                         <dd class="am-accordion-bd am-collapse am-in">
201                             <!-- 規避 Collapase 處理有 padding 的摺疊內容計算計算有誤問題, 加一個容器 -->
202                             <div class="am-accordion-content"><font size="3" style="background-image: url(img/world-background.jpeg);">置身人羣中
203                                 <br/>走在一塊兒是緣分,一塊兒在走是幸福,在一塊兒就擁有了一輩子相守的幸福;
204                                 <br/>有人說,緣分是前世修來的,是五百次回眸的執着才換來此生的擦肩而過,是千年不變的守候纔有了此生的默默相守;
205                                 <br/>有人說,幸福是有形狀的,你把它放在內心,它就是心的形狀,
206                                 <br/>你把它放在外面,它就虛無縹緲,此生的相伴,讓咱們天荒地老。</font>
207                             </div>
208                         </dd>
209                     </dl>
210                     <dl class="am-accordion-item">
211                         <dt class="am-accordion-title">讓生命去等候,去等候,去等候,去等候</dt>
212                         <dd class="am-accordion-bd am-collapse ">
213                             <!-- 規避 Collapase 處理有 padding 的摺疊內容計算計算有誤問題, 加一個容器 -->
214                             <div class="am-accordion-content"><font size="3" style="background-image: url(img/world-background.jpeg);">走在忠孝東路
215                                 <br/>徘徊在茫然中
216                                 <br/>在個人人生旅途
217                                 <br/>選擇了多少錯誤
218                                 <br/>我在睡夢中驚醒
219                                 <br/>感嘆悔言無盡
220                                 <br/>恨我不能說服本身
221                                 <br/>接受一切教訓
222                                 <br/>讓生命去等候
223                                 <br/>等候下一個漂流
224                                 <br/>讓生命去等候
225                                 <br/>等候下一個傷口</font>
226                             </div>
227                         </dd>
228                     </dl>
229                     <dl class="am-accordion-item">
230                         <dt class="am-accordion-title">我就這樣告別山下的家</dt>
231                         <dd class="am-accordion-bd am-collapse ">
232                             <!-- 規避 Collapase 處理有 padding 的摺疊內容計算計算有誤問題, 加一個容器 -->
233                             <div class="am-accordion-content"><font size="3" style="background-image: url(img/world-background.jpeg);">
234                                 我就這樣告別山下的家,我實在不肯輕易讓眼淚留下。我覺得我並不差不會懼怕,我就這樣本身照顧本身長大。我不想由於現實把頭低下,
235                                 我覺得我並不差能學會虛假。怎樣纔可以看穿面具裏的謊言?別讓個人真心散的像沙。若是有一天我變得更復雜,還能不能唱出歌聲裏的那幅畫?</font>
236                             </div>
237                         </dd>
238                     </dl>
239                     <dl class="am-accordion-item">
240                         <dt class="am-accordion-title">一塊兒旅遊</dt>
241                         <dd class="am-accordion-bd am-collapse ">
242                             <!-- 規避 Collapase 處理有 padding 的摺疊內容計算計算有誤問題, 加一個容器 -->
243                             <div class="am-accordion-content"><font size="3" style="background-image: url(img/world-background.jpeg);">
244                                 你想有一次難忘的旅遊嗎?你想認識身邊的你我Ta?趕快加入咱們吧!</font>
245                             </div>
246                         </dd>
247                     </dl>
248                 </section>
249             </div>
250         </div>
251 
252         <nav data-am-widget="menu" class="am-menu  am-menu-offcanvas1" data-am-menu-offcanvas>
253             <a href="javascript: void(0)" class="am-menu-toggle">
254                 <i class="am-menu-toggle-icon am-icon-bars"></i>
255             </a>
256             <div class="am-offcanvas">
257                 <div class="am-offcanvas-bar am-offcanvas-bar-flip">
258                     <ul class="am-menu-nav am-avg-sm-1">
259                         <li class="am-parent">
260                             <a href="##" class="">尋找那個TA</a>
261                             <ul class="am-menu-sub am-collapse  am-avg-sm-2 ">
262                                 <li class="">
263                                     <a href="##" class="">姓名</a>
264                                 </li>
265                                 <li class="">
266                                     <a href="##" class="">性別</a>
267                                 </li>
268                                 <li class="">
269                                     <a href="##" class="">年齡</a>
270                                 </li>
271                                 <li class="">
272                                     <a href="##" class="">身高</a>
273                                 </li>
274                                 <li class="">
275                                     <a href="##" class="">地區</a>
276                                 </li>
277                                 <li class="">
278                                     <a href="##" class="">愛好</a>
279                                 </li>
280                                 <li class="am-menu-nav-channel">
281                                     <a href="##" class="" title="公司">進入更多 &raquo;</a>
282                                 </li>
283                             </ul>
284                         </li>
285                         <li class="am-parent">
286                             <a href="##" class="">活動</a>
287                             <ul class="am-menu-sub am-collapse  am-avg-sm-3 ">
288                                 <li class="">
289                                     <a href="##" class="">單身派對</a>
290                                 </li>
291                                 <li class="">
292                                     <a href="##" class="">結對子</a>
293                                 </li>
294                                 <li class="">
295                                     <a href="##" class="">學習</a>
296                                 </li>
297                                 <li class="">
298                                     <a href="##" class="">看電影</a>
299                                 </li>
300                                 <li class="">
301                                     <a href="##" class="">逛街</a>
302                                 </li>
303                                 <li class="">
304                                     <a href="##" class="">遊戲</a>
305                                 </li>
306                             </ul>
307                         </li>
308                         <li class="">
309                             <a href="##" class="">聊天</a>
310                         </li>
311                         <li class="">
312                             <a href="##" class="">。。。</a>
313                         </li>
314                     </ul>
315                 </div>
316             </div>
317         </nav>
318 
319         <br>
320         <br>
321         <ul class="am-comments-list am-comments-list-flip">
322             <li class="am-comment">
323                 <article class="am-comment">
324                     <a href="#link-to-user-home">
325                         <img src="img/cc.jpg" alt="" class="am-comment-avatar" width="48" height="48" />
326                     </a>
327                     <div class="am-comment-main">
328                         <header class="am-comment-hd">
329                             <!--<h3 class="am-comment-title">評論標題</h3>-->
330                             <div class="am-comment-meta">
331                                 <a href="#link-to-user" class="am-comment-author">靜香</a> 評論於
332                                 <time datetime="2013-07-27T04:54:29-07:00" title="2015年6月6日 下午7:54 格林尼治標準時間+0800">2015-6-6 15:30</time>
333                             </div>
334                         </header>
335 
336                         <div class="am-comment-bd"><font size="3" style="background-image: url(img/world-background.jpeg);">
337                             啊啊啊,明天就要高考啦~~~!!</font>
338                         </div>
339                     </div>
340                 </article>
341             </li>
342             <li class="am-comment">
343                 <article class="am-comment">
344                     <a href="#link-to-user-home">
345                         <img src="img/bb.jpg" alt="" class="am-comment-avatar" width="48" height="48" />
346                     </a>
347                     <div class="am-comment-main">
348                         <header class="am-comment-hd">
349                             <!--<h3 class="am-comment-title">評論標題</h3>-->
350                             <div class="am-comment-meta">
351                                 <a href="#link-to-user" class="am-comment-author">阿呆</a> 評論於
352                                 <time datetime="2013-07-27T04:54:29-07:00" title="2015年6月6日 下午7:54 格林尼治標準時間+0800">2015-6-6 15:35</time>
353                             </div>
354                         </header>
355 
356                         <div class="am-comment-bd"><font size="3" style="background-image: url(img/world-background.jpeg);">
357                             有什麼好怕的,我仍是照樣吃喝拉撒啊=_=,求樓上美女電話!!!!@_@.</font>
358                         </div>
359                     </div>
360                 </article>
361             </li>
362             <li class="am-comment">
363                 <article class="am-comment">
364                     <a href="#link-to-user-home">
365                         <img src="img/aa.jpg" alt="" class="am-comment-avatar" width="48" height="48" />
366                     </a>
367                     <div class="am-comment-main">
368                         <header class="am-comment-hd">
369                             <!--<h3 class="am-comment-title">評論標題</h3>-->
370                             <div class="am-comment-meta">
371                                 <a href="#link-to-user" class="am-comment-author">大蔥</a> 評論於
372                                 <time datetime="2013-07-27T04:54:29-07:00" title="2015年6月6日 下午7:54 格林尼治標準時間+0800">2015-6-6 15:36</time>
373                             </div>
374                         </header>
375 
376                         <div class="am-comment-bd"><font size="3" style="background-image: url(img/world-background.jpeg);">
377                             #_#  兩耳不聞窗外事,我仍是專心備考六級英語好了。。。。。。。。。</font>
378                         </div>
379                     </div>
380                 </article>
381             </li>
382             <li class="am-comment am-comment-flip"></li>
383             <li class="am-comment am-comment-highlight"></li>
384         </ul>
385 
386         <div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default " id="">
387             <ul class="am-navbar-nav am-cf am-avg-sm-4">
388                 <li>
389                     <a href="tel:123456789" class="">
390                         <span class="am-icon-phone"></span>
391                         <span class="am-navbar-label">呼叫</span>
392                     </a>
393                 </li>
394                 <li data-am-navbar-share>
395                     <a href="###" class="">
396                         <span class="am-icon-share-square-o"></span>
397                         <span class="am-navbar-label">分享</span>
398                     </a>
399                 </li>
400                 <li data-am-navbar-qrcode>
401                     <a href="###" class="">
402                         <span class="am-icon-qrcode"></span>
403                         <span class="am-navbar-label">二維碼</span>
404                     </a>
405                 </li>
406             </ul>
407         </div>
408 
409         <!--
410             <form>
411                 性別:男<input type="radio" name="sex">
412                            女<input type="radio" name="sex"><br>
413                     學歷:<select>
414                         <option>小學</option>
415                         <option>初中</option>
416                         <option>高中</option>
417                         <option>中專</option>
418                         <option>大專</option>
419                         <option>本科</option>
420                         <option>碩士</option>
421                         <option>研究生</option>
422                     </select><br>
423                   評論:<textarea></textarea><br>
424                   文件上傳:<input type="file">
425                <input type="submit" value="提交">&nbsp;&nbsp;&nbsp;
426                <input type="reset" value="重置">&nbsp;&nbsp;&nbsp;
427                <img src="img/favicon.ico">
428             </form>
429             -->
430         <div data-am-widget="gotop" class="am-gotop am-gotop-fixed">
431             <a href="#top" title="">
432                 <img class="am-gotop-icon-custom" src="img/up_icon.png" />
433             </a>
434         </div>
435 
436         <br>
437         <footer data-am-widget="footer" class="am-footer am-footer-default" data-am-footer="{  }">
438             <div class="am-footer-switch">
439                 <span class="am-footer-ysp" data-rel="mobile" data-am-modal="{target: '#am-switch-mode'}">男神女生配</span>
440                 <span class="am-footer-divider">|</span>
441                 <a id="godesktop" data-rel="desktop" class="am-footer-desktop" href="javascript:">電腦版</a>
442             </div>
443             <div class="am-footer-miscs ">
444                 <p>445                     <a href="http://127.0.0.1:8020/QDDS/QDDS.html" title="QDDS" target="_blank" class="">QDDS&nbsp;</a>提供技術支持</p>
446                 <p>HMQ & FJJ & YYS & OYKS © 2015 Technology Research and Development.</p>
447                 <p>粵IP</p>
448             </div>
449         </footer>
450         <div id="am-footer-modal" class="am-modal am-modal-no-btn am-switch-mode-m am-switch-mode-m-default">
451             <div class="am-modal-dialog">
452                 <div class="am-modal-hd am-modal-footer-hd">
453                     <a href="javascript:void(0)" data-dismiss="modal" class="am-close am-close-spin " data-am-modal-close>&times;</a>
454                 </div>
455                 <div class="am-modal-bd">您正在瀏覽的是
456                     <span class="am-switch-mode-owner">男神女神配社區交友網</span>
457                     <span class="am-switch-mode-slogan">爲您當前電腦訂製的網站。</span>
458                 </div>
459             </div>
460         </div>
461 
462         <!-- 連接觸發器, href 屬性爲目標元素 ID -->
463         <div style="text-align: center"><a href="#doc-oc-demo1" data-am-offcanvas>注意事項</a>
464         </div>
465         <!-- 側邊欄內容 -->
466         <div id="doc-oc-demo1" class="am-offcanvas">
467             <div class="am-offcanvas-bar">
468                 <div class="am-offcanvas-content">
469                     <p>
470                         我不肯讓你一我的
471                         <br/> 承受這世界的殘忍
472                         <br/> 我不肯眼淚陪你到 永恆
473                     </p>
474                 </div>
475             </div>
476         </div>
477 
478         <hr color=#000000 />
479     </body>
480 
481 </html>
QDDS

    (3)在Eclipse Java EE IDE for Web Developers中與數據庫鏈接不用編寫代碼,直接在該軟件平臺上就能夠構建搭配了。在這過程當中要安裝一些插件:jdk1.6.0_10mysql-connector-java-5.1.30-bin.jarapache-tomcat-7.0.54;SpringExample03;apache-maven-3.3.1-bin。具體安裝插入構建過程在網絡上均可以搜索到,但初學者在搭建環境時會花費不少時間(我就用了5個小時左右來查資料跟下載插件安裝包),可是,當你搭建好環境後去調試,當調試成功的時候,那種心情是很是很是的激動的。

 

 


 

4、模塊 總結、自我評價

     缺點:

    尚未把夥伴們的程序關聯起來統一管理。

    自我評價:

    一開始,對於IntelliJ IDEA我尚未學好,因此緊靠這個軟件,以我我的的能力是還不能徹底作好的,因此我就開始搜索其它相似的軟件,終於,在有一次瀏覽網頁時,發現了這一個軟件:Eclipse Java EE IDE for Web Developers挺不錯,挺適合現階段水平的個人,因而我就查了好多的資料去學習這個軟件。其實Eclipse Java EE IDE for Web Developers這個軟件能夠說是由IntelliJ IDEA、HBuilder、eclipse的結合體,相對於這三個軟件,我是比較瞭解熟悉HBuilder、eclipse的,依靠這兩個軟件來擴充我對IntelliJ IDEA瞭解的不足。

    把Eclipse Java EE IDE for Web Developers和MySQL鏈接時,我所花費的時間也很多,幾乎用了5個小時的時間才真正把這兩個軟件鏈接好。其實每個軟件都有其精華和糟粕,但只要學以至用,認真去學習的知識,終究仍是本身的。我很感謝每一科的每一次課程設計,由於我以爲我都並不會馬虎對待,當學習到了本身平時不多願意花大量時間去了解的東西時,這就是真正的收穫,您說不是嗎?

    好啦,接下來我要接收下一模塊啦~`~`

相關文章
相關標籤/搜索