首页

你真的了解重排和重绘吗？

前端达人

做过前端开发的小伙伴就算不是非常理解重排与重绘，但是肯定都听过这两个词。那为什么这两个东西这么重要？因为他与我们的页面性能息息相关，今天，我们就来好好研究一下这两个东西。



浏览器的渲染流程

在讲解重排和重绘之前，我们有必要说一下浏览器的渲染流程。下面是浏览器渲染过程中最关键的几个部分。如果想了解完整的浏览器渲染流程，推荐大家去阅读李兵老师的浏览器工作原理实践，需要付费阅读。后期我也会整理一下再出一篇博客详细介绍浏览器的渲染过程。


点击查看原图


JavaScript：一般来说，我们会使用 JavaScript 来实现一些视觉变化的效果。比如用 jQuery 的 animate 函数做一个动画、对一个数据集进行排序或者往页面里添加一些 DOM 元素等。当然，除了 JavaScript，还有其他一些常用方法也可以实现视觉变化效果，比如：CSS Animations、Transitions 和 Web Animation API。
样式计算：此过程是根据匹配选择器（例如 .headline 或 .nav > .nav__item）计算出哪些元素应用哪些 CSS 规则的过程。从中知道规则之后，将应用规则并计算每个元素的最终样式。
布局：在知道对一个元素应用哪些规则之后，浏览器即可开始计算它要占据的空间大小及其在屏幕的位置。网页的布局模式意味着一个元素可能影响其他元素，例如 元素的宽度一般会影响其子元素的宽度以及树中各处的节点，因此对于浏览器来说，布局过程是经常发生的。
绘制：绘制是填充像素的过程。它涉及绘出文本、颜色、图像、边框和阴影，基本上包括元素的每个可视部分。绘制一般是在多个表面（通常称为层）上完成的。
合成：由于页面的各部分可能被绘制到多层，由此它们需要按正确顺序绘制到屏幕上，以便正确渲染页面。对于与另一元素重叠的元素来说，这点特别重要，因为一个错误可能使一个元素错误地出现在另一个元素的上层。
其中，重排和重绘影响的就是其中的布局和绘制过程。

什么是重排和重绘制
重排：当DOM的变化引发了元素几何属性的变化，比如改变元素的宽高，元素的位置，导致浏览器不得不重新计算元素的几何属性，并重新构建渲染树，这个过程称为“重排”。
重绘：完成重排后，要将重新构建的渲染树渲染到屏幕上，这个过程就是“重绘”。
简单来说，涉及元素的几何更新时，叫重排。而只涉及样式更新而不涉及几何更新时，叫重绘。对于两者来说，重排必定引起重绘，但是重绘并不一定引起重排。所以，当涉及重排时，浏览器会将上述的步骤再次执行一遍。当只涉及重绘时，浏览器会跳过Layout步骤，即：


点击查看原图


而如果既不需要重排，也不需要重绘，那么就是下面这样：


点击查看原图



浏览器会直接跳到合成阶段。显然，对于页面性能来说，不重排也不重绘 > 重绘 > 重排。

什么操作会引起重排和重绘
显然，触发重排的一般都是几何因素，这是比较好理解的：

页面第一次渲染 在页面发生首次渲染的时候，所有组件都要进行首次布局，这是开销最大的一次重排
浏览器窗口尺寸改变
元素位置和尺寸发生改变的时候
新增和删除可见元素
内容发生改变（文字数量或图片大小等等）
元素字体大小变化
还有其他一些操作也可能引发重排

查询某些属性或调用某些方法
offset(Top|Left|Width|Height)
scroll(Top|Left|Width|Height)
client(Top|Left|Width|Height)
getComputedStyle()
我们可能不太理解为什么这些操作也能引起重排，这里我先简单解释一下。因为现在的浏览器已经非常完善了，会自动帮我们做一些优化。当我们用js操作DOM的时候，浏览器并不是立马执行的，而是将操作存储在一个队列中。当达到一定数量或者经过一定时间以后浏览器再统一的去执行队列中的操作。那么回到我们刚才的问题，为什么查询这些属性也会导致重排？因为当你查询这些属性时，浏览器就会强制刷新队列，因为如果不立马执行队列中的操作，有可能得到的结果就是错误的。所以相当于你强制打断了浏览器的优化流程，引发了重排。下面我们通过一些小例子来进一步理解这段话：

首先我们来一个显然会引发重排的操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #test {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
  </style>
</head>
<body>
  <div id="test">

  </div>
  <button onclick="reflow()">click</button>
  <script>
    function reflow() {
      var div = document.querySelector("#test");
      div.style.left = '200px';
    }
  </script>
</body>
</html>



把时间轴往后拉，可以看到这几个过程，先简单介绍一些这些名词代表的含义：

Recalculate Style：这个过程就是生成CSSOM的过程
Layout：这就是布局阶段，即重排的过程
Update Layer Tree：这个阶段是更新层树的过程
Paint：该阶段是为每一层准备绘制列表的过程
Composite Layers：该阶段是利用绘制列表来生成相应图层的位图了，还涉及到合成线程和光栅化，performence面板中的Raster就是光栅化线程池 。
这里只做一个简单的介绍，对其中内容不太明白的同学可以参考李兵老师的文章或者在我的下一篇介绍浏览器渲染过程的文章中会详细解释。

那通过这个图我们可以看到，我们改变了div的left之后就触发了Layout，即重排的过程。下面我们仅改变div的背景颜色，给大家一个对比。


即不重排也不重绘
说完了重排和重绘，不要忘记我们最开始提到的，最的方式就是跳过重排和重绘阶段。你可能会想，什么情况下可以做到这一点?其实这就是我们平时说的GPU加速，具体是如何实现呢？在开发过程中，如果我们使用了某些属性，浏览器会帮助我们将使用了该属性的div提升到一个单独的合成层，而在后面的渲染中，提升到该层的div将跳过重排和重绘的操作，直接到合成阶段。在stack overflow上有问题提到了这块内容。我们翻译一下就是：
下面几个属性能让浏览器帮助我们将div提升到一个单独的合成层：

图层具有3D或透视变换CSS属性
使用加速视频解码的 video 元素
拥有 3D（WebGL） 上下文或者加速 2D 上下文的 canvas 元素
混合插件（Flash)
对自己的 opacity 做 CSS 动画或使用一个动画 webkit 变换的元素
图层使用加速的CSS过滤器
层具有作为合成层的后代
图层具有较低z索引的同级元素，该同级元素具有合成层（换句话说，该层在合成层的顶部渲染）
css will-change属性
最后一点是我加上去的，同时根据文中的内容我们可以知道，css3硬件加速是浏览器的行为，所以在不同浏览器下可能会有不同的表现形式。下面我们用一个例子来理解一下。这是李兵老师在他的专栏中提出的一个例子，我拿过来借用一下，注意box中的will-change属性： 

<html>

  <head>
      <title>观察will-change</title>
      <style>
          .box {
              will-change: transform, opacity;
              display: block;
              float: left;
              width: 40px;
              height: 40px;
              margin: 15px;
              padding: 10px;
              border: 1px solid rgb(136, 136, 136);
              background: rgb(187, 177, 37);
              border-radius: 30px;
              transition: border-radius 1s ease-out;
          }

          body {
              font-family: Arial;
          }
      </style>
  </head>

  <body>
      <div id="controls">
          <button id="start">start</button>
          <button id="stop">stop</button>
      </div>
      <div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
          <div class="box">旋转盒子</div>
      </div>
      <script>

          let boxes = document.querySelectorAll('.box');
          let boxes1 = document.querySelectorAll('.box1');
          let start = document.getElementById('start');
          let stop = document.getElementById('stop');
          let stop_flag = false

          start.addEventListener('click', function () {
              stop_flag = false
              requestAnimationFrame(render);
          })

          stop.addEventListener('click', function () {
              stop_flag = true
          })

          let rotate_ = 0
          let opacity_ = 0
          function render() {
              if (stop_flag)
                  return 0
              rotate_ = rotate_ + 6
              if (opacity_ > 1)
                  opacity_ = 0
              opacity_ = opacity_ + 0.01
              let command = 'rotate(' + rotate_ + 'deg)';
              for (let index = 0; index < boxes.length; index++) {
                  boxes[index].style.transform = command
                  boxes[index].style.opacity = opacity_
              }
              requestAnimationFrame(render);
          }
      </script>
  </body>

  </html>



————————————————
版权声明：本文为CSDN博主「溪宁」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38164763/article/details/105406580

评论(0) 浏览(2610)

【CSS基础学习】复杂选择器

前端达人

