2020-12-18

.markdown-section tr th {
    background-color: #f8f8f8;
    padding: 6px 20px;
    white-space: nowrap;
}
.markdown-section td, .markdown-section th {
    border: 1px solid #ddd;
    padding: 6px 13px;
}

.markdown-section th {
    font-weight: 700;
}

zepto.js   //移动端用的，跟jq用法一样，基本没什么两样，所以只要会用jq就会用zepto

echo.js   //这是一个懒加载的插件，跟jquery.lazyload，相比是比较小的吧，没用过，不过是牛人推荐的。

iscroll.js   //主要是做滑动效果的

sortable.js  //拖拽排序人效果

hammer.js  //是一款开源的移动端脚本框架，他可以完美的实现在移端开发的大多数事件，如：点击、滑动、拖动、多点触控等事件。不需要依赖任何其他的框架，并且整个框架非常小，\在使用时非常简单

 1. zepoto.js 轻量级移动端类库，里面有封装tap、swipe事件，类似jquery.js,引用后可用jquery，也可以引用jquery压缩版 
 http://www.zeptojs.cn/#contents
 2. touch.js 移动端触摸事件库，zepto的tap事件可能在某些情况下会出问题，所以用touch.js,使用时参考文档库：
 http://www.cnblogs.com/Chen-XiaoJun/articles/5826698.html
  有拖拽、滑动、旋转等 现成的效果
 3. hammar.js 类似touch.js
 4.fastclick.js 解决click的300ms的延迟和点透bug，通常用tap做点击事件，使用参考：
 http://blog.csdn.net/zfy865628361/article/details/49512095
 5. annimate.css 动画库 里面定义了一些常用的css动画。 移动端很吃性能，避免频繁操作dom，所以用css3的动画、过度等，性能好，使用时直接加animated和动画的类名即可。
 https://daneden.github.io/animate.css/
 6. swiper.js 移动端触摸滑动插件，做轮播效果 ，效果以及使用参考: 
 http://www.swiper.com.cn/
 7.iscroll-4插件 解决web-app中区域滚动问题，滑动时有惯性运动，本质：利用css3属性让dom运动
 http://www.360doc.com/content/14/0724/11/16276861_396699901.shtml

移动端：移动端事件 https://www.cnblogs.com/guisenbin/p/10454412.html
通过鼠标滚动全屏切换，也可以点击图标全屏切换主要是jquery.mousewheel.js 操作
jquery.nicescroll美化滚动条
利用swiper实现下拉刷新，上拉加载，tab左右切换
IScroll5 上拉 https://www.jq22.com/demo/pullDownUp201811220056
IScroll4 https://www.jq22.com/demo/iScroll4201802112232/
SuperSlide  https://www.jq22.com/demo/SuperSlide-150316185950
TouchSlider
iSlider.js手机幻灯片代码制作手指滑动手机端图片轮播代码
https://www.jq22.com/demo/jQuery-jdt20160307
https://www.cnblogs.com/shaojiang/p/5295826.html
利用轮播原理结合hammer.js实现简洁的滑屏功能
touch.js
touchSwipe
touchslider
ui (542)
jquery (482)
form (285)
animation (273)
input (252)
image (210)
responsive (184)
slider (172)
ajax (154)
scroll (140)

