锦峰将将

锦峰将将 查看完整档案

上海编辑  |  填写毕业院校  |  填写所在公司/组织 1256754123@qq.com 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

锦峰将将 回答了问题 · 2019-04-29

解决element-ui下拉框组件循环,绑定值改变了,但是在dom中没有更新

关注 3 回答 2

锦峰将将 回答了问题 · 2019-04-29

vue的v-for循环如何满足条件时替换成图片

<td> 
    <template v-if="item.id!=1"> {{item.id}}</template>
    <template v-else><img :data-original="item.imgSrc" /></template>
</td>

关注 2 回答 1

锦峰将将 评论了文章 · 2019-04-26

spring-boot 整合mybatis-plus 组成后台开发基本框架

一直想搞一套后台基本开发框架出来,无奈太忙(其实太懒),最近受到两位大佬的启发,就改动了一下大佬做好的东西。
初始版本:https://github.com/lihengming...

clipboard.png

改进版本:https://github.com/tangzhiman...

clipboard.png

我是直接从改进版本开始开发的,出于尊重,应当把初始版本的链接也放上来。

改进版本主要用的是TKmybatis

由于公司一直用的是mybatis-plus,所以我这里的版本是基于mybatis-plus开发的。

放大招!可不许再加班了

clipboard.png

具体技术点不再赘述!
springboot以及mybatis-plus的资源已经很多。

欢迎喷!

生成文件在这里运行

clipboard.png

计划在之后把spring-cloud方面的常用技术点也整合进来。

2019-04-29
更新:
1、简单整合spring-cloud使用eureka 项目目录:spring-cloud-learning-01
修复:
1、修改模板文件的包名问题,之后只在core包里ProjectConstant文件中的PROJECT_PATH与BASE_PACKAGE即可

clipboard.png

github地址:https://github.com/sjf1256754...

查看原文

锦峰将将 评论了文章 · 2019-04-26

spring-boot 整合mybatis-plus 组成后台开发基本框架

一直想搞一套后台基本开发框架出来,无奈太忙(其实太懒),最近受到两位大佬的启发,就改动了一下大佬做好的东西。
初始版本:https://github.com/lihengming...

clipboard.png

改进版本:https://github.com/tangzhiman...

clipboard.png

我是直接从改进版本开始开发的,出于尊重,应当把初始版本的链接也放上来。

改进版本主要用的是TKmybatis

由于公司一直用的是mybatis-plus,所以我这里的版本是基于mybatis-plus开发的。

放大招!可不许再加班了

clipboard.png

具体技术点不再赘述!
springboot以及mybatis-plus的资源已经很多。

欢迎喷!

生成文件在这里运行

clipboard.png

计划在之后把spring-cloud方面的常用技术点也整合进来。

2019-04-29
更新:
1、简单整合spring-cloud使用eureka 项目目录:spring-cloud-learning-01
修复:
1、修改模板文件的包名问题,之后只在core包里ProjectConstant文件中的PROJECT_PATH与BASE_PACKAGE即可

clipboard.png

github地址:https://github.com/sjf1256754...

查看原文

锦峰将将 发布了文章 · 2019-04-25

spring-boot 整合mybatis-plus 组成后台开发基本框架

一直想搞一套后台基本开发框架出来,无奈太忙(其实太懒),最近受到两位大佬的启发,就改动了一下大佬做好的东西。
初始版本:https://github.com/lihengming...

clipboard.png

改进版本:https://github.com/tangzhiman...

clipboard.png

我是直接从改进版本开始开发的,出于尊重,应当把初始版本的链接也放上来。

改进版本主要用的是TKmybatis

由于公司一直用的是mybatis-plus,所以我这里的版本是基于mybatis-plus开发的。

放大招!可不许再加班了

clipboard.png

具体技术点不再赘述!
springboot以及mybatis-plus的资源已经很多。

欢迎喷!

生成文件在这里运行

clipboard.png

计划在之后把spring-cloud方面的常用技术点也整合进来。

2019-04-29
更新:
1、简单整合spring-cloud使用eureka 项目目录:spring-cloud-learning-01
修复:
1、修改模板文件的包名问题,之后只在core包里ProjectConstant文件中的PROJECT_PATH与BASE_PACKAGE即可

clipboard.png

github地址:https://github.com/sjf1256754...

查看原文

赞 6 收藏 6 评论 4

锦峰将将 发布了文章 · 2019-04-25

spring-boot 整合mybatis-plus 组成后台开发基本框架

一直想搞一套后台基本开发框架出来,无奈太忙(其实太懒),最近受到两位大佬的启发,就改动了一下大佬做好的东西。
初始版本:https://github.com/lihengming...

clipboard.png

改进版本:https://github.com/tangzhiman...

clipboard.png

我是直接从改进版本开始开发的,出于尊重,应当把初始版本的链接也放上来。

改进版本主要用的是TKmybatis

由于公司一直用的是mybatis-plus,所以我这里的版本是基于mybatis-plus开发的。

放大招!可不许再加班了

clipboard.png

具体技术点不再赘述!
springboot以及mybatis-plus的资源已经很多。

欢迎喷!

生成文件在这里运行

clipboard.png

计划在之后把spring-cloud方面的常用技术点也整合进来。

2019-04-29
更新:
1、简单整合spring-cloud使用eureka 项目目录:spring-cloud-learning-01
修复:
1、修改模板文件的包名问题,之后只在core包里ProjectConstant文件中的PROJECT_PATH与BASE_PACKAGE即可

clipboard.png

github地址:https://github.com/sjf1256754...

查看原文

赞 6 收藏 6 评论 4

锦峰将将 赞了回答 · 2019-04-25

解决vue部署到服务器上之后的跨域问题

楼主将自己遇到问题==>解决问题后的 过程/方法 写出来给大家一个参考可好?


4/25编辑:
今天看到消息,说答案被忽略。其实就是回复留言,不是我的答案。
当时想查相关内容来着。看到没有答案,而且与自己的环境也不一样。
我的是Vue项目部署到IIS跨域。解决是:

  • IIS上需要装ARR(Application Request Routing)和URL Rewrite(这个会在前面那个安装时同时装上,也可以先装这个或本来就有)
  • 在IIS打开代理:打开ARR,点右边的[Server proxy setting...], 将 [Enable proxy]勾选即可
  • 点IIS的后端网站,打开URL Rewrite,设置好规则。

