如何利用servlet和filter和DAO思想，動態調出數據庫信息進行登錄驗證

1 寫在前頭

首先說明，我的DAO少了工廠的撰寫，我只寫了接口類和實現類，足夠了。我使用的maven構建工程，mysql5.7，使用的pom.xml如下

  <properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <maven.compiler.source>1.8</maven.compiler.source>
    <maven.compiler.target>1.8</maven.compiler.target>
  </properties>

  <dependencies>
    <dependency>
      <groupId>commons-dbutils</groupId>
      <artifactId>commons-dbutils</artifactId>
      <version>1.4</version>
    </dependency>

    <dependency>
      <groupId>mysql</groupId>
      <artifactId>mysql-connector-java</artifactId>
      <version>5.1.6</version>
    </dependency>

    <dependency>
      <groupId>c3p0</groupId>
      <artifactId>c3p0</artifactId>
      <version>0.9.1.2</version>
    </dependency>

    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.10</version>
    </dependency>
  </dependencies>

  <build>
    <finalName>jobWeb002</finalName>
    <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
      <plugins>
        <plugin>
          <artifactId>maven-clean-plugin</artifactId>
          <version>3.1.0</version>
        </plugin>
        <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
        <plugin>
          <artifactId>maven-resources-plugin</artifactId>
          <version>3.0.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-compiler-plugin</artifactId>
          <version>3.8.0</version>
        </plugin>
        <plugin>
          <artifactId>maven-surefire-plugin</artifactId>
          <version>2.22.1</version>
        </plugin>
        <plugin>
          <artifactId>maven-war-plugin</artifactId>
          <version>3.2.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-install-plugin</artifactId>
          <version>2.5.2</version>
        </plugin>
        <plugin>
          <artifactId>maven-deploy-plugin</artifactId>
          <version>2.8.2</version>
        </plugin>
      </plugins>
    </pluginManagement>
  </build>

2 DAO代碼

2.1 UserBean

package javaBeans;

public class Users {
    private String flag;  //類型  是個人賬號還是企業賬號
    private String username;//用戶名
    private String password;//密碼
    private String error;//錯誤信息
    private String repassword;//確認密碼
    private String captcha; //登錄的驗證碼
    private String squesition;//安全問題
    private String answer;//安全問題的回答
    private String sex;  //性別
    private String school; //畢業院校
    private String manage; //就讀專業
    private String cname; //希望從事行業
    private String salary;
    private String secure_position;//證件選擇
    private String card_no; //證件號
    private String email; //郵箱
    private String phonenumber; //手機號碼
    private String phone_captcha;//手機驗證碼
    private boolean accept;//是否接受協議

    public Users() {

    }


    public String getFlag() {
        return flag;
    }

    public void setFlag(String flag) {
        this.flag = flag;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public String getError() {
        return error;
    }

    public void setError(String error) {
        this.error = error;
    }

    public String getRepassword() {
        return repassword;
    }

    public void setRepassword(String repassword) {
        this.repassword = repassword;
    }

    public String getCaptcha() {
        return captcha;
    }

    public void setCaptcha(String captcha) {
        this.captcha = captcha;
    }

    public String getSquesition() {
        return squesition;
    }

    public void setSquesition(String squesition) {
        this.squesition = squesition;
    }

    public String getAnswer() {
        return answer;
    }

    public void setAnswer(String answer) {
        this.answer = answer;
    }

    public String getSex() {
        return sex;
    }

    public void setSex(String sex) {
        this.sex = sex;
    }

    public String getSchool() {
        return school;
    }

    public void setSchool(String school) {
        this.school = school;
    }

    public String getManage() {
        return manage;
    }

    public void setManage(String manage) {
        this.manage = manage;
    }

    public String getCname() {
        return cname;
    }

    public void setCname(String cname) {
        this.cname = cname;
    }

    public String getSalary() {
        return salary;
    }

    public void setSalary(String salary) {
        this.salary = salary;
    }

    public String getSecure_position() {
        return secure_position;
    }

    public void setSecure_position(String secure_position) {
        this.secure_position = secure_position;
    }

    public String getCard_no() {
        return card_no;
    }

    public void setCard_no(String card_no) {
        this.card_no = card_no;
    }

    public String getEmail() {
        return email;
    }

    public void setEmail(String email) {
        this.email = email;
    }

    public String getPhonenumber() {
        return phonenumber;
    }

    public void setPhonenumber(String phonenumber) {
        this.phonenumber = phonenumber;
    }

    public String getPhone_captcha() {
        return phone_captcha;
    }

    public void setPhone_captcha(String phone_captcha) {
        this.phone_captcha = phone_captcha;
    }

    public boolean isAccept() {
        return accept;
    }

    public void setAccept(boolean accept) {
        this.accept = accept;
    }
}

2.2 IUser

package dao;

import javaBeans.Users;

import java.util.List;


public interface IUsers {