文章目录

    • CSS第二课-复杂选择器
      • 群组选择器
      • 属性选择器
      • 派生选择器

        • CSS第二课-复杂选择器

        群组选择器

        格式

        选择器1,选择器2,,,选择器n{声明的属性和属性值} 

        p,h1{
    color: blue;
}


        用于对于多个选择器进行样式修改，由简单选择器组合而成的选择器，可以是简单选择器中的任意组合，如上面代码例，就是修改了p标签和h1标签的字体颜色。

        属性选择器

        根据属性名查找元素

        格式 

        元素[属性名]{
    声明的属性和属性值;
}


        p[id]{
    color: blue;
}


        前面添加元素的名字，然后后面加上属性名，比如上例，就是p标签，其中带有id的元素，然后把字体颜色设置为蓝色。

        根据属性值查找

        格式 

        元素[属性名=属性值]{
    声明的属性和属性值;
}


        p[class = 'p2']{
    color: blue;
}


        和上面的根据属性名查找差不多，只不过更加了，到了属性名后面的属性值，上例就是作用于p标签，只不过条件是为带有class属性，并且属性值为p2的p标签。

        多属性选择器

        格式 


        元素[属性名或属性表达式][属性名或属性表达式]..{
    声明的属性和属性值;
}
        p[title][class]{
    color: blue;
}



        元素后面加。属性名或属性表达式，可以加+∞个，但是没必要。上例为：设置title属性和class属性的段落p标签的样式

        根据属性值近似查找

        格式 


        元素[元素名~=属性值]{
    声明的属性和属性值;
}


        元素[属性名|=值]{
    声名的属性和属性值;
}


        p[class~='red']{
    color: blue;
}



        注意，这里是~=，为约等于，就是找满足符合约等于条件的标签，上例为：设置class属性的值，包含red属性名的标签

        根据标签查找

        格式 


        元素名1~元素名2{
    声名的属性和属性值;
}


        a~p{
    color: blue;
}


        a标签后面的每一个p标签，都进行了样式的修改。

        派生选择器

        后代选择器

        格式 


        父类标签 子类标签{ /*注意俩标签中间有空格*/
    声名的属性和属性值;
}


        div strong{
    color: blue;
}


        相邻兄弟选择器

        格式 


        父标签+子标签{
    声名的属性和属性值;
}


        #div1 + p{
    color: blue;
}


        相邻兄弟选择器可选择紧接在另一个元素后的元素，且二者具有相同的父亲元素。注释：与子结合符一样，相邻兄弟结合符旁边可以有空白符。




        ————————————————
        版权声明：本文为CSDN博主「董小宇」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
        原文链接：https://blog.csdn.net/lolly1023/article/details/105413125

评论(0) 浏览(3200)

uni-app uni.request接口封装

seo达人

uni-app uni.request接口封装

今天在做uni-app项目时，发现在uni-app中 调取后台接口需要大量的重复编辑，就在想能不能封装一个如同Vue项目中的this.$axios.get(url,data).then();格式，这样就减少了很多代码重复！！

封装为如同this.$axios.get(url,data).then();格式

第一步、

我们先在index首页中的组件部分，创建一个js文件；





第二步、

我们在uni-app的入口文件中引入request.js文件；

在入口文件中挂载到uni-app实例上；





第三步、

开始接口封装：

（以下为js文件代码）



//先把接口暴露出去

export default{

//我们先定一个uni-app方法 以便于以下操作使用uni-app调取接口时便利

request(options){

///我们使用Promise方法来实现调用接口时后面多个.then()的方法

//只有Promise能实现如同$axios后面连续多个.then()的方法

return new Promise((reslove,reject)=>{

uni.request({

...options,

success:res=>{

//判断我们在使用封装的自定义时第三个参数是否为native

//当native为true时 我们返回原数据

if(options.native){

reslove(res)

}

//当native为false时 我们直接返回data中的数据

if(res.statusCode === 200){

reslove(res.data)

}else{

//加入接口参数错误或接口地址错误时 我们返回原错误提示

reject(res)

}

}

})

})

},

//在方法中 第二个参数和第三个参数用ES6新语法来添加默认值

//接口调取get方法

get(url,data={},options={}){

//我们把传过来的参数赋给options，这样我们在使用uni-app

//this.request()方法时 传递一个参数就可以

options.url = url;

options.data = data;

options.method = 'get';

//调用上面自己定义的this.request()方法传递参数

return this.request(options)

},

//接口调取post方法

post(url,data={},options={}){

options.url = url;

options.data = data;

options.method = 'post';

return this.request(options)

}

}



这样我们就已经封装完成啦，接下来就是 在页面内使用！

第四步、

我们可以在页面中来调取已经封装好的自定义事件啦



例一：

个人建议使用ES6新语法 箭头函数 不然使用this还要重新在外面声明定义，太麻烦了，使用箭头函数就会方便很多



// 已封装好的接口方法

//本案例调取接口时 没有参数上传 直接调用的

//这样使用方法时只传递了一个参数，也就是接口地址

//第二个参数没有写，默认为空；假如有参数的话 可以直接填写

//后面的参数都为接口内已经定义好的默认值：{}空对象

//里面的res为接口返回数据中的data里面的内容

this.$H.get('/api/getIndexCarousel.jsp').then(res=>{

//res打印出来是接口返回数据中data里面的数据

console.log(res)

//赋给数据区的变量，方便本页面使用

this.swiperData = res

});



例二、



// 已封装好的接口方法

//本案例使用时 传递了三个参数

//第一个为：接口地址

//第二个为：调取接口传递的参数，方法使用时不用传参，写空对象就好

//第三个为：自定义事件中 native 的属性 若为true 则返回原数据

//若想返回原数据，必须要填写第二个参数，若没有参数，也要写空对象

//因为方法调用时 是按照传参顺序调用的，若不写 参数传递就会出错

this.$H.get('/api/getIndexCarousel.jsp',{},{

native:true

}).then(res=>{

//res打印出来的数据是接口返回来的原数据

console.log(res)

//赋给数据区的变量，方便本页面使用

this.swiperData = res

});




评论(0) 浏览(5853)

每天学习一个Android中的常用框架——1.Litepal

seo达人

文章目录

1.简介

2.特性

3.演示

3.1 集成

3.2 配置

3.3 创建数据库

3.4 升级数据库

3.5 插入数据

3.6 查询数据

3.7 更新数据

3.8 删除数据

4.版本异同

5.源码地址

1.简介

Litepal——作为带我入行的第一本教学书籍《Android第一行代码》的作者郭霖老师所写出来的持久化框架，几乎算是我接触Android世界之后第一个遇到的框架，故将该框架列为一系列学习框架博客的首位。

根据Litepal的GitHub主页：Litepal，可以看到该框架的一些简介：



LitePal is an open source Android library that allows developers to use SQLite database extremely easy. You can finish most of the database operations without writing even a SQL statement, including create or upgrade tables, crud operations, aggregate functions, etc. The setup of LitePal is quite simple as well, you can integrate it into your project in less than 5 minutes.



事实上，正如这段简介所说，集成Litepal相当简单，不需要超过五分钟时间。使用Litepal，也适合对sql语言还不熟悉的开发者快速上手。



2.特性

让我们继续浏览Litepal的GitHub主页，可以发掘Litepal的一些特性：



Using object-relational mapping (ORM) pattern.

Almost zero-configuration(only one configuration file with few properties).

Maintains all tables automatically(e.g. create, alter or drop tables).

Multi databases supported.

Encapsulated APIs for avoiding writing SQL statements.

Awesome fluent query API.

Alternative choice to use SQL still, but easier and better APIs than the originals.

More for you to explore.

用大白话来描述的话，可以列举如下：



Litepal使用了ORM（对象关系映射）模型

Litepal几乎是无配置的，仅需极少的配置文件

Litepal几乎包括所有的CRUD操作，也支持多张表格的操作

Litepal可以仅调用api进行CRUD操作而避免编写sql语句

总之，看到Litepal具有这么多良好的特性，读者是否心动了呢。理论的话不多说，我们现在就开始正式地使用Litepal进行数据库的相关操作

PS：如果有曾经学习过Java的ORM框架——Mybatis的读者，应该不会对Litepal的使用太陌生，因为它们都使用了xml文件进行相应的配置



3.演示

3.1 集成

现在Android框架的集成相比于IDE还为ADT的时代，要方便了许多。原因是现在的主流IDE是Android Studio，而AS默认使用了Gradle进行版本的配置管理，这让集成框架变得简单了许多。

在build.gradle下，添加以下语句，然后重新sync，即可将Litepal集成到你的项目中：



implementation 'org.litepal.android:java:3.0.0'

1

当然，目前Android的主流开发语言，除了Java之外，还有Kotlin，Litepal同样具有Kotlin版本的（这里的演示仅针对Java，Kotlin版本的异曲同工）依赖：



