Ant Design项目记录和CSS3的总结和Es6的基本总结

程序员文章站 2022-04-15 20:06:06

这里主要是介绍自己运用ANT框架的一些小总结，以前写到word里，现在要慢慢传上来, 辅助生殖项目总结：从每个组件的运用的方法和问题来总结项目。 1.项目介绍辅助生殖项目主要运用的是Ant.design框架结合React.js和es6语法编写 2.项目工具和环境安装项目主要运用Visual St ......

这里主要是介绍自己运用ANT框架的一些小总结，以前写到word里，现在要慢慢传上来,

辅助生殖项目总结：从每个组件的运用的方法和问题来总结项目。

1.项目介绍

辅助生殖项目主要运用的是Ant.design框架结合React.js和es6语法编写

2.项目工具和环境安装

项目主要运用Visual Studio和开发结合Git和当代码工具TortoiseCit(也就是小乌龟)工具加上Node.js环境

这里要先安装Git环境，然后安装TortoiseCit，TortoiseCit相当于是Git的工具，然后安装node环境，最后安装VS，安装成功后就可以当代码了。（以上的安装步骤都很简单，不在介绍）

3.git运用

这里讲的是当代码的操作：

http://www.cnblogs.com/hbujt/p/5554038.html -----git学习地址

git开发流程：

1：git clone 获取代码

2：本地分支切换至standard

3：新建自己的开发分支（从standard），

命名：

业务功能：feature/功能名

bug修改：fix/功能名称

文档上传：doc/文档名

5：push 分支至服务器

6：提交merge请求（将我的分支合并到develop分支上）

7：管理员（陈）审核代码，执行merge

Git提交流程：

1.git commit 和push

2.切换分支switch到standard分支，fetch和pull

3.merge码云上的standard-cly分支，并且把standar push到码云

4.切换分支到自己的分支standard-cly,（还有一个remotes的那个是码云上的，不用切换他）如果没人操作此分支可以不用fetch和pull，

5.merge standard分支

6.再次fetch并且pull一下

前端代码代码的提交的时候，大家先Fetch..然后Pull...如果报错，大家看一下是哪一个文件冲突了 : (1) 如果这个文件不是多个人同时修改了同一行代码（增加几行代码不算同时修改，例如config.js，同时增加不会冲突），然后就可以commit...，commit的时候会显示错误，提示让你先pull，再pull一下，然后push，就提交成功了；（2）如果这个文件被多人同时修改了代码，就把自己本地的代码备份一下，在Visual Studio上将自己的代码还原成和码云上一致的，然后再pull... 成功之后将自己修改的部分代码粘过去，再提交。先拉再提交。

详细操作图：

4.跑前台ant项目

这里简单介绍写当下代码后前台怎样跑起来

1）先通VS选中当下来的代码文件

2）新当下的项目要跑起来都要先输入npm i （npm i 只是 npm install 的简写，通常称为node包管理器）这个是安装项目所需要的包的方法。安装成功后，输入npm run dev 启动项目，启动成功后会出现The app is running at: http://0.0.0.0:8001/，失败会有其他提示，根据提示信息解决就好，下面的图片是我遇到的问题以及解决方法。

了解地址：

1.npm介绍：https://www.jianshu.com/p/19d349796207

5.项目基本组件运用

这里会把项目中用到的基本组件一一说明，要结合ant的Api来学习，（需要对照这api看，不然会看不懂，因为我只是截取关键性代码）

（这里只是介绍项目基本组件，复杂组件有需要单独找我，一起讨论）

Ant API地址: https://ant.design/docs/react/introduce-cn

1.select组件

这里我们封装了一个DictSelct组件，里面的底层还是select可以对照api看他的参数和数据规则。

这个组件比较简单，里面的参数数据因为数据量少，就是前端自己定义的code。（也可以后台传输数据，具体方法下面有介绍）

2.树形的Treeselect框

这里面也是自己封装了一个组件，可以限制不能选中的项，可以多选

关键代码处理数据：（运用了map方法）

componentDidMount() {

const {transferData, ajax,isornotDisable} = this.props

//isornotDisable字段控制着父级可选不可选，如果不可选，在父级设置此字段为1

request(ajax).then(d=>{

d.map(transferData);

return arrayToTree(d);

}).then(treeData=>{

const isornot=isornotDisable?true:false;

{isornot && treeData.map((item) => {

const children = item["children"];//第一级

if(children){

item.disabled=true;

children.map((c) => {

const sonchildren = c["children"];//第二级

if(sonchildren){

c.disabled=true;

sonchildren.map((b) => {

const grandchild = b["children"];//第三级

if(grandchild){

b.disabled=true;

}

});

}

});

}

});}

this.setState({treeData})

})

}

