不花一分钱！提升网站访问速度

创实用技巧不易，多多转发支持| 现在很多公司都通过搭建官方网站的方式，比如电脑报全媒体群就有蛋黄星球（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

您的项目需求