implementation 'org.litepal.android:kotlin:3.0.0'

1

可以根据个人需求进行配置。



3.2 配置

集成了Litepal之后，要想正式使用它还需要进行一些配置



在assets目录下新建litepal.xml，作为Litepal的全局配置文件，相应的条目信息已作出注释，代码如下：

<?xml version="1.0" encoding="utf-8"?>

<litepal>

    <!--  数据库名  -->

    <dbname value="androidframelearn"/>



    <!--  数据库版本号  -->

    <version value="1"/>



    <!--  指定映射模型  -->

    <list>

       

    </list>



    <!--  指定文件的存储方式  -->

    <!--  <storage value="external" />-->

</litepal>



在你的应用下配置Litepal，有两种方式可以实现：

修改清单文件，将你的应用名修改为：android:name="org.litepal.LitePalApplication"

新建一个自己写的MyOwnApplication类，然后将清单文件中的应用名定位到该类，即：android:name="com.example.MyOwnApplication"，然后再编写MyOwnApplication类，代码如下：

public class MyOwnApplication extends Application {



@Override

public void onCreate() {

    super.onCreate();

    LitePal.initialize(this);

}

...

}



两种方式亦可，Litepal的作者建议若使用第二种方式，需要尽快地调用LitePal.initialize(this);所以将其放在onCreate()方法是最好的。



3.3 创建数据库

刚才在介绍的时候已经说过，Litepal采取的是对象关系映射(ORM)的模式，那么什么是对象关系映射呢？简单点说，我们使用的编程语言是面向对象语言，而使用的数据库则是关系型数据库,那么将面向对象的语言和面向关系的数据库之间建立一种映射关系，这就是对象关系映射了。

不过你可千万不要小看对象关系映射模式，它赋予了我们一个强大的功能，就是可以用面向对象的思维来操作数据库，而不用再和SQL语句打交道了，不信的话我们现在就来体验一下。像往常使用SQLiteOpenHelper类，为了创建一张Book表需要先分析表中应该包含哪些列，然后再编写出一条建表语句，最后在自定义的SQLiteOpenHelper中去执行这条建表语句。但是使用LitePal，你就可以用面向对象的思维来实现同样的功能了，定义一个Book类，代码如下所示：



package com.androidframelearn.dao_litapal;



import org.litepal.crud.LitePalSupport;



public class Book extends LitePalSupport {

    private int id;

    private String author;

    private double price;

    private int pages;

    private String name;

    public int getId(){

        return id;

    }

    public void setId(int id){

        this.id = id;

    }



    public String getAuthor(){

        return author;

    }

    public void setauthor(String author){

        this.author = author;

    }



    public double getPrice(){

        return price;

    }

    public void setPrice(double price){

        this.price = price;

    }



    public int getPages(){

        return pages;

    }

    public void setPages(int pages){

        this.pages = pages;

    }



    public String getName(){

        return name;

    }

    public void setName(String name){

        this.name = name;

    }

}



这里使用标签来声明我们要配置的映射模型类，注意一定要使用完整的类名。不管有多少模型类需要映射，都使用同样的方式配置在标签下即可。

没错，这样就已经把所有工作都完成了，现在只要进行任意一次数据库的操作，BookStore.db数据库应该就会自动创建出来。为了更好地演示代码，我们将布局文件所需要的功能一次性编写好，activity_main.xml代码如下：



<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity"

    android:orientation="vertical">



    <Button

        android:id="@+id/btn_db_create"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="创建数据库"/>



    <Button

        android:id="@+id/btn_db_query"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="查询数据"/>



    <Button

        android:id="@+id/btn_db_insert"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="插入数据"/>



    <Button

        android:id="@+id/btn_db_update"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="更新数据"/>



    <Button

        android:id="@+id/btn_db_delete"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:text="删除数据"/>



</LinearLayout>





接下来，修改MainActivity，除了给按钮注册点击事件，还需要编写不同的方法代表不同的逻辑，其中，创建数据库的方法代码如下：



private void createDBbyLitePal() {

        btn_db_create.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                Log.i(TAG,"创建数据库成功");

                LitePal.getDatabase();

            }

        });

    }



仅仅通过点击按钮，调用LitePal.getDatabase();这句api，就可以创建出数据库，让我们实际进入项目中尝试一下吧！点击该按钮，然后查看控制台，如图所示：



出现该句日记，说明数据库创建成功，接下来我们看看这个数据库是否按照我们所设置好的格式创建出来了，进入data/data/你的项目包名/databases，即可查看到该数据库已经放置到该目录下，如图所示：





3.4 升级数据库

事实上，若想对现有数据库进行升级，也是可以实现的。以前我们使用SQLiteOpenHelper来升级数据库的方式，虽说功能是实现了，但你有没有发现一个问题,，就是升级数据库的时候我们需要先把之前的表drop掉，然后再重新创建才行。这其实是一个非常严重的问题，因为这样会造成数据丢失，每当升级一次数据库，之前表中的数据就全没了。

而使用Litepal，就可以很好地避免这个问题。假设我们现在有一张新的表Category要加进去，同样编写它的实体类，代码如下：



package com.androidframelearn.dao_litapal;



public class Category {

    private int id;

    private String categoryName;

    private int categoryCode;

    public int getId(){

        return id;

    }

    public void setId(int id){

        this.id = id;

    }



    public String getCategoryName(){

        return categoryName;

    }

    public void setCategoryName(String categoryName){

        this.categoryName = categoryName;

    }



    public int getCategoryCode(){

        return categoryCode;

    }

    public void setCategoryCode(int categoryCode){

        this.categoryCode = categoryCode;

    }

}



改完了所有我们想改的东西，只需要记得在litepal.xml将版本号加1就行了。当然由于这里还添加了一个新的模型类，因此也需要将它添加到映射模型列表中。修改litepal.xml中的代码，如下所示：



<?xml version="1.0" encoding="utf-8"?>

<litepal>

    <!--  数据库名  -->

    <dbname value="androidframelearn"/>



    <!--  数据库版本号  -->

    <version value="2"/>



    <!--  指定映射模型  -->

    <list>

        <mapping class="com.androidframelearn.dao_litapal.Book"/>

        <mapping class="com.androidframelearn.dao_litapal.Category"/>

    </list>



    <!--  指定文件的存储方式  -->

    <!--  <storage value="external" />-->

</litepal>



重新运行一下程序，再次创建数据库，就可以完美地完成数据库的升级了。这里的调试可以使用sqlite工具，这里不再赘述。



3.5 插入数据

在讲述本节时，首先回顾一下之前添加数据的方法，我们需要创建出一个Contentvalues对象，然后将所有要添加的数据put到这个Contentvalues对象当中，最后再调用SQLiteDatabase的insert() 方法将数据添加到数据库表当中，步骤相当繁琐。

而使用LitePal来添加数据，这些操作可以简单到让你惊叹！我们只需要创建出模型类的实例，再将所有要存储的数据设置好，最后调用一下save()方法就可以了。

同样地，修改MainActivity，增加插入数据的事件方法，代码如下：



private void insertDatabyLitePal() {

        btn_db_insert.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                Book book = new Book();

                book.setName("The Da Vinci Code");

                book.setauthor("Dan Brown");

                book.setPages(454);

                book.setPrice(16.96);

                book.save();

                Log.i(TAG,"插入数据成功");

            }

        });

    }



同样运行程序，查看控制台，如图所示：



当点击查询数据（下一节将介绍该逻辑）时，控制台打印刚刚插入的数据，如图所示：





3.6 查询数据

使用Litepal同样可以很轻易地查询数据，当然了，由于篇幅限制，这里仅仅贴出最简单的查询方式，至于关联查询等稍复杂的查询方式，可以去GItHub上参考Litepal的官方文档进行相关调用即可。

同样地，修改MainActivity，增加查看数据的事件方法，代码如下：



private void queryDatabyLitePal() {

        btn_db_query.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                List<Book> books = LitePal.findAll(Book.class);

                for (Book book : books){

                    Log.i(TAG,"查询数据成功");

                    Log.d("MainActivity","书名是"+book.getName());

                    Log.d("MainActivity","书的作者是"+book.getAuthor());

                    Log.d("MainActivity","书的页数是"+book.getPages());

                    Log.d("MainActivity","书的价格是"+book.getPrice());

                }

            }

        });

    }



相关的运行结果上一小节以贴出，这里不再重复。



3.7 更新数据

更新数据要比添加数据稍微复杂一点，因为它的API接口比较多，这里我们只介绍最常用的几种更新方式。