return (

<TreeSelect {...tProps}

treeData={treeData}

treeDefaultExpandAll={true}

dropdownStyle={{ maxHeight: 350, overflow: 'auto' }}

getPopupContainer={triggerNode => triggerNode.parentNode}/>

);

3.日期框

1.日期框介绍

这里介绍常用的日期框介绍

在组件中引入这句话可以使弹出的日期框不随着屏幕滚动

getPopupContainer={triggerNode => triggerNode.parentNode}

disabledDate这个参数可以控制日期选中范围

disabledDate={this.disabledDate}

其他的控制日期方法可以去api里面查看

2.二次保存问题解决

日期框二次校验问题解决方法，这里以chenlixue新增治疗基本信息为例

（下面是我的修改思路，大家可以根据自己的想法编写，但是要注意下下面的问题）

1）以前一直以为这个是因为病历号失去焦点的验证有问题或者是点击保存的时候的表单验证有问题，但是我把每个操作都重新检查了一遍发现没有问题，后来才确定到是给日期框赋值的证件号框的校验有问题

2）以前咱们是这么写的，咱们在验证证件号的时候给了日期框赋的值，

3）但是在点击保存的时候，因为是直接把数据赋值到input框，没有走这个证件号验证（我debugger试了试），

4)但是在我点击保存的时候走了这个证件号验证的方法，然后我排除了其他的框的问题，最后确认到是在这里给日期框赋值出的问题，最后把日期框的赋值方法写到了外面，解决了日期框二次校验的问题。下面是正确代码

4.表格组件

表格组件是系统中长用的方法，这里简绍一种，和表格里面常见的操作

1. 常用的表格

<Table columns={columns} dataSource={rows} loading={loading} pagination={pagination} onChange={this.handlPageChange}/>}

这里面columns代表表格表头结构，dataSource代表表格的数据，

Loading可以控制表格加载数据时的加载效果，pagination代表表格分页的参数.

简答的columns:

const columns = [

{ title: intl.formatMessage({id: "business.serverManage.serverManageList.artNum"}), dataIndex: 'artNum' },

{ title: intl.formatMessage({id: "business.serverManage.serverManageList.artcyNum"}), dataIndex: 'artcyNum' }]

2.表格的合并

1.合并前提

后台返回数据必须是:相同重复的数据必须是连在一起的，这样前台才能通过rowspan方法合并表格数据。（这是前提，后台需要注意）

2.步骤

1.前台需要根据后台返回的数据内容，根据相应参数对前台数据进行比较合并，（历史重复数据反馈页面返回数据的标识参数是flag,）

后台需要给相同的数据添加一个相同的标识字段，像flag字段，方便前台合并数据，可以参照历史数据反馈页面编写，（如果不能返回标识字段，前台也可以根据数据里面相同的字段进行合并）
合并方法：

1）在需要合并的table页面引入getMergeArr.js方法，这个方法的作用是处理后台返回数据，把后台返回的list数据，提取其中需要的字段，拆分成一个对象字段，具体格式可以自己前台console下。（可以去utils/index.js里面学习）

调用方法：

2）在columns里面找到需要合并的字段

合并方法：

这里的每一个flag[text]都是一个数组对象，具体的可以console出flag整体对照理解,每当index和他对应的数组对象里面的第一个值相同时，给他赋值上相应的num值,然后行合并，合并长度为数组长度。

(没有flag参数，前台可以根据json里面相同的字段值，进行比较合并)

其他合并的情况：对于某些列具有相同字段值的合并(了解地址：system/userManage)

其他合并情况，可以参照上述两种情况进行参数的修改

3.行合并

在columns里需要合并的列，给子集的id写在父级的children里面

3.表格添加加载图标

1.Table组件添加loading参数，默认为false，它是控制表格数据加载的图标，

2.前台没有接收到后台返回数据的时候设置loading为true,接收数据到或者报异常的时候设置为false.

3.在table组件配置好参数

4.表格样式修改

1.表格行选中样式添加

（可以去beijing,精子库质控统计查看例子）

（咱们以前页面上的表格都是在hover时显示选中效果，现在可以实现选中时就显示选中效果）