我的例子的话,设
进站规则:

/api/(.*)

条件:

{HTTP_HOST}          localhost
{SERVER_PORT}        4001

重写为:

http://localhost:4000/{R:1}

关注 3 回答 3

锦峰将将 回答了问题 · 2019-02-26

解决vue部署到服务器上之后的跨域问题

已解决,需要后端配合

关注 3 回答 3

锦峰将将 回答了问题 · 2018-09-06

前后端分离项目,token过期,重新登录和刷新token的问题

使用axios的拦截器,在请求拦截的时候判断是否有token,在响应拦截里判断后端给的状态码,如果token过期,给出提示,是否跳转登录。如果需要一直让token有效那就写个定时刷新token的方法,其它基本都不能达到这种效果

关注 4 回答 3

锦峰将将 回答了问题 · 2018-09-06

vue点击后路由没有跳转?

router-link会被渲染成a标签,所以它才能跳转,你用tag把它变成li了

关注 3 回答 3

锦峰将将 收藏了文章 · 2018-03-29

神经病啊!——微信同层播放器接(踩)入(坑)总结

估计踩过微信视频这个坑的,内心都想说上一句:

“神经病啊!”

而微信也终于出了个《H5同层播放器接入规范》,算是正常点了……好了闲话不说,下边进入正题:


1. <video>标签里的内联播放相关属性

微信在video标签上新增了一些x5的私有属性,分别是:

  1. x5-video-player-type
    启用同层播放。取值固定为'h5'

  2. x5-video-player-fullscreen
    是否全屏。取值为'true''false'

  3. x5-video-orientation
    视频方向。取值分别为'landscape''portrait'或者'landscape|portrait',分别对应横屏、竖屏及自动旋转(这个应该用的少)。

不过有一点需要注意的是,这些都是x5的私有属性,仅适用于Android平台。而跟iOS平台相关的,则是这几个属性:

  1. airplay

  2. x-webkit-airplay

  3. playsinline

  4. webkit-playsinline

其中最后两个是iOS平台下的内联播放属性,都是布尔属性,不需要赋值(存在即是true);前两个是iOS平台下airplay的相关属性(说实话我现在也没搞明白为什么网页需要airplay属性),取值为'allow''deny',通常保险起见用'allow'就可以。

2. CSS的属性选择及取值

微信在同层接入规范中提到了object-position这个属性,用于设置视频出现的位置。实际在尝试的过程中,搭配object-fit属性同时使用的效果会比较好。但这两个属性并不是x5私有属性,而是原生的,所以它们同时适用于Android和iOS两个平台。

object-positionobject-fit这两个元素主要的作用是为“可替换元素”设置位置和大小。这里的“可替换元素”,指的是内容不受CSS显式控制的元素,比如比较典型的就是<img><object><video>和表单元素等。

说回视频播放。微信官方的同层接入规范中推荐的做法,是用js动态计算需要的像素值,然后给object-position属性赋值。而我自己尝试了一圈下来,发现object-position这个属性本身支持百分比取值,通常视频默认的值是'50% 50%',也就是居中;全屏视频一般情况下需要贴底放,所以要把取值改成'0 100%'

另一个属性object-fit,有点类似background-size属性,用来设置视频在容器内的填充方式,平时用只需要取值'contain'(保持宽高比填满容器)就可以了。不过这里需要留意的是,全屏下,由于视频一般都不会正好填满屏幕(宽高比差异以及输出分辨率没算顶部标题栏),会在顶部留下一条空隙。这条空隙通常是默认黑色的,如果需要更改颜色,首先要加上个'display:block;'(因为video默认是inline的),然后直接改background-color就OK~

3. 视频封面

<video>标签里有一个与视频封面相关的属性poster,但是在使用中发现性能存在一些问题,在Android端打开视频时(加载),会有跳动的感觉,但是如果去掉,在视频加载时(preload取值'auto',且未用预加载)则会显示空白页面。目前换用了背景图片的方式,但由于视频全屏播放时顶部会有空隙,所以额外加了个background-position: bottom;以及background-size: contain;(取值和视频保持一致),这样设置好的背景在播放视频时就不会漏边了。

4. 设置视频视口大小

同层接入规范里推荐在resize事件回调里设置视频视口大小,我习惯直接设置<video>标签的widthheight,所以在resize回调里加入:

$('video')
        .attr({
            'width': window.innerWidth + 'px',
            'height': window.innerHeight + 'px'
        });

就可以了。

5. UA特性探测

同层接入规范里给的,判断是否是同层播放器方法:

  1. 在微信等TBS里通过UA判断X5内核版本来区分,当版版本号>036849表示支持
    UA示例:
    Mozilla/5.0 (Linux; Android 4.4.4; OPPO R7 Build/KTU84P) AppleWebKit/537.36
    (KHTML, like Gecko) Version/4.0 Chrome/37.0.0.0 Mobile MQQBrowser/6.8
    TBS/036849 Safari/537.36 MicroMessenger/6.3.27.861 NetType/WIFI
    Language/zh_CN

  2. 在QQ浏览器Android版本中,当浏览器版本>=7.1时开始支持
    UA示例:User­Agent: Mozilla/5.0 (Linux; U; Android 4.4.4; zh­cn; OPPO R7
    Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko)Version/4.0
    Chrome/37.0.0.0 MQQBrowser/7.1 Mobile Safari/537.36


参考资料:

  1. 微信 · H5同层播放器接入规范

  2. 京东 · 视频H5のVideo标签在微信里的坑和技巧

  3. 关于如何在微信里面让video不全屏播放

  4. H5微信播放全屏问题

  5. HTML5中的视频音频使用详解

  6. 张鑫旭 · 半深入理解CSS3 object-position/object-fit属性

  7. MDN · object-fit

  8. MDN · object-position

  9. MDN · 媒体相关事件

  10. MDN · 可替换元素

  11. Apple Developer · HTMLVideo​Element

  12. Apple Developer · HTMLMedia​Element

  13. Apple Developer · plays​Inline

  14. Apple Developer · Opting Into or Out of AirPlay

