博客 (19)

这是一篇可能解决困扰了 .NET 程序猿多年的文章!

首先,使用 Visual Studio 2019 创建一个 ASP.NET WEB 应用程序,直接选用了 MVC 模板。

直接发布项目,默认的设置如下图:

image.png

对于小型项目,按默认设置发布基本可满足正常运行,首次运行打开第一个页面基本在 5~6 秒(视服务器配置),其它页面的首次打开也基本在 1~2 秒完成,非首次瞬间打开。

一旦项目功能变得复杂,文件增多,会导致发布后首次运行打开第一个页面 30 秒以上,其它页面的首次打开 10 秒左右,非首次瞬间打开。

这是因为项目在发布时没有进行预编译,而是在用户访问网页时动态编译,一旦应用程序池回收,或项目文件改动,都会重新编译,再次经历缓慢的“第一次”,这是不能忍的。

于是咱们来研究一下“预编译”。

在发布页面勾选“在发布期间预编译”,这时发布会在“输出”窗口显示正在执行编译命令(编译时间会比较长):

image.png

该选项对发布后的文件结构和内容影响不大,因此对首次执行效率的提升也不大,重要的在后面。

在“高级预编译设置”窗口中:

image.png

我们针对预编译选项和合并选项分别做测试。

不勾选“允许更新预编译站点”,会致 bin 目录中生成许多 .compiled 文件,而所有 .cshtml 文件的内容都是:

这是预编译工具生成的标记文件,不应删除!

如果是 Web From 网站,.aspx/.ashx 等文件内容同上。

尝试打开网站页面,你会发现,除了项目启动后的第一个页面仍然需要 1~2 秒(无 EF),其余每个页面的首次都是瞬间打开的(EF 的首次慢不在本文讨论范围)。这让我对预编译有一种相见恨晚的感觉!

这里偷偷地告诉你,把 Views 目录删掉也不影响网页正常打开哦~为什么不让删,咱也不敢问,咱也不敢删。

目的达到了,有一些后遗症需要解决,比如 bin 目录内杂乱无章。

选“不合并。为每个页面和控件创建单独的程序集”,结果是 bin 多出许多 App_Web_*.dll 文件。

选“将所有输出合并到单个程序集”,填写程序集名称。这时会发现“输出”窗口执行了命令:

image.png

如果程序集名称跟已有名称冲突,会发生错误:

合并程序集时出错: ILMerge.Merge: The target assembly '******' lists itself as an external reference.

查看 bin 目录,.compiled 文件还在,但 App_Web_*.dll 合并成了一个程序集。FTP 的“不合并”也是把所有 App_Web_*.dll 上传一遍,所以不存在相对于“合并”的增量发布优势。

是不是勾了“视为库组件删除(AppCode.compiled 文件)”.compiled 文件就会不见?意外之外,情理之中,bin 没有什么变化。

继续选择“将各个文件夹输出合并到其自己的程序集”,呃,bin 中文件数不降反增。

最后选择“将所有页和控件输出合并到单个程序集”,同样程序集名称不能冲突。结局令人失望,bin 中仍然一大堆 .compiled 和 App_Web_*.dll。


整理成表格:

1
允许更新预编译站点

aspnet_compiler.exe -v / -p \Source -u \TempBuildDir 

重复发布后 bin 目录文件数:不会增多(页面不进行预编译)

2

不允许更新预编译站点,不合并

aspnet_compiler.exe -v / -p \Source \TempBuildDir 

重复发布后 bin 目录文件数:.compiled 不会增多,App_Web_*.dll 增多

3

不允许更新预编译站点,不合并。为每个页面和控件创建单独的程序集

aspnet_compiler.exe -v / -p \Source -c -fixednames \TempBuildDir 

重复发布后 bin 目录文件数:不会增多(编译后的文件名固定,FTP 方式的部分 App_Web_*.dll 文件可能实现增量上传)

4

不允许更新预编译站点,将所有输出合并到单个程序集,不勾选“视为库组件”

