德育处主任Pro
德育处主任Pro

Fabric.js 从入门到________

theme: smartblue

简介

首先要说的是：本文篇幅很长，建议点赞收藏(点赞就等于学会了)。

Fabric.js 简介

Fabric.js 是一个功能强大且操作简单的 Javascript HTML5 canvas 工具库。

Fabric.js 从入门到_________第1张图片

如果你需要用 canvas 做特效，那我推荐你使用 Fabric.js ，因为 Fabric.js 语法更加简单易用，而且还提供了很多交互类的 api。

Fabric.js 简化了很多 Canvas 里的概念，代码看上去也更加语义化。

Fabric.js 能做什么？

可以打开 『Fabric.js 官网首页』 直接看例子，也可以看看 『Fabric.js Demos』 查看更炫酷的例子。

本文简介

如果是 0基础 的读者，希望可以从头读到尾，读完起码大概知道 Fabric.js 有哪些功能。

本文是根据我的学习过程来编写的，只要跟着本文一步一步操作，一定可以入门 Fabric.js ~~，同时还能改善您的睡眠质量、解决毛发过多等诸多问题~~。

由于我使用 Fabric.js 的时间不长，这份笔记在各个知识点的内容肯定不够全面的，也不一定完全正确。读者们如果发现本文存在不正确的地方请大胆指出，我会改的~

本文适合人群：

  • 有原生三件套基础的开发者
  • 最好有 canvas 基础(这是加分项，完全没有也没关系的)

本文主要讲解 Fabric.js 基础，包括：

  • 画布的基本操作
  • 基础图形绘制方法(矩形、圆形、三角形、椭圆、多边形、线段等)
  • 图片和滤镜的使用
  • 文本和文本框
  • 动画
  • 分组和打散分组
  • 基础事件
  • 自由绘画
  • 裁剪
  • 序列化和反序列化
  • ……

除此之外，还会讲一些进阶一点的操作，比如：

  • 自定义操作角样式和状态
  • 自定义控件
  • 复制粘贴图形
  • 使用事件方式操作图形和分组
  • ……

除了上述内容外，我还会根据日后的工作中整理出更多常用和好玩的操作，本文即学习仓库会不定期更新！！！

相关链接

『Fabric.js npm地址』

『Fabric.js github地址』

本文案例在线预览

本文所有案例仓库地址 【欢迎Star，不定期更新！！！】

开发环境搭建

环境和版本说明

  • 本文使用 Fabric.js 的版本是 4.6。

  • 本文的开发环境是使用 Vite 构建的 Vue 3.2 项目。

没有 Vite 和 Vue3.2 基础的同学也不用怕，因为 Vite 真的足够简单。

本文的目的是讲解 Fabric.js ，所以用到 Vue 3.2 的地方其实很少，用到时我也会有详细说明。

如果你不打算使用 Vite 和 Vue 3.2 也没关系，用你喜欢的方式去搭建项目即可。

现在只需跟着以下步骤搭建项目即可。

搭建环境(Vite + Vue3)

Vite 官网

Vue3 官网

如果你不想使用 Vite + Vue3 的话，可以跳过本节。

我也建议你直接使用原生 (HTML+CSS+JS) 的方式直接学习 Fabric.js，因为这样上手速度最快。

1. 搭建Vite项目

npm init @vitejs/app

2. 给项目起个名，并选择 Vue

Fabric.js 从入门到_________第2张图片

之后会让你选 vue 或者 vue + ts，我选择了 vue ，你随意。

为什么不选 ts ？因为一人开发的练手项目使用 ts 有点得不偿失。

3. 初始化项目

其实做完上一步就会给出提示(3条命令)，跟着敲完就能运行项目了

```

进入项目目录

cd fabric-demo

初始化项目

npm install

运行项目

npm run dev ```

如果 npm 太慢的话，可以使用 cnpm 。

如果不知道 cnpm 怎么搞，请自行百度。

安装Fabric.js

方式1：CDN