首先，最简单的一种更新方式就是对已存储的对象重新设值，然后重新调用save()方法即可。那么这里我们就要了解一个概念，什么是已存储的对象？

对于LitePal来说，对象是否已存储就是根据调用model.isSaved()方法的结果来判断的， 返回true就表示已存储，返回false就表示未存储。那么接下来的问题就是，什么情况下会返回true，什么情况下会返回false呢？

实际上只有在两种情况下model.isSave()方法才会返回true, 一种情况是已经调用过model. save()方法去添加数据了，此时model会被认为是已存储的对象。另一种情况是model对象是通过LitePal提供的查询API查岀来的，由于是从数据库中查到的对象，因此也会被认为是已存储的对象。

由于查询API相对复杂，因此只能先通过第一种情况来进行验证。修改MainActivity中的代码，如下所示：



private void updateDatabyLitePal() {

        btn_db_update.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                Book book = new Book();

                book.setName("The Lost Symbol");

                book.setauthor("Dan Brown");

                book.setPages(510);

                book.setPrice(19.95); // 第一次设置商品价格

                book.save();

                book.setPrice(10.99); // 第二次设置商品价格

                book.save();

                Log.i(TAG,"更新数据成功");

            }

        });

    }



可以看到，我们做了跟插入数据类似的事情，但是我们对数据的价格进行了设置，运行程序，如图所示：



可以看到，除了刚刚插入的数据，还有第二条刚刚更新过后的数据。然而这种更新方式只能对已存储的对象进行操作，限制性比较大，接下来我们学习另外一种更加灵巧的更新方式，可以调用以下api：



book.updateAll("name = ? and author = ?","The Lost Symbol","Dan Brown");

1

这里仅贴出其中一条api，其他的可以参考官方文档，这里不再赘述。



3.8 删除数据

使用Litepal删除数据的方式主要有两种，第一种比较简单，就是直接调用已存储对象的delete()方法就可以了，对于已存储对象的概念，我们在之前已经学习过了。也就是说，调用过save()方法的对象，或者是通过LitePal提供的查询API查出来的对象，都是可以直接使用delete()方法来删除数据的。这种方式比较简单，我们就不进行代码演示了，下面直接来看另外一种删除数据的方式。

代码如下：



private void deleteDatabyLitePal() {

        btn_db_delete.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                LitePal.deleteAll(Book.class,"price < ?","15");

                Log.i(TAG,"删除成功");

            }

        });

    }



运行程序，删除过后，按照代码逻辑，已经删除掉了所有price小于15的条目，如图所示：





4.版本异同

之前阅读了郭霖老师所著《Android第一行代码 第二版》时，所记载的Litepal版本为：



compile 'org.litepal.android:core:1.4.1'

1

而的Litepal版本（Java版本，另有Kotlin版本，导入的依赖稍有不同）为：



implementation 'org.litepal.android:java:3.0.0'

1

新旧版本的主要区别是一些类名的划分，例如老板本的DataSupport变成了LitePalSupport，除此之外，一些api的名称也稍有变动，读者在使用时最好可以参考GitHub上的官方文档，及时更新代码，做到与时俱进。



5.源码地址

AFL——Android框架学习


评论(0) 浏览(2595)

TinyUI-TUIListView最简单的使用

seo达人

      在TinyUI简介的博客中提到其特点中包含一条，即多数大控件的使用方法和android一直，除了语言差异之外，本篇我们就介绍列表控件TUIListView最简单的使用方法。



        列表组件/控件作为目前Android/iOS的APP中最常用的控件，该控件的设计同时参考Android、windows、Qt等使用的经验进行筛选，最终选择了Android的ListView设计，其他平台的列表中使用难以程度或设计上略逊于Android，因为Android给与了开发者最大的发挥控件，你可以在列表中可以显示任何控件。



        TUIListView中的每一行每一列你可以放置任何UI组件，使用TUIListView需要配合TUIAdapter进行使用，而TinyUI和Android一样提供了内置的简单使用的TUISimpleAdapter。TUISimpleAdapter主要用于显示文本（即每一行都是只能显示文字），如果需要在列表中显示其他UI组件，则需要自定义一个Adapter，关于自定义Adapter将在后续进行详细讲解。



        本篇既然是TUIListView最简单的使用，我们就使用TUISimpleAdapter来显示文本你列表，TUISimpleAdapter最好只用于数据步发生变化的情况，因为其存放的数据使用了C++标准库的vector容器，而非使用list容器，vector容器的特点是访问速度快，但其缺点是vector的内存是连续的，因此内容发生变化可能会造成内存申请和拷贝的动作；而list容器使用的双向链表，其特点是插入数据快，但访问速度慢。



        本篇我们仍然使用上一篇中自定义的MyWindow来显示TUIListView。



使用方法/步骤

  1. 定义listView和andapter



            MyWindow中包含TUISimpleAdapter.h的头文件，并定义listView和adapter



    MyWindow.h


    ifndef MY_WINDOW_H

    define MY_WINDOW_H

    include <TUIWindow.h>

    include <TUISimpleAdapter.h>

     

     

     

    class MyWindow : public TUIWindow

    {

    public:

        MyWindow(TUIWindow* parent = nullptr);

        virtual ~MyWindow();

     

        void onShow();

        void onClose();

     

    private:

        TUIListView listView;

        TUISimpleAdapter adapter;

    };

     

    endif // !MY_WINDOW_H

     


  2. 填充数据，并把adapter设置到listView中



    MyWindow.cpp


    include "MyWindow.h"

     

     

     

    MyWindow::MyWindow(TUIWindow* parent)

        : TUIWindow(parent)

    {

        setContentView(&this->listView); // 把listView作为当前窗口的内容视图

     

     

        vector<string> data; // 使用vector<string>类型的data存放数据

     

        for (int32_t i = 0; i < 20; i++)

        {

            data.push_back(to_string(i)); // 生成0~20的数值-转换成字符串，放到data中

        }

     

        this->adapter.setData(data); // 把data设置到adapter中

     

        this->listView.setAdapter(&this->adapter); // 把adapter设置到listView，作为listView数据来源和操作对象

    }

     

    MyWindow::~MyWindow()

    {

    }

     

    void MyWindow::onShow()

    {

    }

     

    void MyWindow::onClose()

    {

    }

    到目前为止窗口显示列表控件已全部完成，接下来和上一篇一样调用MyWindow的show()方法即可显示，最终结果如下图所示:


评论(0) 浏览(2674)

call、apply、bind 原理实现

seo达人

目录

  1. call 的模拟实现
  2. apply 的模拟实现
  3. bind 的模拟实现
  4. 三者异同



    学习并参考于：



    JavaScript深入之call和apply的模拟实现



    JS的call,apply与bind详解，及其模拟实现





    （一）call的模拟实现

    call 用法 ： MDN Function.prototype.call()



    call() 方法使用一个指定的 this 值和可选的参数列表来调用一个函数。



    call() 提供新的 this 值给当前调用的函数/方法。


  5. call 实现主要思路：

    将函数设为对象的属性



    执行该函数



    删除该函数



    另外还有考虑：



    call 函数还能给定参数执行函数

    this 参数不传，或者传null，undefined， this指向window对象

    函数是可以有返回值的
  6. 实现：

    Function.prototype.myCall = function () {

      if (typeof this !== 'function') {

        throw new TypeError('error!')

      }

      let context = arguments[0] || window   //this 参数可以传 null，当为 null 的时候，视为指向 window

      context.fn = this  // 首先要获取调用call的函数，用this可以获取

      let args = [...arguments].slice(1) //从 Arguments 对象中取值，取出第二个到最后一个参数   

      let result = context.fn(...args)  //函数是可以有返回值的

      delete context.fn

      return result

    }


  7. 测试：

    // 测试一下上面实现的myCall

    var value = 2;



    var obj = {

        value: 1

    }



    function bar(name, age) {

        console.log(this.value);

        return {

            value: this.value,

            name: name,

            age: age

        }

    }



    bar.call(null); // 2



    console.log(bar.myCall(obj, 'kevin', 18));

    // 1

    // Object {

    //    value: 1,

    //    name: 'kevin',

    //    age: 18

    // }



    （二）apply 的模拟实现

    apply 用法：MDN Function.prototype.apply()



    apply() 方法使用一个指定的 this 值和可选的参数数组 来调用一个函数。



    apply 的实现跟 call 类似。


  8. 实现：

    Function.prototype.myApply = function () {

      if (typeof this !== 'function') {

        throw new TypeError('error!')

      }

      let context = arguments[0] || window

      context.fn = this

      let result = arguments[1] ? context.fn(...arguments[1]) : context.fn()

      delete context.fn

      return result

    }


  9. 测试：

    var foo = {

        value: 1

    }

    function bar(name, age) {

        console.log(name)

        console.log(age)

        console.log(this.value);

    }

    bar.myApply(foo, ['black', '18']) // black 18 1



    （三）bind 的模拟实现

    bind 用法：MDN Function.prototype.bind()



    bind()方法会创建一个新函数，称为绑定函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。



    bind是ES5新增的一个方法，不会执行对应的函数，而是返回对绑定函数的引用。


  10. 实现：

    Function.prototype.customBind = function () {

      if (typeof this !== 'function') {

        throw new TypeError('error!')

      }

      const that = this   // 首先要获取调用bind的函数，用this获取并存放在that中

      let context = arguments[0] || window

      const args = [...arguments].slice(1)

      return function() {

        return that.apply(context, args.concat([...arguments]))

      }

    }



    （四）三者异同
  11. 相同：

    改变函数体内 this 的指向
  12. 不同：

    call、apply的区别：call方法接受的是参数列表，而apply方法接受的是一个参数数组。

    bind不立即执行。而call或apply会自动执行对应的函数。


