Category Archives: Frontend

解决postMessage跨域问题

在HTML5中新增了postMessage方法，postMessage可以实现跨文档消息传输（Cross Document Messaging），Internet Explorer 8, Firefox 3, Opera 9, Chrome 3和 Safari 4都支持postMessage。 该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容。   1. postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题： a.） 页面和其打开的新窗口的数据传递 b.） 多窗口之间消息传递 c.） 页面与嵌套的iframe消息传递 d.） 上面三个场景的跨域数据传递 2. postMessage用法：

参数说明： data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。 origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。   举例说明： 两个页面之间进行数据传输，postMessage示例： 我启动了两个ip地址来代表不同域名，页面t_hotnotes_list.html插入如下代码

页面search_role.html插入如下代码：

当两个服务启动之后，我们在浏览器中打开页面t_hotnotes_list.html

得到如下图结果，t_hotnotes_list.html得到两个页面的数据     from:https://www.cnblogs.com/yyy6/p/9481671.html

postMessage的使用

一、简介# 1、postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递 2、postMessage(data,origin)方法接受两个参数： （1）data:要传递的数据，html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这点儿，部分浏览器只能处理字符串参数，所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，在低版本IE中引用json2.js可以实现类似效果， （2）origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然如果愿意也可以建参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"； 二、使用# 1、子页面向父页面传递消息 <!-- frame1.html --> <h1>iframe1 page</h1> <script> 　　window.top.postMessage('message from iframe1'); </script> 2、父页面向子页面传递消息

    from:https://www.cnblogs.com/EricZLin/p/10534537.html

Dapper.Contrib：GetAsync only supports an entity with a [Key] or an [ExplicitKey]

property 异常处理：http://www.cnblogs.com/dunitian/p/4523006.html#dapper 原来Model是这样滴 修改后是这样滴 注意点：Model里面的Table和Key是Dapper.Contrib.Extensions命名空间下的 成功~   from:https://www.cnblogs.com/dunitian/p/5710467.html

vue css中scoped

1、什么是scoped vue组件中，在style标签中有一个属性，叫做scoped。当此标签拥有scoped属性的时候，该组件下的css样式只适用于本组件，而不会影响全局组件。这其实也相当于样式的模块化了。 2、scoped实现的原理 其实scoped中最重要的就是PostCSS,PostCSS是一种css的编译的工具。来看一下转译之前的代码： 编译前的代码：

  编译之后的代码:

  编译后，我们发现css中，PostCSS给所有的dom都添加了一个独一无二的动态属性，给css选择器也添加了一个对应的属性选择器，这样就可以让样式只作用于该属性的dom元素（组件内部的dom）。   from:https://www.cnblogs.com/marksir/p/11685350.html

vue项目中json字符串转换成json对象

场景:在前端发送ajax请求是后台有时会返回json字符串,这样的数据需要转化成json对象才可以正常的使用 之前我在这个问题上困惑了好几天,从网上找了一些资料,使用了一下都是报错的,所以写着篇博客是为了让像我一样的新手可以少一些痛苦,尽快的完成任务 JSON.parse(jsonstr);//括号内为你需要转化json对象的内容 我标红的那一行就是转化json对象的,大家可以看一下,转化之前打印的red   和转化之后打印的this.bookcontent的格式是不一样的,之前是json字符串,之后的是json对象, created(){ getBookContent(this.bookId, this.chapterid).then(red =>{ // console.log(red) let a = JSON.parse(red.data);//将json字符串转换成json对象 this.bookcontent = a.chapter.chaptername // console.log(this.bookcontent) }).catch(err =>{ console.log(err,’请求失败') }) } ———————————————— 版权声明：本文为CSDN博主「qq_41114935」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/qq_41114935/java/article/details/81284188

vue中 关于$emit的用法

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运行 fn； 例如：子组件： <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/><button @click=’select(大连)'>点击此处将‘大连’发射给父组件</button> </div> </template> <script> export default { name:’trainCity', props:['sendData'], // 用来接收父组件传给子组件的数据 methods:{ select(val) { let data = { cityname: val }; this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件 } } } </script> 父组件： <template> <div> <div>父组件的toCity{{toCity}}</div> <train-city @showCityName="updateCity" :sendData="toCity"></train-city> </div> <template> <script> import TrainCity from "./train-city"; export default { name:’index', components: {TrainCity}, data () { return { toCity:"北京" } }, methods:{ updateCity(data){//触发子组件城市选择-选择城市的事件 this.toCity = data.cityname;//改变了父组件的值 console.log('toCity:’+this.toCity) } } } </script>   from:https://www.cnblogs.com/shaozhu520/p/10637455.html

vue中find函数

let obj = this.role.find(v => v.code === res.company.role) 循环 data对象中的role数组 ，每个数组元素用v代替，code为他的键，返回找到的数组元素对象。   from:https://www.cnblogs.com/erfsfj-dbc/p/10063533.html

当表格列数太多时，怎么实现表格的横向滚动

效果： 要点：在表格外加一层div，div宽固定 html：

  postcss：

  from:https://www.cnblogs.com/XHappyness/p/7819246.html

table中，表头固定，body滚动的方式。也就是使用：css Table布局-display:table

两种类型的表格布局 你有两种方式使用表格布局 -HTML Table（<table>标签）和CSS Table（display:table 等相关属性）。 HTML Table是指使用原生的<table>标签，而CSS Table是指用CSS属性模仿HTML 表格的模型。 在W3C关于<table>相关标签的文档中我们可以找到，HTML 4中<table>相关标签的默认样式表： js 代码: table    { display: table } tr       { display: table-row } thead    { display: table-header-group } tbody    { display: table-row-group } tfoot    { display: table-footer-group } col      { display: table-column } colgroup { display: table-column-group } td, th   { display: table-cell } caption  { display: table-caption } 显而易见HTML Table使用标签<table>、<tr>、<td>等标签，就是使用CSS Table的相关属性来实现的。从上面HTML4的默认样式表中可以看出他们的使用对于CSS属性的情况： table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2） inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2） table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2） table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2） table-row：指定对象作为表格行。类同于html标签<tr>（CSS2） table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2） table-column：指定对象作为表格列。类同于html标签<col>（CSS2） table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2） table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2） table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2） 下面是一些 display:table 示例，你可能会发现它很有用： · 动态垂直居中对齐

这也许是使用display:table最常见的例子了。对于动态高度的元素，有了它，就可以实现真正的垂直（居中）对齐。 还有另一个不用display:table实现的垂直居中的简单方式，您可能感兴趣： table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法   找了好久才找到一篇可以简单粗暴就能用的，所以拿过来算是收藏了。里面有一个css2里的命令是我没用过的也是这里面关键的：table-layout:fixed;   原理很简单，有爱研究的童鞋可以去css官网看看说明文档。   直接贴代码：

  from:https://www.cnblogs.com/susan-home/p/8761574.html

vue 子组件主动获取父组件的数据和方法

子组件主动获取父组件的数据和方法： this.$parent.数据 this.$parent.方法   在子组件Header.vue里面

from:https://www.cnblogs.com/sulanlan/p/9932986.html