常用的一些网址整理
图像处理压缩图片：https://tinypng.com/
图片精灵自动生成网址：
http://www.spritecow.com/
http://www.spritebox.net/
前端效果收集：http://code.ciaoca.com
前端导航：http://www.fenav.com/#/p7
各种表格：http://w2ui.com/web/demos/#!fields/fields-3
前端人的网站：http://f2er.club/
最全前端资料网址：http://www.jeffjade.com/2016/03/30/104-front-end-tutorial/
日历插件：移动端：https://demo.mobiscroll.com/v3/calendar/icons/#language=zh&display=inline
最全前端资源汇集：https://www.jeffjade.com/2016/03/30/104-front-end-tutorial/#
jQuery插件库-收集最全最新最好的jQuery插件：http://www.jq22.com/
动画：https://motion.ant.design/exhibition/
什么前端框架：https://mobile.ant.design/components/popover/
jquery api：http://www.css88.com/jqapi-1.9/category/miscellaneous/dom-element-methods/
Native.js示例汇总：http://ask.dcloud.net.cn/article/114
Observable is a better way to code.：http://ask.dcloud.net.cn/article/114
网易的框架：http://nec.netease.com/framework/css-animation.html
zui：http://www.zui.sexy/#javascript/store（一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。）
小程序前端框架 weUi：http://weixin.yoby123.cn/weui/c/cell4.html
移动端框架：Frozen UI、WeUI、SUI Mobile，amaze ui，GMU（Global Mobile UI）百度的touchjs
什么年龄就去做什么事情。 20岁之前你最应该做的事情就是好好学习； 20岁 - 30岁你最好找一个好的老板、好的公司踏踏实实工作；30岁 - 40岁就可以去做你自己喜欢的事情了，不断去挑战自己；40岁 - 50岁，就少一些折腾吧，努力做好自己最为擅长的事情；50岁 - 60岁就可以去培养新人了； 60岁之后，就可以陪陪孙子、孙女，因为人生还有生活，而不只是工作。 

https://www.cnblogs.com/jieqing/p/3347439.html oracle erp 表结构
https://github.com/wangzheng0822/algo 数据结构与算法必备的 50 个代码实现
https://github.com/golang/go/wiki/GoUsers

https://www.cnblogs.com/lguow/p/9776211.html
https://www.cnblogs.com/lguow/p/9776211.html

代码生成器源码，可一键生成controller，service，，实体类，单表、多表的sql语句，日志处理、事务支持等，同时可以生成dubbo和springCloud脚手架方便开发微服务项目，能在很大程度上提高开发效率，节约开发时间。代码生成完毕后即为一个前台到后台的完整项目。目前后台支持SSM/SpringBoot,数据库支持mysql/postgresql/oracle，前台样式使用BootStrap，js支持jquery/vue，导入eclipse/idea便可运行，可根据需求自由扩展

gin框架介绍
gin框架是Go语言进行web开发（api开发，微服务开发）框架中，功能和Martini框架类似的API，但是性能却特别好的一个框架（比Martini快将近40倍吧），所以如果你特别在乎性能，那么Gin会是一个比较好的选择。

gin框架主要基于httprouter模块进行实现。gin框架和httprouter都是一个开源的框架。

微服务本身即是一种开发模式，将业务拆分成为一个个细小的微服务模块，然后以api（rpc）方式对外提供实现，实现的功能是一个独立的业务模块，那么使用轻量级的gin便是一个不错的选择。

Go web
go iris 网页 / go gin 接口
go-micro （内置gRPC）微服务框架
consul 服务注册发现
分组路由
中间件实现授权访问
redis 管理登陆会话
日志错误管理
ORM 框架 gorp 引入
图片上传，google.uuid 生成文件名
使用 Go Module 方式开发

CSS 改变input placeholder 颜色
input:-ms-input-placeholder {
    color: #a9a9a9;
}/* Internet Explorer 10+ */

input::-webkit-input-placeholder {
    color: #a9a9a9;
}/* WebKit browsers */

input::-moz-placeholder {
    color: #a9a9a9;
}/* Mozilla Firefox 4 to 18 */

input:-moz-placeholder {
    color: #a9a9a9;
}/* Mozilla Firefox 19+ */

HTTP协议六种请求方法,get,head,put,delete,post有什么区别
标准Http协议支持六种请求方法，即：

1、GET

2、POST

3、PUT

4、Delete

5、HEAD