    List<Users> findAllUsers();

    /**
     * 通過username查詢
     * @return
     */
    Users findByUsersname(String username);

    /**
     * 通過id進行保存
     */
    void saveUsers(Users s);
    void saveUsers1(Users s);

//    /**
//     * 通過id進行刪除
//     */
//    void deleteByusername(String username);

    public boolean doCheckLogin(String username,String password) throws Exception;///登陸時候連接數據庫進行匹配查找
}

2.3 userImpl

package dao;

import getConnection.GetConnection;
import javaBeans.Users;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

public class userImpl implements IUsers{

    private Connection con;
    private PreparedStatement pstmt = null;
    public userImpl()
    {
        this.con=new GetConnection().getCon();

    }

    //查找到所有用戶
    @Override
    public List<Users> findAllUsers() {
        try {

            List<Users> all = new ArrayList<Users>();
            String sql ="SELECT username,password,sex,phonenumber,flag FROM users";
            this.pstmt = this.con.prepareStatement(sql);
            ResultSet rs = this.pstmt.executeQuery();
            Users us = null;
            while (rs.next()){
                us = new Users();
                us.setUsername(rs.getString(1));
                us.setPassword(rs.getString(2));
                us.setSex(rs.getString(3));
                us.setPhonenumber(rs.getString(4));
                us.setFlag(rs.getString(5));
                all.add(us);
            }
            this.pstmt.close();
            return all;
        }catch (Exception e){
            throw  new RuntimeException(e);
        }

    }

    //根據username查找用戶
    @Override
    public Users findByUsersname(String username) {
        try {
            Users u =null;
            String sql ="SELECT username,password,sex,phonenumber,flag FROM users WHERE username=?";
            this.pstmt = this.con.prepareStatement(sql);
            this.pstmt.setString(1,username);
            ResultSet rs = this.pstmt.executeQuery();
            while (rs.next()){
                u = new Users();
                u.setUsername(rs.getString(1));
                u.setPassword(rs.getString(2));
                u.setSex(rs.getString(3));
                u.setPhonenumber(rs.getString(4));
                u.setFlag(rs.getString(5));
            }
            this.pstmt.close();
            return u;
        }catch (Exception e){
            throw  new RuntimeException(e);
        }
    }

    //保存用戶信息
    @Override
    public void saveUsers(Users u) {
        try {
            String sql="INSERT INTO bigdata.users(username,password,squesition,answer,sex,school,manage,cname,salary,secure_position,card_no,email,phonenumber,flag) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?,?)";
            this.pstmt=this.con.prepareStatement(sql);
            this.pstmt.setString(1,u.getUsername());
            this.pstmt.setString(2,u.getPassword());
            this.pstmt.setString(3,u.getSquesition());
            this.pstmt.setString(4,u.getAnswer());
            this.pstmt.setString(5,u.getSex());
            this.pstmt.setString(6,u.getSchool());
            this.pstmt.setString(7,u.getManage());
            this.pstmt.setString(8,u.getCname());
            this.pstmt.setString(9,u.getSalary());
            this.pstmt.setString(10,u.getSecure_position());
            this.pstmt.setString(11,u.getCard_no());
            this.pstmt.setString(12,u.getEmail());
            this.pstmt.setString(13,u.getPhonenumber());
            this.pstmt.setString(14,u.getFlag());
            if (this.pstmt.executeUpdate()>0){
              System.out.println("存儲成功啦！");
            }
            else{
                System.out.println("發生了存儲意外，請重新註冊");
            }
        }catch (Exception e){
            throw  new RuntimeException(e);
        }

    }