aspnet_compiler.exe -v / -p \Source -c \TempBuildDir 

aspnet_merge.exe \TempBuildDir -o 程序集名称 -copyattrs AssemblyInfo.dll -a

重复发布后 bin 目录文件数:不会增多(.compiled 固定名称,App_Web_*.dll 合并为一个)

5

不允许更新预编译站点,将所有输出合并到单个程序集,勾选“视为库组件”

aspnet_compiler.exe -v / -p \Source \TempBuildDir 

aspnet_merge.exe \TempBuildDir -o 程序集名称 -copyattrs AssemblyInfo.dll -a -r 

重复发布后 bin 目录文件数:不会增多(.compiled 固定名称,App_Web_*.dll 合并为一个)

6

不允许更新预编译站点,将每个文件夹输出合并到其自己的程序集,前缀

aspnet_compiler.exe -v / -p \Source -c \TempBuildDir 

aspnet_merge.exe \TempBuildDir -prefix 前缀 -copyattrs AssemblyInfo.dll -a  

重复发布后 bin 目录文件数:.compiled 不会增多,App_Web_*.dll 增多

7

不允许更新预编译站点,将所有页和控件输出合并到单个程序集

aspnet_compiler.exe -v / -p \Source -c \TempBuildDir 

aspnet_merge.exe \TempBuildDir -w 程序集名称 -copyattrs AssemblyInfo.dll -a  

重复发布后 bin 目录文件数:.compiled 不会增多,App_Web_*.dll 增多

bin 目录下,页面的程序集文件(App_Web_*.dll)增多的原因是编译后的文件名不固定,发布到会导致残留许多无用的程序集文件。

相比较,如果第 3 种能实现 FTP 稳定的增量上传的话是比较完美的(还有一个缺点是:如果页面有删除,目标 bin 内对应该页面的 .compiled 和 .dll 不会删除,这跟“允许更新预编译站点”是一个情况),那么第 4 种 或第 5 种也是不错的选择(同样有缺点:执行合并比较慢)。

测试一个有 300 个页面的项目,compiler 用时约 2 分钟,merge 用时约 5 分钟,发布用时约 4 分钟。

这里有个槽点,执行预编译和合并是佛系的,CPU 和磁盘使用率永远保持在最低水平。

所以如果是要经常修改的项目,那么建议选择“不合并”的第 3 种发布方式:

微信图片_20190715160035.png

“视为库组件(删除 AppCode.compiled 文件)”:移除主代码程序集(App_Code 文件夹中的代码)的 .compiled 文件。 如果应用程序包含对主代码程序集的显式类型引用,则不要使用此选项。


补充:

  • 不允许更新预编译站点发布后,因为前端页面没有内容,因此无法单独修改发布(单独发布一个页面后,在访问时不会生效!),只能全站发布,耗时较长;bin 目录有变动将导致使用 InProc 方式存储的 Session 丢失。

  • 预编译的另一个优点是可以检查 .aspx / .cshtml 页面 C# 部分的错误(特别是命名空间和路径引用)。

  • 改为预编译发布后,可以将服务器上残留的 .master / .ascx / .asax 删除,但不能删除 .aspx / .ashx /.config 等。

  • VS 发布到 FTP 经常会遗漏一些页面文件,不合并时会遗漏独立文件,合并后也会遗漏合并后的 .dll 的文件,合并的好处就是方便检查是否完全上传发布。

  • 慎选“在发布前删除所有现有文件”!一旦勾选发布,世界就清静了,所有网友上传的图片附件以及网站运行产生的其它文件,消失得无影无踪。不管发布到文件系统还是发布到 FTP 都一样。当然,如果是先发布到文件系统,再通过 FileZilla 等 FTP 软件上传到服务器的,建议勾选此项。

  • .NET Core 应用程序部署:https://docs.microsoft.com/zh-cn/dotnet/core/deploying/index

  • 由于上传文件时 bin 目录文件较多,理论上 bin 目录内的文件有任何改动都会重启应用池,而且 VS 是单线程上传的,导致期间网站访问缓慢,服务器 CPU 升高,我的做法是:发布到文件系统,再使用专用 FTP 工具上传,上传用时约半分钟(如果大小不同或源文件较新则覆盖文件)。还嫌慢?那就打包上传,解压覆盖。

  • 关于本文研究对象的官方解释:高级预编译设置对话框

  • 出现“未能加载文件或程序集“***”或它的某一个依赖项。试图加载格式不正确的程序。”的问题时,先用改用 Debug 方式发布会报详细错误,一般是 .aspx 等客户端页面有 C# 语法问题,注意提示报错的是 /obj/ 目录下的克隆文件,应更改原文件。排除错误后关闭所有页面,再使用 Release 方式发布。