评论(0) 浏览(2673)

JavaScript 的简述与基础语法

前端达人

目录

JavaScript

  1. JS 发展历史
  2. JS 的特点
  3. JS 的组成
  4. JS 的基础语法

    a. 两种引入方式 type src

    b. 三种输出方式 console.log document.write alert

    c. 变量声明 var let const typeof undefined

    d. 数据类型简介 string number boolean object undefined

    e. 运算符 + - * / % = < > && || !

    i. 全等符与不全等符 === !==

    f. 流程控制语句

    i. 条件语句 if else switch case default break

    ii. 循环语句 while dowhile fori forin forof



    JavaScript

    • JS 用于完成页面与用户的交互功能；

    1. JS 发展历史
    JavaScript 在 1995 年由 Netscape 公司的 Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作，Netscape 管理层希望它外观看起来像 Java，因此取名为 JavaScript。但实际上它的语法风格与 Self 及 Scheme 较为接近；
    欧洲计算机制造联盟（ECMA）在 1997 制定脚本语言规范 ECMA Script1 (ES1)，2009 年发布了 ECMA Script5（ES5），在 2015 年发布了 ECMA Script 2015（ES6），所有的浏览器的都支持 ES6；

  5. JS 的特点

    JS 设计模仿了 Java 语言，不同如下：

    JS 不需要编译，由浏览器直接解释执行；

    JS 是弱类型语言，JS 变量声明不需要指明类型，不同类型的数据可以赋值给同一变量；
  6. JS 的组成

    ECMA Script 是 JS 的基础语法；

    BOM（Brower Object Model）是浏览器对象模型；

    DOM（Document Object Model）是文档对象模型；
  7. JS 的基础语法

    a. 两种引入方式 type src




    <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS两种引入方式</title>
</head>
<body>
<!-- JS两种引入方式：JS和CSS一样都需要引入到html页面中，浏览器才会解释执行，JS有两种引入方式：
    1.内嵌(内部)脚本:在script标签中写js代码,script标签推荐放置在body标签的底部,理论上和style标签一样可以放置位置任意；
    2.外部脚步:使用script标签的src属性引入外部js文件,使用注意事项: script标签使用了src属性以后内部的代码不再被浏览器解释执行，script引入外部脚本时不能使用自闭合格式 -->
<!--告诉浏览器把解析器切换为js解析器 type="text/javascript"可以省略-->
<script type="text/javascript"> document.write("<h1>内部脚本</h1>");//向body中追加html内容 </script>
<script src="../js/外部脚本.js"></script>
</body>
</html>






    b. 三种输出方式 console.log document.write alert 

    <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS三种输出方式</title>
</head>
<body>
<!-- JS三种输出方式：
    1.输出到浏览器控制台；
    2.输出html内容到页面；
    3.浏览器弹框输出字符 -->
<script>
//1.输出到浏览器控制台
console.log("1. 输出到浏览器控制台");//开发者专用
//2.输出html内容到页面
document.write("2. 输出html内容到页面");//向body中追加html内容
//3.浏览器弹框输出字符
alert("3. 浏览器弹框输出字符");//阻塞执行
</script>
</body>
</html>


    c. 变量声明 var let const typeof undefined 


    <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS变量</title>
</head>
<body>
<!-- JS变量用来存放数据；
    es5以前变量声明使用var；
    es6之后变量声明使用let，常量声明使用const。他们用于替代es6的var声明方式；
 JS是弱类型语言: 
    声明变量时不知道变量的类型(undefined),只有在赋值之后js变量才确定类型；
    typeof(a) 或 typeof a 输出变量的类型；
    undefined表示变量未赋值,未知类型 -->
<script>
//字符串 Java声明 String str ="张三";
let str ="张三";
console.log(str);
//整数 Java声明 int k = 5;
let k = 5;
console.log(k);
//小数 Java声明 float f = 7.5;
let f = 7.5;
console.log(f);
//常量 Java声明 final Integer PI = 3.14;
const PI = 3.14;
console.log(PI);
//演示弱类型语言
let a;//声明变量不需要指明类型
console.log(typeof a);//undefined 未赋值类型,未知类型
a = "你好";
console.log(typeof a);//string
a = 123;
console.log(typeof a);//number
a = true;
console.log(typeof a);//boolean
a = new Object();
console.log(typeof a);//object
</script>
</body>
</html>


    d. 数据类型简介 string number boolean object undefined 


    <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>JS数据类型</title>
</head>
<body>
<!-- JS数据类型,常用数据类型:
    1.string 字符串类型;
    2.number 数字.包括整数和小数类型;
    3.boolean 布尔类型.值只有true和false两个;
    4 object 对象类型,空对象使用null表示,有两种格式:
        new Object(); 
        JSON格式.例如:{name:"张三",age:18};
    5.undefined 变量未赋值 -->
<script>
//1. string 字符串
let str = "你好";
console.log(str);
console.log(typeof str);//string
// 2. number 数字
let n = 123.456;
console.log(n);
console.log(typeof n);//number
// 3. boolean 布尔类型
let boo = false;
console.log(boo);
console.log(typeof boo);//boolean
// 4. object 对象类型，空对象使用 null表示
let obj = null;//或 new Object();
console.log(obj);
console.log(typeof obj);//object
// 5. undefined 变量未赋值
let u = undefined;
console.log(u);//值是undefined
console.log(typeof u);//类型是undefined
// Object类型
let stu = new Object();//创建一个js对象,js对象的属性想要直接加上
stu.id = 1;
stu.name = "刘一";
stu.age = 18;
console.log(stu);//{id: 1, name: "刘一", age: 18}
console.log(typeof stu);//object
// JS对象取属性值有两种方式:
// 1. obj.key
console.log(stu.name);//刘一
// 2. obj["key"]
console.log(stu["name"]); //刘一 == stu.name
let b = "age";
console.log(stu[b]);//可以取不定属性的值
</script>
</body>
</html>


    e. 运算符 + - * / % = < > && || !


    i. 全等符与不全等符 === !== 


    <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
   <title>JS运算符</title>
</head>
<body>
<!--
JS运算符
js运算符和Java运算符基本相同
只有一个特殊的比较运算符
=== 判断js变量的值和类型都相等才为true
!== 不全等，判断js变量的值和类型有一个不等就为true
-->
<script> let a = 3;
let b = "3";
console.log(a == b);//true
// 全等 运算符 ===
console.log(a === b);//false
// 不全等 运算符 !==
console.log(a !== b);//true
// 三元(三目)运算符 布尔表达式?真:假
let str = a===b?"全等":"不全等";
console.log(str);//不全等
</script>
</body>
</html>


    f. 流程控制语句

    i. 条件语句 if else switch case default break 


    <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>条件语句</title>
</head>
<body>
<!-- 条件语句JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别 JS中对各种数据类型作为布尔值的特点:(重点掌握) 1. string 空字符串""为false,其余都为true 2. number 数字 只有0为false,其余数字都为true 3. boolean 布尔类型 值只有 true和false 两个
循环语句

  8. object 对象类型 空对象null表示false,其它对象都是true 5. undefined 变量未赋值 为false 常用语法格式 if ... else if ... else switch case break default -->
    <script>
    //if ... else
    //if(true){
    //if(""){// string 只有空字符为假
    //if(0){number 只有0为假
    //if(false){//boolean false为假 true为真
    //if(null){//object null为假
    //if(undefined){//undefined永为假
    if("undefined"){//undefined永为假
    console.log("满足条件");
    }else{
    console.log("不满足条件");
    }

    //switch case break default
    let k =1;
    switch (k) {
    case 1:
    console.log("111");break;
    case 2:
    console.log("222");break;
    default: console.log("其它情况"); }
    </script>
    </body>
    </html>

    ii. 循环语句 while dowhile fori forin forof 


    <!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>循环语句</title>
