博客 (69)

通过 nuget 安装 UEditorNetCore

从 UEditor 官网 下载最新的包 ueditorx_x_x_x-utf8-net.zip

解压包，并复制到项目的 wwwroot/lib 目录下，删除 net 目录。

根据 UEditorNetCore 官方的使用说明进行操作

步骤中，控制器 UEditorController 接替原 controller.ashx 的功能，用于统一处理上传逻辑

原 config.json 复制到项目根目录，用于配置上传相关设置（若更改文件名和路径在 services.AddUEditorService() 中处理）。

个人喜欢将 xxxPathFormat 值改为：upload/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}，方便日后迁移附件后进行批量替换。

记得配置 catcherLocalDomain 项。

上传相关的身份验证和授权控制请在 UEditorController 中处理，如：

public void Do()
{
    if (用户未登录) { throw new System.Exception("请登录后再试"); }
    _ue.DoAction(HttpContext);
}

如果图片仅仅上传到网站目录下，那么这样配置就结束了，如果要上传到阿里云 OSS 等第三方图床，那么继续往下看。

因 UEditorNetCore 虽然实现了上传到 FTP 和 OSS 的功能，但未提供配置相关的账号信息的途径，所以只能（1）重写 action，或（2）下载 github 的源代码，将核心项目加入到您的项目中进行修改。

重写 action 不方便后期维护，这里记录修改源码的方式。

将源码改造为可配置账号的上传到 OSS 的功能，具体步骤如下：

1. 将 Consts.cs 从项目中排除。

2. 打开 Handlers/UploadHandler.cs，找到 UploadConfig 类，将

   FtpUpload 改为 OssUpload，

   FtpAccount 改为 OssAccessKeyId，

   FtpPwd 改为 OssAccessKeySecret，

   FtpIp 改为 OssAccessEndpoint，

   再添加一个属性 OssBucketName。

3. 打开 Handlers/UploadHandler.cs，找到 Process() 方法， 

   将 UploadConfig.FtpUpload 改为 UploadConfig.OssUpload，

   将 Consts.AliyunOssServer.* 改为 UploadConfig.Oss*。

4. 打开 Handlers/CrawlerHandler.cs，找到 Fetch() 方法，

   将 Config.GetValue<bool>("catcherFtpUpload") 改为 Config.GetValue<bool>("OssUpload")，

   将 Consts.AliyunOssServer.* 改为 Config.GetString("Oss*")。

5. 打开 UEditorActionCollection.cs，找到 UploadImageAction，将

   FtpUpload = Config.GetValue<bool>("imageFtpUpload"),
   FtpAccount = Consts.ImgFtpServer.account,
   FtpPwd = Consts.ImgFtpServer.pwd,
   FtpIp = Consts.ImgFtpServer.ip,

   替换为

   OssUpload = Config.GetValue<bool>("OssUpload"),
   OssAccessKeyId = Config.GetString("OssAccessKeyId"),
   OssAccessKeySecret = Config.GetString("OssAccessKeySecret"),
   OssAccessEndpoint = Config.GetString("OssAccessEndpoint"),
   OssBucketName = Config.GetString("OssBucketName"),

   其余 3 个 Action（UploadScrawlAction、UploadVideoAction、UploadFileAction）按同样的方式修改。

   在所有创建 UploadHandler 对象时补充添加 SaveAbsolutePath 属性。

6. 打开 config.json，添加相关配置项（注：配置文件中的 *FtpUpload 全部废弃，统一由 OssUpload 决定）

   "OssUpload": true,
   "OssAccessEndpoint": "",
   "OssAccessKeyId": "",
   "OssAccessKeySecret": "",
   "OssBucketName": "",

   将 xxxUrlPrefix 的值改为 OSS 对应的 CDN 网址（以 / 结尾，如：//cdn.xoyozo.net/）。

其它注意点：

• 若使用 UEditorNetCore github 提供的源代码类库代替 nuget，且使用本地存储，那么需要将 Handlers 目录中与定义 savePath 相关的代码（查找  var savePath）替换成被注释的行
  

核心文件路径：/theme/html/demo*/src/js/components/core.datatable.js

所有参数的默认值见该文件 3369 行起。

data：

data.source：

query: {
}

{
    'x-my-custom-header': 'some value',
    'x-test-header': 'the value'
}

