不花一分錢！提升網(wǎng)站訪問速度

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

設置加速網(wǎng)站的域名信息

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

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

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

更改解析完成加速配置

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

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

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

壓縮文件多措施并舉

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

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

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

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

抓取快照保證網(wǎng)站運行

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

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

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

小提示：谷歌瀏覽器從68 版本開始，將所有使用 HTTP 協(xié)議的網(wǎng)站都標記為“不安全”。而通過 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中是否有用戶數(shù)據(jù)，如果有數(shù)據(jù)，則返回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創(chuàng)建Login.php文件（注意首字母需要大寫）：

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

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

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

在app創(chuàng)建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小時內(nèi)與您取得聯(lián)系。

整合營銷服務商

不花一分錢！提升網(wǎng)站訪問速度

. 登錄頁面的jsp

2. 登錄的攔截器

3. 登錄的 Controller

您的項目需求