实现方法：

需要在state中添加，选中参数

在table组件中添加两个参数配置

3）js中加上选中的方法，

2.表格内部样式修改：

(这里只写了左右样式其他样式自己可以试一试)

第一种方法：

表格内容居左居右

在columns加上className,因为咱们框架index.less的样式会覆盖掉所写样式所以要改变摸个表格样式需要在index.less添加样式

第二种方法：global（可以理解为全站样式）

可以在需要改变样式的表格页面添加相对应的index.less，改变的表格样式要通过

：global{ }包裹才能生效

（这里介绍的都只是table组件简单用法，复杂的表格操作需要子集去看api领会编写）

5.ajax请求操作

这里简单介绍下我们项目运用的请求方法，截个图就可以了，不做介绍，每个项目的写法应该差不多

6.Button按钮组件控制方法

import { Button, Row, Modal } from 'antd';

1.第一种处于index页面的button修改

参考地址: routes/sperm/statistic/org/donorPrompt

页面样式：

具体代码：

2.在模态框里面的按钮控制

参考地址：/routes/sperm/spermBankInfo/list'

页面样式：

具体代码：

7.Popover气泡组件控制方法

Content代表气泡里面的内容，trigger代表显示气泡的时机，例子中的是hover

8.Modal组件使用方法

这里只是写个例子，理解后自己可以随意编写

其实这个modal框就是定义一个参数，控制modal框显示与否，具体代码如下:

这里根据updateModalVisiable参数的值控制是否显示modal

Modal框内部代码

Modal框内部的footer代表modal框的功能按钮，自己可以自定义

9.提示框组件

这里的提示框组件是通过Modal对话框组件实现的

这里要引入modal和intl,提示框

Api里面有好几种，其他的可以自己试一试

6.项目中用到的方法

1.数据处理

1.map方法

这个介绍的是最简单的往原始数据里面添加新的数据

2. 向数组结尾添加元素方法

3. 向数组头部添加元素方法

4.splice()数组方法

1.删除-用于删除元素，两个参数，第一个参数（要删除第一项的位置），第二个参数（要删除的项数）

2.插入-向数组指定位置插入任意项元素。三个参数，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）

3.替换-向数组指定位置插入任意项元素，同时删除任意数量的项，三个参数。第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）

示例：

1、删除功能，第一个参数为第一项位置，第二个参数为要删除几个。

array.splice(index,num)，返回值为删除内容，array为结果值。

eg：

<!DOCTYPE html>

<html>

<body>

<script>

var array = ['a','b','c','d'];

var removeArray = array.splice(0,2);

alert(array);//弹出c,d

alert(removeArray);//返回值为删除项，即弹出a,b

</script>

</body>

</html>

2、插入功能，第一个参数（插入位置），第二个参数（0），第三个参数（插入的项）

array.splice(index,0,insertValue)，返回值为空数组，array值为最终结果值

eg:

<!DOCTYPE html>

<html>

<body>

<script>

var array = ['a','b','c','d'];

var removeArray = array.splice(1,0,'insert');

alert(array);//弹出a,insert,b,c,d

alert(removeArray);//弹出空

</script>

</body>

</html>

3、替换功能，第一个参数（起始位置），第二个参数（删除的项数），第三个参数（插入任意数量的项）

array.splice(index,num,insertValue)，返回值为删除内容，array为结果值。

eg:

<!DOCTYPE html>

<html>

<body>

<script>

var array = ['a','b','c','d'];

var removeArray = array.splice(1,1,'insert');

alert(array);//弹出a,insert,c,d

alert(removeArray);//弹出b

</script>

</body>

</html>

5. slice()数组方法

定义和用法

slice() 方法可从已有的数组中返回选定的元素。

语法

arrayObject.slice(start,end)

参数	描述
start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

例子 1

在本例中，我们将创建一个新数组，然后显示从其中选取的元素：

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

document.write(arr + "<br />")

document.write(arr.slice(1) + "<br />")

document.write(arr)

</script>

输出：

George,John,Thomas

John,Thomas

George,John,Thomas

例子 2

在本例中，我们将创建一个新数组，然后显示从其中选取的元素：

<script type="text/javascript">

var arr = new Array(6)

arr[0] = "George"

arr[1] = "John"

arr[2] = "Thomas"

arr[3] = "James"

arr[4] = "Adrew"

arr[5] = "Martin"