```html


---
## 起步 只需 **3个操作** 就能展示点东西了。 ### 1. 新建页面并引入 Fabric.js 如果是原生项目，使用 `
### 2. 创建 canvas 容器 在 `HTML` 中创建 ` `，并设置容器的 `id` 和 `宽高，width/height` ```html ``` 这里创建了一个 `canvas` 容器，**id="c"**。 指定长宽都为 `400px` ，值得注意的是，这里不需要加 `px` 这个单位。 `style="border: 1px solid #ccc;"` 这句其实可以不加，这里只是为了在浏览器看到 `canvas` 元素到底在哪。 ![003.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9f7c1c07c4054a8abbb7e4b8c98a0b1c~tplv-k3u1fbpfcp-watermark.image?)
### 3. 使用 fabric 接管容器，并画一个矩形 在 `JS` 中实例化 `fabric` ，之后就可以使用 `fabric` 的 `api` 管理 `canvas` 了。 ```html

```

详情请看代码中每一行注释。

你可能感兴趣的:(java,html,epoll,webgl,canvas)

  • JavaWeb开发 - Filter过滤器详解 秦老师Q JavaWeb基础javawebjava-ee
    前言本章节主要学习JavaWeb开发中的Filter过滤器技术，收录于JavaWeb基础专栏，该专栏主要学习JavaWeb开发原生框架、Servlet、JSP、请求对象、响应对象、Session会话对象、Filter过滤器、三层开发模型等知识点，欢迎童鞋们互相交流。觉得不错可以三连订阅喔。目标1.概念2.Filter介绍3.入门案例4.验证登录案例4.1登录代码4.2过滤器验证内容1.概念Filt
  • 华为OD机试E卷 --跳格子3 --24年OD统一考试（Java & JS & Python & C & C++） 飞码创造者 最新华为OD机试题库2024华为odjavajavascriptpythonc语言
    文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c++算法源码题目描述小明和朋友们一起玩跳格子游戏，每个格子上有特定的分数score=[1,-1,-6,7,-17,7]，从起点score[0]开始，每次最大的步长为k，请你返回小明跳到终点score[n-1]时，能得到的最大得分。输入描述第一行输入总的格子数量n第二行输入每个格子的分数score[i]第三
  • Java 异常处理 大哥的打嗝 JAVAjavajvmservlet
    Java是一种面向对象的编程语言，Java程序在运行时可能会发生各种异常，如空指针异常、文件读取异常、算术异常等。在Java中，异常是指程序运行时可能会发生的错误，例如输入不正确、内存不足等等，这些异常会影响程序的正常执行。因此，Java提供了异常处理机制来处理这些异常，以保证程序的稳定性和可靠性。Java中的异常处理机制是通过throw和try-catch语句实现的。在Java中，throw语句
  • 华为OD机试C卷-- 机器人走迷宫（Java & JS & Python） 飞码创造者 华为OD机试题库华为odc语言机器人javascriptpythonjava
    获取题库不需要订阅专栏，可直接私信我进入CSDN领军人物top1博主的华为OD交流圈观看完整题库、最新面试实况、考试报告等内容以及大佬一对一答疑。题目描述1.房间由XY的方格组成，例如下图为6*4的大小。每一个方格以坐标(x，y)描述。2.机器人固定从方格(0，0)出发，只能向东或者向北前进。出口固定为房间的最东北角，如下图的方格(5，3)。用例保证机器人可以从入口走到出口。3.房间有些方格是墙壁
  • JavaWeb 前端基础 html + CSS 快速入门 | 018 菜鸟阿康学习编程 前端前端htmlcss
    今日推荐语指望别人的救赎，势必走向毁灭——波伏娃日期学习内容打卡编号2025年01月17日JavaWeb前端基础html+CSS018前言哈喽，我是菜鸟阿康。今天正式进入JavaWeb的学习，简单学习html+CSS这2各前端基础部分，以下是我的重点总结，希望对你有所帮助。（建议先看左侧目录，先了解文章结构）（请忽略错误的大纲编号，我直接从笔记中粘贴过来的，就没严格纠正了，重点在内容！）文末和主页
  • C#+ckeidtor5实现图片上传 假装我不帅 dotnetjsc#ckeditor5
    index.htmlCkEditor5html,body{width:100%;height:100%;}.editor-container{width:100%;height:100%;}#editor{width:100%;height:100%;}HelloWorld!ClassicEditor.create(document.querySelector('#editor'),{licens
  • 利用代理模式实现日志功能 郭亚航 java框架代理日志输出
    场景实现一个类，该类实现了数学四则运算，实现日志功能，每次调用对应的运算时，输出相应的日志基本功能接口packagecom.javase.thread;publicinterfaceArithmetic{publicintadd(inti,intj);publicintsub(inti,intj);publicintmul(inti,intj);publicintdiv(inti,intj);}接
  • 手摸手系列之---camel ftp监听接收解析xml报文并入库生成Java对象实战 码上艺术家 camelxmlcamel
    前言版本：SpringBoot2.4camel3.5.0最近在做跟一个第三方系统的对接，主要流程就是对方生成XML格式的报文，需要我方将其报文发送到海关申报，然后将申报完的数据再组装成XML报文格式发回到对方的FTP服务器。功能其实挺简单，用Apache的camel-ftp很容易就能实现，下面看看具体如何做吧。一、引入camel依赖：org.apache.camel.springbootcamel
  • 手摸手系列之---camel ftp监听本地报文目录，并在报文生成后上传到远程第三方ftp服务器实战 码上艺术家 camel服务器运维
    前言版本：SpringBoot2.4camel3.5.0上篇文章已经说过项目需求和主要流程，现在已经接收解析xml报文并入库生成Java对象。下一步就是处理完生成的数据生成XML报文，再返回给第三方ftp服务器了。下面看看怎么做。1.增加camel配置，本地监听目录和远程第三方ftp服务器URL。#camel配置camel:#camelftp服务路由地址route:id:XMLRouteftp:s
  • 非科班研究生转码-零基础学java笔记总结复习（2） Javaer.Zhang的乞讨之路 java大数据后端android算法
    说明：该Java笔记是基于B站韩顺平老师讲的Java来总结提炼的，其中参考了韩老师总结的笔记。具体内容可到B站观看韩顺平老师的Java详细了解。省略号表示不重要。。。具体参考韩老师笔记。目录级别，例：第#章#.##.#.##.#.#.#正文重点内容使用加粗，下划线，红体字等表示。全部内容共28章。需要了解哪章进主页看序号即可。[本文为第二章]目录第2章JAVA概述2.1什么是程序2.2JAVA诞生
  • JVM参数配置解析 niushoahan javajvmclassjavadocdeprecatedjavadocumentation
    在Java、J2EE大型应用中，JVM非标准参数的配置直接关系到整个系统的性能。JVM非标准参数指的是JVM底层的一些配置参数，这些参数在一般开发中默认即可，不需要任何配置。但是在生产环境中，为了提高性能，往往需要调整这些参数，以求系统达到最佳新能。另外这些参数的配置也是影响系统稳定性的一个重要因素，相信大多数Java开发人员都见过“OutOfMemory”类型的错误。呵呵，这其中很可能就是JVM
  • 使用 Node.js 处理异步编程的挑战
    Node.js是一个强大的JavaScript运行时环境，它以其非阻塞、事件驱动的特性闻名，使其在构建高并发应用程序时非常出色。然而，这种异步编程模型也带来了挑战，尤其是当我们需要处理复杂的异步操作时。本文将深入探讨Node.js中异步编程的挑战，并介绍一些常见的解决方案。异步编程的挑战在Node.js中，许多操作都是异步的，比如文件操作、网络请求、数据库查询等。虽然异步操作可以提高应用程序的性能
  • 前端HTML-将进酒 dgw2648633809 前端html
    要求：实现：将进酒body{font-family:Arial,sans-serif;}h2{text-align:center;}p{text-indent:2em;margin:10px0;}img{float:left;margin-right:20px;}将进酒君不见黄河之水天上来君不见黄河之水天上来，奔流到海不复回。君不见高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天
  • 前端HTML-网上转账电子账单 dgw2648633809 前端html
    要求：实现：工商银行电子汇款单table{border-collapse:collapse;width:100%;}th,td{border:1pxsolidblack;padding:8px;text-align:left;}th{background-color:#f2f2f2;}工商银行电子汇款单回单类型网上转账汇款指令序号HQH00000000000000013878172收款人户名老牟付
  • java学习记录17 cwtlw java学习总结java学习开发语言笔记
    泛型泛型概念Java泛型（generics）是JDK5引入的一个新特性，泛型提供了编译时类型安全检测机制，该机制允许程序员在编译时检测到非法的类型。泛型的本质是参数化类型，即给类型指定一个参数，然后在使用时再指定该参数的值，那么这个类型就可以在使用时决定了。这种参数类型可以用在类、接口和方法中，分别被称为泛型类、泛型接口、泛型方法。publicclassTestClass{privateTvalu
  • java调用webservice，restful ams77019 javajson
    java调用webservicepublicStringredoEsb(Stringloguid,Stringuser,Stringcomments,StringnewMsg,StringipLocation)throwsException{//StringredoEsb=VariableStore.getValue("redoEsb");StringredoEsb="D:\Admin\"Stri
  • 华为OD机试E卷 - 机器人活动区域（Java & Python& JS & C++ & C ） 算法大师 最新华为OD机试java华为od机器人c语言javascriptpython华为OD机试E卷
    最新华为OD机试真题目录：点击查看目录华为OD面试真题精选：点击立即查看题目描述现有一个机器人，可放置于M×N的网格中任意位置，每个网格包含一个非负整数编号，当相邻网格的数字编号差值的绝对值小于等于1时，机器人可以在网格间移动。问题：求机器人可活动的最大范围对应的网格点数目。说明：网格左上角坐标为(0,0),右下角坐标为(m−1,n−1)，机器人只能在相邻网格间上下左右移动输入描述第1行输入为M和
  • Java ‘URL(java. lang. String)‘ 自版本 20 起已弃用 空灵宫（Ethereal Palace） Javajava开发语言
    在Java20及更高版本中，不推荐直接使用newURL(Stringspec)构造方法。官方建议通过更加安全和明确的方式来创建URL。下面示例给出两种常见替代方案：使用URI转化为URL，或使用多参数构造方法。原始写法（已弃用）publicclassUrlDemo{publicstaticvoidmain(String[]args){try{//自Java20起已弃用URLurl=newURL("
  • Java 中throws Exception的使用 ※※冰馨※※ Javawinformc#
    1、(终极解释！！！)throwsException放在方法后边，是throwsException表示的是本方法不处理异常，交给被调用处处理(如果你不希望异常层层往上抛，你就要用throwsException)，而且被调用处必须处理。2、thrownewException表示人为的抛出一个异常，例如：publicbooleaninsert(Newsn){try{.....}catch{thrown
  • 如何使用JavaScript开发AR(增强现实)移动应用 (一)
    Python中的class体内定义方法时，如果没有显式地包含self参数，有时候依然可以被调用。这是一个非常有趣的话题，因为它涉及到对Python中类与对象之间关系的更深理解。要理解为什么这种情况下方法依然能够被调用，我们需要逐步拆解Python类的构造方式以及方法绑定的原理。
  • Spring-@Configuration注解简析
    大家好，我是半夏之沫一名金融科技领域的JAVA系统研发我希望将自己工作和学习中的经验以最朴实，最严谨的方式分享给大家，共同进步写作不易，期待大家的关注和点赞关注微信公众号【技术探界】前言Spring中的@Configuration注解修饰的类被称为配置类，通过配置类可以向容器注册bean以及导入其它配置类，本篇文章将结合例子和源码对@Configuration注解原理进行学习，并引出对Spring
  • 通过Java代码实现图片的放大和缩小
    在多模态模型的架构上，ChatGPT的绘图能力主要依赖以下几个核心组件：跨模态编码器（Cross-ModalEncoder）：跨模态编码器的作用是将文本和图像的特征进行对齐。GPT可以将用户输入的文本描述转换为文本特征表示，然后利用跨模态编码器将这些特征映射到图像特征空间。这种方式确保模型能够理解描述性语言中不同细节是如何与图像特征对应的。
  • 百万架构师第二十二课：源码分析：Spring 源码分析：Spring经典面试答疑｜JavaGuide 后端
    Spring面试解答上半节：面试中需要注意的细节动脑子，面试是一种交流面试的时候，要用心去感受当时面试场景了解自己，自己的长处、自己的短处（巧妙地扬长避短）了解1.公司的业务场景2.你是去面试什么岗位的？Java高级工程师实际工作经验是1年（如实填写）1、请描述SpringIOC的工作原理答：定位加载注册BeanFactoryBeanDefintion...1-3年1+ApplicationCon
  • JavaScript语言的计算机基础 疯狂小小小码农 包罗万象golang开发语言后端
    JavaScript语言的计算机基础引言自1995年由网景公司（Netscape）推出以来，JavaScript已经从一个简单的客户端脚本语言发展成为一种广泛使用的编程语言。如今，它不仅在网页开发中扮演着不可或缺的角色，还成为后端开发、移动应用开发、甚至桌面应用开发的一部分。在本文中，我们将探讨JavaScript语言的基本概念及其背后的计算机基础，以帮助读者更好地理解这种语言及其应用。一、计算机
  • 华为OD机试E卷 --堆栈中的剩余数字--24年OD统一考试（Java & JS & Python & C & C++） 飞码创造者 最新华为OD机试题库2024java华为odjavascriptpythonjsc语言
    文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c算法源码题目描述向一个空栈中依次存入正整数，假设入栈元素n(1<=n<=2^31-1)按顺序依次为nx…n4、n3、n2、n1,每当元素入栈时，如果n1=n2+…+ny(y的范围[2,x]，1<=x<=1000)，则n1~ny全部元素出栈，重新入栈新元素m(m=2n1)。如：依次向栈存入6、1、2、3,当
  • 华为OD机试E卷 --机器人活动区域--24年OD统一考试（Java & JS & Python & C & C++） 飞码创造者 最新华为OD机试题库2024华为od机器人javajavascriptpythonjs
    文章目录题目描述输入描述输出描述用例题目解析JS算法源码Java算法源码python算法源码c算法源码c++算法源码题目描述现有一个机器人，可放置于M×N的网格Q中任意位置，每个网格包含一个非负整数编号。当相邻网格的数字编号差值的绝对值小于等于1时，机器人可在网格间移动问题:求机器人可活动的最大范围对应的网格点数目。说明:1)网格左上角坐标为(0,0)，右下角坐标为(m-1,n-1)2）机器人只能
  • postcss插件-实现vw适配 ordinary90 前端全栈开发VUEpostcss前端javascript
    PostCSS是一个用JavaScript编写的插件工具，它可以帮助我们对CSS进行模块化、自动化处理和优化。使用PostCSS插件可以扩展CSS的功能，实现更多的特性，其中一个常用的插件就是实现vw适配的插件。vw（ViewportWidth）是CSS3中的一个单位，它表示相对于视口宽度的百分比。使用vw单位可以根据视口的大小，实现自适应布局。在移动端开发中，vw适配可以帮助我们在不同的屏幕尺寸
  • Android使用PorterDuffXfermode模式PorterDuff.Mode.SRC_OUT橡皮擦实现马赛克效果，Kotlin（3） zhangphil Androidkotlinandroidkotlin
    Android使用PorterDuffXfermode模式PorterDuff.Mode.SRC_OUT橡皮擦实现马赛克效果，Kotlin（3）importandroid.content.Contextimportandroid.graphics.Bitmapimportandroid.graphics.BitmapFactoryimportandroid.graphics.Canvasimpor
  • 在RuoYi若依中生成代码并自定义功能 阿符阿 前端后端数据库htmlbootstrapajaxjavasql
    目录一、代码生成的三层架构二、页面内容2.1下拉列表2.2自定义表单和表格三、数据传递3.1页面传值给后台3.2后台传值给页面四、业务逻辑4.1减少访问4.2功能：更改序号-逻辑五、数据访问5.1带上@param5.2功能：更改序号-操作六、结语一、代码生成的三层架构使用若依后台系统的代码生成功能，会得到以下结构的项目文件：|--src||--main||--java|||--com|||--or
  • 地图书签功能 小小弯_Shelby vue.js前端
    主要逻辑：保存地图中心点、缩放级别、当前的地图图片与图层。{{item.markName}}添加书签删除取消添加保存import{queryByPage,addBookMark,updateBookMark,deleteBookMark}from'@/api/fisheryMap/bookmark'importhtml2canvasfrom'html2canvas'import{mapState}
  • 矩阵求逆（JAVA）利用伴随矩阵 qiuwanchi 利用伴随矩阵求逆矩阵
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(利用伴随矩阵) * @author 邱万迟
  • 单例（Singleton）模式 aoyouzi 单例模式Singleton
    3.1           概述 如果要保证系统里一个类最多只能存在一个实例时，我们就需要单例模式。这种情况在我们应用中经常碰到，例如缓存池，数据库连接池，线程池，一些应用服务实例等。在多线程环境中，为了保证实例的唯一性其实并不简单，这章将和读者一起探讨如何实现单例模式。 3.2
  • [开源与自主研发]就算可以轻易获得外部技术支持,自己也必须研发 comsci 开源
          现在国内有大量的信息技术产品，都是通过盗版，免费下载，开源，附送等方式从国外的开发者那里获得的。。。。。。        虽然这种情况带来了国内信息产业的短暂繁荣，也促进了电子商务和互联网产业的快速发展，但是实际上，我们应该清醒的看到，这些产业的核心力量是被国外的
  • 页面有两个frame,怎样点击一个的链接改变另一个的内容 Array_06 UIXHTML
    <a src="地址"  targets="这里写你要操作的Frame的名字" />搜索 然后你点击连接以后你的新页面就会显示在你设置的Frame名字的框那里 targerts="",就是你要填写目标的显示页面位置 ===================== 例如： <frame src=&
  • Struts2实现单个/多个文件上传和下载 oloz 文件上传struts
    struts2单文件上传：     步骤01:jsp页面 <!--在进行文件上传时，表单提交方式一定要是post的方式，因为文件上传时二进制文件可能会很大，还有就是enctype属性，这个属性一定要写成multipart/form-data，不然就会以二进制文本上传到服务器端--> 　　<form action="fileUplo
  • 推荐10个在线logo设计网站 362217990 logo
    在线设计Logo网站。 1、http://flickr.nosv.org（这个太简单） 2、http://www.logomaker.com/?source=1.5770.1 3、http://www.simwebsol.com/ImageTool 4、http://www.logogenerator.com/logo.php?nal=1&tpl_catlist[]=2 5、ht
  • jsp上传文件 香水浓 jspfileupload
    1. jsp上传 Notice： 1. form表单 method 属性必须设置为 POST 方法 ，不能使用 GET 方法 2. form表单 enctype 属性需要设置为 multipart/form-data 3. form表单 action 属性需要设置为提交到后台处理文件上传的jsp文件地址或者servlet地址。例如 uploadFile.jsp 程序文件用来处理上传的文
  • 我的架构经验系列文章 - 前端架构 agevs JavaScriptWeb框架UIjQuer
    框架层面：近几年前端发展很快，前端之所以叫前端因为前端是已经可以独立成为一种职业了，js也不再是十年前的玩具了，以前富客户端RIA的应用可能会用flash/flex或是silverlight，现在可以使用js来完成大部分的功能，因此js作为一门前端的支撑语言也不仅仅是进行的简单的编码，越来越多框架性的东西出现了。越来越多的开发模式转变为后端只是吐json的数据源，而前端做所有UI的事情。MVCMV
  • android ksoap2 中把XML(DataSet) 当做参数传递 aijuans android
    我的android app中需要发送webservice ，于是我使用了 ksop2 进行发送，在测试过程中不是很顺利,不能正常工作.我的web service 请求格式如下     [html]  view plain copy   <Envelope xmlns="http://schemas.
  • 使用Spring进行统一日志管理 + 统一异常管理 baalwolf spring
    统一日志和异常管理配置好后，SSH项目中，代码以往散落的log.info() 和 try..catch..finally 再也不见踪影！ 统一日志异常实现类： [java]  view plain copy   package com.pilelot.web.util;      impor
  • Android SDK 国内镜像 BigBird2012 android sdk
    一、镜像地址： 1、东软信息学院的 Android SDK 镜像，比配置代理下载快多了。 配置地址， http://mirrors.neusoft.edu.cn/configurations.we#android 2、北京化工大学的： IPV4:ubuntu.buct.edu.cn  IPV4:ubuntu.buct.cn IPV6:ubuntu.buct6.edu.cn
  • HTML无害化和Sanitize模块 bijian1013 JavaScriptAngularJSLinkySanitize
    一.ng-bind-html、ng-bind-html-unsafe         AngularJS非常注重安全方面的问题，它会尽一切可能把大多数攻击手段最小化。其中一个攻击手段是向你的web页面里注入不安全的HTML，然后利用它触发跨站攻击或者注入攻击。         考虑这样一个例子，假设我们有一个变量存
  • [Maven学习笔记二]Maven命令 bit1129 maven
    mvn compile compile编译命令将src/main/java和src/main/resources中的代码和配置文件编译到target/classes中，不会对src/test/java中的测试类进行编译 MVN编译使用 maven-resources-plugin:2.6:resources maven-compiler-plugin:2.5.1:compile &nbs
  • 【Java命令二】jhat bit1129 Java命令
    jhat用于分析使用jmap dump的文件，，可以将堆中的对象以html的形式显示出来，包括对象的数量，大小等等，并支持对象查询语言。 jhat默认开启监听端口7000的HTTP服务，jhat是Java Heap Analysis Tool的缩写 1. 用法： [hadoop@hadoop bin]$ jhat -help Usage: jhat [-stack <bool&g
  • JBoss 5.1.0 GA:Error installing to Instantiated: name=AttachmentStore state=Desc ronin47
    进到类似目录 server/default/conf/bootstrap，打开文件 profile.xml找到： Xml代码<bean    name="AttachmentStore"  class="org.jboss.system.server.profileservice.repository.AbstractAtta
  • 写给初学者的6条网页设计安全配色指南 brotherlamp UIui自学ui视频ui教程ui资料
    网页设计中最基本的原则之一是，不管你花多长时间创造一个华丽的设计，其最终的角色都是这场秀中真正的明星——内容的衬托     我仍然清楚地记得我最早的一次美术课，那时我还是一个小小的、对凡事都充满渴望的孩子，我摆放出一大堆漂亮的彩色颜料。我仍然记得当我第一次看到原色与另一种颜色混合变成第二种颜色时的那种兴奋，并且我想，既然两种颜色能创造出一种全新的美丽色彩，那所有颜色
  • 有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。写一个函数实现。复杂度是什么。 bylijinnan java算法面试
    import java.util.Random; import java.util.Set; import java.util.TreeSet; /** * http://weibo.com/1915548291/z7HtOF4sx * #面试题#有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。 * 写一个函数实现。复杂度是什么
  • struts2获得request、session、application方式 chiangfai application
    1、与Servlet API解耦的访问方式。 a.Struts2对HttpServletRequest、HttpSession、ServletContext进行了封装，构造了三个Map对象来替代这三种对象要获取这三个Map对象，使用ActionContext类。 ----->   package pro.action; import java.util.Map; imp
  • 改变python的默认语言设置 chenchao051 python
    import sys sys.getdefaultencoding()  可以测试出默认语言，要改变的话，需要在python lib的site-packages文件夹下新建： sitecustomize.py， 这个文件比较特殊，会在python启动时来加载，所以就可以在里面写上： import sys sys.setdefaultencoding('utf-8') &n
  • mysql导入数据load data infile用法 daizj mysql导入数据
    我们常常导入数据！mysql有一个高效导入方法，那就是load data infile 下面来看案例说明 基本语法： load data  [low_priority] [local] infile 'file_name txt' [replace | ignore] into table tbl_name [fields [terminated by't'] [OPTI
  • phpexcel导入excel表到数据库简单入门示例 dcj3sjt126com PHPExcel
    跟导出相对应的，同一个数据表，也是将phpexcel类放在class目录下，将Excel表格中的内容读取出来放到数据库中 <?php error_reporting(E_ALL); set_time_limit(0); ?> <html> <head> <meta http-equiv="Content-Type"
  • 22岁到72岁的男人对女人的要求 dcj3sjt126com
    22岁男人对女人的要求是：一，美丽，二，性感，三，有份具品味的职业，四，极有耐性，善解人意，五，该聪明的时候聪明，六，作小鸟依人状时尽量自然，七，怎样穿都好看，八，懂得适当地撒娇，九，虽作惊喜反应，但看起来自然，十，上了床就是个无条件荡妇。 32岁的男人对女人的要求，略作修定，是：一，入得厨房，进得睡房，二，不必服侍皇太后，三，不介意浪漫蜡烛配盒饭，四，听多过说，五，不再傻笑，六，懂得独
  • Spring和HIbernate对DDM设计的支持 e200702084 DAO设计模式springHibernate领域模型
    A：数据访问对象     DAO和资源库在领域驱动设计中都很重要。DAO是关系型数据库和应用之间的契约。它封装了Web应用中的数据库CRUD操作细节。另一方面，资源库是一个独立的抽象，它与DAO进行交互，并提供到领域模型的“业务接口”。    资源库使用领域的通用语言，处理所有必要的DAO，并使用领域理解的语言提供对领域模型的数据访问服务。
  • NoSql 数据库的特性比较 geeksun NoSQL
    Redis 是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。目前由VMware主持开发工作。   1. 数据模型 作为Key-value型数据库，Redis也提供了键（Key）和值（Value）的映射关系。除了常规的数值或字符串，Redis的键值还可以是以下形式之一： Lists （列表） Sets
  • 使用 Nginx Upload Module 实现上传文件功能 hongtoushizi nginx
    转载自： http://www.tuicool.com/wx/aUrAzm   普通网站在实现文件上传功能的时候，一般是使用Python，Java等后端程序实现，比较麻烦。Nginx有一个Upload模块，可以非常简单的实现文件上传功能。此模块的原理是先把用户上传的文件保存到临时文件，然后在交由后台页面处理，并且把文件的原名，上传后的名称，文件类型，文件大小set到页面。下
  • spring-boot-web-ui及thymeleaf基本使用 jishiweili springthymeleaf
    视图控制层代码demo如下：   @Controller @RequestMapping("/") public class MessageController { private final MessageRepository messageRepository; @Autowired public MessageController(Mes
  • 数据源架构模式之活动记录 home198979 PHP架构活动记录数据映射
    hello!架构 一、概念 活动记录（Active Record）：一个对象，它包装数据库表或视图中某一行，封装数据库访问，并在这些数据上增加了领域逻辑。 对象既有数据又有行为。活动记录使用直截了当的方法，把数据访问逻辑置于领域对象中。   二、实现简单活动记录 活动记录在php许多框架中都有应用，如cakephp。 <?php /** * 行数据入口类 *
  • Linux Shell脚本之自动修改IP pda158 linuxcentosDebian脚本
    作为一名 Linux SA，日常运维中很多地方都会用到脚本，而服务器的ip一般采用静态ip或者MAC绑定，当然后者比较操作起来相对繁琐，而前者我们可以设置主机名、ip信息、网关等配置。修改成特定的主机名在维护和管理方面也比较方便。如下脚本用途为：修改ip和主机名等相关信息，可以根据实际需求修改，举一反三！ #!/bin/sh #auto Change ip netmask ga
  • 开发环境搭建 独浮云 eclipsejdktomcat
           最近在开发过程中，经常出现MyEclipse内存溢出等错误，需要重启的情况，好麻烦。对于一般的JAVA+TOMCAT项目开发，其实没有必要使用重量级的MyEclipse，使用eclipse就足够了。尤其是开发机器硬件配置一般的人。         &n
  • 操作日期和时间的工具类 vipbooks 工具类
       大家好啊，好久没有来这里发文章了，今天来逛逛，分享一篇刚写不久的操作日期和时间的工具类，希望对大家有所帮助。 /* * @(#)DataFormatUtils.java 2010-10-10 * * Copyright 2010 BianJing,All rights reserved. */ package test; impor