不花一分錢！提升網站訪問速度

創實用技巧不易，多多轉發支持| 現在很多公司都通過搭建官方網站的方式，比如電腦報全媒體群就有蛋黃星球（www.cpcw.com）來宣傳自己的公司以及相關的產品。但是由于網友所處的位置不同，再加上網絡環境的差異，會造成訪問速度出現參差不齊的情況。通常為了解決這樣的問題，都是配合CDN服務來進行加速，下面就來看看通過Cloudflare 如何完成加速操作。

設置加速網站的域名信息

首先通過瀏覽器打開 Cloudflare 服務的官方網站（https://www.cloudflare.com/），接著點擊右上角的鏈接注冊一個相關的賬戶，注冊完成后登錄到網站的后臺，就可以進行相關的配置操作了。

現在點擊后臺管理頁面右上角的“Add your site”按鈕，在彈出的對話框中設置自己的域名，比如筆者這里設置的就是“appwan.ml”。設置完成以后點擊“Add site”按鈕完成添加，這時直接點擊提示框中的“Next”按鈕，然后在收費環節選擇“FREE”這個套餐。再點擊“Confirm Plan”按鈕，就可以進入到域名解析的環節。

通常 Cloudflare 服務會自動完成設定域名的解析操作，如果沒有自動完成的話，那么我們就在列表的“name”輸入框中設置域名的信息；接著在“IPv4 address”輸入框里面設置域名對應的IP地址，然后點擊“Add Record”按鈕就可以將它添加到列表里。點擊下面的“Continue”按鈕，就會看到網頁中給出了一個DNS設置提示框，最后根據提示對自己的DNS服務商設定的DNS信息進行修改即可。

更改解析完成加速配置

由于筆者這里使用的是 Freenom 提供的免費域名（https://my.freenom.com），因此先打開該域名提供商的官方網站并且登錄到管理后臺；接著點擊“Services ”菜單中的“My Domains”命令，在列表中找到要進行設置的域名后，點擊后面的“Manage Domain”按鈕；然后在彈出的網頁點擊“Management Tools”命令，再在彈出的菜單里面選擇“Nameservers”選項，再勾選第二條“Use custom nameservers (enter below)”選項。

將剛剛復制的DNS地址分別粘貼到“Nameserver 1”和“Nameserver 2”輸入框里面，最后點擊“Change Nameservers”按鈕完成DNS地址的修改操作。修改完成以后返回到 Cloudflare 服務的管理后臺，點擊最下方的“Continue”按鈕就可以完成配置操作。由于筆者更換了 DNS 地址的原因，所以域名需要重新進行解析才可以進行訪問，當域名解析完成以后該服務就會自動幫助網站進行加速操作。

小提示：點擊 Cloudflare 服務的后臺管理頁面，點擊工具欄中的“Overview”圖標后提示“Status: Active”，就表示網站的域名解析已經成功完成了。

壓縮文件多措施并舉

平時我們在傳輸一些體積較大的文件時，首先會通過壓縮軟件對文件進行壓縮，從而方便快速進行傳輸。而通過 CloudFlare 服務也可以起到類似的效果，首先點擊后臺工具欄的“Speed”按鈕，將“Auto Minify”選項中 JavaScript、CSS、HTML 等三個選項都勾選上。

這樣 CloudFlare 服務會將這些文件進行壓縮，從而使得這些文件的體積變得更小，最終使得網站的載入速度變得更快。如果開啟這個功能以后網站發生問題，比如出現網頁無法正常的進行顯示，或是某些功能無法正常的進行操作，那么就建議將這個功能關閉。

由于現在很多網站都是利用知名的網站程序搭建的，而這些網站程序在編寫的過程中又大量使用了公開的庫資源，所以改變這些資源庫的調用路徑也可以起到加速的作用。現在拖動瀏覽器的側邊欄，在網頁的下方可以看到一個名為“Rocket Loader”的功能，該功能會利用 JavaScript 腳本來改善網頁的載入速度。

不過這個功能會對網頁原始的代碼進行調整，所以如果用戶的網頁里面插入了廣告服務鏈接的代碼或者是訪問數據統計的代碼，那么就建議不要開啟該功能。如果用戶想開啟該功能的話，只需要選擇“on”選項即可。

抓取快照保證網站運行

通常企業架設網站的服務器都是租用網絡運營商的，但是這些服務器的運行并不能保證百分之百不出問題，偶爾出現宕機的情況也是有可能的，這樣就會造成自己的網站無法訪問的情況。為了避免這種情況發生，我們可以選擇 CloudFlare 服務后臺管理頁面的“Caching”按鈕，在出現的頁面中找到“Always Online”選項并激活該功能就可以了。

該功能會像我們常見的搜索引擎那樣，不停地對網站的頁面進行抓取，從而創建相應的快照信息保存到 CloudFlare 服務的服務器里。這樣一旦網站存儲的服務器發生宕機的情況，那么就可以通過訪問備份在 CloudFlare 服務器中的網頁，從而使得用戶正常訪問瀏覽網站。

