NF_Exp8_20164306

時間 2019-11-13

標籤 exp8 exp 简体版

原文原文鏈接

Web基礎

1 關鍵內容

Web前端HTML

能正常安裝、啓停Apache。理解HTML，理解表單，理解GET與POST方法,編寫一個含有表單的HTMLjavascript

Web前端javascipt

理解JavaScript的基本功能，理解DOM。編寫JavaScript驗證用戶名、密碼的規則css

Web後端

MySQL基礎：正常安裝、啓動MySQL，建庫、建立用戶、修改密碼、建表html

編寫PHP網頁，鏈接數據庫，進行用戶認證前端

最簡單的SQL注入，XSS攻擊測試

功能描述：用戶能登錄，登錄用戶名密碼保存在數據庫中，登錄成功顯示歡迎頁面html5

課題負責人須要完成：登錄後能夠發貼；會話管理java

2 基礎問題回答

什麼是表單

是一個包含表單元素的區域，在網頁中通常負責數據採集mysql

瀏覽器能夠解析運行什麼語言

HTML（超文本標記語言）web

XML（可擴展標記語言）sql

Python、PHP、JavaScript、ASP等（腳本語言）數據庫

WebServer支持哪些動態語言

JavaScript、ASP、PHP、Ruby等

3 實驗準備

實驗在Win10環境下進行

計算機必須首先配置好java環境

要搭建一個網站並在服務器上運行，實現與服務器的交互，須要準備如下三樣工具

1 tomcat 搭建web服務器

http://tomcat.apache.org/download-70.cgi

2 xampp 建立數據庫並在服務器上運行

https://www.apachefriends.org/index.html

3 eclips 網頁編程集成環境

https://www.eclipse.org/downloads/

須要分別完成如下配置

1 安裝並運行tomcat，配置端口，確認服務器正常使用

2 安裝並配置xampp，實驗須要使用MySQL及Apache模塊

點擊MySQL後的Admin，順利登入管理員界面則配置正確

3 配置eclips

首先配置工做區目錄

而後確認 Java bulid path 、JRE 等等

接着添加server，添加以前安裝的tomcat

最後創建「動態網頁」工程

確認服務器在eclips界面中正常運行，完成所有準備工做

4 前端設計基礎

標籤的概念

超文本標記語言（HTML）標記標籤一般被稱爲HTML標籤，HTML標籤是HTML語言中最基本的單位

HTML標籤是HTML最重要的組成部分

經常使用標籤

標籤	描述
<!--...-->	定義註釋。
<a>	定義錨。
<b>	定義粗體字。
<br>	定義簡單的折行。
<button>	定義按鈕 (push button)。
<center>	不同意使用。定義居中文本。
<div>	定義文檔中的節。
<font>	不同意使用。定義文字的字體、尺寸和顏色。
<footer>	定義 section 或 page 的頁腳。
<form>	定義供用戶輸入的 HTML 表單。
<frame>	定義框架集的窗口或框架。
<frameset>	定義框架集。
<h1> to <h6>	定義 HTML 標題。
<head>	定義關於文檔的信息。
<header>	定義 section 或 page 的頁眉。
<hr>	定義水平線。
<html>	定義 HTML 文檔。
<i>	定義斜體字。
<iframe>	定義內聯框架。
<img>	定義圖像。
<input>	定義輸入控件。
<li>	定義列表的項目。
<link>	定義文檔與外部資源的關係。
<map>	定義圖像映射。
<mark>	定義有記號的文本。
<menu>	定義菜單列表。
<meta>	定義關於 HTML 文檔的元信息。
<meter>	定義預約義範圍內的度量。
<p>	定義段落。
<param>	定義對象的參數。
<pre>	定義預格式文本。
<progress>	定義任何類型的任務的進度。
<q>	定義短的引用。
<script>	定義客戶端腳本。
<section>	定義 section。
<select>	定義選擇列表（下拉列表）。
<table>	定義表格。
<tbody>	定義表格中的主體內容。
<td>	定義表格中的單元。
<textarea>	定義多行的文本輸入控件。
<tfoot>	定義表格中的表注內容（腳註）。
<th>	定義表格中的表頭單元格。
<thead>	定義表格中的表頭內容。
<time>	定義日期/時間。
<title>	定義文檔的標題。
<u>	定義下劃線文本。

特別的，可使用<% ··· %>在html中嵌套java等服務器端代碼

通常結構

<html>
    <head>
    屬性設置
    <title></title>
    引入外部的文件
    </head>
    <body>
    數據內容和其餘的標籤
    </body>
</html>

CSS

層疊樣式表(Cascading Style Sheets)是一種用來表現HTML或XML等文件樣式的計算機語言

CSS不只能夠靜態地修飾網頁，還能夠配合各類腳本語言動態地對網頁各元素進行格式化

最直觀的做用是讓你的界面更好看

登陸界面及效果展現