    @Override
    public void saveUsers1(Users s) {
        try {
            String sql="INSERT INTO bigdata.users(username,password) VALUES (?,?)";
            this.pstmt=this.con.prepareStatement(sql);
            this.pstmt.setString(1,s.getUsername());
            this.pstmt.setString(2,s.getPassword());
            System.out.println("執行了saveUsers1");
            if (this.pstmt.executeUpdate()>0){
                System.out.println("存儲成功啦！");
            }
            else{
                System.out.println("發生了存儲意外，請重新註冊");
            }
        }catch (Exception e){
            throw  new RuntimeException(e);
        }
    }

    @Override
    public boolean doCheckLogin(String username,String password) throws Exception {
        boolean f = false;
        String sql = "SELECT username,password FROM users WHERE username=? AND password=?";
        this.pstmt = this.con.prepareStatement(sql);
        this.pstmt.setString(1, username);
        this.pstmt.setString(2, password);
        ResultSet rs = this.pstmt.executeQuery();
        if (rs.next()) {
            System.out.println("到了checklogin內部了！賬戶爲："+username+",密碼爲"+password);
            return true;
        }
        else {
            return false;
        }

    }


    }
//
//
//    //根據username刪除
//    @Override
//    public void deleteByusername(String username) {
//        try {
//            runner.update("delete from student where username =?", username);
//        }catch (Exception e) {
//            throw new RuntimeException(e);
//        }
//    }

3 連接數據庫

3.1 GetConnection

package getConnection;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

/**
 *
 * 用JDBC的方法獲得數據庫的連接
 *
 */
public class GetConnection {
    // 通過靜態方法註冊驅動，獲得連接
    private static final String driver = "com.mysql.jdbc.Driver";
    private static final String url = "jdbc:mysql://localhost:3306/bigdata";
    private static final String username= "root";
    private static final String password="111111";
    private Connection con=null;

    public GetConnection () {

        try {
            Class.forName(driver);
            try {
                System.out.println("成功加載Mysql驅動");
                this.con =DriverManager.getConnection(url, username, password);
                System.out.println("成功連接數據庫！");
            } catch (SQLException e) {
                e.printStackTrace();
            }
        } catch (ClassNotFoundException e) {
            e.printStackTrace();
        }
    }
    public Connection getCon()
    {
        System.out.println("您已經獲得了連接");
        return con;

    }
    public void setCon(Connection con)
    {
        this.con=con;
    }

    public void close() throws Exception{//數據庫的關閉
        if(this.con!=null){
            try{
                this.con.close();
            }catch (Exception e){
                throw e;
            }
        }
    }


    /*
     * public static void main(String args[]){ getConnection(); }
     */
}

3.2 Mysql內信息

注意，上面的Bigdata並不是你創建的連接，而是你實際創建的schema，users應該對應的是你創建的javaBeans

使用到的建表語句

create table bigdata.users(
`userId` int unsigned auto_increment,
`username` varchar(30) not null,
`password` varchar(30) not null,
`school` varchar(45) ,
`manage` varchar(45) ,
`cname` varchar(45),
`salary` varchar(45) ,
`secure_position` varchar(45) ,
`card_no` varchar(45) ,
`squesition` varchar(45) ,
`sex` varchar(10) ,
`answer` varchar(45) ,
`email` varchar(45) ,
`phonenumber` varchar(45) ,
`flag` varchar(5),
primary key (userId)
)ENGINE=InnoDB DEFAULT CHARSET=gbk;

4 servlet和Filter

4.1 servlet

package servlet;

import dao.*;
import javaBeans.Users;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@WebServlet(name = "denglu")
public class denglu  extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        Users u = new Users();
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        u.setUsername(username);
        u.setPassword(password);

