如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一、跨域科普
跨域，即跨站HTTP请求(Cross-site HTTP request)，指发起请求的资源所在域不同于请求指向资源所在域的HTTP请求。
二、如何产生跨域
当使用前后端分离，后端主导的开发方式进行前后端协作开发时，常常有如下情景：
a、后端开发完毕在服务器上进行部署并给前端API文档。
三、解决方案
1、JQuery+ajax+jsonp 跨域访问
下面给出例子：
html 前端代码：
服务器端：
2、通过注解的方式允许跨域
在Controller类或其方法上加@CrossOrigin注解，来使之支持跨域。
其中origins为CrossOrigin的默认参数，即跨域来源，*即任何来源，也可以是其他域名。即可以以以下形式：
该注解用于方法上，写法相同，处理时，SpringMVC会对类上标签和方法上标签进行合并。
3、通过配置文件的方式允许跨域
在web.xml中添加如下配置：
b、前端在本地进行开发并向远程服务器上部署的后端发送请求。
c、在这种开发过程中，如果前端想要一边开发一边测试接口，就需要使用跨域的方式。
[html] view plain copy
[java] view plain copy
[java] view plain copy
[java] view plain copy
使用这个Filter即可让整个服务器全局允许跨域。
[html] view plain copy
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
在用2.x开发时有的地方的颜色样式是通过添加 color="primary" 属性的形式设置的，但是升级3.x之后这种方式除了一些自带的color属性的组件、标签（eg: ）可以生效，其他的都失效了。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
XML 不是 HTML 的替代。
XML 和 HTML 为不同的目的而设计：
HTML 旨在显示信息，而 XML 旨在传输信息
xml的用途:
XML 简化数据共享
XML 简化数据传输
<?xml version="1.0" encoding="UTF-8"?> 声明
以及根元素 子元素 以及定义根元素结尾
如例
声明
<?xml version="1.0" encoding="UTF-8"?>
根元素
<note>
子元素
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
定义根元素结尾
命名的规范
在 Windows 应用程序中，换行通常以一对字符来存储：回车符（CR）和换行符（LF）。
在 Unix 和 Mac OSX 中，使用 LF 来存储新行。
在旧的 Mac 系统中，使用 CR 来存储新行。
XML 以 LF 存储换行。
什么是xml, xml有什么作用？
XML 是独立于软件和硬件的信息传输工具
XML 和 HTML 之间的差异
XML 把数据从 HTML 分离
XML 简化平台变更
XML 使您的数据更有用
XML 用于创建新的互联网语言
所有的 XML 元素都必须有一个关闭标签
XML 标签对大小写敏感、
XML 必须正确嵌套
XML 属性值必须加引号
实体引用
XML 以 LF 存储换行
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
下载地址：https://v3.bootcss.com/
1. 下载Bootstrap
进入后下载这个标题的Bootstrap
下载完成后，将所需的css,js复制到工程中即可
2. 拷贝官方的模块文件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
3. 页面添加组件
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
然后将二者结合即可：
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
- 最后的结果如下：
Left Middle Right
至此你就可以简单的用前端框架做出美观的界面了！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
弹性布局（Flexbox）确实为我们构建复杂、灵活的布局带来了很大的便利，但是它的兼容性确实让人很头痛，下面是我遇到的一个问题：
理想效果：
IE11效果：
html大概结构：
这里大致说一下css，input-container宽高没设死，由input决定，并设置position: relative;相对定位，并采用display: flex;弹性布局。tooltip设置绝对定位，通过top调整垂直位置，由input-container的弹性布局属性设置水平居中（是不是觉得我很作死，为什么不直接用绝对定位就把垂直水平都搞定了。哈哈，一切源于一颗装B+傻B的心，不过，能实际体会一下flexbox带来的问题，我觉得也挺好的）。
结果在chrome下正常，IE11下就成上图那样了，我上MDN Web看了一下，说弹性布局是支持IE11的（下图），但是从上图来看，IE下垂直方向是对的，但是水平方向却不对，说明flexbox还是没被支持，我也尝试着添加了各种前缀，还是不行。
[html] view plain copy
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
浮动是什么？
浮动元素会脱离文档流进行左浮或者右浮，直到碰到父级元素或者其他的浮动元素。
为什么清除浮动：浮动会导致父元素高度坍塌，因为浮动脱离文档流，浮动以后不占文档流的位置，撑开的父元素高度肯定会坍塌。
清除浮动的八种方法：
1、父级div给出固定的高度。手动定义height，这样就解决了父级元素获取不到高度的问题。
优点：代码量少，简单容易掌握。
缺点：只适合高度固定的布局，如果高度和父级div不同会出现问题。
2、overflow，设置overflow：hidden。
优点：代码少，浏览器支持。
缺点：会把超出的部分隐藏起来，而且不能配合position使用
3、额外标签，添加一个新的标签，如div，或者br，并且设置标签的属性clear：both；清除浮动，让父级能自动获得高度。
优点：代码少，浏览器支持，不会各种问题。
缺点：会有很多空的div或者br。
4、使用单伪类after和zoom，使用方法：
.clearfloat:after{
content:"";//设置内容为空
height:0;//高度为0
line-height:0;//行高为0
display:block;//将文本转为块级元素
visibility:hidden;//将元素隐藏
clear:both//清除浮动
}
.clearfloat{
zoom:1;为了兼容IE
}
优点：浏览器支持好，大型的浏览器都在使用，建议使用。
缺点：代码多，需要after和zoom都要使用才能兼容主流的浏览器。
5、双伪类清除浮动。使用方法：
.clearfloat:before,.clearfloatafter {
content: "";
display: block;
clear: both;
}
.clearfloat {
zoom: 1;
}
缺点：不严谨不建议使用
6、父级div跟着浮动，所有代码一起浮动就会形成一个整体，
缺点：会产生新的问题，不建议使用。
7、父级定义display：table；将div属性变成的表格。
缺点：产生新的问题，而且影响布局。
8、overflow：auto；需要设置width，不设置height，浏览器会自动检测浮动区的高度。
缺点：容易生成滚动条。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
1.vue的生命周期，主要的介绍官网（https://cn.vuejs.org/v2/api/）上都有。
主要说的是created和mounted。之前在写项目的过程中，需要对DOM节点进行操作（但是在vue里面尽量不要获取节点进行操作。vue主要是对数据进行操作），在created里面这些操作并不能实现，但是在mounted里面是可以的。
主要原因就是：created是vm实例已经创建但是未完成挂载，而mounted已经部分完成挂载，这么说的原因是，mounted不承诺所有的子组件都会被挂载，如果你希望等到的是整个视图都渲染完毕，可以用 vm.$nextTick 替换掉mounted.
$nextTick是下次DOM更新循环结束之后执行的回调函数。
2.vue里点击按钮，弹框的实现。
通过在父组件上绑定一个show，type为boolean，在子组件用props接收传过来的show值，show值为true时弹出框显示，false时不显示。
父组件：
子组件：
3.v-show与v-if的区别？
v-if与v-show都属于条件渲染，意思就是根据不同的条件使用不同的模板。
在vue中，v-show只是简单的修改了样式，DOM节点是真实存在的，只是隐藏了。
v-if是真实的条件渲染，值为false是不编译不渲染，当值为true时，才开始编译。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
下载地址：https://v3.bootcss.com/
1. 下载Bootstrap
进入后下载这个标题的Bootstrap
下载完成后，将所需的css,js复制到工程中即可
2. 拷贝官方的模块文件
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> </head> <body> <h1>你好，世界！</h1> <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
3. 页面添加组件
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
然后将二者结合即可：
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Left</button>
<button type="button" class="btn btn-primary">Middle</button>
<button type="button" class="btn btn-primary">Right</button>
</div>
- 最后的结果如下：
Left Middle Right
至此你就可以简单的用前端框架做出美观的界面了！
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
蓝蓝设计的小编 http://www.lanlanwork.com
