html5
关注
分享
扫一扫
久如云漂泊
凡不能毁灭我的,必使我强大
展开
-
编辑器、论坛、评论列表图文混排的一些思路
一种比较复杂的情况就是论坛帖；论坛每个楼层用户都能发图片，文字，视频，音乐和表情包等；并且有管理员功能。比如图片或者文字有审核状态。删除状态，仅本人可见状态等，都需要前端做复杂的交互。而且如果不考虑上面的，把所有楼层数据以html标签传递。后台压测估计过不了；前端做懒加载，分页，虚拟列表等的性能优化都需要图片的宽高，楼层宽高。这个背景下。前端要把数据分开传给后台。后台分开传给前端。原创 2023-02-26 02:16:00 · 460 阅读 · 0 评论 -
html标签转换成img图片
app 里的元素需要转换成图片<script src="../assets/js/html2canvas.min.js"></script>$(function () { html2canvas(document.querySelector("#app"), {useCORS: true}).then(canvas =>...原创 2018-02-11 16:49:06 · 3402 阅读 · 0 评论 -
按顺序加载外部资源js css
cmmon.js/** * 公共js文件 * 内置参数说明： * locationUrl：硬盘路径(开发模式使用) * ytRootUrl:系统根目录，引入该js文件后可直接使用 * initJq:自定义jq文件的目录，如果需要引用不同的jq文件，请修改目录。 * initCssUrl:初始化css文件容器...原创 2018-02-10 14:54:01 · 488 阅读 · 0 评论 -
前端微信网页授权+WebSocket
这篇教程只介绍前端需要做的工作；注意： 1，开发者必须关注公众号，且是公众号下的开发者； 2，域名地址必须是公众号绑定的域名地址；微信授权需要调试工具：微信web开发者工具； 参考微信文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842微信授权，前端与服务端的交互只涉及appId，code...原创 2018-02-02 15:21:52 · 7735 阅读 · 3 评论 -
浏览器在iOS或Android中的一些方法
判断当前应用var deviceType="H5" if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { deviceType='ios' } else if (/(Android)/i.test(navigator.userAgent)) { // alert("Android"原创 2018-01-17 11:28:15 · 237 阅读 · 0 评论 -
nodejs基础教程-简单blog（9）--分页
效果图： 分析一下这个效果图，结合以前的教程我们知道。导航栏是继承“layout.html” table表格是“user_index.html”,而分页的按钮就是我们本节课的内容。将之封装在‘page.htnl’中；首先 新建文件views/admin/page.htmlnav aria-label="..."> ul class="pager"> l原创 2018-01-05 12:31:18 · 1788 阅读 · 0 评论 -
nodejs基础教程-简单blog（8）--展示用户注册信息列表
本节课展示用户注册信息列表；当点击导航栏的“用户管理”浏览器跳转路由/admin/user 显示用户列表。 先上效果图；开始 1，在layout.html模板中导航标签中设置路径； 2，新建文件 views/admin/user_index.html，在admin.js中设置user_index的路由为/admin/user；并查询数据库所有用户的信息 返回给前台users；原创 2018-01-04 15:57:58 · 716 阅读 · 1 评论 -
nodejs基础教程-简单blog（7）-博客后台管理
这节课进入后台管理； 将涉及swig模板引擎知识点；下载bootstrap 放在/public目录下； 新建index.html 和layout.html admin/layout.html 中代码；<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"原创 2018-01-03 18:33:56 · 743 阅读 · 0 评论 -
nodejs基础教程-简单blog（6）--区分管理员与普通用户
在数据库中加入一条管理员的数据，isAdmin=true； 在 schemas/users.js中var mongoose=require('mongoose')////D:\Program Files\MongoDB\Server\3.4\bin>mongod --dbpath=E:\nodejsTest\blog2\db --port=27018//用户的表结构、数据属性模型modu原创 2018-01-03 17:52:07 · 2271 阅读 · 0 评论 -
nodejs基础教程-简单blog（2）-mongoose
建立数据库 mongoose 在cmd中； D:\Program Files\MongoDB\Server\3.4\bin>mongod –dbpath=E:\nodejsTest\blog2\db –port=27018或下载 安装Romongo 下载地址 https://robomongo.org/download然后 记得端口被占用的问题；27018。项目中db目录中会出现： htt原创 2017-12-18 17:01:29 · 377 阅读 · 0 评论 -
vue+jquery懒加载数据
<ul class="my_member_list "> <li v-for="item in list"> {{item.name}} </li></ul>new Vue({ el: '#app', data() { return { ...原创 2018-02-11 17:49:58 · 1112 阅读 · 0 评论 -
ios微信h5棋牌游戏自动播放音效填坑
开发中不可避免遇到一些ios和安卓适配的坑；ios不可以自动播放音乐的机制，使一些h5游戏播放背景音乐和音效无法播放；正常情况下ios只允许用户自己去打开音效。但是这样的机制并不适合很多项目。而去模拟触发也是行不通的。 比如在棋牌游戏中，通过WebSocket发送过来的指令，模拟触发音效。是没有用的。通过下面的方式可以解决，在iPhone手机微信中正常自动播放。//html中&...原创 2018-02-08 18:28:33 · 2198 阅读 · 0 评论 -
vue插件/公共方法属性
新建一个js，任意名词config；我觉得最经常用到的 3，和4。 /** * Created by Administrator on 2018/11/7 0007. */let rootUrl = 'http://XXX.xx.cn'let key = 'Lawj1h1mUgD11GMzZX1Gv911X'let setItem = (key, val)=> { ...原创 2018-11-26 14:43:14 · 742 阅读 · 0 评论 -
小程序--错误{"errcode":40029,"errmsg":"invalid code, hints: [ req_id: weh8ka0297hc58 ]"}
小程序–错误{“errcode”:40029,“errmsg”:“invalid code, hints: [ req_id: weh8ka0297hc58 ]”}微信开发者工具里开发项目需要填写appID，后台请求openid也需要appID，确认appID是否一致，确认appsecret是否一致，临时登录凭证code ，appID和appsecret必须相互对应。小程序–错误{“errc...原创 2018-10-23 11:49:41 · 8894 阅读 · 1 评论 -
微信小程序上拉更多下拉刷新
老规矩先上图；下拉使用的是微信自带的下拉功能。但是在滚动条存在的情况下拉动的区域是只有 ，navbar部分。而这里完美解决了这个问题。原理：在内容区域上有一个透明块 ，当滚动条isTop=0； 显示；isTop！=0隐藏。注意这个透明块用户永远是看不见的。它的作用是让用户触摸时可以完成下拉动作；上拉就简单了使用的是scroll-view 的bindscrolltolower；index...原创 2018-10-08 11:36:49 · 4537 阅读 · 1 评论 -
原 nodejs基础教程-简单blog（10）-批处理打开
每次打开mongo数据库都很麻烦。bat批处理可以快速的打开。正常情况打开mongo是这样的；在项目目录下； 下面介绍批处理打开方式； 新建一个文件， E:\nodejsTest\blog2\StartMongo.bat，保存为utf-8或ANSI 写法和上面在cmd输入的一致。注意回车也样d:cd D:\Program Files\MongoDB\Server\3.4\bin...原创 2018-07-16 17:29:45 · 329 阅读 · 0 评论 -
es6的一些小技巧
1.快速去除数组中重复元素 集合（Set）对象允许你存储任意类型的唯一值（不能重复），无论它是原始值或者是对象引用。const uniqueArray = arr =&amp;gt; [...new Set(arr)]uniqueArray([1, 2, 2, 3, 4, 4, 5])//--------------------原理是 Set 对象允许你存储任何类型的唯一值，本质上起到了去重的...原创 2018-05-28 17:37:52 · 638 阅读 · 2 评论 -
vue dist文件打开index.html报Failed to load resource: net::ERR_FILE_NOT_FOUND
本地正常。打包好的dist文件打开index.html报Failed to load resource: net::ERR_FILE_NOT_FOUND解决办法： 在webpack.prod.conf.js 中output添加参数publicPath:’./’在webpack.base.conf.js里 publicPath: process.env.NODE_ENV === ‘producti原创 2018-05-02 11:53:42 · 6291 阅读 · 2 评论 -
vue-cil项目中使用外部js的3种方法
vue-cil项目中1. 导入属性的方法新建 ./api/api.jsimport Vue from 'vue';Vue.prototype.test=function () { alert(111) }在main.js 中导入；import * as API from './api/api.js'在任何一个.vue文件中都可以使用此属性.例如 在a....原创 2018-04-03 15:38:17 · 2352 阅读 · 0 评论 -
query string parameters 和request payload
HTTP请求中，如果是get请求，那么表单参数以name=value&name1=value1的形式附到url的后； post请求：表单参数是在请求体中，也是name=value&name1=value1的形式在请求。export const voucherDetailAdd=(token,formStr) =>{ return axios.post(`${base}/voucher/de原创 2018-04-03 11:03:53 · 11294 阅读 · 0 评论 -
nodejs基础教程-简单blog（5）-cookie保存用户登录状态
用户登录—前端发送登录请求—后端保存用户 cookies—页面刷新 —前端判断用户id存在—显示登录状态—用户退出—前端发送退出请求–后端清空用户cookies—页面刷新—前端判断用户id不存在—-显示需要登录的界面当我们登录成功，在这个页面刷新，页面并没有保存登录状态；今天这节教程需要的效果就是。后台cookie保存用户登录状态。做到刷新页面仍然显示在用户登录界面；app.js 设置中间件var原创 2017-12-26 11:32:10 · 7057 阅读 · 3 评论 -
nodejs基础教程-简单blog（4）-用户信息验证与储存
Express 是一个自身功能极简，完全是由路由和中间件构成一个的 web 开发框架：从本质上来说，一个 Express 应用就是在调用各种中间件。继续上节的教程； 添加中间件body-parser，用来处理post提交过来的数据； 在app.js中加入var bodyParser=require('body-parser');/** * //bodyParser配置 * 返回一个只解析原创 2017-12-25 16:21:24 · 671 阅读 · 0 评论 -
bootstrap表单验证 FormValidation API
官网http://formvalidation.io/api/用法 使用插件初始化表单后$(form).formValidation(options)，有两种方法调用插件方法：// Get plugin instancevar formValidation = $(form).data('formValidation');// and then call methodformValidatio原创 2017-05-17 09:50:07 · 3390 阅读 · 0 评论 -
vue组件的3种书写形式
第一种 使用script标签<!DOCTYPE html><html> <body> <div id="app"> <my-component></my-component> </div> <-- 注意：使用<script>标签时，type指定为text/x-template，意在告诉浏览器这不是一段js脚本，浏览器在原创 2017-05-18 11:05:24 · 57924 阅读 · 3 评论 -
vue 单页项目教程--微信公众号(微信支付遇到的坑)
http://www.cnblogs.com/greedying/p/6359229.html 这个博主已经写的很清楚了。这里简单写一下 【微信支付路径要求二级或以上路径】的坑。1首先。跳到选择支付页面reservedPay，保证reservedPay页面为二级页面。 submit:function(){ window.location.href="/Pay/reservedPay;原创 2017-05-16 11:53:18 · 22422 阅读 · 3 评论 -
vue 单页项目教程--微信公众号（启动操作）
项目安装好后的结构。 启动项目 cnpm run dev 启动成功 效果图。 我改了一些界面。最初的不知道扔哪里去了。原创 2017-05-16 10:40:09 · 4310 阅读 · 0 评论 -
vue 图片上传 图片展示 bootstrap
效果图 html............<-- key=idPicUrl --> <div class="col-sm-7" > <img :src="queryFirmInfo[key]" alt="" style="max-height:200px;max-width:250px" class="myimage" :name="key" /></div> <form原创 2017-05-16 10:19:52 · 2103 阅读 · 0 评论 -
vue单页教程-微信公众号（第二站，项目需求）
说明一下这个项目用在微信公众号里。将来有意向移植支付宝。 因为是项目很急。时间压缩的很紧所以文件夹架构只有两级。组件和组件之间也只是简单的嵌套。1，开始前先不考虑微信公众号的入口。先把这个项目想成一个完整的app。 一个app 首先要有 login页 home页，user页 还有其他业务的页面。 而微信要进入这些页面时做一个判断。那么这个项目可以兼容很多个平台。比如支付宝，pc端页面和安卓ap原创 2017-05-06 17:09:07 · 3701 阅读 · 0 评论 -
easyUI数据网格 简写
为什么要简写呢？ 在开发中有N多页面且columns field 又很多。简写就方便多了。正常的写法。$('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {field:'name',title:'Name',wi原创 2017-05-15 17:49:06 · 300 阅读 · 0 评论 -
扁平化easyUI default皮肤
老规矩先上图。 就是把easyUI 的default包扁平化了。需要的到这里下载： 这里写链接内容直接替换easyUI 的default皮肤包即可正常使用。那个蓝色的弹框用的是另一种弹框。可以兼容easyUI。并且跨ifarme 。它本身default包也不扁平。是lhgDialog，大家可以百度搜。 有空再发一个lhgDialog default皮肤扁平化的包给大家吧。有什么问题可以留言。以原创 2016-12-08 17:46:40 · 8346 阅读 · 1 评论 -
Bootstrap 表单验证formValidation 之表单动态验证
动态添加input并动态添加新验证方式！ 知识点：1 先去官网下载：http://formvalidation.io/2 导入文件，注意事项我就不多说了在远程验证那篇我已经讲过。3 用到的关键字：addField、removeField、different4注意一点就是官网里的例子他们的name是不一样的。我这里比较偷懒。且项目ajax的时候不是用的form表单提交，而是自己并接成json提交，所以x，y原创 2016-11-22 17:18:06 · 14329 阅读 · 3 评论 -
vue结合bootstrap表单验证 FormValidation 图片验证
效果图： vue组件var setFirmLogoVue=Vue.extend({ template: ` <div style="height:800px;width:80%" class="text-center"> <img :src="picUrl" alt="..." class="img-circle " style="width: 169px;heigh原创 2017-05-19 13:48:42 · 4489 阅读 · 0 评论 -
Intellij Idea tomcat热部署
解决内置tomcat插件服务启动后，修改类、资源时无法自动加载的问题。原创 2017-05-31 13:46:38 · 411 阅读 · 0 评论 -
Bootstrap 表单验证formValidation 之比较两个input值的大小
老规矩先上效果图 A两个input必须满足大于10； B当输入其中一个input时，且满足A条件，如果另一个input为空，这个文本框通过； C最小时长<最大时长；html 片段 <td style="min-width:325px;"> <div class="inp原创 2017-06-02 10:01:04 · 13568 阅读 · 0 评论 -
nodejs基础教程-简单blog（3）-vue
这节教程开始写前端页面逻辑用户登录注册； 使用现在比较流行的vue。本教程深入浅出。以后如果有空再进一步中高级教程：vue单页应用前端+nodejs后端–实现前后端分离。这节教程先不分离了。先将vue当做js引入到页面。第一步；去vue官网https://cn.vuejs.org/v2/guide/installation.html 下载vuejs的开发版本； 再下载jquery；放在publi原创 2017-12-22 11:12:38 · 680 阅读 · 0 评论 -
nodejs基础教程-简单blog（0）
1，新建项目 名Blog2 2，npm init 生成package.json 3,安装第三方模块； npm install –save express cookies markdown mongoose swig 4,项目结构； 5，在入口文件app.js中 6,设置首页路由；//应用启动入口var express=require('express')//创建app应用 相当于原创 2017-11-28 14:36:06 · 845 阅读 · 0 评论 -
nodejs基础教程--http 与express比较
写一个简单的服务var http=require('http')var server=http.createServer()server.listen(8080,'localhost');server.on('request',function (req,res) {//req:客户端请求的信息，res：服务端返回的响应 res.write("<h1>hello</h1>");原创 2017-10-16 16:33:40 · 4057 阅读 · 1 评论 -
vue+webpack中动态绑定图片路径的3种方法
1 把图片放到src同级的static目录 “` data() { return { mysrc:‘/static/icon/icon.png’ } }2 用require加载data() { return { mysrc:require(“../icon/icon.png”原创 2017-10-11 15:03:37 · 7580 阅读 · 0 评论 -
jq项目中使用vue的技巧
在jq项目中使用vue经常会碰到父组件和子组件在不同的js文件中。 而在这种情况下 props 传参数无效，event使用很麻烦。 下面介绍一些小技巧。var vm=new vue({ data(){ return { test0:"我是vue的参数" } }, methods：{ testFun(){原创 2017-06-21 10:47:35 · 3953 阅读 · 0 评论 -
easyUI 权限管理之菜单管理
这是/webView/systemMgr\roleMenu.html 菜单列表和功能列表可以增删改。 菜单列表的增改页面。这是/webView/systemMgr/roleMenu_edit.html 功能列表的增改页面。/webView/systemMgr/rolePower_edit.html 先来/webView/systemMgr\roleMenu.html<body class="原创 2017-06-12 14:44:11 · 7060 阅读 · 2 评论