查看原文

锦峰将将 收藏了文章 · 2018-03-17

2017面试分享(js面试题记录)

2017面试分享(js面试题记录)

1. 最简单的一道题

    '11' * 2
    'a8' * 3

2. 一道this的问题

    var num = 10;
    var obj = {
        num:8,
        inner: {
            num: 6,
            print: function () {
                console.log(this.num);
            }
        }
    }
    num = 888;
    obj.inner.print(); // 6
    var fn = obj.inner.print;
    fn(); //888
    (obj.inner.print)(); //6
    (obj.inner.print = obj.inner.print)(); //888 这个点没有太理解,虽然答对了

3. var和function的预解析问题,以及变量和function的先后顺序的问题

    // 以下代码执行输出结果是什么
    function b () {
        console.log(a);
        var a = 10;
        function a() {};
        a = 100;
        console.log(a);
    }
    b();

    function c () {
        console.log(a);
        function a() {};
        var a = 10;
        a = 100;
        console.log(a);
    }
    c();

    (function d (num) {
        console.log(num);
        var num = 10;
    }(100))

    (function e (num) {
        console.log(num);
        var num = 10;
        function num () {};
    }(100))

    (function f (num) {
        function num () {};
        console.log(num);
        var num =10
        console.log(num);
    }(100))

    //仍然是预解析(在与解析过程中还要考虑一下当前变量的作用于)
    function m () {
        console.log(a1); // underfined
        console.log(a2); // underfined
        console.log(b1); // underfined
        console.log(b2); // underfined
        if(false) {
            function b1 (){};
            var a1 = 10;
        }
        if(true) {
            function b2 (){};
            var a2 = 10;
        }
        console.log(a1); // underfined
        console.log(a2); // 10
        console.log(b1); // underfined
        console.log(b2); // function
    }
    m();

    function n() {
        if(2>1) {
            arr = 10;
            brr = 10;
            let arr;
            var brr;
            console.log(arr);
            console.log(brr);
        }
    }
    n(); // ReferenceError

此阶段浏览器只是对var、function、函数形参进行一个解析的准备过程。而且在这个“预解析”过程中,有一个预解析先后顺序,即函数的形参 -> function -> var。而且重名时预留函数、后来者覆盖前者。预解析结果形参如果有值则解析到值,没有则为underfined,函数则解析到整个函数体,变量都为underfined;这道题目中没有参数出现,所以先不讨论。所以这道题在“预解析”时,函数声明权重优先会被提升

4. 一个算法问题

有一个已经排序的数组,比方[1,4,6,9,11,15,18],给你一个新的数,插入到数组中,写一个function

5. 函数节流是什么,有什么优点(之前没有了解过这个概念,懵逼了)

函数节流的目的

从字面上就可以理解,函数节流就是用来节流函数从而一定程度上优化性能的。例如,DOM 操作比起非DOM 交互需要更多的内存和CPU 时间。连续尝试进行过多的DOM 相关操作可能会导致浏览器挂起,有时候甚至会崩溃。尤其在IE 中使用onresize 事件处理程序的时候容易发生,当调整浏览器大小的时候,该事件会连续触发。在onresize 事件处理程序内部如果尝试进行DOM 操作,其高频率的更改可能会让浏览器崩溃。又例如,我们常见的一个搜索的功能,我们一般是绑定keyup事件,每按下一次键盘就搜索一次。但是我们的目的主要是每输入一些内容搜索一次而已。为了解决这些问题,就可以使用定时器对函数进行节流。

函数节流的原理

某些代码不可以在没有间断的情况连续重复执行。第一次调用函数,创建一个定时器,在指定的时间间隔之后运行代码。当第二次调用该函数时,它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。然而,如果前一个定时器尚未执行,其实就是将其替换为一个新的定时器。目的是只有在执行函数的请求停止了一段时间之后才执行。
http://www.cnblogs.com/LuckyW...

6. 写一个方法,实现传入两个参数(parentNode, childNode),要求如果childNode是parentNode的子孙节点,则返回为true,否则返回为false

7. dom事件流原理是什么,分为那几个阶段?

事件捕获 处于目标阶段 事件冒泡

8. dom事件委托什么原理,有什么优缺点

事件委托原理:事件冒泡机制

优点

1.可以大量节省内存占用,减少事件注册。比如ul上代理所有li的click事件就很不错。
2.可以实现当新增子对象时,无需再对其进行事件绑定,对于动态内容部分尤为合适

缺点

事件代理的常用应用应该仅限于上述需求,如果把所有事件都用事件代理,可能会出现事件误判。即本不该被触发的事件被绑定上了事件。

9. http的cache机制,以及200状态下怎么实现 from cache(表示接触最多的就是304的from cache)(用于优化,没有接触过,需要理解)

含义

定义:浏览器缓存(Browser Caching)是为了加速浏览,浏览器在用户磁盘上对最近请求过的文档进行存储,当访问者再次请求这个页面时,浏览器就可以从本地磁盘显示文档,这样就可以加速页面的阅览。

作用

cache的作用:
1、减少延迟,让你的网站更快,提高用户体验。
2、避免网络拥塞,减少请求量,减少输出带宽。

实现手段

Cache-Control中的max-age是实现内容cache的主要手段,共有3种常用策略:max-age和Last-Modified(If-Modified-Since)的组合、仅max-age、max-age和ETag的组合。

对于强制缓存,服务器通知浏览器一个缓存时间,在缓存时间内,下次请求,直接用缓存,不在时间内,执行比较缓存策略。
对于比较缓存,将缓存信息中的Etag和Last-Modified通过请求发送给服务器,由服务器校验,返回304状态码时,浏览器直接使用缓存。

10. 一个原型链继承的问题

    // 有一个构造函数A,写一个函数B,继承A
    function A (num) {
        this.titileName = num;
    }
    A.prototype = {
        fn1: function () {},
        fn2: function () {}
    }

这个问题的关注点是B继承的A的静态属性,同时B的原型链中不存在A实例的titleName属性

11. 什么是虚拟dom

React为啥这么大?因为它实现了一个虚拟DOM(Virtual DOM)。虚拟DOM是干什么的?这就要从浏览器本身讲起

