Bootstrap+JSP實例學習筆記一.簡單的帶登陸功能的首頁

時間  2019-12-13
標籤 bootstrap+jsp bootstrap jsp 實例 學習 筆記 簡單 登陸 功能 首頁 欄目 Bootstarp 简体版
原文   原文鏈接
  • 前言

Bootstrap 是流行的 HTML、CSS 和 JS 框架，用於開發響應式佈局、移動設備優先的 WEB 項目。源自於twiteer內部的開發框架。css

當前（2019-05）最新版本是v3.3.7。html

官網：https://v3.bootcss.com/前端

學習初衷： 不能每來一個項目都重頭開始吧，但願積累框架，節省時間，快速上手，儘快出效果。不用太花哨，但也不能太難看。java

選一個簡單易上手的框架，那就選這個bootstrap吧。mysql

 

  • 效果圖

沒使用樣式：jquery

使用bootstrap樣式：sql

本身寫的樣式：數據庫

使用bootstrap樣式：bootstrap

 

做爲後端開發人員，咱們不須要懂太多的前端美工知識，可是又不想作出來太難看，在保證快的基礎上，出一個還能夠的界面。後端

 

  • 實戰（step by step）：

 工具：Eclipse Java Photon 4.8.0

說明： 網上已經不少這類介紹了，這裏更多的是作一個整合。並把本身學習過程的一些步驟關鍵點記錄下來，看官能夠挑着看。

一：配置開發環境

1.新增動態網頁庫以及配置tomcat

默認eclipse已安裝，但默認是沒有動態網頁的，須要安裝配置下。

參考：https://blog.csdn.net/weixin_40626699/article/details/83341560

2. 新建一個動態Web項目

參考：http://www.javashuo.com/article/p-mhpfhbkj-ew.html

若是報錯：The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path

那麼須要配置tomcat，參考：http://www.cnblogs.com/herd/p/9548592.html

而後關聯到項目中，參考：http://www.javashuo.com/article/p-zvrnbhbv-dn.html

若是這個過程尚未找到可選的tomcat配置，則能夠參考下圖下載配置一個：

 

3. 項目中引入bootstrap

參考：引入BootStrap開發一個JSP項目

https://cloud.tencent.com/developer/article/1343258

 

4. 實例： 寫一個簡單的帶登陸功能的首頁

參考：

https://cloud.tencent.com/developer/article/1343207

http://www.javashuo.com/article/p-rulhvmcq-do.html

視頻教程：https://study.163.com/course/courseLearn.htm?courseId=1002923012#/learn/video?lessonId=1003312146&courseId=1002923012

 

1） Login.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
 <!-- 這裏沒啥用，前面已經定義過了，只是好習慣留着 -->
<meta charset="UTF-8">
 <!-- 設置爲設備的寬度，高端爲1:1。以便適應手機端瀏覽。-->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" type="text/css" href="<%=basePath %>/bootstrapcss/css/bootstrap.min.css" >
 <link rel="stylesheet" href="/bootstrap_study/myCss/login.css">
 <!-- jQuery文件。務必在bootstrap.min.js 以前引入 -->
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
   <form action="Login_Check.jsp" method="post" class="form-horizontal">
       <filedset>
           <legend><lable> <span class="glyphicon glyphicon-user"></span>&nbsp;User login </lable></legend>
   
      <div class="row">  
        <!--柵格系統，每row行共12列，分個3div，每1,3個div佔3列，第2個div則佔5列，即3列+5列+4列=12列--> 
        <div class="col-sm-3"><span class="glyphicon glyphicon-user"></span>&nbsp;UserName： </div>
        <div class="col-sm-5"><input type="text" name="ID" placeholder="Plese input your username" class="form-control">  </div>
        <div class="col-sm-4"></div>
      </div>
      <div class="row">      
        <div class="col-sm-3"><span class="glyphicon glyphicon-lock"></span>&nbsp;Password： </div>
        <div class="col-sm-5"><input type="password" name="PWD" placeholder="Plese input your password" class="form-control"></div>
        <div class="col-sm-4" ></div>
      </div>
      
          <div class="row">  
          <div class="col-sm-5 col-sm-offset-3">      
           <input type="submit" value="Login" class="btn btn-xs btn-primary">
           <input type="reset" value="Reset" class="btn btn-xs btn-warning">
         </div>
  </div>
       
    </filedset>
    </form>    
</div>
</body>
</html>
View Code

2） Login_check.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" 
    pageEncoding="UTF-8"%>
      <%@ page import="java.io.*" %>
     <%@ page import="java.util.*" %>
     <%@ page import="java.sql.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</script>

</head>
<body>