xoyozo 6 年前
11,061

Font Awesome 从 5.0 版本开始,在保持经典的 Web Fonts with CSS 外,还提供更现代化,功能更强大的 SVG with JS 部署方式。


升级为 SVG with JS 后,如果部分图标不显示,可能的原因是:

· 部分在老版本中的图标不再 5.0 版本上提供,解决的方法是引用 fa-v4-shims.js;

· 此方式把 <i /> 标签通过 JS 替换为 <svg /> 标签,须要改动 CSS 样式。


如果仍然使用 Web Fonts with CSS,部分图标不显示,可能的原因是:

· 新版本不再推荐以 fa 的 class 引用,对 Solid(实心)、Regular(标准)、Light(简洁)、Brands(品牌)四大分类分别使用新的命名方式:fas、far、fal、fab。具体可以在 Font Awesome 官网上找到相应图标后,点击打开图标详情,复制已经生成的 HTML 代码。fa 将被视为 fas。

xoyozo 6 年前
7,059

Session 有多种存储模式,默认是 InProc,顾名思义是“在进程内”,即在 IIS 中,随网站重启而重启,网站发布后(或改动 .dll 文件)会导致应用重新运行,Session 清空。

Session 可以使用 StateServer 来保存,需要服务器开启 ASP.NET State Service 服务,此种方式要求保存在 Session 的信息必须序列化,然后从 Session 中获取的时候也要反序列化,这就导致性能有略微的损失。

Session 还可以配置为 SQLServer,将 Session 存储在数据库中,同样需要序列化。

当配置为 Custom 时,可以在使用 Memcached、Redis 等第三方缓存技术来实现 Session 的管理,本文不作讨论。

Off 模式即关闭 Session,这种方式如果要实现用户登录功能,就必须依赖 Cookie 等来实现。

下面针对常见的三种模式进行比较:


InProcStateServerSQLServer
存储位置应用进程内ASP.NET State Service 服务SQL Server 数据库
远程存储不支持支持支持
存储格式
任意序列化的序列化的
可能导致重启(丢失)的情况

配置文件中 processModel 标签的 memoryLimit 属性;

Global.asax 或者 Web.config 文件被更改;

Bin 文件夹中的 Web 程序(DLL)被修改;

杀毒软件扫描了一些 .config 文件;

系统资源紧张进行资源回收导致 IIS 进程崩溃或重启等。

ASP.NET State Service 服务停止;-
Session_End() 事件
部署难度简单稍复杂

Web.config 配置示例

(<system.web> 节点内)

<sessionState mode="InProc" /><sessionState mode="StateServer" /><sessionState mode="SQLServer" sqlConnectionString ="data source=x.x.x.x; user id=[user]; password=[pwd]" />

因此,如果你仅仅为了标题所述的“每次发布后丢失 Session”而烦恼,那么推荐使用 StateServer 模式来存储 Session。


注:

如果 Session 的 Key 是在应用启动时随机生成的话,使用 StateServer 和 SQLServer 还是会“丢失” Session。

这是对 Session 的配置,对 Cache 无效。

xoyozo 7 年前
4,814

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

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

插件简介备注
框架
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,585

了解使用 Visual Studio 创建的模板项目