如我们所知,在浏览器渲染网页的过程中,加载到HTML文档后,会将文档解析并构建DOM树,然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树,然后将RenderObject树渲染成页面(当然中间可能会有一些优化,比如RenderLayer树)。这些过程都存在与渲染引擎之中,渲染引擎在浏览器中是于JavaScript引擎(JavaScriptCore也好V8也好)分离开的,但为了方便JS操作DOM结构,渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离,通信是需要付出代价的,因此JavaScript调用DOM提供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。

而虚拟DOM干了什么?它直接用JavaScript实现了DOM树(大致上)。组件的HTML结构并不会直接生成DOM,而是映射生成虚拟的JavaScript DOM结构,React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更,再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在,计算性能会比较好,而且由于减少了实际DOM操作次数,性能会有较大提升

12. js基础数据类型和引用类型分别是什么?这个前提条件下写一个getType,返回相应的类型

1.基本数据类型(自身不可拆分的):Undefined、Null、Boolean、Number、String
2.引用数据类型(对象):Object (Array,Date,RegExp,Function)

function gettype(nm){
    return Object.prototype.toString.call(nm);
}

13. dom选择器优先级是什么,以及权重值计算(一道老问题了)

1.行内样式 1000
2.id 0100
3.类选择器、伪类选择器、属性选择器[type="text"] 0010
4.标签选择器、伪元素选择器(::first-line) 0001
5.通配符*、子选择器、相邻选择器 0000

14. vue双向数据绑定的原理是什么

首先传输对象的双向数据绑定 Object.defineProperty(target, key, decription),在decription中设置get和set属性(此时应注意description中get和set不能与描述属性共存)
数组的实现与对象不同。
同时运用观察者模式实现wather,用户数据和view视图的更新

15. react和vue比较来说有什么区别

1 component层面,web component和virtual dom
2 数据绑定(vue双向,react的单向)等好多
3 计算属性 vue 有,提供方便;而 react 不行
4 vue 可以 watch 一个数据项;而 react 不行
5 vue 由于提供的 direct 特别是预置的 directive 因为场景场景开发更容易;react 没有
6 生命周期函数名太长 directive

16. git使用过程中,如果你在开发着业务,突然另一个分支有一个bug要改,你怎么办

git stash       //将本次修改存到暂存区(紧急切换分支时)
git stash pop   //将所有暂存区的内容取出来

17. postcss的使用

18. 网页布局有哪几种,有什么区别

静态、自适应、流式、响应式四种网页布局
静态布局:意思就是不管浏览器尺寸具体是多少,网页布局就按照当时写代码的布局来布置;
自适应布局:就是说你看到的页面,里面元素的位置会变化而大小不会变化;
流式布局:你看到的页面,元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
自适应布局:每个屏幕分辨率下面会有一个布局样式,同时位置会变而且大小也会变。

18. 执行下面代码

var a = {};
var b = {key: 'b'};
var c = {key: 'c'};
var d = [3,5,6];
a[b] = 123;
a[c] = 345;
a[d] = 333;
console.log(a[b]);  // 345
console.log(a[c]);  // 345
console.log(a[d]);  // 333

19.

    var R = (function() {
        var u = {a:1,b:2};
        var r = {
            fn: function(k) {
                return u[k];
            }
        }
        return r;
    }());
    R.fn('a');  // 1

上述代码中如何获取匿名函数中的u

20. 不适用循环语句(包括map、forEach方法)实现一个100长度的数组,索引值和值相同的数组[0,1,2,3,4,5........99]

var arr = new Array(100);
//方法1
[...arr.keys()];
//方法二
Array.from(arr.keys());

//方法三
Array.from({length: 100});

// 方法四 借助string
var arr1 = new Array(101);
var str = arr1.join('1,');
str = str.replace(/(1\,)/g, function ($0, $1, index) {
    var start = '' + Math.ceil(index/2);
    if(index < str.length - 2) {
        start += ','
    }
    return start;
});
return str.split(',');


// 方法五(函数式变成,参考网络)
function reduce(arr, val) {
    if(Object.prototype.toString.apply(val)){
        return;
    }
    if(val >= 100) {
        return arr;
    }
    arr.push(val);
    return reduce(arr, val+1);
}
var res = reduce([], 0)

21. 下面语句执行结果输出

var a = function (val, index) {
    console.log(index);
    return {
        fn: function (name) {
            return a(name, val);
        }
    }
}

var b = a(0); // underfined
b.fn(1); // 0
b.fn(2); // 0
b.fn(3); // 0

22. 科普

1) dom节点的根节点是不是body
回答: 不是,dom节点的根节点是html(包含head和body,head中分为meta、title等。body又分为一组)

2)dom元素都会有offsetParent吗
回答: offsetParent属性返回一个对象的引用,这个对象是距离调用offsetParent的元素最近的(在包含层次中最靠近的),并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素;在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时(译注:IE和Opera除外),offsetParent属性 返回 null。

3) [1,3,5]转译成字符串是什么
回答: '1,3,5'
调用toString方法,生成该字符串

4)li标签的祖级元素可以为li,父级元素也可以为例
回答: 错误

23. jsonp原理,jquery是怎么实现的,这样实现有什么好处和坏处

原理

在同源策略下;在某个服务器下的页面是无法获取到该服务器以外的数据的;Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加 <script>标签来调用服务器提供的 js脚本
当我们正常地请求一个JSON数据的时候,服务端返回的是一串 JSON类型的数据,而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ,所以我们只能把参数通过 url的方式传递, 所以jsonp的 type类型只能是get !

$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
    type: 'GET', // jsonp模式只有GET 是合法的
    data: {
        'action': 'aaron'
    },
    dataType: 'jsonp', // 数据类型
    jsonp: 'backfunc', // 指定回调函数名,与服务器端接收的一致,并回传回来
})
其实jquery 内部会转化成
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron
然后动态加载
<script type="text/javascript"data-original="http://192.168.1.114/yii/demos/test.php?backfunc= 
然后后端就会执行backfunc(传递参数 ),把数据通过实参的形式发送出去。