document.write(arr + "<br />")

document.write(arr.slice(2,4) + "<br />")

document.write(arr)

</script>

输出：

George,John,Thomas,James,Adrew,Martin

Thomas,James

George,John,Thomas,James,Adrew,Martin

6. JS数组(Array)处理函数整理

1、concat() 连接两个或更多的数组
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
例如：

复制代码代码如下:

输出结果：
1,2,3,4,5,11,22,33

2、join()
把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
例如：

复制代码代码如下:

list结果：

'<ul><li>item 1</li><li>item 2</li><li>item 3</li></ul>'
这是迄今为止最快的方法！使用原生代码（如 join()），不管系统内部做了什么，通常比非原生快很多。——James Padolsey, james.padolsey.com

3、pop() 删除并返回数组的最后一个元素
pop()方法将删除数组的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。
如果数组已经为空，则pop()不改变数组，并返回undefined值
例如：

复制代码代码如下:

输出结果：
George,John,Thomas
Thomas
George,John

4、push() 向数组的末尾添加一个或更多元素，并返回新的长度
例如：

复制代码代码如下:

输出结果：
George,John,Thomas
4
George,John,Thomas,James

5、unshift() 向数组的开头添加一个或更多元素，并返回新的长度
例如：

复制代码代码如下:

输出结果：
George,John,Thomas
4
James,George,John,Thomas

6、reverse() 颠倒数组中元素的顺序
例如：

复制代码代码如下:

输出结果：
George,John,Thomas
Thomas,John,George

7、shift() 删除并返回数组的第一个元素
例如：

复制代码代码如下:

输出结果：
George,John,Thomas
George
John,Thomas

8、slice(start,end) 从某个已有的数组返回选定的元素
请注意，该方法并不会修改数组，而是返回一个子数组
例如：

复制代码代码如下:

输出结果：
George,John,Thomas
John,Thomas
George,John,Thomas

9、sort() 对数组的元素进行排序
对数组的引用。请注意，数组在原数组上进行排序，不生成副本
该方法默认是按照字符编码(ASCII)的顺序进行排序的
例如：

复制代码代码如下:

输出结果：
John,George,Thomas
George,John,Thomas

再来看一个例子：

复制代码代码如下:

输出结果：
10,5,40,25,1000,1
1,10,1000,25,40,5

我们可以看到，并非是按照我们认为的按数字大小排序，如果想按照数字大小排序，则需要改变默认的排序方式，自行指定排序规则。
如下：

复制代码代码如下:

输出结果：
10,5,40,25,1000,1
1,5,10,25,40,1000
如果想要降序排列呢？
将排序规则改为：
function (a, b) {return b - a;}
就OK了

10、splice() 删除元素，并向数组添加新元素
splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改
(1)删除指定范围的数组元素：

复制代码代码如下:

输出结果：
George,John,Thomas,James,Adrew,Martin
George,John,Martin

(2)从指定下标开始插入指定元素(元素个数不限)：

复制代码代码如下:

输出结果：
George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Thomas,James,Adrew,Martin

(3)删除指定范围的数组元素，并用指定元素替换(元素个数不限)：

复制代码代码如下:

输出结果：
George,John,Thomas,James,Adrew,Martin
George,John,William,JACK,Martin

7. 例子展示：

1.这里是按照数据给的某一个参数进行数据比较排序。

后台数据：

用sort方法进行比较处理，比较参数是：'orgCode'，

这里是把数据更大的排到了前面，null值可以在做处理

//比较方法

