最近入坑小程序,要求在小程序的输入框中展示一个小图标,页面如下:然后按照,html页面中的做法,在input框中添加了background-image属性,出乎意料的事,小程序报了下边这样一个错误:emmmm 好像小程序的background-image属性并不给力啊,然后查阅相关资料后,放弃了background-image属性。 然后另辟蹊径,由于小程序中,好像只有image标签才能加载本地图片,所以考虑使用image标签来实现,大致思路就是在一个view中,左边是image,...
主要用于将数据库中日期用long表示,转换成YYYY-MM-DD格式或YYYY-MM-DD HH:mm:ss格式 若显示为YYYY-MM-DD HH:mm:ss格式,调用如下方法: datetimeFormat(longTypeDate); 若显示为YYYY-MM-DD格式,调用如下方法: dateFormat(longTypeDate); Js中具体方法如下:/* * 时间格式化工具 * 把Long类型的1527672756454日期还原yyyy-MM-dd 00:00:00格式日期 */ function datetimeFormat(longTypeDate){ var dateTypeDate = ""; var dat...
最近要写一个工具界面整合项目的功能属性,方便其他部门的人进行编辑,有点类似后台。会有部分数据上的交互。于是学习了下node.js后端的知识。 源码如下: // filename:myServer.js // a simple http server varfs = require(fs),url = require(url),path = require(path),http = require(http);//从命令行参数获取root目录,默认是当前目录 var root = path.resolve(process.argv[2] || .); console.log(Static root dir: + root...
1.安装环境 ①安装node.js 并添加入环境变量PATH②安装淘宝NPM镜像$ npm install -g cnpm --registry=https://registry.npm.taobao.org③安装webpacknpm install webpack -g ④安装vue-cli脚手架npm install -g vue-cli⑤创建项目模板 vue init wepack vue-multipage-demo⑥cmd进入到要放项目的文件夹⑦安装 cnpm install2.目录结构调整 3.配置文件修改 ①添加依赖 glob (返回目录中的所有子文件) npm install glob②修改build文...
在开发webapp的时候总是会受到首屏加载时间过长的影响,主流的解决方法是在载入完成之前显示loading图效果,而一些大公司会配置一套服务端渲染的架构来解决这个问题。考虑到ssr所要解决的一系列问题,越来越多的APP采用了“骨架屏”的方式去提升用户体验。 小米商城:一、分析Vue页面的内容加载过程 vue项目中的入口index.html只有简单的内容: <!DOCTYPE html> <html lang="zh-CN"> <head><meta http-equiv="Content-Type" conten...
Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. 一、示例 var vm = new Vue({ data: { obj: { a: 1 } }, created: function () { console.log(this.obj); } }); 二、实现原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的.1)数据劫持、vue是通过Object.defineProperty()来实现数据劫持,其中会有getter()和setter方法;当读取...
在vue官网把文档扫了一遍后,就开始写网站项目了,没有设计,就百度里找了一个h5的助赢软件的网站把他copy下来,想想有点坏了,接着把内容改改吧。首先开始做一个列表展示vue实例好后,给对象添加默认数据,列表加载成功。查看源代码,看看是否和心目中想的一样。当前还只是把初始化的默认数组展示出来,列表里面的操作,跳转还没有加,试着给初始化的数组添加id字段和数字刷新一下,没有效果,坑人的Chrome,缓存特别严重,不得不...
一: 首先在nodejs项目里创建一个server.js文件,输入下面代码 var http = require("http"); http.createServer(function(request, response) { response.writeHead(200, {"Content-Type": "text/plain"}); response.write("Hello World"); response.end(); }).listen(8888); 然后在cmd下进入项目路径,再输入node server.js启动服务器,然后在浏览器地址栏中输入http://localhost:8888/即可在界面上看到输出Hello World,如果我...
javascript 跨域是一个很常见的问题,其中 jsonp 是一个最常用的手段,但是 jsonp 只支持 get,不支持 post,所以如果想通过 jsonp 来 post 一些数据,就头大了。 此处通过在一个 iframe 中生成 form 表单的形式来实现 post,并通过 postMessage 来向调用者返回值。 第一步,我们先实现一个接受 jsonp 的后端代码,至于用什么语言实现,各位自已决定。 c#代码是: protected void Page_Load(object sender, EventArgs e){StringBui...
什么是 WebSocket ?WebSocket 是一种标准协议,用于在客户端和服务端之间进行双向数据传输。但它跟 HTTP 没什么关系,它是基于 TCP 的一种独立实现。 以前客户端想知道服务端的处理进度,要不停地使用 Ajax 进行轮询,让浏览器隔个几秒就向服务器发一次请求,这对服务器压力较大。另外一种轮询就是采用 long poll 的方式,这就跟打电话差不多,没收到消息就一直不挂电话,也就是说,客户端发起连接后,如果没消息,就一直不返回 R...
Element-UI 的 Table 组件很强大,但是我们的需求更强大... 简单粗暴的来一发效果图:一、数据驱动 传统的拖动效果,都是基于通过 mousedown、mousemove、mouseup 事件来修改删减 dom 节点 但 Vue 是一个数据驱动的前端框架,开发时应尽量避免操作 dom 而且 Element-UI 的 Table 组件封装得很严谨,直接操作 dom 很容易产生不可预计的 bug 所以我的核心思路就是:通过一个数组渲染表头(列),然后修改这个数组的顺序,从而修改列表...
什么是VuePress VuePress由两部分组成:一个基于Vue的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题。 它是为了满足Vue自己的子项目文档的需求而创建的。 VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好。一旦页面被加载之后,Vue就全面接管所有的静态内容,使其变成一个完全的SPA应用,其他的页面也会在用户使用导航进入的时候来按需加载。 VuePress是怎样运作的 一个VuePre...
前言 最近在写插件的过程中,需要使用 JS 判断是否有滚动条,搜了一下,大致方法都差不多,但都有些啰嗦,代码不够简洁。最终通过参考不同方法,写了一个比较简单的方法。在判断滚动条的同时也需要计算滚动条的宽度,通过本篇文章一并与大家分享。 为什么要判断滚动条判断滚动条的需求在弹窗插件中用的较多,因为弹窗大多会添加 overflow: hidden 的属性,如果页面比较长的话,添加这个属性之后页面会有晃动。 为了增强用户体验,通...
实例如下所示: $(document).on(change, .photo-box .file, function () {//alert($(this).val());function getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) { // basicurl = window.createObjectURL(file);} else if (window.URL != undefined) { // mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) { // webkit or chromeurl = window.webkit...
Vue定义全局点击函数,参数为点击的回调函数。 Vue.prototype.globalClick = function (callback) { //页面全局点击$(document).click(callback); }组件挂载后监听全局的点击事件 mounted:function () {this.globalClick(this.handleClickOut); },隐藏元素。 取到dom节点,判断父级是否存在来判断是否需要来关闭 handleClickOut:function (event) {if($(event.target).parents(".sys-add-user-dialog").length == 0){//隐藏元素} }...