在jquery 源码中, jsonp的实现方式是动态添加<script>标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数,当 <script>代码插入时函数执行,执行完毕后就 <script>会被移除。同时jquery还对非跨域的请求进行了优化,如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。

24. http协议属于七层协议中的哪一层,下一层是什么

七层结构:物理层、数据链路层、网络层、传输层、会话层、表示层、应用层
tcp属于传输层;http属于应用层。
表现层

25. js垃圾回收机制知道哪些,v8引擎使用的哪一种

js的两种回收机制

1 标记清除(mark and sweep)
2 引用计数(reference counting)

javascript与V8引擎

垃圾回收机制的好处和坏处

好处:大幅简化程序的内存管理代码,减轻程序猿负担,并且减少因为长时间运转而带来的内存泄露问题。

坏处:自动回收意味着程序猿无法掌控内存。ECMAScript中没有暴露垃圾回收的借口,我们无法强迫其进行垃圾回收,更加无法干预内存管理。

V8 自动垃圾回收算法
https://segmentfault.com/a/11...

26. 作用域什么时候生成的?

页面加载-->创建window全局对象,并生成全局作用域-->然后生成执行上下文,预解析变量(变量提升),生成全局变量对象;
$scope

27. websocket长连接原理是什么

含义

Websocket是一个持久化的协议,相对于HTTP这种非持久的协议来说。

原理

类似长轮循长连接 ; 发送一次请求 ; 源源不断的得到信息

28. http缓存知道哪些

http://blog.csdn.net/yzf91321...

29. 讲一下事件循环机制

执行上下文(Execution context)
函数调用栈(call stack)
队列数据结构(queue)
Promise

https://zhuanlan.zhihu.com/p/...

30. 理解web安全吗?都有哪几种,介绍以及如何预防

1.XSS,也就是跨站脚本注入

攻击方法:
1. 手动攻击:
编写注入脚本,比如”/><script>alert(document.cookie());</script><!--等,
手动测试目标网站上有的input, textarea等所有可能输入文本信息的区域
2. 自动攻击
利用工具扫描目标网站所有的网页并自动测试写好的注入脚本,比如:Burpsuite等
防御方法:
1. 将cookie等敏感信息设置为httponly,禁止Javascript通过document.cookie获得
2. 对所有的输入做严格的校验尤其是在服务器端,过滤掉任何不合法的输入,比如手机号必须是数字,通常可以采用正则表达式
3. 净化和过滤掉不必要的html标签,比如:<iframe>, alt,<script> 等
4. 净化和过滤掉不必要的Javascript的事件标签,比如:onclick, onfocus等
5. 转义单引号,双引号,尖括号等特殊字符,可以采用htmlencode编码 或者过滤掉这些特殊字符
6. 设置浏览器的安全设置来防范典型的XSS注入

2.SQL注入

攻击方法:
编写恶意字符串,比如‘ or  1=1--等,
手动测试目标网站上所有涉及数据库操作的地方
防御方法:
1. 禁止目标网站利用动态拼接字符串的方式访问数据库
2. 减少不必要的数据库抛出的错误信息
3. 对数据库的操作赋予严格的权限控制
4. 净化和过滤掉不必要的SQL保留字,比如:where, or, exec 等
5. 转义单引号,上引号,尖括号等特殊字符,可以采用htmlencode编码 或者过滤掉这些特殊字符

3.CSRF,也就是跨站请求伪造

就是攻击者冒用用户的名义,向目标站点发送请求
防范方法:
1. 在客户端进行cookie的hashing,并在服务端进行hash认证
2. 提交请求是需要填写验证码
3. 使用One-Time Tokens为不同的表单创建不同的伪随机值  

40. sessionStorage和localstorage能跨域拿到吗?比如我在www.baidu.com设置的值能在m.baidu.com能拿到吗?为什么

localStorage会跟cookie一样受到跨域的限制,会被document.domain影响

41. localstorage不能手动删除的时候,什么时候过期

除非被清除,否则永久保存 clear()可清楚
sessionStorage 仅在当前会话下有效,关闭页面或浏览器后被清除

42. cookie可以设置什么域?可以设置.com吗

可以通过设置domin来实现

43. 登录状态的保存你认为可以保存在sessionstorage或者localstorage或者cookie或者你知道的哪种方式,存在了哪里??为什么保存在那里

44. flux -> redux -> mobx 变化的本质是什么

存储结构 将对象加工可观察 函数式 vs 面向对象
https://zhuanlan.zhihu.com/p/...

45. 按需加载路由怎么加载对应的chunk文件的?换句话说浏览器怎么知道什么时候加载这个chunk,以及webpack是怎么识别那个多个经过hash过的chunk文件

50. get和post有什么区别?get可以通过body传递数据吗

把数据放到 body 里面,必须用 POST 方式取,这是 HTTP 协议限制的。

51. 下拉刷新你怎么实现

52. 预加载options请求为什么会出现,能避免这个请求吗?

针对上方问题存在没有解答的 ; 或则解答不正确详细的 ; 欢迎留言 ; 我会及时更正 ; 也欢迎留下你认为经典的面试题 ; 我都会补充进来 ; 共同进步

查看原文

锦峰将将 回答了问题 · 2018-02-23

怎么用js获取ul下的li标签

#uu li:first-child
{ 
    background-color:red;
}

关注 9 回答 8

锦峰将将 赞了文章 · 2018-02-22

程序员快速记忆英文单词的专属诀窍

首先感谢选择我这个专题的所有的读者。这是我第一次在 GitChat 做分享。我希望我的分享能够带来一些有趣和有用的东西,如果有谬误和不足,也希望在接下来的讨论中大家给我一些指导。

谈到学习英语,以及背单词,市面上有大量大量的书籍,作为一个程序员和业余学习英语的人,我想分享的方法是在我学习英语的一些经验的基础上整理的。

然而我的经验未免有以偏概全之嫌,因为我是一个程序员,所以我的题目是 “程序员快速记忆英文单词”,我分享的内容主要是给和我背景和经历类似的人提供一个借鉴。

如果你的目前的词汇量在 3000~4000,或者说在大学三级四级水平附近,那么你的起点和我当时学习英语的起点差不多。如果你远远低于或者高于这个水平,也许我的经验,只能给你一些参考。

