使用 rem 单位进行响应式手机版网页开发（方便地从设计稿换算尺寸、自适应不同手机屏幕）

使用 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 数值的换算难度，我们设计了以下思路：

约定“设样比（设计稿的 px 值与 CSS 的 rem 值的比）”为 100；
使用 JS 将 :root 的 font-size 重置为“设样比”与“窗设比（窗口宽度 ÷ 设计稿宽度）”的乘积；
计算 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

xoyozo 5 年前

5,993

ASP.NET Core 3.0 对 CSS、JS、HTML 文件进行压缩、合并

安装 Nuget 包：

BuildBundlerMinifier

项目根目录创建绑定配置文件：bundleconfig.json

示例：

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/css/site.css",
      "wwwroot/css/custom.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": true,
      "renameLocals": true
    },
    "sourceMap": false
  }
]

配置文件中所有路径都相对于项目根目录（而非静态文件根目录 wwwroot），因此配置的路径都要以“wwwroot”开头。

outputFileName 是压缩合并后的文件，inputFiles 是被压缩合并的原始文件集合。

对于 js 配置部分，minify.enabled 配置是否缩小，renameLocals 配置是否修改变量名，sourceMap 配置是否生成 map 映射文件。

引用示例：

<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />

asp-append-version 表示是否在引用路径添加版本参数，可实现在文件有修改时及时在客户端浏览器中生效。

* 注意：有时候“生成”不一定生效，“重新生成”肯定会生效。

更多高级用法请参考官方文档。

xoyozo 5 年前

6,258

ASP.NET Core 3.0 使用 Redis 保存会话状态（Session State）

按这两篇文章部署即可：

ASP.NET Core 缓存（Cache）之 Redis 缓存

ASP.NET Core 会话状态（Session State）

存储内容示例：

图中，

第 1 项为浏览器 A 中，在 Session 中设置键 count 值为 1 的结果；

第 2 项为浏览器 B 中，在 Session 中设置键 count 值为 3 的结果；

而第 3 项为设置 Cache 键 count 值为 8 的结果。

xoyozo 5 年前

5,611

ASP.NET Core 3.0 使用 SQL Server 数据库保存会话状态（Session State）

按这两篇文章部署即可：

ASP.NET Core 缓存（Cache）之 SQL Server 缓存

ASP.NET Core 会话状态（Session State）

存储内容示例：

图中，

第 1 项为浏览器 A 中，在 Session 中设置键 count 值为 3 的结果；

第 3 项为浏览器 B 中，在 Session 中设置键 count 值为 1 的结果；

而第 2 项为设置 Cache 键 count 值为 5 的结果。

xoyozo 5 年前

4,227

ASP.NET Core 3.0 配置信息

打开 appsettings.json，添加一项配置（如下方示例中的“SiteOptions”项）

* 注意，如需配置开发环境与生产环境不同的值，可单独在 appsettings.Development.json 文件中配置不同项，格式层次须一致；

C# 中习惯用强类型的方式来操作对象，那么在项目根目录添加类（类名以 SiteOptions为例），格式与 appsettings.json 中保持一致：

public class SiteOptions
{
    public ERPOptions ERP { get; set; }
    public WeixinOpenOptions WeixinOpen { get; set; }
    public WeixinMPOptions WeixinMP { get; set; }
    public SMSOptions SMS { get; set; }
    public AliyunOSSOptions AliyunOSS { get; set; }

    /// <summary>
    /// 单个文件上传的最大大小（MB）
    /// </summary>
    public int MaxSizeOfSigleFile_MB { get; set; }

    /// <summary>
    /// 单个文件上传的最大大小（字节）
    /// </summary>
    public int MaxSizeOfSigleFile_B => MaxSizeOfSigleFile_MB * 1024 * 1024;

    public class ERPOptions
    {
        public int ChannelId { get; set; }
        public string AppKey { get; set; }
    }
    public class WeixinOpenOptions
    {
        public string AppId { get; set; }
        public string AppSecret { get; set; }
    }
    public class WeixinMPOptions
    {
        public string AppId { get; set; }
        public string AppSecret { get; set; }
    }
    public class SMSOptions
    {
        public string AppKey { get; set; }
    }
    public class AliyunOSSOptions
    {
        public string Endpoint { get; set; }
        public string AccessKeyId { get; set; }
        public string AccessKeySecret { get; set; }
        public string BucketName { get; set; }

        /// <summary>
        /// 格式：//域名/
        /// </summary>
        public string CdnUrl { get; set; }
    }
}