启动 VS,从菜单项打开:文件 - 新建 - 项目,在已安装的模板中选择 .NET Core,选择 ASP.NET Core Web Application(.NET Core),给项目取个名称,确定。选择 Web 应用程序,确定。

· global.json: 你可以在这里放置解决方案的配置信息和工程之间的引用。作用类似于 *.sln 文件。

· Program.cs: 这个文件包含了 ASP.NET Core 应用的 Main 方法,负责配置和启动应用程序。

· src 文件夹: 包含组成你应用程序的全部项目代码。

· wwwroot: 你的静态文件将被放置在这个文件夹,它们都将作为资源直接提供给客户端,包含 HTML,CSS 和 JavaScript 文件。可以在 project.json 内重置。

· project.json: 包含项目设置。在 ASP.NET Core 中,你可以通过使用 NuGet 程序包管理工具(NPM)添加 NuGet 包或者编辑这个文件来管理从属。

· project.lock.json: 由 project.json 生成。

· Startup.cs 这个主要放置你 ASP.NET Core 的 stratup 和 configuration 代码。ConfigureServices 方法定义了你应用程序使用的服务,Configure 方法用来定义组成请求管道的中间件。

一些备注:

ASP.NET Core 项目中不能创建 Web 窗体页面(.aspx)

发布后的网站根目录是项目中的 /wwwroot 目录

路由在 Startup 的 Configure 方法中配置

xoyozo 8 年前
6,451

上一篇介绍了如何创建用于 https 的 SSL 证书,本文讲述如何将创建好的 SSL 证书导入到 Windows,并在 IIS 中部署 HPPTS 的访问。

 

导入证书

GetSSL 整理的安装方法合集:https://www.getssl.cn/support/ssl安装教程/

下面介绍另一种方法:

准备好 pfx 格式的证书和密码。

开始 -> 运行 -> MMC

点击菜单栏的“添加/删除管理单元”,选择证书,添加,“本地计算机”或“计算机帐户”

左侧展开证书个人,右键,所有任务,导入,键入密码,选择“根据证书类型,自动选择证书存储

 

绑定网站域名

打开 IIS 管理器,选择相应的网站,“绑定”,添加,类型为“https”,选择证书

这样网站就能以 https:// 方式访问了

 

实现 http 自动跳转 https

方案一:推荐

打开 ASP.NET 网站,如果没有 Global.asax 则添加全局应用程序类

在 Application_BeginRequest() 方法中添加以下代码:

if (!Request.IsLocal && !Request.IsSecureConnection)
{
    if (Request.HttpMethod == System.Net.WebRequestMethods.Http.Get || Request.HttpMethod == System.Net.WebRequestMethods.Http.Head)
    {
        Uri uri = Request.Url;
        Response.Redirect("https://" + uri.Authority + uri.PathAndQuery + uri.Fragment);
        HttpContext.Current.ApplicationInstance.CompleteRequest();
    }
}

Response.RedirectPermanent 是 301 永久

Response.Redirect 是 302 临时

Webform 貌似没有 303、307 的 Redirect,可以判断 Method 来分别处理。

MVC 中可以直接指定状态码,例:

public ActionResult About()    
{    
    HttpContext.Response.AddHeader("Location", "/Home/Contact");
    return new HttpStatusCodeResult(307);
}


方案二:

需要“URL 重写”支持,以 IIS 7 为例,模块下载地址:x86 / x64,IIS 8 及以上版本自带该模块

打开“URL 重写”,添加规则,选择空白规则

填写名称,如“Redirect to HTTPS

与模式匹配正则表达式

模式:(.*)

添加两个条件:

条件输入“{HTTPS}”,“与模式匹配”,模式“^OFF$”,确定

条件输入“{HTTPS_HOST}”,“与模式匹配”,模式“^(localhost)”,确定

操作类型“重定向”,

重定向 URL“https://{HTTP_HOST}/{R:1}

重定向类型:请参考此文,所有请求跳转可选 303,仅 GET/HEAD 请求跳转可选 307(推荐,可防止 POST 请求跳转丢失数据)