function compare(property){

return function(a,b){

var value1 = a[property];

var value2 = b[property];

return value1 - value2;

}

//修改数据格式

function cx(){

$.ajax({

url:'${ctx}/system/organization/json',

type:'get',

success:function(data){

var newData=data.sort(compare('orgCode'));

$('#dg').treegrid("loadData",newData);

}

})

}

cx();

比较完的数据格式：

2.两个数组比较与json parse()方法

背景：就是有一个select，后台返回45个所有数据，还有一个方法就是加载出已经上报的数据2个，我要去比较给这两个数组中相同的数据的option背景颜色加深。（给特定的select option选项加背景效果）

这个是后台返回的上报数据两个

但是他返回的数据是个json串不是json对象所以我用了JSON.parse（）方法转换成了json对象

方法：var newData=JSON.parse(data)

下面写一下我的两个数组比较方法，和实现效果

实现代码： $.post('ComQueryService/comQuery.do',params,function(data){

var bToObj=JSON.parse(data);

var bToObjData=bToObj.data.rows;

var h = '';

$.post('FileManage/getOrgCodeOffileUpload.do',params,function(filedata){

var Filedata=JSON.parse(filedata);

console.log(Filedata.data)

var screenData=Filedata.data?Filedata.data:[];

var g=0;

for(var i=0;i<bToObjData.length;i++){

var moubTo=bToObjData[i].DD_NAME;

var isExist = false;

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

var scrbTo=screenData[k];

if(moubTo==scrbTo){

isExist =true;

break;

}

if(isExist){

g=g+1

h+='<option style="background-color:#f4bdc6" value="'+bToObjData[i].DD_NAME+'">'+bToObjData[i].DD_ID+'</option>';

}else{

h+='<option value="'+bToObjData[i].DD_NAME+'">'+bToObjData[i].DD_ID+'</option>';

}

$("#xxxxxxxxe").html(h);

})

});

实现效果：

2.时间处理

1. JS获取当前时间及时间戳相互转换

1.获取当前时间的 时间戳
　　Date.parse(new Date())

　　结果：1486347562000

2.获取当前时间

　　new Date()

　　结果：Mon Feb 06 2017 10:19:42 GMT+0800 (CST)

3.将 时间戳 转换成时间

　　new Date(1486347562000)

　　结果：Mon Feb 06 2017 10:19:22 GMT+0800 (CST)

4.将时间转换成 时间戳　　

　　Date.parse(new Date("2017-02-06 10:30:50"))

　　结果：1486348250000

2. Js获取当前日期时间及其它操作

var myDate = new Date();
myDate.getYear();        //获取当前年份(2位)
myDate.getFullYear();    //获取完整的年份(4位,1970-????)
myDate.getMonth();       //获取当前月份(0-11,0代表1月)
myDate.getDate();        //获取当前日(1-31)
myDate.getDay();         //获取当前星期X(0-6,0代表星期天)
myDate.getTime();        //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours();       //获取当前小时数(0-23)
myDate.getMinutes();     //获取当前分钟数(0-59)
myDate.getSeconds();     //获取当前秒数(0-59)
myDate.getMilliseconds();    //获取当前毫秒数(0-999)
myDate.toLocaleDateString();     //获取当前日期
var mytime=myDate.toLocaleTimeString();     //获取当前时间
myDate.toLocaleString( );        //获取日期与时间

例子1：

//获取当前时间，格式YYYY-MM-DD

    function getNowFormatDate() {

        var date = new Date();

        var seperator1 = "-";

        var year = date.getFullYear();

        var month = date.getMonth() + 1;

        var strDate = date.getDate();

        if (month >= 1 && month <= 9) {

            month = "0" + month;

        if (strDate >= 0 && strDate <= 9) {

            strDate = "0" + strDate;

        var currentdate = year + seperator1 + month + seperator1 + strDate;

        return currentdate;

例子2：这种方法最简单有效的

var date;//Tue Jul 16 01:07:00 CST 2013的时间对象

var year=date.getFullYear();//年

var month=date.getMonth()+1;//月份（月份是从0~11，所以显示时要加1）

var day=date.getDate();//日期

var str=year+'-'+month+'-'+day;

3.数据格式处理

1.字符串转成数字

1）转换函数

js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数

parseInt("1234blue"); //returns 1234

2) 强制类型转换

Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number( "5.5 ") 5.5
Number( "56 ") 56

2.数字转成字符串

toString() 方法可把一个 Number 对象转换为一个字符串，并返回结果。

实例

在本例中，我们将把一个数字转换为字符串：

<script type="text/javascript">

var number = new Number(1337);

document.write (number.toString())

</script>

输出：

4. 页面刷新方法

学习地址：http://www.jb51.net/article/14397.htm

Javascript刷新页面的几种方法：

复制代码代码如下:

1，history.go(0)
2，location.reload()
3，location=location
4，location.assign(location)
5，document.execCommand('Refresh')
6，window.navigate(location)
7，location.replace(location)
8，document.URL=location.href

自动刷新页面的方法:

1. 页面自动刷新：把如下代码加入<head>区域中

复制代码代码如下:

其中20指每隔20秒刷新一次页面.

2. 页面自动刷新：把如下代码加入<head>区域中

复制代码代码如下:

其中20指隔20秒后跳转到http://www.jb51.net页面

3. 页面自动刷新js版

复制代码代码如下:

4. 页面自动跳转：把如下代码加入<head>区域中

5.页面自动刷新js版

<script language="JavaScript">

function myrefresh()

{

window.location.reload();

}

setTimeout('myrefresh()',1000); //指定1秒刷新一次

</script>

6.定时器方法

1.倒计时方法

setTimeout(function(){alert("Hello")},3000);

2.循环定时器方法

例子1

<html>

<body>

<input type="text" id="clock" size="35" />

<script language=javascript>

var int=self.setInterval("clock()",50)

function clock()

  var t=new Date()

  document.getElementById("clock").value=t

</script>

</form>

<button onclick="int=window.clearInterval(int)">

Stop interval</button>

</body>

</html>

例子2

代码如下:

var num = 0;
        var i = setInterval(function() {
            num++;
            var date = new Date();
            document.write(date.getMinutes() + ':' + date.getSeconds() + ':' + date.getMilliseconds() + '<br>');
            if (num > 10)
                clearInterval(i);
        }, 1000);

页面每隔1秒记录一次当前时间（分钟：秒：毫秒），记录十次后清除，不再记录。考虑到代码执行时间可能记录的不是执行时间，但时间间隔应该是一样的，看看结果

复制代码代码如下:

:38:116
:39:130
:40:144
:41:158
:42:172
:43:186
:44:200
:45:214
:46:228
:47:242
:48:256

7.正则方法

简单介绍下怎么运用：

const regFormat = /^\d{17}([0-9]|X)$/; //验证身份证格式

if(regFormat.test(_value) !== true){

form.setFieldsValue({ "femaleBirthdate": "" });

callback('身份证号格式不正确！');

}

项目中总结的正则：

1) 验证身份证格式:

/^\d{17}([0-9]|X)$/;

2)军人证

/南字第(\d{8})号|北字第(\d{8})号|沈字第(\d{8})号|兰字第(\d{8})号|成字第(\d{8})号|济字第(\d{8})号|广字第(\d{8})号|海字第(\d{8})号|空字第(\d{8})号|参字第(\d{8})号|政字第(\d{8})号|后字第(\d{8})号|装字第(\d{8})号|后文字(\d{7})/;

3)港澳通行证

/^[HMhm]{1}([0-9]{10}|[0-9]{8})$/

4)正整数