        if (username!=null&&password!=null) {
            try {
                userImpl UserImpl=new userImpl();
                if(UserImpl.doCheckLogin(username,password))
                {
                    System.out.println("這個是個已經登錄過而且註冊過的用戶，可以歡快的進行瀏覽其他頁面！");
                    System.out.println("他的用戶名爲"+username+", 密碼爲"+password);
                    request.getRequestDispatcher("login_on.jsp").forward(request,response);
                }
                else {
                    System.out.println("該死！這個用戶的賬戶/密碼不對！重新登錄呀！！");
                    response.sendRedirect("denglu.jsp");
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
        else {
            System.out.println("這個用戶沒有登錄過！趕緊登錄吧");
        }
    }
}

4.2 Filter

package Filter;

import dao.Ilogin;
import dao.loginImpl;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import java.io.IOException;

@WebFilter(filterName = "LoginFilter")
    public class loginFilter implements Filter {
    String username = "";
    String password = "";
        private FilterConfig config0;
        public void destroy() {
        }
        public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws ServletException, IOException {
            HttpServletRequest request=(HttpServletRequest) req;
            HttpServletResponse response=(HttpServletResponse) resp;
            HttpSession session = request.getSession();
            String url = request.getRequestURI();
            System.out.println("請求的url：" + url);

            int idx = url.lastIndexOf("/");
            String endWith = url.substring(idx + 1);

            if (!endWith.equals("denglu.jsp")) {
                /*不是登錄頁面  進行攔截處理*/
                System.out.println("不是登錄頁面，進行攔截處理");
                if(session.getAttribute("username")!=null) {
                    System.out.println("username不爲空，轉給servlet判斷是不是已經註冊且登錄的用戶");
                    chain.doFilter(request,response);
                }

                else {
                    System.out.println("username爲空，轉去登錄頁面");
                    response.sendRedirect("denglu.jsp");
                }
                }
            else {
                System.out.println("是登錄頁面，不進行攔截");
                chain.doFilter(request,response);
            }
        }


        public void init(FilterConfig config) throws ServletException {
            config0=config;
        }
    }

4.3 Web.xml

注意了，filter-mapping裏的url是指你要匹配的jsp頁面的名字。
而servlet-mapping裏的url是你給該servlet取的別名，這個別名是在真正的jsp頁面時指定的提交給的地方。比如在denglu.jsp中有個登錄框,那它的action就是servlet-mapping裏的url去掉前面那個/

  <filter>
        <filter-name>loginFilter</filter-name>
        <filter-class>Filter.loginFilter</filter-class>
    </filter>

    <filter-mapping>
        <filter-name>loginFilter</filter-name>
        <url-pattern>/denglu.jsp</url-pattern>
    </filter-mapping>
    <filter-mapping>
        <filter-name>loginFilter</filter-name>
        <url-pattern>/advice.jsp</url-pattern>
    </filter-mapping>
    <filter-mapping>
        <filter-name>loginFilter</filter-name>
        <url-pattern>/aboutUs.jsp</url-pattern>
    </filter-mapping>
    <filter-mapping>
        <filter-name>loginFilter</filter-name>
        <url-pattern>/joinUs.jsp</url-pattern>
    </filter-mapping>

    <servlet>
        <servlet-name>denglu</servlet-name>
        <servlet-class>servlet.denglu</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>denglu</servlet-name>
        <url-pattern>/denglu</url-pattern>
    </servlet-mapping>

5 denglu的jsp\js\css

5.1 denglu.jsp

<%--
  Created by IntelliJ IDEA.
  User: 皇子披風俠
  Date: 2019/10/14
  Time: 22:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新時代大數據招聘平臺--主頁</title>
    <link rel="stylesheet" href="css/denglu.css">
</head>
<body  >
<div class="container">
    <!-- 導航 -->
    <div class="nav" >
        <div class="nav-con">
            <ul >
                <li><a href="#">人才供給關係</a></li>
                <li><a href="#">職場走向</a></li>
                <li><a href="#">薪資排行</a></li>
                <li><a href="denglu.jsp">首頁</a></li>

            </ul>
        </div>
    </div>

    <!-- 主體內容 （登陸界面）-->
    <div class="main">
        <!-- 左側信息欄 -->
        <div class="sideleft">
            <h1>海量職位    精準推薦</h1>
            <h2>大數據下  爲您量身定做最適合的崗位</h2>
            </br></br></br>
            <p>精準推薦、針對性指導，提升就業水準。</p>
            <p>打造線上線下人性化服務。</p>
            <p>雙選平臺，建立職場與您之間的雙重選擇空間。</p>
            <p>主動權握在自己手裏，把握當下最優就業市場，優人一步。</p>

        </div>
        <jsp:useBean id="enrol_users" class="javaBeans.Users" scope="session"/>
        <jsp:setProperty name="enrol_users" property="flag"/>
        <jsp:setProperty name="enrol_users" property="username"/>
        <jsp:setProperty name="enrol_users" property="password"/>


        <!--右側登陸界面 -->
        <div class="sideright">
            <div class="index">
                <form action="denglu" method="post">
                    <p class="headline">用戶登錄</p>
                    <p style="margin: 0px 20px 0px 50px" class="astyle">用戶名：</p>
                    <input style="float: left;margin: -0px 40px 5px 45px; height: 30px;width: 72%; font-size: 15px;font-family: 'SimSun-ExtB'" type="text" placeholder="請輸入您的用戶名" name="username" id="urname" >
                    <p style="margin: -20px 20px 0px 50px" class="astyle">密碼：</p>
                    <input style="float: left;margin: -0px 40px 15px 45px; height: 30px;width: 71%;font-size: 15px; font-family: 'SimSun-ExtB'" type="password" placeholder="請輸入您的密碼 " name="password" id="passwd" >
                    <p style="margin: 10px 20px 10px 50px" class="astyle">驗證碼: <canvas style="margin: -30px 30px 10px 70px" class="login_canvas" id="login_canvas" width="160px" height="40px" style="margin-left: 90px"></canvas><br/></p>
                    <input style="margin: -15px 20px 0px 45px;" class="login_captcha" type="text" placeholder="4位驗證碼" name="captcha" id="captcha">
                    <input style="margin: 10px 40px 0px 45px" class="action_button"  type="submit" value="登錄" >
                    </br>
                    <p class="bstyle"><input type="checkbox" name="rempas" />  記住密碼</p>
                    <p class="bstyle">忘記密碼</p>
                    </br></br>
                    <p class="cstyle">沒有賬號？<a href="zhuce.jsp">立即註冊</a></p>
                </form>

            </div>
        </div>

    </div>
    <!-- 尾部 -->
    <div class="footer">
        <ul>
            <li><a href="aboutUs.jsp">關於我們</a></li>
            <li><a href="joinUs.jsp">誠聘人才</a></li>
            <li><a href="advice.jsp">意見反饋</a></li>
            <li><a href="#">廣告服務</a></li>
            <li><a href="#">江蘇省徐州市中國礦業大學計算機學院傾情打造 From 2019-無限未來</a></li>
        </ul>
        <p  style="color: white" style="text-align:center">
            作者： 黃姿  聯繫郵箱：[email protected]

        </p>
    </div>
    </div>
    <script src="http://thecodeplayer.com/uploads/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="http://thecodeplayer.com/uploads/js/jquery.easing.min.js" type="text/javascript"></script>
    <script src="js/denglu.js" type="text/javascript"></script>
</body>
</html>

5.2 denglu.js

var element = document.getElementsByTagName("input");
var span1 = document.getElementById("name_msg");
var span2 = document.getElementById("passwd_msg");
var str = getdata();
var check_name = true;
var check_passwd = true;
//下面是當那個框失去焦點時就進行判斷，是否符合規則的命名
function checkUname(){
    var reg = /^[a-zA-Z0-9_]{5,16}$/;
    if(reg.test(element[0].value)) {
        span1.innerHTML='<img src="../img/19391.png"/>';
        check_name = true;
    } else {
        span1.innerHTML='<img src="../img/21686.png"/>';
        check_name = false;
    }
}
function checkPasswd(){
    var reg =/^[a-zA-Z0-9\d_]{8,16}$/;
    if(reg.test(element[1].value)) {
        span2.innerHTML='<img src="../img/19391.png"/>';
        check_passwd = true;
    } else {
        span2.innerHTML='<img src="../img/21686.png"/>';
        check_passwd = false;
    }
}

//登錄的提交表單的驗證
function proof(){
    if(check_name&&check_passwd){
        if(element[2].value!==str){
            alert("驗證碼錯誤！請重新輸入");
            document.getElementById("captcha").focus();
            return false;
        }
        else{
            alert("提交成功！");
            window.location.href="../html/home.html";
            return true;
        }
    }
    else if(check_name){
        alert("密碼格式不正確！請重新輸入密碼");
        document.getElementById("passwd").focus();
        return false;
    }
    else if(check_passwd){
        alert("用戶名格式不正確！請重新輸入用戶名");
        document.getElementById("urname").focus();
        return false;
    }
}

//生成隨機數
function randomNum(min,max) {
    return Math.floor(Math.random()*(max-min)+min);
}
//生成隨機顏色
function randomColor(min,max) {
    var _r=randomNum(min,max);
    var _g=randomNum(min,max);
    var _b=randomNum(min,max);
    return "rgb("+_r+","+_g+","+_b+")";
}
var str;
//先阻止畫布默認點擊發生的行爲再執行drawPic()方法
document.getElementById("login_canvas").onclick=function (e) {
    e.preventDefault();
    str= drawPic();
};
function getdata(){
    str = drawPic();
    return str;
}
function drawPic() {
    var $canvas=document.getElementById("login_canvas");//獲取canvas元素
    var _str ="有人在上這大我來們國他說我喝多了卡數據庫宕機阿森納的理科個全小中合子可就下以你覺得很厲害abcdefghijklmn0123456789";//設置隨機數庫有字母有數字有漢字
    var _picNum = "";//隨機數
    var _num = 4;//4個隨機數字
    var _width = $canvas.width;
    var _height = $canvas.height;
    var ctx= $canvas.getContext("2d");//獲取context對象
    ctx.textBaseline = "bottom";//文字上下對齊方式--底部對齊
    ctx.fillStyle = randomColor(0,255);//填充畫布顏色
    ctx.fillRect(0,0,_width,_height);//填充矩形--畫畫//矩形的大小在css中來設置
    for(var i=0; i<_num; i++){
        var x = (_width-10)/_num*i+10;
        var y = randomNum(_height/2,_height);
        var deg = randomNum(-45,45);
        var txt = _str[randomNum(0,_str.length)];
        _picNum += txt;//獲取一個隨機數
        ctx.fillStyle = randomColor(10,100);//填充隨機顏色
        ctx.font = randomNum(16,40)+"px SimHei";//設置隨機數大小，字體爲SimHei
        ctx.translate(x,y);//將當前xy座標作爲原始座標
        ctx.rotate(deg*Math.PI/180);//旋轉隨機角度
        ctx.fillText(txt, 0,0);//繪製填色的文本
        ctx.rotate(-deg*Math.PI/180);
        ctx.translate(-x,-y);
    }
    for(var i=0; i<_num; i++){
        //定義筆觸顏色
        ctx.strokeStyle = randomColor(80,180);
        ctx.beginPath();
        //隨機劃線--4條路徑
        ctx.moveTo(randomNum(0,_width), randomNum(0,_height));
        ctx.lineTo(randomNum(0,_width), randomNum(0,_height));
        ctx.stroke();
    }
    for(var i=0; i<_num*10; i++){
        ctx.fillStyle = randomColor(0,255);//將ctx隨機填充顏色
        ctx.beginPath();
        //隨機畫原，填充顏色
        ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI);
        ctx.fill();
    }
    return _picNum;//返回隨機數字符串
}
drawPic();

5.3 denglu.css

*{margin: 0;padding: 0;list-style: none;}
body{
    background-size: 100%;
    height:800px;
    background-image: url("../images/1.JPG");
}
.container{
    width: 1422px;
    height: 700px;
    /*margin: 0px;*/
    /*background-size: 100% 95%;*/
    /*opacity: 0.6;*/
    background-size: cover;
    background-image: url("../images/bg2.jpg");

}
/* 導航 */
/*.nav{*/
    /*margin-top: 10px;*/
    /*height: 50px;*/
    /*line-height: 50px;*/
    /*background-color: #ebebeb;*/
/*}*/
.nav{
    height: 70px;
    line-height: 50px;
    width: 1422px;
    margin: 0px;
    background: url("../images/blue.png");
    opacity: 0.85;
    border-top: 1px solid #bbb;
}
.nav-con{
    width: 1200px;
    height: 55px;
    /*background: #aaaaaa;*/
    margin: 0 0px 0px 5px;

}

.nav-con ul li{
    float: right;
    font-size: 20px;
    margin: 10px 60px 10px 70px;
}
.nav-con ul li a{
    text-decoration: none;
    color: white;
    padding:25px 20px;
    font-family: Helvetica;
    font-weight: bold;

}
.nav-con li a:hover{
     color: #7cb609;
 }
/*.nav ul li a:hover{*/
    /*border: 1px solid white;*/
    /*border-radius:5%;*/
    /*color: white;*/
/*}*/
/* 主題內容 */
.main{
    width:1422px;
    height: 630px;
    /*background-color: blue;*/
    /*background-image: url("../images/bg2.jpg");*/
    background-size: cover;
    background-size: 100% 100%;
    /*background-size: 1500px 800px;*/
    /*opacity: 0.6;*/
    background :rgba(0,15,255,0.2);
    /*border: 20px solid red;*/


}
.sideleft{
    width:460px;
    height: 250px;
    float: left;
    padding:85px 130px;
    color: white;

    margin-left: 30px ;
    /*border: 2px solid green;*/
}
.sideleft p{
    padding: 8px 0;
    font-size: 16px;
    color: white;
}
.sideright{
    width: 480px;
    height: 480px;
    float: right;

    margin-right: 30px ;
}
.sideright .index{
    width: 330px;
    height: 430px;
    background:transparent;
    background-color:rgba(255,255,255,0.7);

    margin: 50px 90px;
}
.headline{
    font-size: 22px;
    text-align: center;
    padding: 20px;
}
input[type="text"],
input[type="submit"]{
    -web-kit-appearance:none;
    -moz-appearance: none;
    display: block;
    margin: 0 auto;
    font-size:15px;
    width: 240px;
}
input[type="text"]{
    height:35px;
    border-radius:3px;
    border:1px solid #c8cccf;
    color:#6a6f77;
    outline:0;
}
input[type="submit"]{
    margin-top: 25px;
    height: 35px;
    background: #357eb8;
    color: #bcedff;
    font-weight: bold;
    font-size: 16px;
}
input[type="submit"]:hover{
    background: #0e62a3;
    cursor: pointer;
}
.astyle{
    margin: 5px 0 5px 42px;
    font-size:17px;
    color: #6a6f77;
}
.bstyle{
    display: block;
    float: left;
    margin-left: 46px;
    margin-right: 46px;
    font-size: 15px;

}
.cstyle{
    display: block;
    float: right;
    margin-right: 46px;
    margin-bottom: 5px;
    font-size: 15px;
}
.cstyle a{
    text-decoration: none;
}
.footer{
    width: 1000px;

    margin:0px 100px 20px 200px;
    /*background-color: #0d2865;*/
    /*background-size: cover;*/

    /*border: 10px solid green;*/
}
.footer ul {
    margin: 0px 10px 0px 100px;
    width: 1000px;

    /*border: 2px solid white;*/

}
.footer p {
    text-align: center;

    margin: 50px 30px 50px 30px;

    /*border: 2px solid white;*/

}
.footer ul li{
    float: left;

    margin-top:10px;
    margin-bottom: 12px;
    margin-left: 0px;
    /*border: 1px solid red;*/

}
.footer ul li a{
    text-decoration: none;
    color: whitesmoke;
    border-left: 2px solid white;
    padding:0 10px;
}

至於用到的圖片