在 Startup 中注入 IConfiguration，并在 ConfigureServices() 方法中添加服务（注意使用 GetSection() 映射到自命名的“SiteOptions”项）

在控制器中使用：

在控制器类中键入“ctor”，并按两次 Tab 键，创建构造函数

在构造函数中注入“IOptions”，并在 Action 中使用

using Microsoft.Extensions.Options;

public class TestController : Controller
{
    private readonly IOptions<SiteOptions> options;

    public TestController(IOptions<SiteOptions> options)
    {
        this.options = options;
    }

    public IActionResult Index()
    {
        return View(options.Value.ERP.ChannelId.ToString());
    }
}

在视图中使用：

@using Microsoft.Extensions.Options
@inject IOptions<SiteOptions> options

@options.Value.ERP.ChannelId

xoyozo 5 年前

3,391

网页按屏幕大小整体拉伸缩放显示

本文讲述使用网页开发适用于宴会、活动、年会现场 LED 大屏幕显示抽奖、抢楼、游戏、视频等互动界面，通过在浏览器中打开后 F11 全屏投影到大银幕上。

设计思路：

为了保证最佳的显示效果，设计稿的尺寸按大屏幕的“宽高比”来做（本文以4米*3米的大银幕为例，设计稿以800*600像素为例）。
由于电脑的视频输出分辨率很有可能与大银幕的宽高比不同，那么我们全屏投影后会界面会有变形，但是投影设备接收到电脑视频信号后再全屏显示到大银幕时，界面又会变回正常。
按设计稿的尺寸开发网页，并使用 CSS3 的 scale 实现整体伸缩，目的是自适应窗口尺寸来全屏显示内容，无留白、无裁切。整体拉伸的要求是文字、图片、背景、间距、iframe 等所有元素以统一的比例拉伸，无错位。
网页上通过 JS 设置一些快捷键来实现页面展示内容的切换。
若投影设备功能有限或操作员水平有限等原因导致无法顺利设置输入输出分辨率时，网页可设置 x 轴和 y 轴两个方向的伸缩系数、定位偏移量等，更灵活地实现完美投影需求。

开发要点：

网页尺寸按设计稿来定（以 800x600 为例）。
使用 CSS3 的 transform 的 scale 来实现缩放，以电脑显示器分辨率 1920x1080，宽放大 1920/800 倍，高放大 1080/600 倍，即可将设计稿全屏展示到电脑显示器上。为了更灵活，我们使用窗口大小来代替显示器分辨率，这样不管怎么改变窗口大小或者全屏，设计稿都能完整地显示在窗口上。
在页面初始化和窗口尺寸变化时重新调整设置上述比例。

代码参考：

xoyozo 6 年前

8,965

如何配置动态排名数据可视化插件（Historical-ranking-data-visualization-based-on-d3.js）

这是一个数据可视化项目，基于D3.js。能够将历史数据排名转化为动态柱状图图表。

先来看看效果：

https://xoyozo.net/Demo/BarGraph

作者 Jannchie 见齐还提供了官方视频教程：

https://www.bilibili.com/video/av28087807

不过由于开源项目的不断更新，该教程的部分内容已失效，本文针对 2018-12-25 版本总结了一些常用的配置说明，仅供参考。

从 GitHub 下载源代码，在 src 目录中可以看到 4 个文件：

bargraph.html --> 运行示例页面

config.js --> 配置文件

stylesheet.css --> 样式表

visual.js --> 核心文件

作者并没有将代码封装为插件的方式，所以我们是通过修改 config.js 配置文件的方式应用到自己的项目中的。

visual.js 虽然是核心文件，但作者将部分示例中的代码也包含其中，但并不影响我们直接在自己的项目中引用。

以下是 config.js 中的主要属性：