这么多步骤,其实最终会在网站 web.config 的 <system.webServer /> 节点下插入以下配置:

<rewrite>
  <rules>
    <rule name="Redirect to HTTPS" enabled="true" stopProcessing="true">
      <match url="(.*)"/>
      <conditions>
        <add input="{HTTPS}" pattern="^OFF$"/>
        <add input="{HTTPS_HOST}" pattern="^(localhost)" negate="true"/>
      </conditions>
      <action type="Redirect" url="https://{HTTP_HOST}/{R:1}" redirectType="Temporary"/>
    </rule>
  </rules>
</rewrite>

 

配置 Web.Release.config 转换语法


作为 ASP.NET 开发者,我们发现,当我们把这段 URL 重写规则复制到项目中的 web.config 后,在 VS 的本地调试中同样会自动跳转到 https://localhost/xxx,这可没法调试了呀。所以只能用 Web.Release.config 来实现本地调试用 http,发布用 https。

<system.webServer /> 节点是针对 IIS 7 的配置,干脆我把整个 <system.webServer /> 从 web.config 剪切到 web.release.config 中,然后给 <system.webServer> 加上属性和值:xdt:Transform="Insert",这样就能实现我们的目的了

详细的用于 Web 应用程序项目部署的 Web.config 转换语法参见此文

验证

最后我们来检查一下配置的对不对:https://www.geocerts.com/ssl_checker

参考资料

IIS 7 如何实现 http 重定向 https

 

扩展阅读

在 nginx 中部署 SSL

安装 SSL 证书遇到的一些问题


xoyozo 8 年前
5,540

在开发微信中的网页时,会遇到一些域名相关的配置:

① 公众号设置 - 功能设置 - 业务域名
② 公众号设置 - 功能设置 - JS接口安全域名
③ 接口权限 - 网页授权获取用户基本信息
④ 商户平台 - 产品中心 - 开发配置 - JSAPI支付授权目录
⑤ 小程序 - 开发 - 开发设置 - 业务域名
⑥ 公众号开发 - 基本设置 - IP白名单

 

第①种 业务域名:相对不重要,只是用来禁止显示“防欺诈盗号,请勿支付或输入qq密码”提示框,可配置 3 个二级或二级以上域名(个人理解是“非顶级域名”,即填写了 b.a.com 的话,对 c.b.a.com 不起作用,待测)。

我们网站的域名和公众号是没有绑定关系的,那么你在打开一个(可能是朋友分享的)网页时,跟哪个公众号的配置去关联呢,答案是 JS-SDK。

测试结果:由于一个月只有3次修改机会,这次先测二级域名,有效;再测顶级域名,有效;删除所有,仍有效。所以应该是缓存作用。过几天再试,然后下个月先测顶级域名,来确定直接填写顶级域名是否对所有二级域名有效。

 

第②种 JS接口安全域名:是配置所配置的域名下的网页可调用 JS-SDK。可配置 5 个一级或一级以上域名(个人理解是“任何级域名”,即填写了 b.a.com 对 c.b.a.com 也有效,但对 c.z.a.com 无效,待测。如果我们拥有顶级域名对应网站的控制权(上传验证文件到网站根目录),直接填写顶级域名即可)。
使用 JS-SDK 的每个网页都必须注入配置信息(wx.config),而之前必须获取 jsapi_ticket,jsapi_ticket api 的调用次数非常有限,必须全局缓存。而获取 jsapi_ticket 之前必须先获取 access_token,同样需要全局缓存。所以,我们专门做个接口,功能是传入需要使用 JS-SDK 的网页的 url,输出 wx.config 需要用到的配置信息,来实现在不同网页(网站)使用 JS-SDK。

 

第③种 网页授权域名:这是已认证的服务号才能享有的特权,主要作用是获取用户在该服务号中的 openidunionid。可配置 1 个 2 个回调域名(可填写任意级别的域名,但仅对该域名的网页(网站)有效,若填写了 a.comb.a.com 是无效的)。