<%
Class.forName("com.mysql.jdbc.Driver");
System.out.println("建立數據庫驅動成功！");
 //DataSource ds = null;

  String dbUrl="jdbc:mysql://IP:端口/數據庫名"; 
     String Username="帳號"; 
     String Password="密碼"; 
     Class.forName("com.mysql.jdbc.Driver").newInstance();
 //    Connection conn = DriverManager.getConnection(dbUrl,Username,Password);//鏈接
 //    Statement stmt=conn.createStatement();//會話
  //   ResultSet rst=stmt.executeQuery("select * from yourTable");
  
  String ID=null;
  String PWD=null;
 //while(rst.next())
 {
  //ID=rst.getString("yourColumnName");
  //PWD=request.getParameter("PWD");
 
 }
 ID="1";
 if(ID.equals(ID))
 {
     %>
     <jsp:forward page="Login_Success.jsp">
     <jsp:param name="uname" value="<%=ID%>"/>
     </jsp:forward>
     <%
     }else{
     %>
     <jsp:forward page="Login_Failure.html"/>
     <%
     }
     %>

</body>
</html>
View Code

 

3） Login_sucess.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="<%=basePath %>/bootstrapcss/css/bootstrap.min.css" >
</head>
<body>
    <filedset>
           <legend><lable> <span class="glyphicon glyphicon-hourglass"></span>&nbsp;Welcome </lable></legend>
           </filedset>
  Welcome.  <%="ID"%>

</body>
</html>
View Code

 

4) login_failure.html

略

  

  • 學習筆記：

1. JSP頁面編碼

默認項目沒配置狀況下，新建的頁面默認是GBK，部署後可能顯示亂碼，那麼須要在頁面設置一下爲UTF-8。

1） <%@ page contentType="text/html; charset=UTF-8"  %>

那不能每一個頁面都設置一下吧，那麼對整個eclipse一塊兒設置：

2） Windows---->Preferences---->JSP--->把這個目錄下的Encoding選爲你要設置的編碼UTF-8。

2. JSP獲取當前項目路徑

引用css時，須要考慮開發環境與部署環境的路徑差別，所以不想把項目路徑寫死到代碼中。能夠經過如下代碼獲取路徑並配置。

在頁面開頭部分添加：

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
說明：獲得工程名：request.getContextPath()

3. 引入bootstrap配置

<head>

<link rel="stylesheet" type="text/css" href="<%=basePath %>/bootstrapcss/css/bootstrap.min.css" >

</head>

注意：這裏的<%=basePath %>就是上述獲取到的項目路徑，固然測試的時候你能夠寫死項目的名字

4. bootstrap.min.css與bootstrap.css區別

bootstrap.css 是未壓縮的，bootstrap.min.css是壓縮過的。通常狀況下，未壓縮的用於開發環境，若是程序出錯方便調試。而壓縮過的用生生產環境，大大減小網絡數據傳輸量，便之更快更節約流量……其它 .min.css 和 .min.js 文件同理。

5. <div class="container">

container容器，大概是佔屏幕寬度的80%,而後居中對齊。

因此建議，在最外層，能夠放在容器中。

6. <meta name="viewport" content="width=device-width,initial-scale=1.0">

https://blog.csdn.net/u012402190/article/details/70172371

7. form表單中，分組歸類fieldset

fieldset：對錶單進行分組，一個表單能夠有多個fieldset。
legend：說明每組的內容描述。

7. 柵格佈局col-xs-*、col-sm-*、col-md-*、col-lg-*

bootstrap的柵格佈局，默認會將每行的row分爲12列
col是column簡寫：列；

xs是maxsmall簡寫：超小， sm是small簡寫：小，  md是medium簡寫：中等， lg是large簡寫：大；

-* 表示佔列數，即佔每行row分12列柵格系統比，如.col-md-3 在中等屏幕中佔3列也就是1/4（12/3列=4個div）；

     .col-xs-* 超小屏幕如手機 （<768px）時使用；

     .col-sm-* 小屏幕如平板 （768px ≤ 寬度 ＜992px）時使用；

     .col-md-* 中等屏幕如普通顯示器 （992px ≤ 寬度 ＜ 1200px）時使用；

     .col-lg-* 大屏幕如大顯示器 （≥1200px）時使用。

--能夠混合使用，t以適應不一樣的屏幕，如：


<div class="col-xs-12 col-sm-9 col-md-6 col-lg-3">測試</div>
<!--
當屏幕尺寸：
小於 768px 的時候，用 col-xs-12 類對應的樣式；
在 768px 到 992px 之間的時候，用 col-sm-9 類對應的樣式；
在 992px 到 1200px 之間的時候，用 col-md-6 類對應的樣式；
大於 1200px 的時候，用 col-lg-3 類對應的樣式；

-->

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程