属性	说明	参考值
encoding	数据源（csv、json）等的文件编码	GBK / UTF-8 等
max_number	每个时间节点最多显示的条目数	10
showMessage	控制是否显示顶部附加信息文字	true / false
auto_sort	时间自动排序（详细含义、作用及限制见代码中注释）	true / false
timeFormat	时间格式，显示于图表右下角的时间	%Y、%Y-%M-%D 等
reverse	是否倒序	true / false
divide_by	类型根据什么字段区分？如果是 name，则关闭类型显示
divide_color_by	颜色根据什么字段区分？须要注意的是，如果配置成 name，则各条颜色不同（因为 name 值各异），如果配置成 type 等，那么相同 type 值的条颜色相同。	字段名
color	指定部分或所有条的颜色，该项与 divide_color_by 设置有关。	以 divide_color_by = 'name' 为例，"中国"是其中的一项 name 值，那么该项将显示 #D62728 色： color: { '中国': '#D62728' }
changeable_color	若 true 则颜色的深浅将根据数据的增长率实时改变
itemLabel	左边文字
typeLabel	右边文字
item_x
interval_time	时间点间隔时间	2
text_y
text_x
offset
display_barInfo	如果希望不显示，则可以设置较大的值，单位像素
use_counter
step
format	格式化数值
left_margin
right_margin
top_margin
bottom_margin
dateLabel_x
dateLabel_y
allow_up
enter_from_0
big_value
use_semilogarithmic_coordinate
long
wait	数据加载完成后开始播放前的等待时间	0
update_rate

xoyozo 6 年前

9,225

SSH (CentOS)

〓系统