6、Options

       但其实我们大部分情况下只用到了GET和POST。如果想设计一个符合RESTful规范的web应用程序，则这六种方法都会用到。不过即使暂时不想涉及REST，了解这六种方法的本质仍然是很有作用的。大家将会发现，原来web也是很简洁明了的。下面依次说明这六种方法。

       1，GET：GET可以说是最常见的了，它本质就是发送一个请求来取得服务器上的某一资源。资源通过一组HTTP头和呈现据（如HTML文本，或者图片或者视频等）返回给客户端。GET请求中，永远不会包含呈现数据。

       2，HEAD：HEAD和GET本质是一样的，区别在于HEAD不含有呈现数据，而仅仅是HTTP头信息。有的人可能觉得这个方法没什么用，其实不是这样的。想象一个业务情景：欲判断某个资源是否存在，我们通常使用GET，但这里用HEAD则意义更加明确。

       3，PUT：这个方法比较少见。HTML表单也不支持这个。本质上来讲， PUT和POST极为相似，都是向服务器发送数据，但它们之间有一个重要区别，PUT通常指定了资源的存放位置，而POST则没有，POST的数据存放位置由服务器自己决定。

       举个例子：如一个用于提交博文的URL，/addBlog。如果用PUT，则提交的URL会是像这样的”/addBlog/abc123”，其中abc123就是这个博文的地址。而如果用POST，则这个地址会在提交后由服务器告知客户端。目前大部分博客都是这样的。显然，PUT和POST用途是不一样的。具体用哪个还取决于当前的业务场景。

      4，DELETE：删除某一个资源。基本上这个也很少见，不过还是有一些地方比如amazon的S3云服务里面就用的这个方法来删除资源。

      5，POST：向服务器提交数据。这个方法用途广泛，几乎目前所有的提交操作都是靠这个完成。

      6，OPTIONS：这个方法很有趣，但极少使用。它用于获取当前URL所支持的方法。若请求成功，则它会在HTTP头中包含一个名为“Allow”的头，值是所支持的方法，如“GET, POST”。

其实还有一个 TRACE方法，不过这个基本上不会用到，这里就不介绍了。

       以上的六种方法，我们可以跟数据库的CRUD增删改查操作对应起来： CREATE ：PUT READ：GET UPDATE：POST DELETE：DELETE 这样一来就实现了HTTP和数据库操作（其实不光是数据库，任何数据如文件图表都是这样）的完美统一，这也是REST的精髓之一。
css input placeholder
CSS _text-align:justify;实现两端对齐
为什么css应用text-align:justify不能两端对齐?

4 回答
?
MYYA
一行文本不进行处理。还有就是强制换行的也不处理。所以你强制占满（在后面加个span）了一行他才处理。

123456789    <p class="home">test test test <span></span></p>.home{ text-align:justify;} span{ display:inline-block; width:100%;}
 加上span会会有效果，但是span会影响布局，所以

1234    .home{ text-align:justify; overflow:hidden;}

input[type=file]上传图片及转为base64码以及预览
<input type="file" id="imgurl" capture="camera" accept="image/png,image/gif,image/jpeg"/>

在移动端上传可以像上面那样设置，如果不行的话可以将后面的accept属性改成accept="image/*";

accept 属性只能与 <input type="file"> 配合使用。它规定能够通过文件上传进行提交的文件类型。

如果不限制图像的格式，可以写为：accept="image/*"。

如果想在上传完文件执行需求，input[type=file]用click事件是不行的，要用change事件，这样就可以在上传完文件后干你爱干的事。

input[type=file]的样式如果设置不了，或者嫌设置太麻烦的话，可以直接将它的opacity设置为0，然后覆盖在触发的按钮上就行。

还有如果不传base64，而是直接用form上传文件的话，一定要设置这个属性：enctype="multipart/form-data"

转base64码(其实就是图片的url，只不过是换了种方式来表示)
复制代码
$('input[type=file]').on{'change',function(){
var reader=new FileReader();
  reader.οnlοad=function(e){
  console.log( reader.result);  //或者 e.target.result都是一样的，都是base64码
}  
reader.readAsDataURL(this.files[0])
//filses就是input[type=file]文件列表，files[0]就是第一个文件，这里就是将选择的第一个图片文件转化为base64的码
}                                
复制代码
 

预览，这个最简单，直接将上面得到的reader.result赋值给一个img标签就可显示，后台传的图片数据也直接把reader.result储存起来发过去就可以。

其实后台的需求是要我用canvas来上传，用canvas既能压缩图片，又能限制大小，又能限制尺寸，也能转base64码。可惜由于我能力不足，加上时间有点赶，于是就先用着这种老点的方法，不过技术是与时俱进的，不能仅仅是做出来就行，要赶上技术的变化才行，下次一定要学会用canvas来上传图片才行。