如果你不清楚你的词汇量,可以去 扇贝网、墨墨背单词、沪江网 任意一个网站做一个测试,这通常需要 5 分钟的时间。

对于这个词汇量,大概可以在不借助词典的情况下连蒙带猜看懂高考阅读理解的文章,但是所需要的时间比阅读同等中文材料要多好几倍。

阅读那些句式固定的英文文档,勉强可以从中获得需要的信息,然而对于不熟悉的领域的文章,或者技术书籍,就无能为力了。只有阅读初中课本或者中考的阅读理解,才能达到舒适不费力,接近母语的水平。

我目前的词汇量在 12000~15000 左右。达到这个水平可以流畅舒适地阅读一般的原版英文书,阅读 TOFEL 阅读理解的感觉和当年阅读高考阅读理解的感觉相当,或前者略为容易一些。

大致推算下,高考要求的词汇量大约 2500~3000,而 TOFEL 要求在 8000~10000,也就是说,你的词汇量刚刚达到考试要求的词汇量,其实你阅读此考试水平的文章是处在能与不能的临界状态的。

这也符合考试的特点,强调区分度,尽可能让考生的能力在考试中体现出来(大家都会或者大家都不会不能体现考试的目的)。而要顺利地阅读,需要 1.5 倍的词汇,舒适流畅地阅读,需要 2 倍的词汇。

当你不断积累词汇量,你会发现,你能阅读的文章会越来越难,直到你需要的水平。3000~4000 词汇量阅读 1500 词汇的初中水平的文章,正好达到流畅。大学四六级的水平基本上就是一般科技文章所要求的临界水平。

有语言学家讲,不理解词汇,你什么都看不懂,光理解词汇,你不是什么都看得懂。所以,背单词是一个对于英文水平比较低的人一开始必须经历,而且最为有效的办法。一些培训机构会强调,光背单词是没用的。

这么说有一定的道理,但是如果你词汇量有了,你学别的就很轻松了。你就不会 “光背单词了”,而单词词汇量太少,无论是对话交流还是阅读都有障碍,除了背单词,别的方法其实都不实际。

背单词的过程,你实际上会获得连续的进步。然而要达到一定的实用水平,则需要量变的积累引起质变。

当你花了一个星期时间背下几百个单词后,你兴奋地想找一本英文书来看,会立刻陷入沮丧,似乎觉得没什么效果。即便你努力了一个月,你仍然无法看懂英文书,然而你会发现背过的一些生词会高频出现在这本英文书上。

背诵英文单词最重要的是两点,一个是对目标的渴求,一个是对过程的信心。如何建立这种信心,如何相信自己一直在进步呢?上面给出了 3 个背单词网站,建议添加到收藏夹里,每个星期测试一次。

实际上,如果你真的开始背单词了,有时候你每天都会测试下。类似你买了一台新电脑,总想着对它优化下,然后跑一个分看看是否有提高。这些测试具有一定的随机性,没必要每天测试,否则看不到明显的效果。但是如果你持续地背单词,每个星期肯定能看到除了测试误差本身以外的进步。

还有一些词汇量测试,比如著名的 Testyourvocab,不要频繁去测试,这是因为这些测试采用的样本具有 “记忆性”。

这就是说,相同水平的人他们给的测试单词是类似的,你会因为熟悉相同的测试用例而 “大幅进步”,然而这缺乏客观性。这样的测试,可以在你学习到某个阶段,偶尔地试一下。

我把通过纯粹背单词的所要达到的目标定在达到 8000 词汇量。根据上面的分析,8000 词汇量刚好达到阅读一般的英文文章所需要的入门程度——不流畅但是可以读下来。

在达到这个词汇量前,如果要通过阅读自然积累词汇,你不得不去阅读英语教育家为语言学习者专门定制的教材,这些文章会精心控制词汇量和难度。这也是一些语言学习者提出的,不要光背诵单词,而是要在阅读中积累单词的理论基础。然而阅读这些文章,你只是在学英语,而且你要花更多的时间,耽误你的工作,这是很多人因此放弃英语学习的原因。

然而在 8000 词汇量以前,用最短的时间把单词记住,则达成了一个目标,你可以不学英语而学英语。因为你此时的词汇量已经可以直接阅读真实的英文技术文章、Quora 上的问答、英文新闻。

那么你不用专门为了学习英文而再花时间,你学习英文和你的工作消遣其实是在做一件事。那么你想停下来都停不下来了。此时带着学习,你的词汇量会逐步增长,直到大约 1~2 万的水平。

不可能无限增长下去,因为低频率的单词阅读再多的文章你也遇不到。英语专业的人士,甚至母语人士如果想再提高词汇量,那么得重新去背单词,对此这里不表,估计大多数人也没这个兴趣。

本文只介绍纯粹背单词的过程,我大致把它分为三个阶段:暴力背诵阶段,通过构词法分析单词 + 暴力背诵,通过词根背诵单词。

如果每天坚持 1~1.5 小时,那么每个阶段大概需要 4~6 周,总共需要 4 个月左右,它可以把你的词汇量从 3000~4000 提高到大概 8000 左右。

第一阶段
第一个阶段是暴力背诵,此时你的词汇量很小很小,阅读英文书籍放眼望去到处都是生词。然而你的水平越低,你背单词的收益就越大。如同在果园摘苹果,还没有人采摘过,到处都是顺手可以够到的苹果,采一个算一个。

这个阶段,不要纠结某个单词是否背住了,背一个是一个。我们的目的是在词汇测试中刷分,而不是把你待背诵的单词书上的全部单词都背住。总而言之一句话,挑好背的背,背住 10 个新词,强过在一个难背的单词上花很多时间。

这个阶段选什么单词书好呢?我觉得结合你的水平,找一本单词书上有大约 30~40% 生词的书,比如你有 3000 词汇,可以背四级,如果你有 4000 词汇,可以背考研或者六级词汇。挑选的书一定要配有 Mp3 朗读(在线下载或者配盘都可以)。

再强调一点,我们的目的是在单位时间内背更多的单词,而不是把书上所有的单词都记住。一个阙值是,如果你完成了整本书的背诵,记住了 90%,就可以了,剩下的 10% 不要紧,还有后面的学习步骤。