</head>
<body>
<!-- 循环语句
    while，do while，fori 和Java一样；
    forin
        1.遍历出数组中的索引和元素
        2.遍历出对象中的属性和元素
    forof 
        1.遍历出数组中的元素
    forin 与 forof 区别:
        1.forin可以遍历对象,forof不能遍历对象
        2.forin可以遍历出数组中的索引,forof只能遍历出数组中的元素 -->
<script>
//while 和Java一样
let k=1;
while (k<3){
    console.log(k++);
}

//do while 和Java一样
k =1;
do{
    console.log(k++);
}while (k<3)

//fori 和Java一样
for(let i=0;i<3;i++){
    console.log(i);
}

//forin 可以遍历数组和对象
let arr = ["刘一","陈二","张三"];//JS数组使用中括号[]定义
let stu = {id:5,name:"李四",age:18};//JS对象使用大括号定义
    //1.forin 遍历出数组中的索引
for(let index in arr){
    console.log(index);//数组的索引 0,1,2
    console.log(arr[index]);//数组中的元素
}
    //2.forin 遍历出对象中的属性名key
for(let k in stu){
    console.log(k);//字符串属性 id,name,age
    console.log(stu[k]);//对象中的属性值
}

//forof 可以遍历数组
for(let e of arr){
    console.log(e);//数组中的元素
}</script>
</body>
</html>

    

    

    ————————————————
版权声明：本文为CSDN博主「Regino」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/Regino/article/details/105321573

    9. 





原文链接：https://blog.csdn.net/Regino/article/details/105321573 











    



            

              
                评论(0)
                浏览(3528)
              
                          

          

                      

            
            
关于HTTP请求出现 405状态码 not allowed的解决办法

            

               seo达人                                            

            

    发现httppost请求目标网站会出现405 状态码，原因为 Apache、IIS、Nginx等绝大多数web服务器，都不允许静态文件响应POST请求




    所以将post请求改为get请求即可




    跨域，请求按要求配置完毕之后，options预请求老是报错。原因是webapi 默认的web.config有配置




    有这么个配置，导致不行。要把他删掉，还要加上


            

              
                评论(0)
                浏览(8993)
              
                          

          

                      

            
            
浅谈JavaScript实现可视化展示冒泡排序过程

            

               seo达人                                            

            



<!DOCTYPE html>


<html>


 <head>


 <title>JavaScript实现可视化展示冒泡排序过程</title>


 <style>


 #boxes{


 border:1px solid grey;


 width:1320px;


 height:300px;


 margin-top:10px;


 position:relative;


 }


 .box{


 background:red;


 width:20px;


 line-height:30px;


 text-align:center;


 font-family:Microsoft Yahei;


 font-size:15px;


 color:white;


 margin:0 1px;


 position:absolute;


 }


 </style>


 </head>


 <body>


 <div id="boxes"></div>


 <script>


 function random(){


 var numbers = [];


 for (var i = 0; i < 60; i++) {


 var number = Math.floor(Math.random()  90 + 10);


 numbers.push(number);


 var divElement = document.createElement("div");


 var parentElement = document.getElementById("boxes");


 divElement.style.left = i  20 + i  2 + "px";


 divElement.style.top = 300 - 3  number + "px";


 divElement.style.height = 3  number + "px";


 divElement.setAttribute("class","box");


 parentElement.appendChild(divElement);


 }


 return numbers;


 }


 function sort(){


 var numbers = random();


 var parentElement = document.getElementById("boxes");


 var i = 0, j = 0;


 var time = setInterval(function() {


 if (i < numbers.length) {


 if (j < numbers.length - i) {


 if (numbers[j] > numbers[j + 1]) {


 var temp = numbers[j];


 numbers[j] = numbers[j + 1];


 numbers[j + 1] = temp;


 parentElement.innerHTML = "";


 for (var k = 0; k < numbers.length; k++) {


 var textNode = document.createTextNode(numbers[k]);


 var divElement = document.createElement("div");


 divElement.appendChild(textNode);


 divElement.style.left = k  20 + k  2 + "px";


 divElement.style.top = 300 - 3  numbers[k] + "px";


 divElement.style.height = 3 * numbers[k] + "px";


 divElement.setAttribute("class","box");


 parentElement.appendChild(divElement);


 }


 }


 j++;


 }


 else{


 i++;


 j = 0;


 }


 }


 else {


 clearInterval(time); 


 return;


 }


 }, 100);  


 }


 sort();


 </script>


 </body>


</html>


————————————————


版权声明：本文为CSDN博主「筱葭」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。


原文链接：https://blog.csdn.net/zhouziyu2011/java/article/details/53899692

            

              
                评论(0)
                浏览(2994)
              
                          

          

                      

            
            
