文章表：
| 文章ID | 分类ID | 标题 | 阅读数 |
| 1 | 1 | 第一篇文章 | 8 |
| 2 | 1 | 第二篇文章 | 9 |
| 3 | 2 | 第三篇文章 | 8 |
分类表：
| 分类ID | 分类名称 |
| 1 | 国内新闻 |
| 2 | 国际新闻 |
问题：怎样获取每个分类中的最新一篇文章？
错误尝试：如果先查分类表，再判断按分类ID去取各自的最新一篇文章，性能是极差的。
思路：查文章表并按分类ID分组，取出该组的最新一篇文章ID，再IN出这些文章。
SQL：
select * from 文章表 where 文章ID in( select max(文章ID) from 文章表 group by 分类ID )
因为文章ID是唯一的，所以以上写法的结果没有问题。
但是如果我们要获取每个分类中阅读量最高的文章，同样有以下 SQL：
select * from 文章表 where 阅读数 in( select max(阅读数) from 文章表 group by 分类ID ) order by 阅读数 desc
这就导致“国内新闻”这个分类的两篇文章都被列出，因为该分类下阅读数居第二的文章的阅读数也是与“国际新闻”阅读数首位的文章相同。
大家有没有更好的思路来完美解决这个问题？注意是 MSSQL 中，MySQL 没有这个烦恼。
最近要做个简单的类似 CNZZ 和百度统计的统计器，不可避免地遇到 JS 文件异步加载 和 给 JS 文件传参 的问题。
参考了 CNZZ 的代码以后，在 Chrome 的控制台发现以下警告：
A Parser-blocking, cross-origin script, http://s4.cnzz.com/stat.php?***, is invoked via document.write. This may be blocked by the browser if the device has poor network connectivity. See https://www.chromestatus.com/feature/5718547946799104 for more details.
Paul Kinlan 给出了解释，是因为使用了 document.write() 的方式输出了 <script src="***" /> HTML DOM，建议改成 document.appendChild() 或 parentNode.insertBefore()，最好的例子就是 Google Analytics。
<!-- Google Analytics -->
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->上述 JavaScript 跟踪代码段可以确保该脚本在所有浏览器中加载和异步执行。
加了一些注释，便于理解，官方英文版。
(function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
// console.log(window['GoogleAnalyticsObject']) // 'ga'
// console.log(i[r]) // undefined
i[r] = i[r] || function () { // i[r] 就是 window['ga']，定义了一个函数
(i[r].q = i[r].q || []).push(arguments) // 往 ga.q 这个数组中增加一项
},
i[r].l = 1 * new Date(); // 时间戳，写法等同于 new Date().getTime()
// console.log(i[r]) // window['ga'] 就是上面那个 function
a = s.createElement(o), // 创建一个 script 元素
m = s.getElementsByTagName(o)[0]; // 文档中的第一个脚本（文档中肯定至少已有一个脚本了）
a.async = 1; // 异步加载
a.defer = 1; // 兼容旧浏览器（我自己加的）
a.src = g;
m.parentNode.insertBefore(a, m) // 将 a 脚本插入到 m 脚本之前
})(window, document, 'script', 'http://***/***.js', 'ga');
// i s o g r
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');过程是：
创建了一个 <script> 元素，并异步加载 http://***/***.js；初始化了一个全局函数 ga；在 ga() 命令队列中添加了两条命令。
现在我们可以在这个外部 js 中使用 ga.q 这个对象中的数据了，示例：
;(function () {
console.log(ga.q);
})(window);简单补充下，async 是 HTML5 属性，使支持异步加载 JS 文件；defer 只支持 IE，作用类似。
测试异步只需要将 js 文件换成服务端页面，并人为设置 sleep 时间即可，阻塞式调用的话会在加载 js 时暂停后续页面的渲染。
收录了一些个人觉得不错的网页开发插件。
由于插件更新频繁，本页如有错误请指正，也欢迎告知更多功能强大、使用方便的插件。
| 插件 | 简介 | 备注 |
| 框架 | ||
| jQuery | 最流行的 JS 框架 | 下载、中文文档、英文整合文档、中文整合文档，浏览器支持、来自 css88 的文档 官方建议 IE 6-8 使用 1.12.4 |
| Angular、中文版 AngularJS (version 1.x) | 一套框架，多种平台同时适用手机与桌面 | MVC 架构，使得开发现代的单一页面应用程序（SPAs：Single Page Applications）变得更加容易 |
| Vue.js | 是一套用于构建用户界面的渐进式框架。 | |
| Bootstrap、中文版 | 简洁、直观、强悍的前端开发框架 | 英文文档、v3中文文档、v2中文文档、视频教程，主题和模板 |
| jQuery UI | 为 jQuery 提供更丰富的功能 | 示例：Datepicker、Color Animation、Shake Effect |
| 功能 | ||
| jQuery File Upload | jQuery 文件上传 | 英文文档 |
| jQuery Cookie | 读取、写入和删除 cookie | 浏览器支持，文档 |
| json2.js | json 操作库 | 已弃用，旧 IE 用 jQuery 的 parseJSON，HTML 5 用 JSON.parse |
| Lightbox | 老牌图片浏览插件 推荐使用更强大的 Viewer.js | |
| Swiper、中文版 | 最现代的移动触摸滑块（Most Modern Mobile Touch Slider） | 英文文档，中文文档，旧浏览器支持版本：2.x.x，Swiper 2 英文文档，中文文档 |
| jquery-cropper | 图片裁剪 | |
| FastClick | 用于消除手机浏览器上触摸事件触发之间的 300 毫秒延迟 | 用法，不应用的场景 |
| PACE | 页面加载进度条 | 文档，IE8+ |
| toastr | jQuery 通知 | 文档 |
| Autosize | 一款小巧的，可自动调整 textarea 高度的独立脚本 | IE9+ |
| X-editable | 允许您在页面上创建可编辑元素 | 文档，Demo |
| select2 | 一款提供搜索过滤、自定义样式的下拉框插件 | |
| jQuery Tags Input | 标签输入框 | 用法 |
| Viewer.js | 图片浏览插件 | GitHub（viewerjs）、GitHub（jquery-viewer） jquery-viewer 是 viewerjs 的 jQuery 插件，即在 jQuery 环境中要同时引用这两个脚本。 |
| PDF.js | A general-purpose, web standards-based platform for parsing and rendering PDFs. | |
| 编辑器 | ||
| UEditor | 百度在线编辑器 | GitHub 下载、文档、ASP.NET 部署教程 |
| 日期时间 | ||
| bootstrap-datepicker | Bootstrap 日期选择器 | Online Demo |
| DateTimePicker | 日期时间选择 | |
| MultiDatesPicker | 多日期选择 | |
| FullCalendar | 日历日程事件工作表 | IE 9+, jQuery 2.0.0+ |
| TimeTo | 计时、倒计时 | |
| 图表 | ||
| D3.js | D3.js 是基于数据驱动文档工作方式的一款 JavaScript 函数库，主要用于网页作图、生成互动图形，是最流行的可视化库之一。 | |
| Highcharts、中文版 | 兼容 IE6+、完美支持移动端、图表类型丰富、方便快捷的 HTML5 交互性图表库 | 文档 |
| ECharts | 百度图表控件 | |
| AntV | 来自蚂蚁金服的专业、简单、无限可能的可视化解决方案 G2 - 专业易用的可视化类库 G2-mobile - 移动端高性能可视化类库 G6 - 关系图可视化类库 | 流程图, 关系图, 可视化规范, 地图, 河流图, 力导图, 网络图, UML图, 业务流程图, 时序图 |
| SyntaxHighlighter | 功能齐全的代码语法高亮插件（JS） | |
| 动态排名数据可视化 | 将历史数据排名转化为动态柱状图图表 开源代码，非插件，修改使用 | GitHub、视频教程、EV录屏、网页示例、视频效果 |
| 图标 | ||
| Font Awesome | 完美的图标字体 | IE 8+，v3.2.1 支持 IE 7，进阶用法（定宽/边框/动画/旋转/叠加） |
| Glyphicons | 图标字体 | 作为 Bootstrap 组件 |
| Iconfont | 阿里巴巴矢量图标库 | 用户可以自定义下载多种格式的 icon，也可将图标转换为字体，便于前端工程师自由调整与调用 |
| UI 框架 | ||
| WeUI | 同微信原生视觉体验一致的基础样式库 | Demo、Wiki |
| Apple UI Design Resources | 苹果用户界面设计资源 | |
若在谷歌浏览器中记住密码，再次打开时，表单中自动填充的文本框和下拉框都变成了黄色背景，影响界面美观，可以使用以下样式修正：
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus
input:-webkit-autofill,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: 1px solid green;
-webkit-text-fill-color: green;
-webkit-box-shadow: 0 0 0px 1000px #000 inset;
transition: background-color 5000s ease-in-out 0s;
}
具体样式请自行修改。
参考资料：https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
程序设计规范：
【推荐】上传的文件直接保存到文件存储服务（如阿里云 OSS），这样即使被上传了后门 shell，对网站服务器也不会有影响。
否则必须通过文件头来确定文件类型，检查文件十六进制的文件头和文件尾是否合法，并检查文件流中是否包含 php、evel 等字符。
不可直接使用客户端文件名来保存文件，特别是后缀名/扩展名。应生成随机文件名，并通过检验文件头来确定文件类型。必须由程序指定保存目录。
使用 OSS 的应直接上传，不要在 ECS 上临时存放或备份。如必须存放的，应按上述规范操作。
服务器安全设置
CentOS + nginx + PHP：
全站文件取消属性中的“执行”权限（chmod），因为这个“执行”与运行 PHP 无关。而需要上传文件的“目录”需要“执行”权限，原因是需要往该目录创建文件。
仅需要写入的目录或文件设置“写入”权限。如上传图片目录、ThinkPHP 的 Runtime 目录。
凡可写目录或文件均不允许运行 PHP / PY 等 除需要被直接访问的 PHP / PY 文件，其它动态文件均不允许被访问到，在 nginx 的配置文件中添加项，参：https://xoyozo.net/Blog/Details/nginx-location-if，若全站使用统一的入口文件访问，那么设置仅该文件允许运行 PHP 即可。通过 IO 方式被其它文件包含的文件，无需运行 PHP 权限。（“deny all”对 include 起作用，但对 IO 不起作用，因此 Runtime 目录可以继续为 ThinkPHP 提供缓存服务。）这一步非常有用。
使用与 nginx 网站用户不同的用户来部署网站文件，如宝塔面板 PHP 使用 www 用户，那么就使用 root 或其它新用户来上传文件，否则将导致全站目录和文件可写。有条件的建议不同网站使用不同的用户，可防止一个网站被入侵后导致其它网站文件或磁盘上的其它文件被泄露的风险（2022年10月2日从宝塔官方社区获悉，宝塔面板暂不支持使用非 www 用户创建并运行网站）。
Windows Server + IIS + ASP.NET：
配置每个磁盘的安全属性，拒绝“IIS_IUSRS”这个用户组的所有权限。只要设置驱动器即可，子文件夹和文件会自动继承。若运行 .NET Framework 项目，需要设置 C:\Windows\Microsoft.NET\Framework\v*.*.*****\Temporary ASP.NET Files\ 目录可修改写入权限，.NET Core 项目不需要此设置。
为每个网站创建一个新用户，仅隶属于“IIS_IUSRS”。网站根目录安全属性添加该用户，权限选择“读取”。（已测取消“读取与执行”不影响 PHP，“列出文件夹内容”视业务需求开启，建议关闭）。仅需要上传文件的目录或文件设置“修改”、“写入”权限。（修改对应修改文件，写入对应上传文件）
IIS 网站中设置“物理路径凭据”以及应用程序池的“标识”。
IIS 中设置写入目录的“处理程序映射”无脚本。
<input name="aaa" id="theinput" type="checkbox" />
// 选中它
$('input[name="aaa"]').prop("checked", true);// 取消它
$('input[name="aaa"]').prop("checked", false);// 顺便提一下将 select 选中首项
$("#ddl_types option:first").prop('selected', true);// 获取选中的项
$('input[name="aaa"]:checked').each(function(){ });// 获取项是否选中
$('#theinput').is(':checked')或
$('#theinput').prop('checked')或
theinput.checked
// 获取 radio 选中项的值
$('input[name="aaa"]:checked').val()
本文适用且不限于 iTunes 12.5，在 Windows 上实现。
iPhone / iPad 的铃声文件是 .m4r 格式的，可以通过 iTunes 将 .mp3 /.wav 等其它格式的音乐文件转换成 .m4r 文件。
打开 iTunes
菜单栏选择：文件 - 将文件添加到资料库 - 从文件资源管理器中选择要作为铃声的音乐文件
如果要截取其中一段音乐作为铃声，则在资料库中右键该音乐 - 显示简介 - 选项，设置开始和停止时间，长度不能超过 40 秒
在资料库中将其选中，菜单栏选择：文件 - 转换 - 创建 AAC 版本
此时在资料库中会多出一个音乐来，右键单击，在 Windows 资源管理器中显示，我们可以看到以原音乐文件名命名的 .m4a 文件（如果看不到扩展名，则在菜单上点击 查看，选中“文件扩展名”即可）
将该文件扩展名改为 .m4r
铃声做好了，怎样导入到手机上呢？简单的答案是用 iTools，其实上面制作铃声的过程也可以用 iTools 一键实现，哈~哈哈~哈哈哈~
对于大型站点，庞大的主题和帖子数据，分表放到一个主题表和一个帖子表中，已经成为影响性能的一个因素。因此，急需进行分表操作来避免 MySQL 对于大数据表的频繁操作。
1、后台分表
Disucz! X2 后台重新调整了分表的机制，使得分表效率和后期站点性能得到提升。具体分表设置在 后台 -> 站长 -> 主题分表（帖子分表）。
1）主题分表
主题分表分为两种类型，一种为主表，一种为存档表。主表只有一个，存档表可以有多个。我们进行分表操作，首先进行创建存档表的操作，然后进行主题移动，将指定条件的主题移动到存档表中。
a、创建存档表
打开 source/admincp/admincp_threadsplit.php 文件，找到创建存档表的条件分支
- elseif($operation == 'addnewtable')
复制代码
首先获取当前最大的主题表 id ，然后根据 forum_thread 的建表语句，生成新的存档表（id + 1），最后更新缓存。
b、主题移动
存档表建好后，下一步就是将主题移动到这个存档表中。在选择主题的时候，可以根据提供的搜索条件，特别是“更多选项”中的搜索条件，来转移符合条件的主题。这里主要是一个搜索的过程，转移数据的过程使用 REPLACE INTO … SELECT...FROM... 语句，比较简单。
2）帖子分表
帖子分表也是要分成两步，第一步先创建帖子分表，第二步转移数据。
打开 source/admincp/admincp_postsplit.php 文件，找到帖子分表的条件分支
- elseif($operation == 'split')
复制代码
如果是对主表进行分表操作，主表必须要大于400M，见下面的条件判断
- if($status && ((!$tableid && $status['Data_length'] > 400 * 1048576) || ($tableid && $status['Data_length'])))
复制代码
在站长提交分表表单后，程序会先根据 getmaxposttableid 函数获取当前帖子表最大的 id ，然后根据已有的帖子表结构，创建新分表，并更新缓存等信息。创建成功后，开始转移数据的操作。找到条件分支
- elseif($operation == 'movepost')
复制代码
，开始转移数据的操作。当从主表中转移数据时，是根据主题表中最后回复时间正序排列的主题 tid 来获取帖子数据的。
- $query = DB::query("SELECT tid FROM ".DB::table($table)." WHERE posttableid='0' AND displayorder>='0' ORDER BY lastpost LIMIT 0, 1000");
复制代码
然后，利用 movedate 函数进行转移数据。
当从从表中转移数据时，是根据给定帖子表的 id，获取此表中first=1的帖子所属 tid，
- $query = DB::query("SELECT tid FROM ".DB::table(getposttable($fromtableid))." WHERE `first`='1' LIMIT 0, 1000")
复制代码
然后利用 movedate 函数进行转移数据。
在 movedate 函数中，根据获取到的 tid ，将属于此 tid 的帖子，利用 INSERT INTO … SELECT … FROM ...来转移数据。在此过程中，更新主题表中 posttableid 这个字段，来标识帖子的存储表。
2、主题列表页分表读取
在主题列表页，只能看到主题主表中的主题。存档表中的主题都在存档区。
在这部分的代码（source/module/forum/forum_forumdisplay.php）中，所有涉及到的主题表都以 $threadtable 这个变量代替，$threadtable 这个变量的获取，又是根据用户是否查看存档区的标识 archiveid 来判定。
- $threadtable = $_G['gp_archiveid'] && in_array($_G['gp_archiveid'], $threadtableids) ? "forum_thread_{$_G['gp_archiveid']}" : 'forum_thread';
复制代码
当用户选择非存档内容时，archiveid = 0 或者不存在，这时，直接从 forum_thread 主表来读取主题列表。当用户选择存档内容时，archiveid = 1（1 表示存档表的 id，如果查看 id 为 2 的存档表，archiveid = 2），程序会根据 archiveid 来判断从哪个存档表中去获取主题列表。
3、帖子内容页分表读取
当用户浏览帖子内容页时，程序首先利用 loadforum 函数来获取当前的主题信息。在 loadforum 函数中，
- $_G['thread'] = get_thread_by_tid($tid, '*', $addcondiction, $archiveid);
复制代码
根据提供的 tid，get_thread_by_tid 函数到主表和存档表中分表去查找，直到找到对应的主题信息。
在 source/module/forum/forum_viewthread.php 文件中，根据
- $thread = & $_G['forum_thread'];
复制代码
- $threadtable = $thread['threadtable'];
- $posttableid = $thread['posttableid'];
- $posttable = $thread['posttable'];
复制代码
这两句来判定该主题应该去哪个帖子表中去获取帖子内容列表。
4、发新主题
发表新主题时，直接往主题主表中插入数据，对应的 posttableid = 0。然后，当插入帖子数据时，通过 insertpost 函数将数据插入帖子表中。
在 insertpost 函数中，会先去判断所属主题的 posttableid 值，得到目标帖子表，然后再往该帖子表中插入帖子数据。
5、发新回复
只有在主表的主题才能回复，因此，直接根据传递的tid去获取目标帖子表，然后插入数据。这个跟发新主题时，插入帖子内容过程相同。
6、编辑帖子
同样，只有在主表中的主题的帖子才能被编辑，因此，主题都在 forum_thread 表中。需要获取的是该主题的帖子在哪个帖子表中。打开 source/include/post/post_editpost.php 文件，找到
- $posttable = getposttablebytid($_G['tid']);
复制代码
程序在开始，通过这条语句来获取目标帖子表。在 getposttablebytid 函数中，程序根据 tid ，逐个主题表进行查找，找到对应的主题信息，获取目标帖子表，然后指向后续的编辑帖子操作。
8、取消存档
存在存档区的主题，如果想取消存档，可以通过页面底部的“取消存档”来执行。
打开 source/include/topicadmin/topicadmin_restore.php 文件，可以看到取消存档，实际上仅是将放在存档表中的主题移动到了主表中。同样，存档表的获取还是通过 archiveid 这个参数来决定的。
- $threadtable = $archiveid ? "forum_thread_$archiveid" : 'forum_thread';
复制代码
从这可以看出，存档的概念仅限于主题，帖子无所谓存档的概念。
目前找到一种途径可以顺利把 Fireworks 或 Photoshop 的矢量图导出 / 转换为 CorelDRAW 的曲线：
Fireworks 中的路径如果不需要后期改变形状，最好都能够组合路径，以减少图层数，或者新建子层，把它们都拖进去。
- 在 Fireworks 中，另存为，选择 *.psd 格式
- 在 Photoshop 中，选中图层或子层，右键，复制 SVG
- 在桌面上新建一个文本文档，打开，粘贴，保存，关闭
- 将该文本文档更改后缀名为 .svg（此步可忽略）
- 将该文档拖到 CorelDRAW 窗口中即可
将字符串作为文本文档输出：
Response.AddHeader("Content-Disposition", "attachment; filename=文件名.txt");
Response.Write(字符串内容);
Response.End();
直接提供服务器文件下载：
FileInfo thefile = new FileInfo(path);
Response.Clear();
Response.ClearHeaders();
Response.Buffer = false;
Response.ContentType = "application/octet-stream";
Response.AppendHeader("Content-Disposition", "attachment;filename=" + HttpUtility.UrlEncode("刮刮卡参与") + id + ".csv");
Response.AppendHeader("Content-Length", thefile.Length.ToString());
Response.WriteFile(thefile.FullName);
Response.Flush();
Response.End();
输出使用 NPOI 创建的 Excel（MemoryStream）：
HSSFWorkbook book = new HSSFWorkbook();
……
MemoryStream ms = new MemoryStream();
book.Write(ms);
Response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}.xls", scene.d.drama + " " + scene.s.time_show.ToString("yyyy年MM月dd日HH时mm分")));
Response.BinaryWrite(ms.ToArray());
Response.End();
book = null;
ms.Close();
ms.Dispose();
最后，如果要指定文件编码，加上这句就行：
Response.ContentEncoding = Encoding.xxx;