![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web应用开发
文章平均质量分 60
Web应用开发中碰见的问题记录
彼岸大洋
美好生活是奋斗出来的
展开
-
Postman中Basic Auth验证
也可以直接在Headers中新增一个Key: Authorization, Value: Basic xxxx:如下图所示:Basic 后面为user:password形式的Base64加密字符串,中间有一个空格:Base64加密:var plainTextBytes = Encoding.UTF8.GetBytes("admin:1234"); string baseResult= System.Convert.ToBase64String(plain..原创 2022-04-22 18:31:53 · 6442 阅读 · 0 评论 -
ASP.NET Core Blazor 表单自定义验证
Blazor框架的表单验证方便快捷:EditForm+模型绑定+数据注解(Data Annotations)自定义表单验证可以支持更加复杂的输入验证规则,学习体验如下:实现的效果如下图所示:如果输入的不是qq邮箱,或者 选择某个类型时,描述必填的业务验证:实现的代码如下:1:模型数据注解添加: public class DemoDataModel { [Required(ErrorMessage ="名称不可为空")] [Strin.原创 2022-03-21 16:47:15 · 1169 阅读 · 0 评论 -
Asp.Net Core Blazor 开发体验
Blazor是一个使用.NET开发交互式Web UI客户端的框架(Blazor is a framework for building interactive client-side web UI with .NET.)优势是:使用C#替代Javascript开发富交互式UI界面, 浏览器的广泛支持,可充分利用.NET库及生态。直接开发体验完成一个.原创 2022-03-16 11:44:21 · 2492 阅读 · 0 评论 -
Vue2.0实现高仿饿了么项目里的小球飞入动画
在学习Vue.js高仿饿了么项目的过程中,有一个小球飞入购物车的动画效果。项目是基于vue1.0的,如果是vue2.0的项目,改如何实现呢?自己也花时间研究了一会,从迷惑不解,各种尝试未果,后来咬文嚼字研读vue 2.0官网关于过渡的章节,再到最终实现效果,心情十分愉悦,同时也算对vue2.0 transition 动画也有所体会和掌握。记录于此,分享大家!先看下效果在实现效果的过程中,我的体会有...原创 2018-05-25 19:09:31 · 8034 阅读 · 11 评论 -
vue2.0 列表项移除过渡动画作用在最后一个元素的bug修复
见如下动图,列表移除动画过渡的效果作用在最后一个元素上,结合看了vue2.0官网,始终找不到原因!见如下代码如下:<div class="option-wrapper"> <transition-group name="option-list" tag="ul"> <li class="option-item" :key="原创 2018-07-02 21:17:38 · 3156 阅读 · 2 评论 -
vue-cli脚手架是什么及其脚手架搭建
作为有多年Asp.Net WebForm及Winform &WPF开发经验的老鸟来说,入门学习vue的过程中也碰见不少迷惑之处。首页一直在写Html+CSS+Javascipt(JQuery), 对现在比较火的vue也比较好奇,入门探一个究竟。首先一直看到和听到利用vue-cli搭建脚手架,听的觉得很新鲜,说到脚手架映入我脑海的就是工地上看到的脚手架,难道这里和脚手架有关系或是什么谐音之类...原创 2018-04-22 21:34:21 · 27280 阅读 · 3 评论 -
Vue.js实战 better-scroll 应用
实现的效果如下图所示:项目来源《Vue.js高仿饿了么实战》这里是对better-scroll 组件的简单应用,可以参考文章:https://www.imooc.com/article/18232#本文对这个页面功能的better-scroll应用做点小的改进,记录学习过程,分享大家!教学项目里做的效果是左侧列表滚动,右边菜单导航条的高亮切换显示,但有个问题,如果高亮的菜单藏在视口范围之下,就看不...原创 2018-05-23 11:56:26 · 608 阅读 · 0 评论 -
Vue组件调用Android原生接口并利用Android Studio 打包
做了一个小的App Demo,利用Webpack 搭建Vue应用框架,vue组件通过js调用android 接口调用相机实现扫一扫功能,最后利用android studio 打包成apk. 整个过程不复杂,但搭建开发环境及fix bug 花了不少时间,记录下来做个备忘。Vue组件调用Android 接口:export default { data: function(){ ...原创 2019-10-12 20:47:15 · 10132 阅读 · 3 评论 -
vue 通过moment.js日期格式化
moment.js官网点击这里vue项目中安装:npm i -S moment,注意是-S ,打包输出依赖的库;1:在vue项目里建一个公用的utility.js供所有单页组件全局使用, 其内容为:var moment = require('moment');function momentFormat(fmt){ if (fmt === undefined) fmt = ...原创 2019-06-03 17:17:40 · 2254 阅读 · 2 评论 -
在stylus中使用媒体查询遇到的一个坑
在vue.js高仿饿了么学习中,在做评论标签页面时,在iphone5手机屏上会显示折行的不良效果,如下图所示:对照视频教学上的做法如下:页面结构<div class="overall"> <div class="overall-left"> <h1 class="score">{{seller.score}}</h1原创 2018-06-09 21:08:01 · 4273 阅读 · 2 评论 -
Vue2.0 no-side-effects-in-computed-properties WARNING处理
V2.0学习《高仿饿了么》过程中,对照视频代码编写如下代码:listShow() { if (!this.totalCount) { this.fold = true; return false; } let show = !this.fold; return show; } }编译警告信息如下...原创 2018-05-27 21:29:22 · 15155 阅读 · 2 评论 -
vue2.0 多个css过渡效果的组合应用
在学习vue2.0版本的过程中,入门实战项目学习的是慕课网的《Vue.js饿了么高仿实战》,这个项目利用的是vue1.0的版本,其中有一个css过渡动画的效果,在vue 2.0中经过本人的尝试,也实现了,特记录分享学习过程!实现的效果如下所示:模板结构如下:<template> <div class="chart-ctrl-wrapper"> <transit...原创 2018-05-23 11:16:27 · 625 阅读 · 0 评论 -
npm 编译失败:Can't resolve 'child_process'
Failed to compile../node_modules/_fsevents@1.2.9@fsevents/node_modules/detect-libc/lib/detect-libc.jsModule not found: Error: Can't resolve 'child_process' in 'D:\Today\WebFront\node_modules\_fseve...原创 2019-10-12 17:14:42 · 13544 阅读 · 6 评论 -
IIS 之 连接数、并发连接数、最大并发工作线程数、队列长度、最大工作进程数
转载:参考:https://blog.csdn.net/enweitech/article/details/79815137https://blog.csdn.net/enweitech/article/details/79815137https://blog.csdn.net/by_ron/article/details/78027087一、IIS连接数 一般购买过虚拟主机...转载 2018-10-16 10:42:55 · 2509 阅读 · 0 评论 -
Webpack 环境搭建
使用webpack搭建环境前,需要有前瞻知识:比如:关于webpack是什么,能做什么以及webpack是基于Node.js环境,对Node.js的安装也是前提条件。一图胜千言,下面直接一步一步 搭建环境,用图示方式说明:当前实验的Node.js版本为:步骤一:新建一个web项目:在本机磁盘新建一个文件夹:D:\tfs\web\gitTestProject我这里使用vscode, ...原创 2019-05-26 12:48:08 · 1337 阅读 · 0 评论 -
jvectormap地图插件初体验
jvectormap 地图的初次使用研究,记录下碰见的问题和解决问题的过程。简单使用的效果如下:从实际使用过程中碰见的问题说起吧:1:版本问题:百度搜索jvectormap的使用教程都引用的是jquery 1.8.2版本,而项目采用的是jquery 3.3.1版本,在使用地图区域着色时报错:jquery-3.3.1.js:3827 Uncaught TypeError: C...原创 2018-11-22 11:38:34 · 1954 阅读 · 0 评论 -
Webpack导入Vue实战
上一文中做了一个基本的Webpack环境搭建,对于webpack+vue组合的搭建过程,网上搜索资料不少,好好研究任意一篇就可以掌握原理和过程,本文没有利用vue-cli脚手架工具搭建,而是自己动手基于webpack环境导入vue项目。实战如下:(实际执行过程中碰见不少坑,都研究后解决了,大概的步骤记录下来,供参考)1:基本的webpack环境搭建:引入模块:css-loader,styl...原创 2019-06-02 12:44:32 · 2725 阅读 · 0 评论 -
webpack 多个Entry 打包多页应用
webpack下打包多个Html页面,可以由插件html-webpack-plugin 来完成;另外一种插件:可以参考:web-webpack-plugin可以看下基础篇 :1:webpack环境搭建;2: webpack导入vue项目具体做法如下:webpack.config.js里plugin是一个数组,一个HtmlWebpackPlugin实例对应一个html页面的...原创 2019-06-02 16:25:50 · 3714 阅读 · 1 评论 -
vue+webpack项目中引入MUI所碰见的问题
利用webpack搭建的Vue多页应用中,引入mui过程中碰见若干问题,记录如下:mui引入当前未发现npm的方式导入。到官网https://github.com/dcloudio/mui下载zip文件;加压,应用dist目录到自己的项目中;在main.js中引入:使用方式:this.mui.toast("mui test");问题1:npm run bu...原创 2019-10-19 18:14:34 · 558 阅读 · 0 评论 -
体验H5+plus开发移动端
利用HBuilderX 开发了一个小demo,系统登录,页面跳转到主页,点击按钮实现扫一扫功能。记录下开发过程。1:利用HBuilderX 新建一个5+App;2:编写功能所需要的css js 等;3:实现安装包升级功能;4:打包apk或ipa;代码开发:源码附后在线升级App在生成升级包安装过程中碰见的一个问题:安装wgt文件失败[-1205]:WGT安装...原创 2019-10-18 11:58:43 · 4034 阅读 · 0 评论 -
vue.js自定义LCD字体及字体压缩
大屏监控中常用到液晶字体效果,如下图所示:首先下载lcdd.ttf字体;在 webpack.config.js中设置对.ttf字体模块的处理,webpack视一切文件为模块,.ttf字体文件也不例外 { test: /\.(svg|woff|ttf|eot)\??.*$/, use: [ ...原创 2019-06-05 11:33:31 · 2421 阅读 · 0 评论 -
vue中引入font-awesome
npm i -S font-awesome之后在main.js中引入font-awesomeimport 'font-awesome/css/font-awesome.css'执行npm run dev 时报错了:in ./node_modules/_font-awesome@4.7.0@font-awesome/fonts/fontawesome-webfont.woff?...原创 2019-06-03 18:19:12 · 2994 阅读 · 0 评论 -
Bootstrap daterangepicker 位置及双日历单独选择
初次使用bootstrap的双日历时间控件,感受是总觉得有bug,日历的选择默认有双联动,不太符合国人的选择习惯,通常的做法是单独选择,可以不分先后顺序选择起止时间。感觉这个问题不解决,用户体验下降很多,都有点想放弃的感觉,由于找不到合适的关键字来百度这个问题,于是看官方文档和demo,无意间看到了linkedCalendars 属性。柳暗花明,大概知道作用了,试了下果然生效了,开心。另外一个...原创 2018-11-24 17:58:09 · 2132 阅读 · 0 评论 -
用H5大屏数据可视化开发
项目中需要做一个数据展示用的看板,初接到任务觉得这个没有什么难度,做个漂亮的网页浏览器全屏就可以了。可是实际做的过程中碰见了问题。第一:浏览器不能有横向和纵向的滚动条,没有鼠标的滚动操作过程。第二:有各类尺寸的屏,除了在九宫格拼接屏上完美显示,还要同时满足普通用户的电脑端显示。电脑的客户分辨率可能是1399*768或1920*1080等各类尺寸的分辨率。利用传统网页制作从上到小的制作方...原创 2018-12-21 13:40:25 · 33326 阅读 · 15 评论 -
JS下载文件流
下载的代码如下: var xhr = new XMLHttpRequest(); var formData = new FormData(); formData.append('snNumber', $("#snNumber").val()); formData.append('spec', $("#spec"...原创 2018-03-16 13:40:59 · 30045 阅读 · 5 评论 -
vscode中eslint检查警告Trailing space的自动化处理
在vscode 的使用过程中,执行npm run dev时会执行eslint 规范检查;常常碰见的错误信息如下:如果一行一行错误信息逐行检查处理,效率极低,且重复劳动,耗时费力,在插件横行的web前端时代,工具带来的好处就是自动化处理,带来强大生产力,那么vscode如何自动处理这类警告信息呢?这里再次尝试在一些结尾处多打些空格,此时你会发现并不能马上生效去除这些空格,这里一个小技巧,打几个无用的...原创 2018-05-29 22:06:21 · 28090 阅读 · 1 评论 -
vscode中自动格式化stylus设置
在vscode中编写好如下风格的stylus样式代码vscode 的格式化命令alt+ctrl+F 代码会变成如下图所示如何保证自动格式化时stylus的风格不发生变化呢?只需对vscode进行设置即可,在vscode的插件选项中搜索:“stylus Supremacy”安装,配置如下图所示的选项:再次格式化时,stylus的风格就不会发现变化了...原创 2018-05-29 23:04:26 · 20806 阅读 · 1 评论 -
快速上手EF+WebApi开发
本文只做WebApi开发入门参考,作为个人学习之用,无太多技术难度!首先:建立一个空白solution,新建一个数据访问层DAL类库项目WebApiStart.DAL,右键引用,管理NuGet程序包,搜索“entityframwork”并安装;如下图所示:步骤2:新建WebApiStart.Model层:新建User类 public class User { ...原创 2018-08-18 17:36:26 · 6537 阅读 · 1 评论 -
WebAPI请求中的Body Raw参数传递
利用Fiddle抓取分析:找到工具栏的Any Process监测工具,拖拽到Postman应用程序中,找到该窗体句柄,然后再Postman中执行Send操作,网络请求即被截获到了,如下图所示:服务器端代码如下: [HttpPost] [HTTPBasicAuthorize] public HttpResponseMessage UpdateAl...原创 2020-01-07 17:13:35 · 7136 阅读 · 0 评论 -
C# HttpSelfHostServer (413) Request Entity Too Large
var config = new HttpSelfHostConfiguration(App.Config["webAPIURL"]); config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html")); config.Formatters.JsonFormatter.SupportedMediaTypes.Add(ne...原创 2021-07-15 12:50:23 · 1218 阅读 · 0 评论 -
padding-top 100%应用
这里学习到的是当margin padding 赋值为%百分比的时候,是按父元素的width为参照物,于是很多应用来先占位布局,再加载元素,例如图片的加载,防止页面抖动或闪一下的感觉,尤其网站状况不佳的情形下很容易出现!下面是一个应用padding 百分比的例子:<div class="image-header" ref="imageHeader"> <img ...原创 2018-06-09 21:39:27 · 3399 阅读 · 0 评论 -
从HTTP的multipart/form-data分析看C#后台 HttpWebRequest文件上传
在web请求中ContentType一直没有过多关注,也知道ContentType设置为application/x-www-from-urlencoded或multipart/form-data 后和接口层后台获取参数值有重要关系。但都没有稍深入研究,这次研究了一番,记录于此!首先为何常见的web前端文件上传使用的是multipart/form-data 而非x-www-from-urlencod...原创 2018-06-15 23:29:27 · 30168 阅读 · 3 评论 -
npm 配置项registry修改为淘宝镜像
在使用npm 的过程中,搜索网上的资料基本上可以看到类似如下的描述:“npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像”。初体验,不知道淘宝cnpm镜像为何物。根据这句描述,我们应该可以理解有2件事要做:1:找到淘宝的镜像地址;2:更改当前npm所使用的下载包服务器地址;打开https://npm.taobao.org/上面的地址太多,根本不知道那个是我可以用的地址;百度看了一下,例...原创 2018-04-22 12:00:38 · 49619 阅读 · 2 评论 -
form-control-feedback 影响tooltip 的处理
基于BootStrap 3.0开发的Tooltip 效果一直运行效果不错。当结合jQuery Validation做表单验证时想要实现下面的效果:当有错误提示时,利用.form-control-feedback 样式可以设置一个带图标提示的表单效果,可是发现Tooltip怎么都不生效。在chrome F12调试模式下研究了生成的HTML结构和样式等信息,发现如下css:.form...原创 2018-10-31 21:50:03 · 2076 阅读 · 0 评论 -
覆盖Bootstrap的样式
在学习BootStrap的导航菜单时,想要改变默认的样式时出现了一点问题。例如下面: <link href="resources/bootstrap/css/bootstrap.min.css" rel="stylesheet" /> <link href="resources/css/index.css?v=1.2" rel="stylesheet" /> <Body> <n原创 2017-10-30 21:47:20 · 5808 阅读 · 0 评论 -
bootstrap 让文字显示在响应式图片上
在这个位置折腾了一会,半天没有出效果。有两种办法:1)让图片做为背景,文字直接布局在图片上;2)让图片用img标签插入,文字相对布局在图片上;先说说第一种办法的问题,要想让背景图片完全显示出来,非得设置外层容器的高度,这样就失去了响应式;例如:#content-sec3 { position: relative; max-width: 100%; hei原创 2017-11-01 21:53:39 · 18775 阅读 · 1 评论 -
Grunt初体验
记录初次使用grunt的步骤:1:到https://nodejs.org/上下载安装node.js,本人环境为win10 64位系统,下载对应版本的node.js2: 就像安装其他软件如photoshop一样,下一步下一步就好;3:在最近安装列表中开启node.js命令行工具4:安装grunt-cli:5:进入到站点目录安装grunt 6:在所在的站点中添加如下文件:package.json:{ ...原创 2018-04-08 21:32:10 · 227 阅读 · 0 评论 -
jgGrid 自定义头部和Checkbox列外观
jgGrid 之前使用Ace Admin从未考虑过自定义外观。想当然觉得复用就可以了,可是换成adminLTE后默认的jgGrid外观十分的丑陋。于是想稍微改造下,研究了Ace Admin的头部和Checkbox列后,开始自己动手来实践,这里记录下实践的过程。希望对学习jgGrid有点帮助。首先借鉴下Ace Admin jgGrid表格的头部:如下图所示:她使用的是:backgroun...原创 2018-10-27 22:13:15 · 1473 阅读 · 0 评论 -
利用CSS动画制作 Html 表格数据滚动显示
直接上图看最终实现效果:DataV里有这个效果,看起来高大上,实际自己开发也不难实现。实现的方法很多,下面是本人的一种实现方案,分享给大家。这个效果需要解决2个问题:1:首尾的数据衔接;2:css动画实现;首先利用js 构造一些数据;Html 结构如下:<div class="table-title"> &...原创 2018-12-22 20:36:20 · 8830 阅读 · 3 评论 -
js实现类似TabPage切换的效果
首先声明:这个js算法的原理并非原创,这里只是学习实现的效果和原理!尊重原创,原创作者无从考证,多个开源的类似后台管理系统中都有这个多iframe的效果,且实现的效果一致,都采用了相同的算法版本。本人只是学习了解之后,做了一个精简版的还原。首先核心的js实现代码如下:$(function () { top.vpms = top.vpms || {}; vpms.tab...原创 2018-09-21 09:49:39 · 1365 阅读 · 0 评论