http的状态码（中英文）

            

               seo达人                                            

            

    

         1**：请求收到，继续处理
    

    

        2**：操作成功收到，分析、接受
    

    

        3**：完成此请求必须进一步处理
    

    

        4**：请求包含一个错误语法或不能完成
    

    

        5**：服务器执行一个完全有效请求失败
    

    

        100——客户必须继续发出请求
    

    

        101——客户要求服务器根据请求转换HTTP协议版本
    

    

        200——交易成功
    

    

        201——提示知道新文件的URL
    

    

        202——接受和处理、但处理未完成
    

    

        203——返回信息不确定或不完整
    

    

        204——请求收到，但返回信息为空
    

    

        205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
    

    

        206——服务器已经完成了部分用户的GET请求
    

    

        300——请求的资源可在多处得到
    

    

        301——删除请求数据
    

    

        302——在其他地址发现了请求数据
    

    

        303——建议客户访问其他URL或访问方式
    

    

        304——客户端已经执行了GET，但文件未变化
    

    

        305——请求的资源必须从服务器指定的地址得到
    

    

        306——前一版本HTTP中使用的代码，现行版本中不再使用
    

    

        307——申明请求的资源临时性删除
    

    

        400——错误请求，如语法错误
    

    

        401——请求授权失败
    

    

        402——保留有效ChargeTo头响应
    

    

        403——请求不允许
    

    

        404——没有发现文件、查询或URl
    

    

        405——用户在Request-Line字段定义的方法不允许
    

    

        406——根据用户发送的Accept拖，请求资源不可访问
    

    

        407——类似401，用户必须首先在代理服务器上得到授权
    

    

        408——客户端没有在用户指定的饿时间内完成请求
    

    

        409——对当前资源状态，请求不能完成
    

    

        410——服务器上不再有此资源且无进一步的参考地址
    

    

        411——服务器拒绝用户定义的Content-Length属性请求
    

    

        412——一个或多个请求头字段在当前请求中错误
    

    

        413——请求的资源大于服务器允许的大小
    

    

        414——请求的资源URL长于服务器允许的长度
    

    

        415——请求资源不支持请求项目格式
    

    

        416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求
    

    

        也不包含If-Range请求头字段
    

    

        417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下
    

    

        一级服务器不能满足请求
    

    

        500——服务器产生内部错误
    

    

        501——服务器不支持请求的函数
    

    

        502——服务器暂时不可用，有时是为了防止发生系统过载
    

    

        503——服务器过载或暂停维修
    

    

        504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长
    

    

        505——服务器不支持或拒绝支请求头中指定的HTTP版本
    

    

        ==========================================================
    

    

        英文版：
    

    

        100：Continue
    

    

        101：Switching Protocols
    

    

        102：Processing
    

    

        200：OK
    

    

        201：Created
    

    

        202：Accepted
    

    

        203：Non-Authoriative Information
    

    

        204：No Content
    

    

        205：Reset Content
    

    

        206：Partial Content
    

    

        207：Multi-Status
    

    

        300：Multiple Choices
    

    

        301：Moved Permanently
    

    

        302：Found
    

    

        303：See Other
    

    

        304：Not Modified
    

    

        305：Use Proxy
    

    

        306：(Unused)
    

    

        307：Temporary Redirect
    

    

        400：Bad Request
    

    

        401：Unauthorized
    

    

        402：Payment Granted
    

    

        403：Forbidden
    

    

        404：File Not Found
    

    

        405：Method Not Allowed
    

    

        406：Not Acceptable
    

    

        407：Proxy Authentication Required
    

    

        408：Request Time-out
    

    

        409：Conflict
    

    

        410：Gone
    

    

        411：Length Required
    

    

        412：Precondition Failed
    

    

        413：Request Entity Too Large
    

    

        414：Request-URI Too Large
    

    

        415：Unsupported Media Type
    

    

        416：Requested range not satisfiable
    

    

        417：Expectation Failed
    

    

        422：Unprocessable Entity
    

    

        423：Locked
    

    

        424：Failed Dependency
    

    

        500：Internal Server Error
    

    

        501：Not Implemented
    

    

        502：Bad Gateway
    

    

        503：Service Unavailable
    

    

        504：Gateway Timeout
    

    

        505：HTTP Version Not Supported
    

    

        507：Insufficient Storage
    

    

        完整的 HTTP 1.1规范说明书来自于RFC 2616，你可以在rfc-editor在线查阅。HTTP 1.1的状态码被标记为新特性，因为许多浏览器只支持 HTTP 1.0。你应只把状态码发送给支持 HTTP 1.1的客户端，支持协议版本可以通过调用request.getRequestProtocol来检查。
    

    

        本部分余下的内容会详细地介绍 HTTP 1.1中的状态码。这些状态码被分为五大类：
    

    

        100-199 用于指定客户端应相应的某些动作。
    

    

        200-299 用于表示请求成功。
    

    

        300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
    

    

        400-499 用于指出客户端的错误。
    

    

        500-599 用于支持服务器错误。
    

    

        HttpServletResponse中的常量代表关联不同标准消息的状态码。在servlet程序中，你会更多地用到这些常量的标识来使用状态码。例如：你一般会使用response.setStatus(response.SC_NO_CONTENT)而不是 response.setStatus(204)，因为后者不易理解而且容易导致错误。但是，你应当注意到服务器允许对消息轻微的改变，而客户端只注意状态码的数字值。所以服务器可能只返回 HTTP/1.1 200 而不是 HTTP/1.1 200 OK。
    

    

        100 (Continue/继续)
    

    

        如果服务器收到头信息中带有100-continue的请求，这是指客户端询问是否可以在后续的请求中发送附件。在这种情况下，服务器用100(SC_CONTINUE)允许客户端继续或用417 (Expectation Failed)告诉客户端不同意接受附件。这个状态码是 HTTP 1.1中新加入的。
    

    

        101 (Switching Protocols/转换协议)
    

    

        101 (SC_SWITCHING_PROTOCOLS)状态码是指服务器将按照其上的头信息变为一个不同的协议。这是 HTTP 1.1中新加入的。
    

    

        200 (OK/正常)
    

    

        200 (SC_OK)的意思是一切正常。一般用于相应GET和POST请求。这个状态码对servlet是缺省的;如果没有调用setStatus方法的话，就会得到200。
    

    

        201 (Created/已创建)
    

    

        201 (SC_CREATED)表示服务器在请求的响应中建立了新文档;应在定位头信息中给出它的URL。
    

    

        202 (Accepted/接受)
    

    

        202 (SC_ACCEPTED)告诉客户端请求正在被执行，但还没有处理完。
    

    

        203 (Non-Authoritative Information/非官方信息)
    

    

        状态码203 (SC_NON_AUTHORITATIVE_INFORMATION)是表示文档被正常的返回，但是由于正在使用的是文档副本所以某些响应头信息可能不正确。这是 HTTP 1.1中新加入的。
    

    

        204 (No Content/无内容)
    

    

        在并没有新文档的情况下，204 (SC_NO_CONTENT)确保浏览器继续显示先前的文档。这各状态码对于用户周期性的重载某一页非常有用，并且你可以确定先前的页面是否已经更新。例如，某个servlet可能作如下操作：
    

    

        int pageVersion =Integer.parseInt(request.getParameter("pageVersion"));
    

    

        if (pageVersion >;= currentVersion) {
    

    

        response.setStatus(response.SC_NO_CONTENT);
    

    

        } else {
    

    

        // Create regular page
    

    

        }
    

    

        但是，这种方法对通过刷新响应头信息或等价的HTML标记自动重载的页面起作用，因为它会返回一个204状态码停止以后的重载。但基于JavaScript脚本的自动重载在这种情况下仍然需要能够起作用。可以阅读本书7.2 ( HTTP 1.1 Response Headers and Their Meaning/HTTP 1.1响应头信息以及他们的意义)部分的详细讨论。
    

    

        205 (Reset Content/重置内容)
    

    

        重置内容205 (SC_RESET_CONTENT)的意思是虽然没有新文档但浏览器要重置文档显示。这个状态码用于强迫浏览器清除表单域。这是 HTTP 1.1中新加入的。
    

    

        206 (Partial Content/局部内容)
    

    

        206 (SC_PARTIAL_CONTENT)是在服务器完成了一个包含Range头信息的局部请求时被发送的。这是 HTTP 1.1中新加入的。
    

    

        300 (Multiple Choices/多重选择)
    

    

        300 (SC_MULTIPLE_CHOICES)表示被请求的文档可以在多个地方找到，并将在返回的文档中列出来。如果服务器有首选设置，首选项将会被列于定位响应头信息中。
    

    

        301 (Moved Permanently)
    

    

        301 (SC_MOVED_PERMANENTLY)状态是指所请求的文档在别的地方;文档新的URL会在定位响应头信息中给出。浏览器会自动连接到新的URL。
    

    

        302 (Found/找到)
    

    

        与301有些类似，只是定位头信息中所给的URL应被理解为临时交换地址而不是永久的。注意：在 HTTP 1.0中，消息是临时移动(Moved Temporarily)的而不是被找到，因此HttpServletResponse中的常量是SC_MOVED_TEMPORARILY不是我们以为的SC_FOUND。
    

    

        注意
    

    

        代表状态码302的常量是SC_MOVED_TEMPORARILY而不是SC_FOUND。
    

    

        状态码302是非常有用的因为浏览器自动连接在定为响应头信息中给出的新URL。这非常有用，而且为此有一个专门的方法——sendRedirect。使用response.sendRedirect(url)比调用response.setStatus(response.SC_MOVED_TEMPORARILY)和response.setHeader("Location", url)多几个好处。首先，response.sendRedirect(url)方法明显要简单和容易。第二，servlet自动建立一页保存这一连接以提供给那些不能自动转向的浏览器显示。最后，在servlet 2.2版本(J2EE中的版本)中，sendRedirect能够处理相对路径，自动转换为绝对路径。但是你只能在2.1版本中使用绝对路径。
    

    

        如果你将用户转向到站点的另一页中，你要用 HttpServletResponse 中的 encodeURL 方法传送URL。这么做可预防不断使用基于URL重写的会话跟踪的情况。URL重写是一种在你的网站跟踪不使用 cookies 的用户的方法。这是通过在每一个URL尾部附加路径信息实现的，但是 servlet 会话跟踪API会自动的注意这些细节。会话跟踪在第九章讨论，并且养成使用 encodeURL 的习惯会使以后添加会话跟踪的功能更容易很多。
    

    

        核心技巧
    

    

        如果你将用户转向到你的站点的其他页面，用 response.sendRedirect(response.encodeURL(url)) 的方式事先计划好会话跟踪(session tracking)要比只是调用 response.sendRedirect(url) 好的多。
    

    

        这个状态码有时可以与301交换使用。例如，如果你错误的访问了某路径信息不完整)，有些服务器就会回复301状态码而有些则回复302。从技术上说，如果最初的请求是GET浏览器只是被假定自动转向。如果想了解更多细节，请看状态码307的讨论。
    

    

        303 (See Other/参见其他信息)
    

    

        这个状态码和 301、302 相似，只是如果最初的请求是 POST，那么新文档(在定位头信息中给出)药用 GET 找回。这个状态码是新加入 HTTP 1.1中的。
    

    

        304 (Not Modified/为修正)
    

    

        当客户端有一个缓存的文档，通过提供一个 If-Modified-Since 头信息可指出客户端只希望文档在指定日期之后有所修改时才会重载此文档，用这种方式可以进行有条件的请求。304 (SC_NOT_MODIFIED)是指缓冲的版本已经被更新并且客户端应刷新文档。另外，服务器将返回请求的文档及状态码 200。servlet一般情况下不会直接设置这个状态码。它们会实现getLastModified方法并根据修正日期让默认服务方法处理有条件的请求。这个方法的例程已在2.8部分(An Example Using Servlet Initialization and Page Modification Dates/一个使用servlet初始化和页面修正日期的例子)给出。
    

    

        305 (Use Proxy/使用代理)
    

    

        305 (SC_USE_PROXY)表示所请求的文档要通过定位头信息中的代理服务器获得。这个状态码是新加入 HTTP 1.1中的。
    

    

        307 (Temporary Redirect/临时重定向)
    

    

        浏览器处理307状态的规则与302相同。307状态被加入到 HTTP 1.1中是由于许多浏览器在收到302响应时即使是原始消息为POST的情况下仍然执行了错误的转向。只有在收到303响应时才假定浏览器会在POST请求时重定向。添加这个新的状态码的目的很明确：在响应为303时按照GET和POST请求转向;而在307响应时则按照GET请求转向而不是POST请求。注意：由于某些原因在HttpServletResponse中还没有与这个状态对应的常量。该状态码是新加入HTTP 1.1中的。
    

    

        注意
    

    

        在 HttpServletResponse 中没有 SC_TEMPORARY_REDIRECT 常量，所以你只能显示的使用307状态码。
    

    

        400 (Bad Request/错误请求)
    

    

        400 (SC_BAD_REQUEST)指出客户端请求中的语法错误。
    

    

        401 (Unauthorized/未授权)
    

    

        401 (SC_UNAUTHORIZED)表示客户端在授权头信息中没有有效的身份信息时访问受到密码保护的页面。这个响应必须包含一个WWW-Authenticate的授权信息头。例如，在本书4.5部分中的“Restricting Access to Web Pages./限制访问Web页。”
    

    

        403 (Forbidden/禁止)
    

    

        403 (SC_FORBIDDEN)的意思是除非拥有授权否则服务器拒绝提供所请求的资源。这个状态经常会由于服务器上的损坏文件或目录许可而引起。
    

    

        404 (Not Found/未找到)
    

    

        404 (SC_NOT_FOUND)状态每个网络程序员可能都遇到过，他告诉客户端所给的地址无法找到任何资源。它是表示“没有所访问页面”的标准方式。这个状态码是常用的响应并且在HttpServletResponse类中有专门的方法实现它：sendError("message")。相对于setStatus使用sendError得好处是：服务器会自动生成一个错误页来显示错误信息。但是，Internet Explorer 5浏览器却默认忽略你发挥的错误页面并显示其自定义的错误提示页面，虽然微软这么做违反了 HTTP 规范。要关闭此功能，在工具菜单里，选择Internet选项，进入高级标签页，并确认“显示友好的 HTTP 错误信息”选项(在我的浏览器中是倒数第8各选项)没有被选。但是很少有用户知道此选项，因此这个特性被IE5隐藏了起来使用户无法看到你所返回给用户的信息。而其他主流浏览器及IE4都完全的显示服务器生成的错误提示页面。可以参考图6-3及6-4中的例子。
    

    

        核心警告
    

    

        默认情况下，IE5忽略服务端生成的错误提示页面。
    

    

        405 (Method Not Allowed/方法未允许)
    

    

        405 (SC_METHOD_NOT_ALLOWED)指出请求方法(GET, POST, HEAD, PUT, DELETE, 等)对某些特定的资源不允许使用。该状态码是新加入 HTTP 1.1中的。
    

    

        406 (Not Acceptable/无法访问)
    

    

        406 (SC_NOT_ACCEPTABLE)表示请求资源的MIME类型与客户端中Accept头信息中指定的类型不一致。见本书7.2部分中的表7.1(HTTP 1.1 Response Headers and Their Meaning/HTTP 1.1响应头信息以及他们的意义)中对MIME类型的介绍。406是新加入 HTTP 1.1中的。
    

    

        407 (Proxy Authentication Required/代理服务器认证要求)
    

    

        407 (SC_PROXY_AUTHENTICATION_REQUIRED)与401状态有些相似，只是这个状态用于代理服务器。该状态指出客户端必须通过代理服务器的认证。代理服务器返回一个Proxy-Authenticate响应头信息给客户端，这会引起客户端使用带有Proxy-Authorization请求的头信息重新连接。该状态码是新加入 HTTP 1.1中的。
    

    

        408 (Request Timeout/请求超时)
    

    

        408 (SC_REQUEST_TIMEOUT)是指服务端等待客户端发送请求的时间过长。该状态码是新加入 HTTP 1.1中的。
    

    

        409 (Conflict/冲突)
    

    

        该状态通常与PUT请求一同使用，409 (SC_CONFLICT)状态常被用于试图上传版本不正确的文件时。该状态码是新加入 HTTP 1.1中的。
    

    

        410 (Gone/已经不存在)
    

    

        410 (SC_GONE)告诉客户端所请求的文档已经不存在并且没有更新的地址。410状态不同于404，410是在指导文档已被移走的情况下使用，而404则用于未知原因的无法访问。该状态码是新加入 HTTP 1.1中的。
    

    

        411 (Length Required/需要数据长度)
    

    

        411 (SC_LENGTH_REQUIRED)表示服务器不能处理请求(假设为带有附件的POST请求)，除非客户端发送Content-Length头信息指出发送给服务器的数据的大小。该状态是新加入 HTTP 1.1的。
    

    

        412 (Precondition Failed/先决条件错误)
    

    

        412 (SC_PRECONDITION_FAILED)状态指出请求头信息中的某些先决条件是错误的。该状态是新加入 HTTP 1.1的。
    

    

        413 (Request Entity Too Large/请求实体过大)
    

    

        413 (SC_REQUEST_ENTITY_TOO_LARGE)告诉客户端现在所请求的文档比服务器现在想要处理的要大。如果服务器认为能够过一段时间处理，则会包含一个Retry-After的响应头信息。该状态是新加入 HTTP 1.1的。
    

    

        414 (Request URI Too Long/请求URI过长)
    

    

        414 (SC_REQUEST_URI_TOO_LONG)状态用于在URI过长的情况时。这里所指的“URI”是指URL中主机、域名及端口号之后的内容。该状态是新加入 HTTP 1.1的。
    

    

        415 (Unsupported Media Type/不支持的媒体格式)
    

    

        415 (SC_UNSUPPORTED_MEDIA_TYPE)意味着请求所带的附件的格式类型服务器不知道如何处理。该状态是新加入 HTTP 1.1的。
    

    

        416 (Requested Range Not Satisfiable/请求范围无法满足)
    

    

        416表示客户端包含了一个服务器无法满足的Range头信息的请求。该状态是新加入 HTTP 1.1的。奇怪的是，在servlet 2.1版本API的HttpServletResponse中并没有相应的常量代表该状态。
    

    

        注意
    

    

        在servlet 2.1的规范中，类HttpServletResponse并没有SC_REQUESTED_RANGE_NOT_SATISFIABLE 这样的常量，所以你只能直接使用416。在servlet 2.2版本之后都包含了此常量。
    

    

        417 (Expectation Failed/期望失败)
    

    

        如果服务器得到一个带有100-continue值的Expect请求头信息，这是指客户端正在询问是否可以在后面的请求中发送附件。在这种情况下，服务器也会用该状态(417)告诉浏览器服务器不接收该附件或用100 (SC_CONTINUE)状态告诉客户端可以继续发送附件。该状态是新加入 HTTP 1.1的。
    

    

        500 (Internal Server Error/内部服务器错误)
    

    

        500 (SC_INTERNAL_SERVER_ERROR) 是常用的“服务器错误”状态。该状态经常由CGI程序引起也可能(但愿不会如此!)由无法正常运行的或返回头信息格式不正确的servlet引起。
    

    

        501 (Not Implemented/未实现)
    

    

        501 (SC_NOT_IMPLEMENTED)状态告诉客户端服务器不支持请求中要求的功能。例如，客户端执行了如PUT这样的服务器并不支持的命令。
    

    

        502 (Bad Gateway/错误的网关)
    

    

        502 (SC_BAD_GATEWAY)被用于充当代理或网关的服务器;该状态指出接收服务器接收到远端服务器的错误响应。
    

    

        503 (Service Unavailable/服务无法获得)
    

    

        状态码503 (SC_SERVICE_UNAVAILABLE)表示服务器由于在维护或已经超载而无法响应。例如，如果某些线程或数据库连接池已经没有空闲则servlet会返回这个头信息。服务器可提供一个Retry-After头信息告诉客户端什么时候可以在试一次。
    

    

        504 (Gateway Timeout/网关超时)
    

    

        该状态也用于充当代理或网关的服务器;它指出接收服务器没有从远端服务器得到及时的响应。该状态是新加入 HTTP 1.1的。
    

    

        505 (HTTP Version Not Supported/不支持的 HTTP 版本)
    

    

        505 (SC_HTTP_VERSION_NOT_SUPPORTED)状态码是说服务器并不支持在请求中所标明 HTTP 版本。该状态是新加入 HTTP 1.1的。
    

    

        

    



            

              
                评论(0)
                浏览(2893)
              
                          

          

              


  





    

    
分类

    
  

  

    
日历

    

        

        
    

  

    

      

        

          

            
            
            
          

          

        

      

    

    

      
链接

      
    
                

    

    

      
个人资料

      

          

                    

          
蓝蓝设计的小编
          http://www.lanlanwork.com

      

    

    

      
存档