为什么要 30%~40% 的生词率呢?

因为这是在平衡你的效率上最好的选择,过于简单,会浪费时间,生词过多,会导致背诵非常吃力,反过来也影响效率。之前说了,单词书要配 Mp3,将 Mp3 拷贝到你的手机中,利用通勤的时间用蓝牙耳机反复听。

听的过程中不要试图马上记住,而是尽可能联想和这个单词有关的一切可联想的事物。

这里推荐俞敏洪的词汇红宝书系列,但是这不是唯一的选择, 你可以去书店 / 图书馆找适合你的。

说一个段子,很多的词汇书(以字母表顺序)开头的第一个单词是 abandon。含义是放弃。也许这就是很多人学习英文从入门到放弃的原因吧。你可以随便联想,比如”a 板凳的”,那么板凳为什么放弃呢?因为给放弃的人一个板凳坐着,其余人接着干。

当然你也可以往别的地方想。再比如 ambulance,救护车,你就想,如果生了很严重的病,想 “俺不能死”,怎么办,叫救护车。也可以通过别的英文单词联想,比如 hose 是水管,可以联想到大象的鼻子,然后想到 nose。

当你再次听到这个单词,首先想这个单词什么意思。想起来了就 Pass,听下一个。想不起来,听到单词的意思,你去回忆上次听到这个单词你联想到了什么?如果能联想起来,最好,否则联想点别的。

之后你第三次遇到,估计你就算想不起来单词,但是也能想起来联想到的东西,然后再试图想联想的内容和单词含义有什么关系。这么反反复复听,总有很多单词能记住。

现在知道为什么生词率要 30%~40% 了吧。因为你经常会联想下,这样后面几个词这一轮就轮空了。如果你的生词只占 1/3。

那么很可能后面几个词是你已经认识的,你不会因为错过它们焦虑。因为你在不断记住一些词,那么不认识的词被轮空的概率就越来越低,就可以反复记住它们。

我想你在地铁上或者公交上能把一个几十个单词的词汇表听十几遍,那么正好达到我说的记住 90%~95% 的程度。然后再花一点时间,一边看书,一边听 Mp3,把单词的发音和意思联系起来。

对于认识的单词,简单看下,注意有的单词有一些很不同的含义,这些含义 Mp3 里可能没有说,那么带着记忆下。比如,fine 这个词大家都认识,但是它有个含义,罚款。再比如 well 有个含义叫水井,等等。带着记忆下。

第二天在听新的词表以前,对昨天的复习下,如果基本能记起来,或者虽然昨天没记住的忘记了,但是今天又记住几个,那么再听新的词表。

如果每天通勤花费 1 小时听 Mp3,再花半小时看书。大约可以有效记住一个红宝书上的 Wordlist,大概 100 个单词的 1/3(1/3 是你不认识的),约 30~40 个单词。整本书一般有 20~30 个 Wordlist,所以一个月就够了。

此时你新增 1000 个单词,可能会忘记 10%,但是你把那些你觉得你记住了但是并没有记住的原来的单词激活了。所以总量上可以达到 1000。实在没记住或者忘记的,就不管它。如果你的词汇量达到 5000,那么第一个阶段完成了。

如果你选择的不是红宝书,而是别的单词书,单词书的 Wordlist 更长,或者更短。短的话,就两个 Wordlist 放在一个播放列表里面听。长的话,就以 2 天为一个周期,第一天听 5 次,第二天再听 5 次。

如果你基础略低,学完一本词汇书,词汇量还没有达到 5000,那么就再换一本书重复这个方法。换书的时候按照你那时候的词汇量还是选择生词率 30%~40% 的。

请特别注意一个问题,因为你是死记硬背,所以死记硬背的难度和一个英文单词本身的难度没有什么关系,虽然六级词汇在语料中出现的概率低,但是不等于六级词汇更难记忆。

第二阶段
下一个阶段叫做通过构词法分析单词 + 暴力背诵阶段。

也许你在第一个阶段背诵的时候自己也发现了,实际上一些 “生词” 是重复的。比如可能四级词汇里面有 curious,到了六级词汇有 curiosity。

四级词汇有 respect,六级词汇有 respectively。这些单词的特点是,它们的词根是一样的,但是单词表上把它们划分成不同的单词。这个阶段的背诵方法和第一个阶段类似。

唯一不同的是,第一个阶段记住单词的方式靠纯粹的,没有任何规律的联想。而这个阶段,则尽量将生词去联想一个已经学到的词和它的意思。比如 respectively,拆分成 respect-ive-ly。

特别注意的是,随着单词的变化,单词的读音会发生变化,这种变化一开始觉得很费解,但是找到规律就很容易了。比如 curious 变成 curi-osity,重读放在了后面。然而按照意思拆分和按照读音拆分是不同的。

再列举几个找找规律:major 和 ma-jority,param 和 pa-rameter,element 和 ele-mentary 除了重读位置的变化,还有长元音往往会变短,最简单的 write 和 writen。当辅音字母增加,音节就会变多,那么读一个单词就更复杂了,老外就会想着偷懒。偷懒的办法就是缩短元音。

比如 LINQ 是 .NET 里面语言内置查询的缩写,但是它的 I 怎么读呢?这就要看它结尾 Q,是辅音字母,所以就简化了,LINQ 的读音类似 LINK。相反,LINE,因为结尾是不发音的元音 e,这个单词就发长音。搞清楚这些规律,当你听到一个新的单词(通常是长的),你就很容易用相反的规则推断出短的那个。而短的单词大部分你是认识的。

在这个阶段通过构词法和词根记忆单词的效率比死记硬背要高大约 50%,所以花大概 1~1 个半月,可以再认识 1500~2000 单词,达到 6500~7000,这时候可以背诵考研或者六级词汇。

第三阶段
第三阶段通过词根背诵单词。这个阶段以词根为基础,系统地扩大词汇量。扩大的方式是,用熟悉的词根学习带有这个词根的词。以及通过带有这个词根的词学习新的词根。

以 android 为例。这个词的意思是机器人。在英文中直译为 “类人的”。它包含两个词根,andr 人,oid 类似的。我们可以往两个维度扩展这个词,把你之前学过的包含这两个词根的都联想出来。