<%@ page language="java" contentType="text/html; charset=utf8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>登陸</title>
<link rel="stylesheet" type="text/css" href="assets/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="assets/css/demo.css" />
<!-- background picture -->
<link rel="stylesheet" type="text/css" href="assets/css/component.css" />
<!-- IF-IE Browser -->
<script src="js/html5.js"></script>
</head>
<body>
<%
    session.setAttribute("admin","");
    session.setAttribute("username","");
    String msg="";
    String hint = (String)request.getParameter("hint");
    String register = (String)request.getParameter("register");
    if(hint!=null){
         msg="用戶名或密碼錯誤！";
    }
    if(register!=null){
%>    
        <script type="text/javascript" >window.location="login.jsp"; 
        alert("註冊成功！");
        </script>
<%    
    }
%>
        <div class="container demo-1">
            <div class="content">
                <div id="large-header" class="large-header">
                    <canvas id="demo-canvas"></canvas>
                    <div class="logo_box">
                        <h3 style="font-size: 40px;font-family: 'times new roman';">Welcome</h3>
                        <form action="LoginController" name="login" method="post" onsubmit="return checkLogin();">
                            <div class="input_outer">
                                <span class="u_user"></span>
                                <input name="username" id="username" class="text" style="color: #FFFFFF !important" type="text" placeholder="請輸入用戶名">
                            </div>
                            <div class="input_outer">
                                <span class="us_uer"></span>
                                <input name="password" id="password" class="text" style="color: #FFFFFF !important; position:absolute; z-index:100;"value="" type="password" placeholder="請輸入密碼">
                            </div>
                            <div class="mb2"><a  class="act-but submit"><button type="submit" style="background:#204D74;border:#204D74;color: #FFFFFF">登陸</button></a></div>
                            
                            <span style="float:left;color:red"><%=msg%></span>
                            <h style="float:right;">尚未帳號？<a href="register.jsp">當即註冊</a></h>
                        </form>
                    </div>
                </div>
            </div>
        </div><!-- /container -->
        
        <!-- mouse -->
        <script src="assets/js/TweenLite.min.js"></script>
        <script src="assets/js/EasePack.min.js"></script>
        <script src="assets/js/demo-1.js"></script>
        <!-- judge -->
        <script src="assets/js/loginform.js"></script>
    </body>
</html>

5 數據庫設計基礎

xampp提供了圖形化的數據庫設計界面

你能夠在控制檯中直接用SQL語言操做，或者在界面中，看着控制檯中的代碼邊作邊學

上圖展現了一個數據庫的最基本組織結構：數據庫—表單—字段

編輯字段時首先確認數據庫正在使用的字符集，特別的，必定要注意數據類型

6 動態頁面初探

首先明確.jsp和.js的區別

JSP：全名爲Java Server Pages，中文名叫java服務器頁面，其根本是一個簡化的Servlet設計

JavaScript：一種直譯式腳本語言，是一種動態類型、弱類型、基於原型的語言，內置支持類型

它的解釋器被稱爲JavaScript引擎，爲瀏覽器的一部分，普遍用於客戶端的腳本語言，用來給HTML網頁增長動態功能

如下代碼用於檢查登陸時輸入內容是否爲空

function checkLogin(){
    var username = document.getElementsByName("username")[0].value;
    var password = document.getElementsByName("password")[0].value;
    
    if(username=="" && password==""){
        alert("請輸入用戶名和密碼！");
        return false;
    }else if(username==""){
        alert("請輸入用戶名！");
        return false;
    }else if(password==""){
        alert("請輸入密碼！");
        return false;
    }
}

7 與服務器交互

須要 import java.sql 和 javax.servlet，請首先進行確認

編寫數據庫接口，其中dbURL須要根據實際狀況修改

package com.myjava;

import java.sql.*;

public class DAO{

    private Connection conn;
    private Statement statement;
    private ResultSet rs;
    private String dbURL = "jdbc:mysql://localhost:3306/20164306?user=root&useSSL=true";

    public DAO(){
        conn = null;
        statement = null;
        rs = null;
    }

    public boolean connection(){
        try{
            Class.forName("com.mysql.jdbc.Driver");
            conn = DriverManager.getConnection(dbURL);
            statement = conn.createStatement();
        }catch(SQLException ex){
            ex.printStackTrace();
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
        return (conn==null);
    }

  
    public int update(String sqlStatement) throws SQLException {
        return statement.executeUpdate(sqlStatement);
    }

    public ResultSet query(String sqlStatement) throws SQLException{
        return statement.executeQuery(sqlStatement);
    }

    public void close(){
        try{
            if(rs!=null){
                rs.close();
            }
            if(statement!=null){
                statement.close();
            }if(conn!=null){
                conn.close();
            }
        }catch(Exception e){
            e.printStackTrace();
        }
        
    }
}

如下是一段簡單的代碼，在登陸時對用戶名和密碼進行驗證，並確認用戶身份

package com.myservlet;

import javax.servlet.http.*;
import javax.servlet.annotation.WebServlet;
import com.myjava.*;


@WebServlet("/LoginController")
public class LoginController extends HttpServlet{