/^(0|[1-9][0-9]*)$/;

5)36+5这种格式校验（周+天）

/^\d\d?\+[0-6]$/;

6)邮政编码格式

/^[1-9]\d{5}$/;

7)手机号格式

/^1[34578][0-9]{9}$/;

8)座机号格式

/^0\d{2,3}-[1-9]\d{6,7}$/

9)最多保留小数点后两位

/^(0(?!\.0{1,2}$)(\.[0-9]{1,2})?|[1-9][0-9]{0,2}(\.[0-9]{1,2})?)$/;

10)不能输入中文

/^[a-zA-Z0-9_]{0,}$/;

11)只能输入大于等于0的整数

/^([1-9]\d{0,}|0)$/

其他正则网上查

8.截取数据方法

1. JS截取字符串

JS截取字符串可使用 substring()或者slice()

函数：substring()

定义：substring(start,end)表示从start到end之间的字符串，包括start位置的字符但是不包括end位置的字符。

功能：字符串截取，比如想从"MinidxSearchEngine"中得到"Minidx"就要用到substring(0,6)

例子：

var src="images/off_1.png";

alert(src.substring(7,10));

//弹出值为：off

函数：substr()

定义：substr(start,length)表示从start位置开始，截取length长度的字符串。

功能：字符串截取

例子：

var src="images/off_1.png";

alert(src.substr(7,3));

//弹出值为：off

函数：split()

功能：使用一个指定的分隔符把一个字符串分割存储到数组

例子：

str="jpg|bmp|gif|ico|png";

arr=theString.split("|");

//arr是一个包含字符值"jpg"、"bmp"、"gif"、"ico"和"png"的数组

函数：John()

功能：使用您选择的分隔符将一个数组合并为一个字符串

例子：

var delimitedString=myArray.join(delimiter);

var myList=new Array("jpg","bmp","gif","ico","png");

var portableList=myList.join("|");

//结果是jpg|bmp|gif|ico|png

函数：indexOf()

功能：返回字符串中匹配子串的第一个字符的下标

var myString="JavaScript";