因此,如果我们需要在不同二级域名甚至不同顶级域名下的网页(以下称之为活动页面)实现用户授权,需要做一个统一的代理授权页面(回调域名当然是填写这个页面所在的域名),引导用户依次打开:微信授权页面 - 代理授权页面 - 活动页面,根据开发说明文档,具体实现如下:

当用户第一次打开活动页面时,引导打开微信授权页面(https://open.weixin.qq.com/connect/oauth2/authorize),其中参数 redirect_uri 指定回调地址,即代理授权页面地址,参数 state 指定活动页面地址。微信授权页面返回 code 和 state,code 作为换取网页授权 access_token 的票据。到这一步,本来可以由代理授权页面直接拿这个 code 去换取 access_token、openid 和 unionid 了,但是由于当前用户还在 302 重定向过程中,将这些信息带入到活动页面时势必导致信息泄露,所以这里将 code 追加到 state 指定的网址上后重定向到活动页面,活动页面拿到 code 再通过服务器端向代理授权页面所在服务器请求 openid 和 unionid,并将它们保存于 Session 中视为用户登录。这样,服务号的 appid 和 secret 也能得到保护。代理授权页面请求的微信服务器接口地址是 https://api.weixin.qq.com/sns/oauth2/access_token

注:网页授权 access_token 不同于 JS-SDK 中使用的全局唯一接口调用凭据 access_token,没有请求次数限制。 

流程既然通了,实现逻辑可以这样设定:

活动页面首先判断 Session 中是否有 openid 或 unionid,若有表示已授权登录;没有再判断地址栏是否有 code 参数,若有则调用代理授权页面所在服务器的接口,用 code 换 openid 和 unionid;没有则直接重定向到代理授权页面,带上 state。用 code 换 openid 和 unionid 时若成功则保存至 Session,若失败则仍然重定向到代理授权页面,带上 state,特别注意 state 中的活动页面地址确保没有 code 参数。


第④种 JSAPI支付授权目录:涉及到微信支付时用到,顾名思义是固定某一个网站内的某个目录,以“/”结尾。最多可添加 5 个。如果支付页面在目录 https://www.a.com/b/ 下,那么可以填写 https://www.a.com/b/ 或 https://www.a.com/(建议后者),暂未测试填写 https://a.com/ 会不会起作用。涉及支付安全,建议设置支付页面的最深一层不可写的目录,以防目录内被上传后门文件带来的安全隐患。


第⑤种 小程序业务域名:任何需要在小程序的 web-view 组件中打开的网页,都必须配置小程序业务域名,限制 20 个。该域名要求必须 https,可填入“任何级域名”(建议填顶级域名,即填写了 a.com 对 b.a.com 也有效。如果我们拥有顶级域名对应网站的控制权(上传验证文件到网站根目录),直接填写顶级域名即可)。


第⑥种 IP白名单:仅填写管理全局 access_token 的中控服务器的 IP。

 

总结:在上述自定义接口部署完成后,如果微信中的网页想获取用户的 unionid,则不需要配置域名,直接使用统一的代理授权即可;如果需要使用 JS-SDK 功能,如分享、上传等等,则需要配置 JS 接口安全域名;如果有表单,最好配置一下业务域名。


本文系个人经验总结,部分结果未经证实,欢迎指正!QQ:940534113

xoyozo 8 年前
7,425

在 ASP.NET Core 或 ASP.NET 5 中部署百度编辑器请跳转此文


本文记录百度编辑器 ASP.NET 版的部署过程,对其它语言版本也有一定的参考价值。

【2020.02.21 重新整理】


下载

从 GitHub 下载最新发布版本:https://github.com/fex-team/ueditor/releases

按编码分有 gbk 和 utf8 两种版本,按服务端编程语言分有 asp、jsp、net、php 四种版本,按需下载。


目录介绍

以 v1.4.3.3 utf8-net 为例,

ueditor 目录结构.png


客户端部署

本例将上述所有目录和文件拷贝到网站目录 /libs/ueditor/ 下。

当然也可以引用 CDN 静态资源,但会遇到诸多跨域问题,不建议。

在内容编辑页面引入:

<script src="/libs/ueditor/ueditor.config.js"></script>
<script src="/libs/ueditor/ueditor.all.min.js"></script>

在内容显示页面引入:

<script src="/libs/ueditor/ueditor.parse.min.js"></script>

如需修改编辑器资源文件根路径,参 ueditor.config.js 文件内顶部文件。(一般不需要单独设置)

如果使用 CDN,那么在初始化 UE 实例的时候应配置 serverUrl 值(即 controller.ashx 所在路径)。


客户端配置

初始化 UE 实例:

var ue = UE.getEditor('tb_content', {
    // serverUrl: '/libs/ueditor/net/controller.ashx', // 指定服务端接收文件路径
    initialFrameWidth: '100%'
});

其它参数见官方文档,或 ueditor.config.js 文件。


服务端部署

net 目录是 ASP.NET 版的服务端程序,用来实现接收上传的文件等功能。

本例中在网站中的位置是 /libs/ueditor/net/。如果改动了位置,那么在初始化 UE 的时候也应该配置 serverUrl 值。

这是一个完整的 VS 项目,可以单独部署为一个网站。其中:

net/config.json  服务端配置文件
net/controller.ashx  文件上传入口
net/App_Code/CrawlerHandler.cs  远程抓图动作
net/App_Code/ListFileManager.cs  文件管理动作
net/App_Code/UploadHandler.cs  上传动作

该目录不需要转换为应用程序。


服务端配置

根据 config.json 中 *PathFormat 的默认配置,一般地,上传的图片会保存在 controller.ashx 文件所在目录(即本例中的 /libs/ueditor/)的 upload 目录中:
/libs/ueditor/upload/image/
原因是 UploadHandler.cs 中 Server.MapPath 的参数是由 *PathFormat 决定的。

修改 config.json 中的 imagePathFormat 为例:

原值:"imagePathFormat": "upload/image/{yyyy}{mm}{dd}/{time}{rand:6}"

改为:"imagePathFormat": "/upload/ueditor/{yyyy}{mm}{dd}/{time}{rand:6}"

以“/”开始的路径在 Server.MapPath 时会定位到网站根目录。

此处不能以“~/”开始,因为最终在客户端显示的图片路径是 imageUrlPrefiximagePathFormat,若其中包含符号“~”就无法正确显示。

在该配置文件中查找所有 PathFormat,按相同的规则修改。


说到客户端的图片路径,我们只要将

原值:"imageUrlPrefix": "/ueditor/net/"

改为:"imageUrlPrefix": ""

即可返回客户端正确的 URL。

当然也要同步修改 scrawlUrlPrefix、snapscreenUrlPrefix、catcherUrlPrefix、videoUrlPrefix、fileUrlPrefix。


特殊情况,在复制包含图片的网页内容的操作中,若图片地址带“?”等符号,会出现无法保存到磁盘的情况,需要修改以下代码:

打开  CrawlerHandler.cs 文件,找到

ServerUrl = PathFormatter.Format(Path.GetFileName(this.SourceUrl), Config.GetString("catcherPathFormat"));

替换成:

ServerUrl = PathFormatter.Format(Path.GetFileName(SourceUrl.Contains("?") ? SourceUrl.Substring(0, SourceUrl.IndexOf("?")) : SourceUrl), Config.GetString("catcherPathFormat"));


如果你将图片保存到第三方图库,那么 imageUrlPrefix 值设为相应的域名即可,如:

改为:"imageUrlPrefix": "//cdn.***.com"

然后在 UploadHandler.cs 文件(用于文件上传)中找到

File.WriteAllBytes(localPath, uploadFileBytes);

在其下方插入上传到第三方图库的代码,以阿里云 OSS 为例:

// 上传到 OSS
client.PutObject(bucketName, savePath.Substring(1), localPath);

在 CrawlerHandler.cs 文件(无程抓图上传)中找到

File.WriteAllBytes(savePath, bytes);

在其下方插入上传到第三方图库的代码,以阿里云 OSS 为例:

// 上传到 OSS
client.PutObject(bucketName, ServerUrl.Substring(1), savePath);


最后有还有两个以 UrlPrefix 结尾的参数名 imageManagerUrlPrefix 和 fileManagerUrlPrefix 分别是用来列出上传目录中的图片和文件的,

对应的操作是在编辑器上的“多图上传”功能的“在线管理”,和“附件”功能的“在线附件”。

最终列出的图片路径是由 imageManagerUrlPrefiximageManagerListPath + 图片 URL 组成的,那么:

"imageManagerListPath": "/upload/ueditor/image",

"imageManagerUrlPrefix": "",

以及:

"fileManagerListPath": "/upload/ueditor/file",

"fileManagerUrlPrefix": "",

即可。

如果是上传到第三方图库的,且图库上的文件与本地副本是一致的,那么将 imageManagerUrlPrefix 和 fileManagerUrlPrefix 设置为图库域名,

服务端仍然以 imageManagerListPath 指定的路径来查找本地文件(非图库),但客户端显示图库的文件 URL。

因此,如果文件仅存放在图库上,本地没有副本的情况就无法使用该功能了。

综上,所有的 *UrlPrefix 应该设为一致。


另外记得配置不希望被远程抓图的域名,参数 catcherLocalDomain


服务端授权

现在来判断一下只有登录用户才允许上传。

首先打开服务端的统一入口文件 controller.ashx

继承类“IHttpHandler”改为“IHttpHandler, System.Web.SessionState.IRequiresSessionState”,即同时继承两个类,以便可使用 Session,
找到“switch”,其上插入:

if (用户未登录) { throw new System.Exception("请登录后再试"); }

即用户已登录或 action 为获取 config 才进入 switch。然后,

else
{
    action = new NotAllowedHandler(context);
}

这里的 NotAllowedHandler 是参照 NotSupportedHandler 创建的,提示语 state 可以是“登录后才能进行此操作。


上传目录权限设置

上传目录(即本例中的 /upload/ueditor/ 目录)应设置允许写入和禁止执行。


基本用法

设置内容:

ue.setContent("Hello world.");

获取内容:

var a = ue.getContent();

更多用法见官方文档:http://fex.baidu.com/ueditor/#api-common


其它事宜

配置上传附件的文件格式

找到文件:config.json,更改“上传文件配置”的 fileAllowFiles 项,

同时在 Web 服务器上允许这些格式的文件可访问权限。以 IIS 为例,在“MIME 类型”模块中添加扩展名。


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


另外,对于不支持上传 .webp 类型的图片的问题,可以作以下修改:
config.json 中搜索“".bmp"”,替换为“".bmp", ".webp"
IIS 中选中对应网站或直接选中服务器名,打开“MIME 类型”,添加,文件扩展名为“.webp”,MIME 类型为“image/webp


最后,为了在内容展示页面看到跟编辑器中相同的效果,请参照官方文档引用 uParse

若有插入代码,再引用:
<link href="/lib/ueditor/utf8-net/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" />
<script src="/lib/ueditor/utf8-net/third-party/SyntaxHighlighter/shCore.js"></script>

其它插件雷同。


若对编辑器的尺寸有要求,在初始化时设置即可:

var ue = UE.getEditor('tb_content', {

  initialFrameWidth: '100%',
  initialFrameHeight: 320
});


图片等附件上传到阿里云 OSS 参考此文

xoyozo 9 年前
6,246

下载最新的免费CodeHighlighter组件 http://www.CodeHighlighter.com

1。确保web.config中的languages节点的.xml文件路径正确。
2。可以在insertCode.aspx更改编辑的默认设置,如checkbox的check等。(或在项目中搜索相关代码)

 


 

 

 

DotNetTextBox 已集成CodeHighlighter,我的修改如下:

xoyozo 17 年前
5,179