function (raw) {
    console.log(raw)
    // sample data mapping
    var dataSet = raw;
    if (typeof raw.data !== 'undefined') {
        dataSet = raw.data;
    }
    return dataSet;
}

layout：

{
	overlayColor: '#000000',
	opacity: 0,
	type: 'loader',
	state: 'primary',
	message: true,
}

{
	sort: {
	    asc: 'flaticon2-arrow-up', 
	    desc: 'flaticon2-arrow-down'
	},
	pagination: {
		next: 'flaticon2-next',
		prev: 'flaticon2-back',
		first: 'flaticon2-fast-back',
		last: 'flaticon2-fast-next',
		more: 'flaticon-more-1',
	},
	rowDetail: {
	    expand: 'fa fa-caret-down', 
	    collapse: 'fa fa-caret-right'
	},
}

{
	// 按回车键确认
	onEnter: false,
	// 文本内容
	input: null,
	// 搜索延时
	delay: 400,
	// 键名
	key: null
}

layout.columns：

其它：

translate: {
    records: {
        processing: '加载中...',
        noRecords: '没有找到相关内容',
    },
    toolbar: {
        pagination: {
            items: {
                default: {
                    first: '首页',
                    prev: '前一页',
                    next: '后一页',
                    last: '末页',
                    more: '更多',
                    input: '请输入跳转页码',
                    select: '设置每页显示项数',
                },
                info: '当前第 {{start}} - {{end}} 项 共 {{total}} 项',
            },
        },
    },
},

暂时没有找到对字符串内容进行自动 HTML 编码的属性，这可能带来 XSS 攻击风险，在 remote 方式中必须在服务端预先 HtmlEncode。即使在 layout.columns.template 中进行处理也是无济于事，恶意代码会在 ajax 加载完成后立即执行。

方法和事件：待完善。

更多信息请查询官方文档：https://keenthemes.com/keen/?page=docs&section=html-components-datatable

使用 JS 根据屏幕宽度来计算页面尺寸和字体大小并不是一个好办法。

rem 单位是跟随网页根元素的 font-size 改变而自动改变的，是一个相对的长度单位，非常适合在不同手机界面上自适应屏幕大小。 

一般的手机浏览器的默认字体大小为 16px。即：

:root { font-size: 16px; } /* 在 HTML 网页中，:root 选择器相当于 html */

也就是说，如果我定义一个宽度为 1rem，那么它的实际宽度为 16px。反过来说，如果设计稿宽度为 1000px，那么相当于 1000÷16=62.5‬rem。因此，我们设置一个 62.5rem 的宽度，即可正常显示 1000px 的设计效果。

为了适应不同屏幕尺寸的手机，只需按比例换算更改 :root 的 font-size 即可。这个比例是由“窗口宽度 ÷ 设计稿宽度”得到的，姑且称它为“窗设比”。

以 iPhone X 逻辑宽度 375px 为例，设计稿宽度 1000px 时，窗设比为：0.375。:root 的 font-size 将会被重置为 16 * 0.375 = 6px。上面的 62.5rem 宽度将对应 iPhone X 宽度为 62.5 * 6 = 375px，正好是屏幕逻辑宽度。

根据这个思路，理论上，我们只需要使用 CSS 将 :root 的 font-size 设置为 1px，然后使用 JS 重置为与“窗设比”相乘的积（本例中将被重置为 0.375px）。这样，我们可以不通过换算，只需要更改单位，将设计稿中的 500px 直接写入到 CSS 为 500rem，即可实现在 iPhone X 上显示逻辑宽度为（500 * 0.375 =）187.5px，即设计稿中的 1/2 宽度对应到屏幕上 1/2 的宽度。

实际上，部分安卓手机（如华为某旗舰机）不支持 :root 的 font-size 小于 12px，其它一些浏览器也会出现小于 12px 的文字以 12px 显示。

为了避免在任何环节出现小于 12px 的 font-size 值，且不增加设计稿尺寸到 CSS 数值的换算难度，我们设计了以下思路：

1. 约定“设样比（设计稿的 px 值与 CSS 的 rem 值的比）”为 100；

2. 使用 JS 将 :root 的 font-size 重置为“设样比”与“窗设比（窗口宽度 ÷ 设计稿宽度）”的乘积；