var w=myString.indexOf("v");w will be 2

var x=myString.indexOf("S");x will be 4

var y=myString.indexOf("Script");y will also be 4

var z=myString.indexOf("key");z will be -1

函数：lastIndexOf()

定义：lastIndexOf()方法返回从右向左出现某个字符或字符串的首个字符索引值（与indexOf相反）

功能：返回字符串索引值

例子：

var src="images/off_1.png";

alert(src.lastIndexOf('/'));

alert(src.lastIndexOf('g'));

//弹出值依次为：6,15

9.去掉字符串前后空格

trim=(str)=>{

return str.replace(/(^\s*)|(\s*$)/g, "");

}

10.解决this指向问题

运行上面的代码会报错，这是因为setTimeout中的this指向的是全局对象。所以为了让它能够正确的运行，传统的解决方法有两种：

上面代码运用的bind方法详细解释：

http://blog.csdn.net/vivianhope/article/details/46725559

7.项目解决冲突方法

1. eclipse解决冲突方法

1．直接HEAD Revision

我常用的方法，直接把本地的文件替换成没有修改之前的额样子，这样之后可以直接拉代码。（右键文件Replace With）

2．在local History 里面找历史文件

通过这个可以找到你近期操纵这个文件的历史，可以选择替换回来，

这个可以解决在你上传不上代码，也拉不下代码时用，可以先通过这个找回修改之前的代码，然后先commit上本地git，然后在fetch和pull,这样就能当下代码了，最后在把这个文件改好提交上去就可以了

（右键文件Replace With）

8.精华项目常用数据处理方法

9.打包项目方法

1.Eclipse打包方法

1.点击项目右键Export

选中Export里面的War file,

2.右键选择pom.xml

找到项目的pom.xml，选择Run As里面的Maven install

10.CSS3介绍

1.边框

1. border-radius（圆角）

div

{

text-align:center;

border:2px solid #a1a1a1;

padding:10px 40px;

background:#dddddd;

width:350px;

border-radius:25px;

-moz-border-radius:25px; /* 老的 Firefox */

}

</style>

</head>

<body>

<div>border-radius 属性允许您向元素添加圆角。</div>

2. box-shadow 用于向方框添加阴影：

<style>

div

{

width:300px;

height:100px;

background-color:#ff9900;

-moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */

box-shadow: 10px 10px 5px #888888;

}

</style>

</head>

<body>

3.border-image 属性，您可以使用图片来创建边框：

（这个属性不常用）

<style>

div

{

border:15px solid transparent;

width:300px;

padding:10px 20px;

}

#round

{

-moz-border-image:url(/i/border.png) 30 30 round; /* Old Firefox */

-webkit-border-image:url(/i/border.png) 30 30 round; /* Safari and Chrome */

-o-border-image:url(/i/border.png) 30 30 round; /* Opera */

border-image:url(/i/border.png) 30 30 round;

}

#stretch

{

-moz-border-image:url(/i/border.png) 30 30 stretch; /* Old Firefox */

-webkit-border-image:url(/i/border.png) 30 30 stretch; /* Safari and Chrome */

-o-border-image:url(/i/border.png) 30 30 stretch; /* Opera */

border-image:url(/i/border.png) 30 30 stretch;

}

</style>

</head>

<body>

<div id="round">在这里，图片铺满整个边框。</div>

<br>

<div id="stretch">在这里，图片被拉伸以填充该区域。</div>

<p>这是我们使用的图片：</p>

<p><b>注释：</b> Internet Explorer 不支持 border-image 属性。</p>

<p>border-image 属性规定了用作边框的图片。</p>

2.背景

1. background-size 属性（调整背景图片的大小：）

1)例子1控制大小

<style>

body

{

background:url(/i/bg_flower.gif);

background-size:63px 100px;

-moz-background-size:63px 100px; /* 老版本的 Firefox */

background-repeat:no-repeat;

padding-top:80px;

}

</style>

</head>

<body>

<p>上面是缩小的背景图片。</p>

2)例子2通过百分比控制大小

<style>

div

{

background:url(/i/bg_flower.gif);

background-size:35% 100%;

-moz-background-size:35% 100%; /* 老版本的 Firefox */

background-repeat:no-repeat;

}

</style>

</head>

<body>

<div>

<p>这是一个段落。</p>

</d

上一篇：用户注册界面（带js特效）

下一篇： vue-prop父组件向子组件进行传值的方法