功能	命令	--help	示例
关机	halt		halt
重启	reboot		reboot
系统监视器	top	系统时间, 运行天数, 当前登录用户数, 系统负载总进程数, 运行中的, 睡眠的, 停止的, 未响应的 Cpu(s):us 用户, sy 系统, ni XX, id 空闲, wa 等待, hi XX, si XX Mem, 已使用, 空余, 缓冲 Swap, 已使用, 空余, 缓冲快捷键： M 按占内存排序 P 按占Cpu排序 1 显示每个 Cpu k 杀死进程 q 退出	top
查看进程	ps	aux -ef	列出包含 java 的进程 ps aux \|grep java ps -ef \|grep java
查看内存及 Swap 用量	free	-b,-k,-m,-g 按单位显示	free -m
查看系统时间	date	显示 CST 时间 -R 显示时区 -u 显示 UTC 时间	date
查看硬件时间	clock		clock
设置系统日期			date -s 月/日/年
设置系统时间			date -s 时:分:秒
将系统时间写入到硬件时间			clock -w
查看系统版本			cat /etc/*release
升级系统软件			yum update -y

〓文件

功能	命令	--help	示例
进入目录	cd		cd .. # 上一层目录 cd /root # 根目录
列出目录	ls	白色：表示普通文件蓝色：表示目录绿色：表示可执行文件红色：表示压缩文件浅蓝色：链接文件红色闪烁：表示链接的文件有问题黄色：表示设备文件灰色：表示其他文件	ls
创建目录	mkdir		mkdir XXX
删除目录	rm		rm -rf XXX
删除文件	rm		rm XXX
复制文件	cp		cp XXX YYY
复制目录	cp	-r 复制目录及目录内的所有项目 -v 详细显示进行的步骤	cp -rv XXX YYY
重命名文件	mv	-i: 若指定目录已有同名文件，则先询问是否覆盖旧文件; -f: 在mv操作要覆盖某已有的目标文件时不给任何指示;	mv 源文件目标文件
移动文件	mv	-i: 若指定目录已有同名文件，则先询问是否覆盖旧文件; -f: 在mv操作要覆盖某已有的目标文件时不给任何指示;	mv 一个或多个文件目标目录
下载文件	wget	下载到当前目录	wget http://XXX.tar.gz
计算文件/目录的磁盘用量	du	-a 不仅显示目录，同时显示文件 -h 容易阅读方式显示 --max-depth=N 可指定计算深度	du -ah --max-depth=1 \| sort -n
查找文件	find		find /home -name *.apk

〓 tar

功能	命令	--help	示例
tar	tar	-z 是否压缩 -c 打包 -x 解包 -v 详细地列出处理的文件 -f	打包：tar -cvf abc.tar abc 解包：tar -xvf abc.tar 压缩打包：tar -zcvf abc.tar.gz abc 解压解包：tar -zxvf abc.tar.gz

〓磁盘

功能	命令	--help	示例
查看所有磁盘及分区	fdisk -l		fdisk -l
查看当前挂载	df	-h 按可阅读的方式打印数值和单位 -T 显示文件系统类型	df -hT
管理磁盘分区	fdisk /dev/***	进入后的操作说明： m 显示命令菜单 d 删除一个分区 n 创建一个分区（e 扩展分区；p 主分区） t 改变分区ID q 不保存退出 w 保存退出	fdisk /dev/vdb
格式化分区	mkfs.* /dev/*N		mkfs.xfs /dev/vdb1
挂载分区	mount /dev/*N /*		mount /dev/vdb1 /www
卸载分区	umount /dev/***N		umount /dev/vdb1
开机自动挂载	vi /etc/fstab	配置文档格式：设备挂载点文件系统类型 defaults 0 0	打开：vi /etc/fstab 配置：/dev/vdb1 /www xfs defaults 0 0

〓网络

功能	命令	--help	示例
查看 IP 配置	ifconfig		ifconfig
配置网卡 IP		配置文件目录：/etc/sysconfig/network-scripts/ 配置文件格式： DEVICE=eth0 / eth0:0 / ... # 在配置多线时若使用 cp 命令复制配置文件，必须修改此项以防止冲突 HWADDR=XX:XX:XX:XX:XX:XX # 网卡地址 TYPE=Ethernet # 以太网 UUID=******** ONBOOT=yes # 开机启动 NM_CONTROLLED=yes BOOTPROTO=static # 使用静态 IP IPADDR=192.168.1.2 # IP 地址 NETMASK=255.255.255.XXX # 子网掩码 GATEWAY=192.168.1.1 # 网关 DNS1=114.114.114.114 DNS2=8.8.8.8	vi ifcfg-XXXN(:N)
重启网卡		使配置生效	service network restart

〓防火墙

功能	命令	--help	示例
配置 iptables		添加需要允许的端口的方法同 22 端口	vi /etc/sysconfig/iptables
重启使配置生效			service iptables restart

〓用户/权限

功能	命令	--help	示例
添加用户	useradd	-g 组名 # 加入到该组 -s /bin/false #不允用户直接登录系统	useradd –g 组名用户名 -s /bin/false
修改密码	passwd		passwd 用户
查看所有用户			cut -d : -f 1 /etc/passwd
查看可以登录系统的用户			cat /etc/passwd \| grep -v /sbin/nologin \| cut -d : -f 1
删除用户		-r, --remove remove home directory and mail spool	userdel 用户
添加用户组	groupadd		groupadd 组名
为组添加用户（用户必须已存在）	gpasswd		gpasswd -a 用户组
将用户移出组	gpasswd		gpasswd -d 用户组
查看用户所属组	groups		groups 用户
查看组中有哪些用户	groupmems		groupmems -g 组 -l
更改文件/目录所有者	chown	-R 递归处理所有的文件及子目录	chown -R 用户:组 ***
更改文件/目录权限	chmod	-R 以递归方式更改所有的文件及子目录	chmod -R 777 ***

〓 vi 编辑器

功能	命令	--help	示例
打开文件	vi		vi XXX
进入编辑模式		按 a/i/o/Insert 等
进入末行模式/命令模式		按 Esc后： :w 保存不退出 :q 退出（提示是否保存） :wq 保存并退出 :w XXX 另存到文件 XXX :q! 不保存退出

〓计划任务

功能	命令	--help	示例
设置计划任务	crontab	详细步骤见本页底部	crontab -l # 查看计划任务 crontab -e # 编辑计划任务

〓网站

功能	命令	--help	示例
简单审查日志	cat \| grep		cat 日志文件 \| grep 关键词1 \| grep 关键词2 \| more
日志分析	goaccess		见下文

〓 goaccess

功能	命令	--help	示例
安装	yum install goaccess
日志格式	NCSA Commbined Log Format		date_format %d/%b/%Y log_format %h %^[%d:%^] "%r" %s %b "%R" "%u"
参数	-f	需要解析的日志文件
参数	-e	指定 IP 地址统计
参数	-p	指定配置文件	可以将上面的日志格式内容保存到文件 ~/.goacessrc
参数	-H	显示 HTTP 协议信息
参数	-M	显示 HTTP 方法信息
生成文件			goaccess -f 日志文件 -p ~/.goaccessrc > 目标文件.htm

〓 lnmp

功能	--help	示例
重启 LNMP		/root/lnmp restart
重启 MySQL		/etc/init.d/mysql restart
重启 PureFTPd		/root/pureftpd restart
安装 LNMP	http://lnmp.org/install.html
常见问题	http://lnmp.org/faq.html
状态管理命令	http://lnmp.org/faq/lnmp-status-manager.html
相关软件目录及文件位置	http://lnmp.org/faq/lnmp-software-list.html
防跨站、跨目录安全设置（仅支持 PHP 5.3.3 以上版本）	http://www.vpser.net/security/lnmp-cross-site-corss-dir-security.html
查看 Nginx 版本		nginx -V
查看 MySQL 版本		mysql -V
查看 PNP 版本		php -v
查看 Apache 版本		httpd -v
查内存		cat /proc/meminfo
php.ini		vim /usr/local/php/etc/php.ini
MySQL 配置文件		vim /etc/my.cnf
添加网站		/root/vhost.sh
添加 ProFTPd 用户		/root/proftpd_vhost.sh

〓 nginx

功能	命令	--help	示例
启动/停止/重启	service nginx 或 /etc/rc.d/init.d/nginx		service nginx start service nginx stop service nginx restart
伪静态	在 .conf 文件中配置		rewrite ^(.)/read-htm-(.)\.html(.)$ $1/read.php?$2.html? last; rewrite ^(.)/thread-htm-(.)\.html(.)$ $1/thread.php?$2.html? last; rewrite ^(.)-htm-(.)$ $1.php?$2 last; rewrite ^(.)/simple/([a-z0-9\_]+\.html)$ $1/simple/index.php?$2 last; rewrite ^(.)/data/(.)\.(htm\|php)$ 404.html last; rewrite ^(.)/attachment/(.)\.(htm\|php)$ 404.html last; rewrite ^(.)/html/(.*)\.(htm\|php)$ 404.html last;
防盗链	在 .conf 文件中配置	HttpRefererModule	location ~* \.(gif\|jpg\|png\|swf\|flv)$ { valid_referers none blocked .0574bbs.com .eyuyao.com 0574bbs.com eyuyao.com; if ($invalid_referer) { rewrite ^/ http://web1.eyuyao.com/yyad/src/3122.jpg; # return 404; } }
浏览器缓存	在 .conf 文件中配置		location ~ .*\.(gif\|jpg\|jpeg\|png\|bmp\|swf)$ { expires 30d; }

〓 vsftpd

功能	命令	示例
安装		yum install vsftpd
查看是否已安装		rpm -q vsftpd
启动/停止/重启	service vsftpd	service vsftpd start service vsftpd stop service vsftpd restart
配置文件		vi /etc/vsftpd/vsftpd.conf

〓 MySQL

功能	命令	示例
登录	mysql	mysql -u username -p
登出		exit
查看信息		status;
查询当前正在执行的 SQL 语句		show processlist;
删除指定时间之前的日志	PURGE	PURGE MASTER LOGS BEFORE '2015-1-1 0:00:00';

〓 scp 远程文件/目录传输命令 (yum install openssh-clients) 用法

scp 会把文件权限（读取/写入/执行）带过来，但所有者为当前执行 scp 命令的用户。

scp 低版本有许多漏洞，用完最好 yum remove openssh-clients

scp 采用直接覆盖的机制，如需判断文件无差异则跳过，应改用 rsync 命令。查看 rsync 详细使用方式及与 scp 对比

功能	命令	--help	示例
若远程服务器 SSH 端口非默认	scp	-P 端口号
下载远程服务器上的文件到本地	scp		scp 远程用户@远程服务器:远程文件本地文件
下载远程服务器上的目录到本地	scp	-P 端口 -v 显示进度 -r 递归	scp -r 远程用户@远程服务器:远程目录本地目录实例：scp -r root@x.x.x.x:/a/b/ /c/d/ 结果：/c/d/b/，即将整个 b 复制到 d 下（注意与 rsync 命令的区别）
将本地文件上传到远程服务器	scp		scp 本地文件远程用户@远程服务器:远程文件
将本地目录上传到远程服务器	scp	最终目录结构参：远程->本地	scp -r 本地目录远程用户@远程服务器:远程目录

〓 rsync 远程文件/目录传输命令 (yum install rsync) 用法 查看 rsync 详细使用方式及与 scp 对比

rsync 会把文件权限（读取/写入/执行）带过来，所有者也会带过来。

相比于 scp 最大的优势就是可以增量同步

功能	命令	--help	示例
下载远程服务器上的目录到本地	rsync	-a 递归 -v 详细 -p, -- perms 保持权限 -g, -- group 保持属组 -o, --owner 保持属主 -r 递归 --progress 打印 --delete 删除已不存在的文件 -u 表示仅更新较新的文件 -z 表示在传输过程中进行压缩 -e 'ssh -p 2222' 指定其它端口	rsync 远程用户@远程服务器:远程目录本地目录实例：rsync -avu --progress root@x.x.x.x:/a/b/ /c/d/ 结果：/c/d/，即将 b 内的文件(夹)复制到 d 下（注意与 scp 命令的区别）
将本地文件上传到远程服务器	rsync		rsync 本地文件远程用户@远程服务器:远程文件
将本地目录上传到远程服务器	rsync	最终目录结构参：远程->本地	rsync 本地目录远程用户@远程服务器:远程目录

功能

命令

--help

示例

下载远程服务器上的目录到本地

rsync

-a 递归

-v 详细

-p, -- perms 保持权限

-g, -- group 保持属组

-o, --owner 保持属主

-r 递归

--progress 打印

--delete 删除已不存在的文件

-u 表示仅更新较新的文件

-z 表示在传输过程中进行压缩

-e 'ssh -p 2222' 指定其它端口

rsync 远程用户@远程服务器:远程目录本地目录

实例：rsync -avu --progress root@x.x.x.x:/a/b/ /c/d/

结果：/c/d/，即将 b 内的文件(夹)复制到 d 下（注意与 scp 命令的区别）

将本地文件上传到远程服务器

rsync

rsync 本地文件远程用户@远程服务器:远程文件

将本地目录上传到远程服务器

rsync

最终目录结构参：远程->本地

rsync 本地目录远程用户@远程服务器:远程目录

〓 ftp 客户端 (yum install ftp)

功能	命令	--help	示例
登录	ftp		ftp 目标服务器
列出远程当前路径目录/文件	ls		ls
创建远程目录	mkdir		mkdir 目录名
删除远程目录（空）	rmrmdir		mkdir 目录名
进入远程目录	cd		cd 目录名
显示远程当前路径	pwd		pwd
重命名远程文件	rename		rename 原文件名新文件名
上传文件	put		put 本地文件名
下载文件	get		get 远程文件名
批量下载文件	mget	需要单个确认
批量下载文件【lftp】	mirror	参数有很多	mirror
返回 shell（不退出）	!		!
返回 ftp（接上步）	exit ftp		exit ftp
结束	bye quit		bye quit

〓 iftop

流量监控工具教程

〓 GoAccess

实时网站日志分析工具官网

〓 Cacti

网络流量监测图形分析工具官网百科

常见问题笔记

加硬盘

插入新硬盘
若有 RAID，则先设置，使操作系统能认到硬盘
使用 fdisk 命令对新设备进行分区
使用 mkfs 命令对新分区进行格式化
使用 mount 命令进行挂载
设置开机自动挂载（vi /etc/fstab）

更改 MySQL 数据库目录位置

停止 MySQL 服务
将原数据目录转移或复制到新位置（若是复制，则修改所有者使原来一致）
找到 my.cnf 配置文件（一般在 /etc/），修改 datadir 值为新路径
启动 MySQL 服务

502 Bad Gateway 问题排查

查看 PHP 日志，路径：/usr/local/php/var/log
一般为“server reached pm.max_children setting (10), consider raising it”连接数问题，在“/usr/local/php/etc”下的所有配置文件中查找并修改相关设置即可（如改成 1000）。

计划任务（实例：定时备份数据库并通过 FTP 同步至其它服务器）

创建可执行文件：vi dotask.sh
dotask.sh 的内容示例：
DATE_TIME=`date +%Y_%m_%d_%H%M%S`;
FILE_NAME=数据库名_backup_$DATE_TIME.sql;
cd /home/mysqlbackup/;
mysqldump -u数据库用户名 -p数据库密码数据库名>$FILE_NAME;
tar -zcf $FILE_NAME.tar.gz $FILE_NAME;
rm $FILE_NAME;

ftp -v -n FTP地址 << END
user FTP用户名 FTP密码
bin
put 本地目录文件目标路径文件
bye
END

文件名乱码问题可以在行末加“;”来解决
赋予执行权限：chmod 777 dotask.sh （ls 命令时呈绿色）
编辑计划任务：crontab -e
crontab 书写规则：
# 分时日月周文件路径
0 3 * * * /home/dotask.sh
30 4 * * * /home/dotask2.sh

更多帮助
重启 crond：/etc/init.d/crond restart

netstat

netstat -an | grep xxx.xxx.xxx.xxx 可查看此 IP 的 TCP 请求及端口

xoyozo 6 年前

6,289

ASP.NET Web API 使用笔记

本文不定时更新中……

具备 RESTful 相关知识会更有利于学习 ASP.NET Web API：RESTful API 学习笔记

ASP.NET Web API 官网：https://www.asp.net/web-api

服务 URI Pattern

Action	Http verb	URI	说明
Get contact list	GET	/api/contacts	列表
Get filtered contacts	GET	/api/contacts?$top=2	筛选列表
Get contact by ID	GET	/api/contacts/id	获取一项
Create new contact	POST	/api/contacts	增加一项
Update a contact	PUT	/api/contacts/id	修改一项
Delete a contact	DELETE	/api/contacts/id	删除一项

返回类型	Web API 创建响应的方式
void	返回空 204 （无内容）
HttpResponseMessage	转换为直接 HTTP 响应消息。
IHttpActionResult	调用 ExecuteAsync 来创建 HttpResponseMessage，然后将转换为 HTTP 响应消息。
其他类型	将序列化的返回值写入到响应正文中;返回 200 （正常）。

HttpResponseMessage

可提供大量控制的响应消息。例如，以下控制器操作设置的缓存控制标头。

public class ValuesController : ApiController
{
    public HttpResponseMessage Get()
    {
        HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK, "value");
        response.Content = new StringContent("hello", Encoding.Unicode);
        response.Headers.CacheControl = new CacheControlHeaderValue()
        {
            MaxAge = TimeSpan.FromMinutes(20)
        };
        return response;
    } 
}

IHttpActionResult

public IHttpActionResult Get (int id)
{
    Product product = _repository.Get (id);
    if (product == null)
    {
        return NotFound(); // Returns a NotFoundResult
    }
    return Ok(product);  // Returns an OkNegotiatedContentResult
}

其他的返回类型

响应状态代码为 200 （正常）。此方法的缺点是，不能直接返回错误代码，如 404。但是，您可以触发 HttpResponseException 的错误代码。

完善 Help 页

一般都是通过元数据注释（Metadata Annotations）来实现的描述的。

显示接口和属性的描述：

打开 HelpPage 区域的 App_Start 目录下的 HelpPageConfig.cs 文件，在 Register 方法的首行取消注释行：

config.SetDocumentationProvider(new XmlDocumentationProvider(HttpContext.Current.Server.MapPath("~/App_Data/XmlDocument.xml")));

在项目右键属性“生成”页，勾选“XML 文档文件”，并填写与上述一致的路径（App_Data/XmlDocument.xml）。

给接口加上 ResponseType 显示响应描述和示例：[ResponseType(typeof(TEntity))]

在实体模型的属性上加入 RequiredAttribute 特性可提供请求或响应中的实体的属性描述，如：[Required]

推荐使用：Swashbuckle

关于格式

在 WebApiConfig.Register() 中加入以下代码以禁止以 XML 格式输出（请按需设置）：

GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();

Json 序列化去掉 k__BackingField

GlobalConfiguration.Configuration.Formatters.JsonFormatter.SerializerSettings.ContractResolver = new Newtonsoft.Json.Serialization.DefaultContractResolver { IgnoreSerializableAttribute = true };

如果属性值为 null 则不序列化该属性

config.Formatters.JsonFormatter.SerializerSettings = new JsonSerializerSettings { NullValueHandling = NullValueHandling.Ignore };

xoyozo 6 年前

4,386

使用 jQuery UI 的 sortable 对数据项进行拖拽排序（ASP.NET MVC 示例）

制作类似下图中的拖拽排序功能：

1. 首先数据库该表中添加字段 sort，类型为 double（MySQL 中为 double(0, 0)）。

2. 页面输出绑定数据（以 ASP.NET MVC 控制器为例）：

public ActionResult EditSort()
{
    if (!zConsole.Logined) { return RedirectToAction("", "SignIn", new { redirect = Request.Url.OriginalString }); }

    db_auto2018Entities db = new db_auto2018Entities();

    return View(db.dt_dealer.Where(c => c.enabled).OrderBy(c => c.sort));
}

这里可以加条件列出，即示例中 enabled == true 的数据。

3. 前台页面引用 jQuery 和 jQuery UI。

4. 使用 <ul /> 列出数据：

<ul id="sortable" class="list-group gutter list-group-lg list-group-sp">
    @foreach (var d in Model)
    {
        <li class="list-group-item" draggable="true" data-id="@d.id">
            <span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
            <div class="clear">
                【id=@d.id】@d.name_full
            </div>
        </li>
    }
</ul>

5. 初始化 sortable，当拖拽结束时保存次序：

<script>
    var url_SaveSort = '@Url.Action("SaveSort")';
</script>
<script>
    $("#sortable").sortable({
        stop: function (event, ui) {
            // console.log('index: ' + $(ui.item).index())
            // console.log('id: ' + $(ui.item).data('id'))
            // console.log('prev_id: ' + $(ui.item).prev().data('id'))
            $.post(url_SaveSort, {
                id: $(ui.item).data('id'),
                prev_id: $(ui.item).prev().data('id')
            }, function (json) {
                if (json.result.success) {
                    // window.location.reload();
                } else {
                    toastr["error"](json.result.info);
                }
            }, 'json');
        }
    });
    $("#sortable").disableSelection();
</script>

这里回传到服务端的参数为：当前项的 id 值、拖拽后其前面一项的 prev_id 值（若移至首项则 prev_id 为 undefined）。

不使用 $(ui.item).index() 是因为，在有筛选条件的结果集中排序时，使用该索引值配合 LINQ 的 .Skip 会引起取值错误。

6. 控制器接收并保存至数据库：

[HttpPost]
public ActionResult SaveSort(int id, int? prev_id)
{
    if (!zConsole.Logined)
    {
        return Json(new { result = new { success = false, msg = "请登录后重试！" } }, JsonRequestBehavior.AllowGet);
    }

    db_auto2018Entities db = new db_auto2018Entities();

    dt_dealer d = db.dt_dealer.Find(id);

    // 拖拽后其前项 sort 值（若无则 null）（此处不需要加 enabled 等筛选条件）
    double? prev_sort = prev_id.HasValue
        ? db.dt_dealer.Where(c => c.id == prev_id).Select(c => c.sort).Single()
        : null as double?;

    // 拖拽后其后项 sort 值（若无前项则取首项作为后项）（必须强制转化为 double?，否则无后项时会返回 0，导致逻辑错误）
    double? next_sort = prev_id.HasValue
        ? db.dt_dealer.Where(c => c.sort > prev_sort && c.id != id).OrderBy(c => c.sort).Select(c => (double?)c.sort).FirstOrDefault()
        : db.dt_dealer.Where(c => c.id != id).OrderBy(c => c.sort).Select(c => (double?)c.sort).FirstOrDefault();

    if (prev_sort.HasValue && next_sort.HasValue)
    {
        d.sort = (prev_sort.Value + next_sort.Value) / 2;
    }
    if (prev_sort == null && next_sort.HasValue)
    {
        d.sort = next_sort.Value - 1;
    }
    if (prev_sort.HasValue && next_sort == null)
    {
        d.sort = prev_sort.Value + 1;
    }

    db.SaveChanges();

    return Json(new { item = new { id = d.id }, result = new { success = true } });
}

需要注意的是，当往数据库添加新项时，必须将 sort 值设置为已存在的最大 sort 值 +1 或最小 sort 值 -1。

var d = new dt_dealer
{
    name_full = "新建项",
    sort = (db.dt_dealer.Max(c => (double?)c.sort) ?? 0) + 1,
};

xoyozo 6 年前

6,486

1 2 3 4 5

〓系统

〓文件

〓 tar

〓磁盘

〓网络

〓防火墙

〓用户/权限

〓 vi 编辑器

〓计划任务

〓网站

〓 goaccess

〓 lnmp

〓 nginx

〓 vsftpd

〓 MySQL

〓 scp 远程文件/目录传输命令 (yum install openssh-clients) 用法

〓 rsync 远程文件/目录传输命令 (yum install rsync) 用法 查看 rsync 详细使用方式及与 scp 对比

〓 ftp 客户端 (yum install ftp)

〓 iftop

〓 GoAccess

〓 Cacti

常见问题笔记

加硬盘

更改 MySQL 数据库目录位置

502 Bad Gateway 问题排查

计划任务（实例：定时备份数据库并通过 FTP 同步至其它服务器）

netstat

服务 URI Pattern

完善 Help 页

关于格式

大家在看

最新发布

查询 / 检测

编程

前端

行业

本站 API

博客 (64)

〓 系统

〓 文件

〓 tar

〓 磁盘

〓 网络

〓 防火墙

〓 用户/权限

〓 vi 编辑器

〓 计划任务

〓 网站

〓 goaccess

〓 lnmp

〓 nginx

〓 vsftpd

〓 MySQL

〓 scp 远程文件/目录传输命令 (yum install openssh-clients) 用法

〓 rsync 远程文件/目录传输命令 (yum install rsync) 用法查看 rsync 详细使用方式及与 scp 对比

〓 ftp 客户端 (yum install ftp)

〓 iftop

〓 GoAccess

〓 Cacti

常见问题笔记

加硬盘

更改 MySQL 数据库目录位置

502 Bad Gateway 问题排查

计划任务（实例：定时备份数据库并通过 FTP 同步至其它服务器）

netstat

服务 URI Pattern

完善 Help 页

关于格式

大家在看

最新发布

〓系统

〓文件

〓磁盘

〓网络

〓防火墙

〓用户/权限

〓计划任务

〓网站