3. 计算 CSS 时的 rem 值只需从设计稿中获取 px 值再除以“设样比”100 即可。 

这样做的另一个好处是，不用要求设计师必须按多少尺寸来设计，当然按主流尺寸来建议是可行的。

完整代码（jQuery 版）：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Index</title>
    <style>
        body { margin: 0; text-align: center; }
        #app { margin: 0 auto; background-color: #EEE; display: none; }
        /* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
        .whole { background-color: #D84C40; width: 10rem; }
        .half { background-color: #3296FA; width: 5rem; }
        .half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
    </style>
</head>
<body>
    <div id="app">
        <div class="whole">100%</div>
        <div class="half">50%</div>
        <div class="half2">50%</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        // [函数] 重置尺寸
        function fn_resize() {
            // 设计稿宽度（px）
            var designsWidth = 1000;
            // 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
            var px2rem = 100;
            // 限制 #app 的最大宽度为设计稿宽度
            $('#app').css('max-width', designsWidth).css('min-height', $(window).height());
            // 重置 :root 的 font-size
            var appWidth = Math.min($(window).width(), designsWidth);
            $(':root').css('font-size', px2rem * appWidth / designsWidth);
            $('#app').show();
        }
        // 页面加载完成后重置尺寸
        $(fn_resize);
        // 改变窗口大小时重置尺寸
        $(window).resize(fn_resize);
    </script>
</body>
</html>

完整代码（Vue2 版）：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Index</title>
    <style>
        body { margin: 0; text-align: center; }
        #app { margin: 0 auto; background-color: #EEE; }
        /* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
        .whole { background-color: #D84C40; width: 10rem; }
        .half { background-color: #3296FA; width: 5rem; }
        .half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
    </style>
</head>
<body>
    <div id="app" v-bind:style="{ maxWidth: designsWidth + 'px', minHeight: appMinHeight + 'px' }" style="display: none;" v-show="appShow">
        <div class="whole">100%</div>
        <div class="half">50%</div>
        <div class="half2">50%</div>
        <div>appWidth: {{ appWidth }}</div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                // 设计稿宽度（px）
                designsWidth: 1000,
                // 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
                px2rem: 100,
                // #app 的 width
                appWidth: 0, // 勿改
                appMinHeight: 0, // 勿改
                appShow: false, // 勿改
            },
            mounted: function () {
                // 页面加载完成后重置尺寸
                this.fn_resize();
                const that = this;
                // 改变窗口大小时重置尺寸
                window.onresize = () => {
                    return (() => {
                        console.log('RUN window.onresize()');
                        that.fn_resize();
                    })();
                };
            },
            watch: {
                // 侦听 appWidth 更改 root 的 font-size
                appWidth: function () {
                    console.log('RUN watch: appWidth');
                    var root = document.getElementsByTagName("html")[0];
                    root.style.fontSize = (this.px2rem * this.appWidth / this.designsWidth) + 'px';
                    this.appShow = true;
                }
            },
            methods: {
                fn_resize: function () {
                    console.log('RUN methods: fn_resize()');
                    this.appWidth = Math.min(document.body.clientWidth, this.designsWidth);
                    this.appMinHeight = document.documentElement.clientHeight;
                }
            }
        });
    </script>
</body>
</html>

完整代码（Vue3 版）：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <title>Index</title>
    <style>
        body { margin: 0; text-align: center; }
        #app > div { display: none; margin: 0 auto; background-color: #EEE; }
        /* 长度计算方法：从设计稿获得长度（例如 160px），除以 px2rem 值（本例为 100），得到 1.6rem */
        .whole { background-color: #D84C40; width: 10rem; }
        .half { background-color: #3296FA; width: 5rem; }
        .half2 { background-color: #3296FA; width: 5rem; margin-left: 5rem; }
    </style>
</head>
<body>
    <div id="app">
        <div style="display: none;" v-bind:style="{ maxWidth: designsWidth + 'px', minHeight: appMinHeight + 'px', display: appShow ? 'block' : 'none' }">
            <div class="whole">100%</div>
            <div class="half">50%</div>
            <div class="half2">50%</div>
            <div>appWidth: {{ appWidth }}</div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <script>
        const app = Vue.createApp({
            data: function () {
                return {
                    // 设计稿宽度（px）
                    designsWidth: 1000,
                    // 约定的“设计稿 px 值与 CSS rem 值的比”，为方便计算，一般无需改动
                    px2rem: 100,
                    // #app 的 width
                    appWidth: 0, // 勿改
                    appMinHeight: 0, // 勿改
                    appShow: false, // 勿改
                }
            },
            mounted: function () {
                // 页面加载完成后重置尺寸
                this.fn_resize();
                const that = this;
                // 改变窗口大小时重置尺寸
                window.onresize = () => {
                    return (() => {
                        console.log('RUN window.onresize()');
                        that.fn_resize();
                    })();
                };
            },
            watch: {
                // 侦听 appWidth 更改 root 的 font-size
                appWidth: function () {
                    console.log('RUN watch: appWidth');
                    var root = document.getElementsByTagName("html")[0];
                    root.style.fontSize = (this.px2rem * this.appWidth / this.designsWidth) + 'px';
                    this.appShow = true;
                }
            },
            methods: {
                fn_resize: function () {
                    console.log('RUN methods: fn_resize()');
                    this.appWidth = Math.min(document.body.clientWidth, this.designsWidth);
                    this.appMinHeight = document.documentElement.clientHeight;
                }
            }
        });
        const vm = app.mount('#app');
    </script>
</body>
</html>

示例中 CSS 初始 :root 的 font-size 为 16px（一个较小值，防止页面加载时瞬间出现大号文字影响用户体验），经过 fn_resize 后，:root 的 font-size 被设置为（100 * 375 / 1000 =）37.5px（iPhone X 中），那么宽度为 1000px 的设计稿中的 500px 换算到 CSS 中为 5rem，也即 37.5 * 5 = 187.5px，就是 iPhone X 的屏幕宽度的一半。

示例中 id 为 app 的 div 是用来在 PC 浏览器中限制页面内容最大宽度的（类似微信公众号发布的文章），如果网页不需要在 PC 端显示，jQuery 版代码中的 $('#app').width() 可以用 $(window).width() 来代替。

这个 div#app 一般设计有背景色，用于在宽度超过设计稿的设备上显示时区别于 body 的背景。但是当网页内容不超过一屏时，div#app 高度小于窗口，示例中与 appMinHeight 相关的代码就是为了解决这个问题。

示例中 div#app 隐藏/显示相关代码用于解决在页面加载初期由于 font-size 值变化引起的一闪而过的排版错乱。

最后补充一点，如果改变窗口大小时涉及执行耗时的操作，为避免页面卡顿，可以参考这篇文章添加函数防抖：https://xoyozo.net/Blog/Details/js-function-anti-shake

引用

jQuery、moment.js、daterangepicker

例子

$('.x_dates').daterangepicker({
    "timePicker": false, // 是否显示时间
    //"dateLimit": {
    //    "days": 7 // 可选中的最大区间（天）
    //},
    "ranges": { // 快捷栏
        "今天": [moment(), moment()],
        "昨天": [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
        "最近 7 天": [moment().subtract(6, 'days'), moment()],
        "最近 30 天": [moment().subtract(29, 'days'), moment()],
        "本月": [moment().startOf('month'), moment().endOf('month')],
        "上个月": [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    },
    startDate: daterangepicker_startDate, // moment(),
    endDate: daterangepicker_endDate, // moment(),
    autoUpdateInput: true,
    "locale": {
        "direction": "ltr",
        "format": "YYYY-MM-DD", // YYYY-MM-DD HH:mm
        "separator": " 至 ",
        "applyLabel": "确定",
        "cancelLabel": "取消",
        "fromLabel": "From",
        "toLabel": "To",
        "customRangeLabel": "自定义",
        "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
        "monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        "firstDay": 1
    }
}, function (start, end, label) {
    //console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
    fn_daterangepicker_changed(start.format('YYYY-MM-DD'), end.format('YYYY-MM-DD'))
});

官网（含配置工具）

http://www.daterangepicker.com/

GitHub

https://github.com/dangrossman/daterangepicker

配置工具

下载的包中的 demo.html

Demo

https://awio.iljmp.com/5/drpdemo

编译器错误消息: CS0012: The type '***' is defined in an assembly that is not referenced. You must add a reference to assembly 'netstandard, Version=2.0.0.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51'.

错误CS0012类型“***”在未引用的程序集中定义。必须添加对程序集“netstandard, Version=2.0.0.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51”的引用。

解决方法：

打开 Web.config，在 <system.web /> 的 <compilation /> 中添加 <assemblies><add>，如：

<compilation debug="true" targetFramework="4.8">
  <assemblies>
    <add assembly="netstandard, Version=2.0.0.0, Culture=neutral, PublicKeyToken=cc7b13ffcd2ddd51"/>
  </assemblies>
</compilation>

缺少其它 assembly 的参照上面添加。

Nuget 安装：X.PagedList.Mvc.Core

控制器：

using X.PagedList;

public IActionResult Index(int page = 1)
{
    ……
    return View(q.ToPagedList(page, size));
}

视图：

@using X.PagedList
@using X.PagedList.Mvc.Core
@model IPagedList<xxx>

@Html.PagedListPager(Model, page => Url.Action("Index", new { page }))

自定义（options 默认值）：

@Html.PagedListPager(
    Model, 
    page => Url.Action("Index", new { page }), 
    new X.PagedList.Mvc.Common.PagedListRenderOptionsBase
    {
        HtmlEncoder = HtmlEncoder.get_Default(),
        DisplayLinkToFirstPage = PagedListDisplayMode.IfNeeded,
        DisplayLinkToLastPage = PagedListDisplayMode.IfNeeded,
        DisplayLinkToPreviousPage = PagedListDisplayMode.IfNeeded,
        DisplayLinkToNextPage = PagedListDisplayMode.IfNeeded,
        DisplayLinkToIndividualPages = true,
        DisplayPageCountAndCurrentLocation = false, // 显示总页数和当前页码
        MaximumPageNumbersToDisplay = 10, // 最多显示页码数
        DisplayEllipsesWhenNotShowingAllPageNumbers = true,
        EllipsesFormat = "…",
        LinkToFirstPageFormat = "<<",
        LinkToPreviousPageFormat = "<",
        LinkToIndividualPageFormat = "{0}",
        LinkToNextPageFormat = ">",
        LinkToLastPageFormat = ">>",
        PageCountAndCurrentLocationFormat = "Page {0} of {1}.",
        ItemSliceAndTotalFormat = "Showing items {0} through {1} of {2}.",
        FunctionToDisplayEachPageNumber = null,
        ClassToApplyToFirstListItemInPager = null,
        ClassToApplyToLastListItemInPager = null,
        ContainerDivClasses = new string[1]
        {
            "pagination-container"
        },
        UlElementClasses = new string[1]
        {
            "pagination"
        },
        LiElementClasses = Enumerable.Empty<string>(),
        PageClasses = Enumerable.Empty<string>(),
        UlElementattributes = null,
        ActiveLiElementClass = "active",
        EllipsesElementClass = "PagedList-ellipses",
        PreviousElementClass = "PagedList-skipToPrevious",
        NextElementClass = "PagedList-skipToNext",
    })

保留地址栏参数：

@{ 
    string query = Context.Request.QueryString.Value;
}
@Html.PagedListPager(Model, page => Regex.IsMatch(query, @"[?&]page=\d+")
    ? Regex.Replace(query, @"([?&])page=\d+", $"$1page={page}")
    : (query.StartsWith("?") ? $"{query}&page={page}" : $"{query}?page={page}"),
    new X.PagedList.Web.Common.PagedListRenderOptionsBase
    {
        DisplayPageCountAndCurrentLocation = true,
        MaximumPageNumbersToDisplay = 5,
    })

这里从查询字符串中判断并替换 page 值，如果有更简单的方法敬请告知。比如 Webdiyer 的分页组件会自动携带所有参数。

更多使用方式参官方文档：https://github.com/dncuug/X.PagedList

附应用于 Unify Template（一款基于 Bootstrap 的 HTML 模板）中的配置：

<style>
    .u-pagination-v1-1--active .u-pagination-v1-1 { color: #fff; border-color: #72c02c; }
    .PagedList-pageCountAndLocation { float: right !important; }
</style>
@{
    string query = Context.Request.QueryString.Value;
}
@Html.PagedListPager(Model, page => Regex.IsMatch(query, @"[?&]page=\d+")
    ? Regex.Replace(query, @"([?&])page=\d+", $"$1page={page}")
    : (query.StartsWith("?") ? $"{query}&page={page}" : $"{query}?page={page}"),
    new X.PagedList.Web.Common.PagedListRenderOptionsBase
    {
        DisplayPageCountAndCurrentLocation = true,
        MaximumPageNumbersToDisplay = 5,
        UlElementClasses = new string[] { "list-inline" },
        LiElementClasses = new string[] { "list-inline-item" },
        PageClasses = new string[] { "u-pagination-v1__item", "u-pagination-v1-1", "g-pa-7-14" },
        ActiveLiElementClass = "u-pagination-v1-1--active",
        EllipsesElementClass = "g-pa-7-14",
    })

当 MySQL 中使用 tinyint(1) 作为布尔值类型时，ASP.NET Core DBFirst 创建模型时会将其定义为 sbyte，运行时会抛出异常：

InvalidCastException: Unable to cast object of type 'System.Boolean' to type 'System.SByte'.

我们可以在数据库连接字符串中加入 TreatTinyAsBoolean=false 来实现不抛出异常，但程序中赋值和判断该字段时还是会比较麻烦。

因此我更倾向于将数据库中该字段类型改为 bit(1)。

2019.11.28 注：这回遇到 tinyint(1) 映射到了 C# 的 bool，而 bit(1) 却映射到了 ulong。具体什么原因未作排查，反正哪个最终为 bool 就选哪个吧。

1. 微信的 H5 页面前端引导到：

   https://api.magcloud.cc/magshare/{siteId}?jump_url={jump_url}&content_url={content_url}

   各参数含义见官方文档：http://doc.magcloud.net/325339

   content_url 地址（一般仍为活动页面）接收参数 magshareredirect，值为 1 则跳转到自定义的引导页。
   

2. 自定义引导页按 iOS 和安卓显示图文和箭头，引导用户点击右上角菜单，在浏览器中打开。

3. 在浏览器 H5 中引导打开：

   {siteId}://pagejump?jump_url={jump_url}

   各参数含义见第 1 步中的文档。

   这里涉及一个“若未安装则引导安装”的过程，可以选择下方合适的一种方式实现：

• A 标签的 href 填入下载地址，onclick 事件 location 到 App

• onclick 事件 location 到 App，再用 setTimeOut location 到下载地址

• 若仍无法实现预期效果，可以在弹出层中放置“未安装，前往下载”和“已安装，立即打开”两个按钮，让用户自己选择

4. 若下载地址为应用宝，那么在 iOS 中可能会出现“打开 App 后继而自动打开 App Store”的情况，可以自建中转的 App 介绍页引导到 App Store 或应用宝。

5. 分别实现微信和 MAGAPP 客户端的分享
   

前言：

ChatGPT 给了 3 条建议：

1. 在应用程序中正确释放数据库连接。确保在使用完数据库连接后，将其关闭并将其返回到连接池中。您可以使用 using 语句来确保连接在使用完毕后被正确释放。

2. 调整连接池的大小。默认情况下，连接池的最大大小为 100。如果您的应用程序需要更多的连接，则可以增加连接池的大小。您可以在连接字符串中设置 Max Pool Size 属性来调整连接池的大小。
   

3. 调整连接池的超时时间。默认情况下，连接池中的连接在 30 秒钟内未使用时将被关闭。如果您的应用程序需要更长的连接时间，则可以增加连接池的超时时间。您可以在连接字符串中设置 Connection Lifetime 属性来调整连接池的超时时间。
   

亲测有效，尤其是第 3 条，原因是 Connection Lifetime 的默认值是 0，即没有超时限制。

—— 2023.5

一般地，我们使用 EF 连接数据库前会先初始化一个数据库上下文：

dbEntities db = new dbEntities();

虽然 ASP.NET 会在查询完毕后自动关闭该连接，但是在什么情况下回收等都是不确定的，所以会导致 MySQL 中出现很多 Sleep 的连接（执行命令 SHOW FULL PROCESSLIST 可见），占用数据库的连接数，除非主动调用 Dispose()：

db.Dispose();

官方建议的写法是使用 using 语法：

using (dbEntities db = new dbEntities())
{
}

using 会自动调用 Dispose()。这样对减少连接数是很有效的，但官方提示为了提高下一次连接的速度，并不会完全关闭所有连接。

C# 8 建议写法：

using dbEntities db = new dbEntities();

在实际项目中（该项目有 500+处数据库连接）测试结果，在不执行 Dispose() 时稳定为 140 个左右连接数，使用 using 或 Dispose() 后稳定变为 40 个左右。

如果不小心在 using 外部或 Dispose() 后再次对该上下文执行查询操作会出现异常：

无法完成该操作，因为 DbContext 已释放。

或

此 ObjectContext 实例已释放，不可再用于需要连接的操作。

所以要避免出现这种情况。这里还有一种另类的解决方法（不建议），根据上下文的特性，只要在 using 内查询一次（譬如视图中需要用到的导航属性，即外键关联的表），就可以在外部使用这个属性。

（建议）在 ASP.NET MVC 或 Web API 项目中，如果一个控制器中仅在 Action 外部定义一个 DbContext，那么，只要重写该控制器的 Dispose() 方法即可：

private dbEntities db = new dbEntities();

protected override void Dispose(bool disposing)
{
    if (disposing)
    {
        db.Dispose();
    }
    base.Dispose(disposing);
}

上下文使用 private 修饰即可。

参考：SQL Server 连接池 (ADO.NET)

原标题：关于 PHP 获取 IP 地址的几种方法

PHP 获取客户端的 IP 地址有 4 种方式：

1. REMOTE_ADDR：浏览当前页面的用户计算机的 IP 地址

2. HTTP_X_FORWARDED_FOR：记录代理信息，会把每一层代理都记录

3. HTTP_CLIENT_IP：客户端的 IP
   

4. X-Real-IP：没有标准，由上一跳决定

REMOTE_ADDR 一般是不能伪造的，因为是通过服务器与客户端握手协议来获取的。而 HTTP_X_FORWARDED_FOR 和 HTTP_CLIENT_IP 是在 header 信息里面，所以客户端是可以进行很轻松的伪造。下面是对这三种方式详解：

https://www.v2ex.com/t/230367

https://www.test404.com/post-1448.html

https://www.cnblogs.com/mypath/articles/5239687.html

一、关于 REMOTE_ADDR
这个变量获取到的是“直接来源”的 IP 地址，所谓“直接来源”指的是直接请求该地址的客户端 IP 。这个 IP 在单服务器的情况下，很准确的是客户端 IP ，无法伪造。当然并不是所有的程序都一定是单服务器，比如在采用负载均衡的情况（比如采用 haproxy 或者 nginx 进行负载均衡），这个 IP 就是转发机器的 IP ，因为过程是客户端 -> 负载均衡 -> 服务端。是由负载均衡直接访问的服务端而不是客户端。

二、关于 HTTP_X_FORWARDED_FOR 和 HTTP_CLIENT_IP
基于“一”，在负载均衡的情况下直接使用 REMOTE_ADDR 是无法获取客户端 IP 的，这就是一个问题，必须解决。于是就衍生出了负载均衡端将客户端 IP 加入到 HEAD 中发送给服务端，让服务端可以获取到客户端的真实 IP 。当然也就产生了各位所说的伪造，毕竟 HEAD 除了协议里固定的那几个数据，其他数据都是可自定义的。

三、为何网上找到获取客户端 IP 的代码都要依次获取 HTTP_CLIENT_IP 、 HTTP_X_FORWARDED_FOR 和 REMOTE_ADDR
基于“一”和“二”以及对程序通用性的考虑，所以才这样做。 假设你在程序里直接写死了 REMOTE_ADDR ，有一天你们的程序需要做负载均衡了，那么你有得改了。当然如果你想这么做也行，看个人爱好和应用场景。也可以封装一个只有 REMOTE_ADDR 的方法，等到需要的时候改这一个方法就行了。

X_FORWARDED_FOR 与 X-Real-IP 的区别：

X_FORWARDED_FOR：记录了所有链路里的代理 IP 值，比如下面所说的，经过了 3 次代理，分别是 1.1.1.1, 2.2.2.2, 3.3.3.3，其中 1.1.1.1 是客户端 IP，2.2.2.2 是代理服务器，接下来同理。

X-Real-IP：是只会记录前一次代理的 IP 地址。

一般来说，X-Forwarded-For是用于记录代理信息的，每经过一级代理(匿名代理除外)，代理服务器都会把这次请求的来源IP追加在X-Forwarded-For中

来自4.4.4.4的一个请求，header 包含这样一行

X-Forwarded-For: 1.1.1.1, 2.2.2.2, 3.3.3.3

代表请求由1.1.1.1发出，经过三层代理，第一层是2.2.2.2，第二层是3.3.3.3，而本次请求的来源IP4.4.4.4是第三层代理

而X-Real-IP，没有相关标准，上面的例子，如果配置了X-Read-IP，可能会有两种情况

// 最后一跳是正向代理，可能会保留真实客户端IP
X-Real-IP: 1.1.1.1
// 最后一跳是反向代理，比如Nginx，一般会是与之直接连接的客户端IP
X-Real-IP: 3.3.3.3

所以 ，如果只有一层代理，这两个头的值就是一样的。

那一般在后端取值（比如 node.js 通过 nginx 代理）是用哪个值呢？我看 sf 上看一般推荐是用 X-Forwarded-For，直接用 X-Real-IP 岂不是更方便点？

X-Forwarded-For 确实是一般的做法

1. 他在正向（如 squid）反向（如 nginx）代理中都是标准用法，而正向代理中是没有 x-real-ip 相关的标准的，也就是说，如果用户访问你的 nginx 反向代理之前，还经过了一层正向代理，你即使在 nginx 中配置了 x-real-ip，取到的也只是正向代理的 IP 而不是客户端真实 IP

2. 大部分 nginx 反向代理配置文章中都没有推荐加上 x-real-ip ，而只有 x-forwarded-for，因此更通用的做法自然是取 x-forwarded-for

3. 多级代理很少见，只有一级代理的情况下二者是等效的

4. 如果有多级代理，x-forwarded-for 效果是大于 x-real-ip 的，可以记录完整的代理链路

1、将以下代码保存为 Client.php

// php 脚本开始
$ch = curl_init();
$url = "http://localhost/ser.php";
$header = array('CLIENT-IP:208.165.188.175', 'X-FORWARDED-FOR:208.165.188.175');
// 声明伪造 head 请求头
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_HTTPHEADER, $header);
curl_setopt($ch, CURLOPT_RETURNTRANSFER,true);
$page_content = curl_exec($ch); curl_close($ch);
echo $page_content;

2、将以下代码保存为 ser.php

// php 脚本开始
echo getenv('HTTP_CLIENT_IP');
echo getenv('HTTP_X_FORWARDED_FOR');
echo getenv('REMOTE_ADDR');

测试结果为

208.165.188.175
208.165.188.175
127.0.0.1

上面结果可看出，http_client_ip、http_x_forwarded_for 都被伪造了，而 remote_addr 还是127.0.0.1 就是客户端 IP

总结：

如果我们没用到负载均衡（CDN）的话直接用 REMOTE_ADDR 获取 IP。

如果使用了一级 CDN 的话，CDN 会把 REMOTE_ADDR 转发成 X-Real-IP，我们服务器可以获取 X-Real-IP 来获取 IP 值。如果是多级 CDN 的话需要我们来做 nginx 代理，详细：https://www.cnblogs.com/princessd8251/articles/6268943.html

就是第一台负载服务器获取 REMOTE_ADDR 转发成 X-Real-IP，之后的去继承前一台的 X-Real-IP 就可以了，这里记住必须是去继承，不然第二台会把第一台的 REMOTE_ADDR 转发成 X-Real-IP 导致错误。

在 discuz! 中的获取 IP 的方法：

private function _get_client_ip() {
    $ip = $_SERVER['REMOTE_ADDR'];
    if (isset($_SERVER['HTTP_CLIENT_IP']) && preg_match('/^([0-9]{1,3}\.){3}[0-9]{1,3}$/', $_SERVER['HTTP_CLIENT_IP'])) {
        $ip = $_SERVER['HTTP_CLIENT_IP'];
    } elseif(isset($_SERVER['HTTP_X_FORWARDED_FOR']) AND preg_match_all('#\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}#s', $_SERVER['HTTP_X_FORWARDED_FOR'], $matches)) {
        foreach ($matches[0] AS $xip) {
            if (!preg_match('#^(10|172\.16|192\.168)\.#', $xip)) {
                $ip = $xip;
                break;
            }
        }
    }
    return $ip;
}

这里 DZ 为了符合有些用户会用代理，所以才首先使用了两个容易伪造的方法，如果有需要可以自行修改。