不過該功能也有一個明顯的缺陷，因為 CloudFlare 服務會不斷地掃描網站頁面創建快照，因此會增加服務器的負擔。

小提示：谷歌瀏覽器從68 版本開始，將所有使用 HTTP 協議的網站都標記為“不安全”。而通過 CloudFlare 服務的管理頁面，就可以申請到免費的加密鏈接證書。

小獅子最喜歡的雞腿分割線

. 登錄頁面的jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path=request.getContextPath();
    String basePath=request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//D HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>登錄頁面</title>
    <base href="<%=basePath %>">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.1/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.1/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <script type="text/javascript" src="js/jquery3.4.1/jquery3.4.1.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.4.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="commons/validate.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="js/common.js"></script>
</head>

<body>
<div id="login_frame">
    <img src="images/logo.png" class="logo">
    <form method="post" action="/login/login" onsubmit="return check()">
        <p><label class="label_input">用戶名</label><input type="text" id="username" name="username" class="text_field"/>
        </p>
        <p><label class="label_input">密碼</label><input type="password" id="password" name="password"
                                                       class="text_field"/></p>

        <div id="login_control">
            <input type="submit" id="btn_login" value="登錄"/>
            <%--  <a id="forget_pwd" href="forget_pwd.html">忘記密碼？</a>--%>
        </div>
    </form>
</div>

</body>
</html>
<script>
    function check() {
        var username=$("#username").val();
        var password=$("#password").val();
        if (username==="" || username===null) {
            alert("請輸入用戶名");
            return false;
        } else if (password==="" || password===null) {
            alert("請輸入密碼");
            return false;
        } else {
            return true;
        }
    }
</script>
<style>

    body {
        background-size: 100%;
        background-repeat: no-repeat;
    }

    #login_frame {
        width: 400px;
        height: 260px;
        padding: 13px;

        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -200px;
        margin-top: -200px;

        background-color: #bed2c7;

        border-radius: 10px;
        text-align: center;
    }

    form p > * {
        display: inline-block;
        vertical-align: middle;
    }

    #image_logo {
        margin-top: 22px;
    }

    .label_input {
        font-size: 14px;
        font-family: 宋體;

        width: 65px;
        height: 28px;
        line-height: 28px;
        text-align: center;

        color: white;
        background-color: #00303E;
        border-top-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .text_field {
        width: 278px;
        height: 28px;
        border-top-right-radius: 5px;
        border-bottom-right-radius: 5px;
        border: 0;
    }

    #btn_login {
        font-size: 14px;
        font-family: 宋體;

        width: 120px;
        height: 28px;
        line-height: 28px;
        text-align: center;

        color: white;
        background-color: #00303E;
        border-radius: 6px;
        border: 0;

        float: left;
    }

    #forget_pwd {
        font-size: 12px;
        color: white;
        text-decoration: none;
        position: relative;
        float: right;
        top: 5px;

    }

    #forget_pwd:hover {
        color: blue;
        text-decoration: underline;
    }

    #login_control {
        padding: 0 28px;
    }

    .logo {
        width: 40px;
        height: 35px;
        margin-top: -10px;
    }
</style>

2. 登錄的攔截器

public class LoginInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object o) throws Exception {
        // 獲取請求的uri
        String uri=request.getRequestURI();
        // 除了login.jsp是可以公開訪問的，其它的URL都沒攔截
        if (uri.indexOf("/login") >=0) {
            return true;
        } else {
            // 獲取session
            HttpSession session=request.getSession();
            UserPojo user=(UserPojo) session.getAttribute("USER_SESSION");
            // 判斷session中是否有用戶數據，如果有數據，則返回true。否則重定向到登錄頁面
            if (user !=null) {
                return true;
            } else {
                response.sendRedirect("/login/login");
                return false;
            }
        }
    }

    @Override
    public void postHandle(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, Object o,
                           ModelAndView modelAndView) throws Exception {

    }

    @Override
    public void afterCompletion(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse,
                                Object o, Exception e) throws Exception {

    }
}

3. 登錄的 Controller

app/admin/controller創建Login.php文件（注意首字母需要大寫）：

把login_index.html模板文件放在view/admin模板目錄里（模板文件下載地址我會放在后面）：

打開127.0.0.1/admin.php/login/index.html后臺登錄頁面，輸入正確的賬號和密碼提示登錄成功并跳轉到127.0.0.1/admin.php/index/index.html

打開app/middleware.php文件，開啟Session初始化：

在app創建AdminController.php文件:

接著打開app/admin/controller/Index.php，

把

use app\BaseController;

改成

use app\AdminController;

把

class Index extends BaseController;

改成

class Index extends AdminController;

接著在第55行添加：

session('user', null);

最后本篇教程所有代碼都放在我的Gitee，歡迎查閱學習

在線咨詢

上一篇：「day-ui」 Alert 組件學習
下一篇："screenshot-to-co

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

不花一分錢！提升網站訪問速度

. 登錄頁面的jsp

2. 登錄的攔截器

3. 登錄的 Controller

您的項目需求