    private static final long serialVersionUID = 1L;
    public void doGet(HttpServletRequest req, HttpServletResponse res) {
        this.doPost(req,res);
    }
    public void doPost(HttpServletRequest req, HttpServletResponse res){
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        
        HttpSession httpSession = req.getSession(true);
      
        UsersCl uc = new UsersCl(); 
        try {
        
            if(username==null||username==""
                    ||password==null||password=="") {
                res.sendRedirect("login.jsp");
            }else if(uc.checkLogin(username,password)){
            
                if(uc.checkAuthority(username)){
                    httpSession.setAttribute("admin", username);
                    httpSession.setAttribute("adminpw",password);
                    res.sendRedirect("admincenter.jsp");
                }else{
                    httpSession.setAttribute("username", username);
                    httpSession.setAttribute("password",password);
                    res.sendRedirect("homepage.jsp");
                }
            }else{
                res.sendRedirect("login.jsp?hint=1");
            }
                    
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }    
    }
}

具體方法定義以下

package com.myjava;

import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.*;

public class UsersCl {

    private DAO dao;
    private int pageCount;
    private int rowCount; 
    
    public UsersCl(){
        dao = new DAO();
    }
    
    public boolean checkAuthority(String u) {
        boolean b=false;
        if(u==null||u=="") {
            b=false;
        }else {
            try {
                dao.connection();
                String sqlQuery = "select authority from users where username='"+u+"'";
                ResultSet rs = dao.query(sqlQuery);
                if(rs.next()){
                    String authority = rs.getString(1);
                    if(authority.equals("A")){
                        b = true;
                    }else{
                        b = false;
                    }
                }else{
                    b = false;
                }
            }catch(Exception e) {
                e.printStackTrace();
            }finally {
                dao.close();
            }  
        }
        
        return b;
    }
    
    public boolean checkLogin(String u,String p){
        
        boolean b = false;
        try {
            dao.connection();
            String sqlQuery = "select password from users where username='"+u+"'";
            ResultSet rs;
            rs = dao.query(sqlQuery);
        
        if(rs.next()){
            String confirPassword = rs.getString(1);
            if(p.equals(confirPassword)){
                b = true;
            }else{
                b = false;
            }
        }else{
            b = false;
        }
    } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
    }finally {
        dao.close();
    }
      return b;
    }
    
    public boolean hasUsername(String username) {
        
        boolean b=false;
        try {
            dao.connection();
            String sqlQuery = "select * from users where username='"+username+"'";
            ResultSet rs = dao.query(sqlQuery);
            b = rs.next();
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally {
            dao.close();
        }
        return b;
    }
    //add new user
    public int update(String sql){
        int b = -1;
        try {
            dao.connection();
            dao.update(sql);
            b=0;
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally {
            dao.close();
        }
        return b;
    }
    
    public Users getUserByUname(String username,String password) {
        Users us = new Users();
        dao.connection();
        try {
            ResultSet rs=dao.query("select * from users where username='"+username+"'");
            if(rs.next()) {
                us.setUsername(rs.getString(1));
                us.setPassword(rs.getString(2));
            }
        } catch (SQLException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } 
        return us;
    }
    
    public ArrayList<Users> getUser(int pageSize,int pageNow) {    
        rowCount = 0;
        pageCount = 0;
        ArrayList<Users> userlist = new ArrayList<Users>();
        try {
                dao.connection();
                ResultSet rs = dao.query("select count(*) from users where authority='U' || authority='A'");
                if(rs.next()){
                    rowCount = rs.getInt(1);    
                }
                if(rowCount==0) {
                    pageCount=1;
                }
                else if(rowCount%pageSize == 0){
                    pageCount = rowCount/pageSize;
                }
                else{
                    pageCount = rowCount/pageSize + 1;
                }
        
                rs = dao.query("select * from users order by users.authority asc limit "+pageSize*(pageNow-1)+","+pageSize);
            
                while(rs.next()){
                    Users user = new Users();
                    user.setUsername(rs.getString(1));
                    user.setPassword(rs.getString(2));
                    user.setAuthority(rs.getString(3));
                    userlist.add(user);
                }
            } 
            catch (SQLException e) {
                e.printStackTrace();
            }
            finally {
                dao.close();
            }
            return userlist;
        }
    
        public int getPageCount() {
            return pageCount;
        }
    
        public int getRowCount() {
            return rowCount;
        }

        public int delete(String sql) throws SQLException {
            dao.connection();
            int i = dao.update(sql);
            dao.close();
            return i;
    }
}

8 功能說明

網頁實現了用戶名、密碼認證，用戶訪問控制，記錄編輯與同步等功能

解決了用戶名、密碼建立、翻頁查看等操做中的邊界處理問題

9 嘗試攻擊

SQL注入，經過把SQL命令插入到Web表單提交，欺騙服務器執行（不能夠）

XSS是一種常常出如今web應用中的計算機安全漏洞，它容許用戶將代碼植入頁面（不可以）

10 總結

由於代碼量較大，因此無法在博客中mark所有代碼，功能也僅展現了部分

大概有40多個文件吧，感興趣的能夠單獨聯繫我

攻擊部分，由於是提早作的，理解的不是很透，但願經過實驗9深刻理解

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。