比如 paranoid、asteroid、ellipsoid 以及 andrology、anthropotomy 等等。而 paranoid 里 para 又是一个词根,表示一对(靠近)。又可以联想到并行 parallel。

当你学会越来越多的词根,就能领悟到英文单词本来的含义。比如 Picture、Photo 和 Image,都是图片。但是 pict 是描绘的意思,因此 Picture 是画出来的图片。

Photo 是光的意思,相机通过感光的方式记录相片。Photosynthesis,这个词表示光合作用,Photo= 光,Synthe= 合成。

Image 的含义是镜像,也就是一个一模一样的副本,所以也可以表示图像。再比如 Version 和 Edition 都是版本,它们有什么不同呢?

如果从词根的角度来说,就很好理解了。Version 的 ver 表示变化。软件的 1.0, 2.0, 3.0 在不断改进,所以是 Version。

而 Edition 来自 Edit,编辑。编辑就是在现有的内容的基础上整理,删除掉不需要的,添加需要的过程。

所以相同的产品,切割不同的功能划分出 Professional、Enterprise、Home、Developer 等等版本就是 Editions。

理解词根以后,会把暴力记忆中比较容易混淆的词轻易分开。比如 Comply 和 Compile。Very 和 Wary。Prospective 和 Perspective。

比如 Compile,它是 com-pile,前者表示共同,后面是堆叠。因此其实编译这个词应该翻译成编纂。这也解释了为什么一些光盘刻录软件把刻录叫做 burn compilation。显然这里没有 “翻译” 什么东西。

除了词根之外,可以利用词缀来扩展单词。

比如 in、dis、un 等代表否定 pre 表示以前,com、co 表示公共等等。 随着接触的单词越来越多,你也会发现符合词汇的构词规律。从而构造符合英文构词规律的新词汇。比如 “共享单车” 是一个新出现的事物,那么用英文怎么表达呢?

是 bikesharing,这是典型的名词 + 动词 + ing 构造新名词的方式,你还可以举一反三,比如云计算,cloudcomputing,等等。再比如 wise 表示 “按…”,词汇书上有 clockwise,otherwise,那么你可以举一反三用在计算机上,比如 bitwise,按位。在 C++ 里,symbol & is bit wise and.。

凡是遇到两个单词构成的复合词,都可以寻找和发现构词的规律。

英文中存在大量的缩写,比如作为程序员,经常会看到 UML、AJAX、FIFO、ORM、CASE… 很多缩写,将这些词所代表的缩略短语查询下,并且和已经学过的英文单词对应记忆。可以更容易记住很多本来和技术术语关系不是很密切的词汇。

我推荐一本书外加一部电子词典软件,它们都可以在网上找到。推荐的软件叫做 Longman Exams Coach,书推荐《英语词根与单词的说文解字》。

当你遇到一个不熟悉或者不理解的词,这个朗文的字典会给出词源和词本身的分析。而后者不但列举了常见的词根,可以直接拿来背诵,而且还提供了很多构词方面的有用信息。

比如你会学到,辅音字母同化的规律。比如说大家都知道 in 代表否定,但是在 irrational、irrelevant 等词中,n 会被后面的词根的辅音字母同化,类似地 aggregate、accumulate 来自相同的前缀 ac,只是前者被同化了,当掌握了这样的规律,背诵词根会更加高效。

可以找一些基于词根的单词表背诵,迅速扩大词汇量。也可以借助同义词反义词表来发现新的词汇。

用这种方式,会不小心认识很多冷僻的词。这些词从词根的角度来说,很容易理解和记忆,然而从英语实际的使用角度来说,比较罕见。在单词书甚至比较小的词典中都没有。

每天可以学习 3、4 组词根,英文中常见的词根也只有大约 1、2 百个,所以可以在 1 个月左右的时间,用这种方法认识 1、2 百个词根下的上千个单词。所以此时你的词汇量肯定能突破 8000。

最后再强调下,无论背单词哪个阶段,背单词的数量都优于记住某个特定的单词。不必担心一些常见的单词被漏掉了。因为在英文中,常见的单词出现的频率会更高,而人脑本能地会记住出现频率高的单词。

希望这些经验可以帮助到打算开始学习英文的同学。

纯粹地背单词无法有效地覆盖特定场景下的高频词。比如说,即便你词汇量达到 8000,但是面对一家意大利餐馆的菜单,还是会遇到很多不认识的词,这些词往往是外来语,也不遵循词根、词缀的构词方法。

查看原文

赞 22 收藏 8 评论 28

锦峰将将 赞了回答 · 2018-02-08

vue移动端-分享功能

关注 5 回答 4

锦峰将将 提出了问题 · 2018-02-08

vue移动端-分享功能

加这个问题一共提过三个问题,前两个了无音讯

大家可以说下插件或者这方面的文章
理想效果大概如图
点击分享
clipboard.png

关注 5 回答 4

锦峰将将 回答了问题 · 2018-02-08

解决vue.js关于关于双向数据绑定的问题

clipboard.png

这个方法跟你的描述的一样,把第一页第二页的数组连接起来,搜索的就是全部的了

关注 7 回答 6

锦峰将将 回答了问题 · 2018-02-08

解决vue小白,请问这个.vue文件中,template标签和导入的样式是如何起作用的?

template我的理解它就是一个片段标志,它不参与编译,vue把一整个页面分成几个片段,这几个片段各自编译渲染完之后凑在一起就是我们想要的页面,scoped也是为了防止样式之间相互污染。css就和以前一样正常引入用的。

附上官网template的解释地址
https://cn.vuejs.org/v2/api/#...

关注 4 回答 3

锦峰将将 回答了问题 · 2018-02-08

axios实现跨域

这个问题之前有人问过,你可以看看我之前的回答
https://segmentfault.com/q/10...

你好像少一个/

关注 5 回答 4

锦峰将将 回答了问题 · 2018-02-08

这个跟代码没关系,我想问问微信表情红心下面一点红色,这个表情什么意思,谁知道这个表情是怎么弄出来的

这个表情是心在滴血的意思,一个心一个点放好位置就是这样了

关注 2 回答 1