CMS 02 前端开发

2023-05-16

1，vue.js 研究

1.1 vue.js 介绍

1. vue.js 是什么？

vue是一套用于构建用户界面的渐进式框架。vue 被设计为可以自底向上逐层应用。0

渐进式框架：Progressive,说明vue.js轻量，是指一个前端项目可以使用vue.js一两个特性也可以整个项目都用vue.js

自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发。

2，Vue.js 与 ECMAScript

Vue 不支持IE8 及一下版本，因为Vue使用了IE8无法模拟的ECMAScript 5特性。

什么是ECMAScript.

3. Vue.js 的使用

1，在html 页面使用script 引入vue.js的库即可使用。

2，使用Npm管理依赖，使用webpack 打包工具对vue.js 应用打包。大型应用推荐此方案

3，Vue-CLl脚手架使用vue.js官方提供的CLI脚本架很方便去创建vue.js工程雏形。

4，vue.js 有哪些功能

1）声明式渲染

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。比如：使用vue.js的插值表达式放在Dom的任意地方，差值表达式的值将被渲染在Dom中。

2）条件与循环

dom中可以使用vue.js提供的v-if、v-for等标签，方便对数据进行判断、循环。

3）双向数据绑定

Vue提供v-model指令，它可以轻松实现Dom元素和数据对象之间双向绑定，即修改Dom元素中的值自动修改绑定的数据对象，修改数据对象的值自动修改Dom元素中的值。

4）处理用户输入为了让用户和你的应用进行交互，我们可以用v-on指令添加一个事件监听器，通过它调用在Vue实例中定义的方法

5）组件化应用构建

vue.js可以定义一个一个的组件，在vue页面中引用组件，这个功能非常适合构建大型应用。

1.2 vue.js 基础

1.2.1 MVVM模式

vue.js是一个MVVM的框架，理解MVVM有利于学习vue.js。

1，MVVM拆分解释为：

1，Model:负责数据存储

2，View:负责页面展示

3，ViewModel:负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

2， MVVM要解决的问题是将业务逻辑代码与视图代码进行完全分离，使各自的职责更加清晰，后期代码维护更加简单

3，用图解的形式分析Ajax请求回来数据后直接操作Dom来达到视图的更新的缺点，以及使用MVVM模式是如何来解决这个缺点的

4，Vue中的MVVM

从上图看出，VM(ViewModel)可以把view视图和Model模型解耦合，VM的要做的工作就是vue.js所承担的。

1.2.2 入门程序

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue 入门程序</title>
    <script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

</head>

<body>
<div id="app">
    {{name}}
</div>
</body>
<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
            name:"郑继坤自律" //相当于MVVM中的model
        }
    });
</script>
</html>

入门程序代码编写步骤：

1，定义html，引入vue.js

2，定义app div, 此区域作为vue的接管区域

3，定义vue实例，接管app区域。

4，定义model(数据对象)

5，VM完成在app中的展示

1.2.3 1+1=2

实现效果；

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue 1+1=2</title>
    <script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

</head>

<body>
<div id="app">
    {{name}}
    <input type="text" v-model="num1"/>
    <input type="text" v-model="num2"/>
    <!-- 转换成int 才可以正常计算 -->
    {{Number.parseInt(num1)+Number.parseInt(num2)}}
</div>
</body>
<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
            name:"郑继坤自律", //相当于MVVM中的model
            num1:1, // 定义model
            num2:1

        }
    });
</script>
</html>

1+1=2 例子中运用了v-model

何为双向绑定：

a,由模型数据绑定到Dom对象，模型数据的值改变，Dom对象的值自动改变。

b,由Dom对象绑定到模型数据，Dom对象的值改变，模型数据就改变。

一，v-model

1,在表单控件或者组件上创建双向绑定

2，v-model 仅能在如下元素中使用：

input

select

textarea

components(vue中的组件)

二，但是如果是v-model 在网络慢时，会先展现出表达式model，然后再显示view，v-text 可以解决这个问题。

2，解决插值表达式闪烁问题，使用v-text，将表达式放到v-text 中，注意将{{}} 去掉，它可以解决表达式闪烁的问题

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-text</title>

</head>

<body>
<div id="app">
    <span v-text="name"></span>
    <input type="text" v-model="num1"/>
    <input type="text" v-model="num2"/>
    <!-- 转换成int 才可以正常计算 -->
    <span v-text="Number.parseInt(num1)+Number.parseInt(num2)"></span>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
            name:"郑继坤自律", //相当于MVVM中的model
            num1:1, // 定义model
            num2:1

        }
    });
</script>
</html>

首先一个前提，如果要引用定义的model 变量，需要在前面加上this，比如this.num

v-on 监听用户事件

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-on</title>

</head>

<body>
<div id="app">
    <span v-text="name"></span>
    <input type="text" v-model="num1"/>+
    <input type="text" v-model="num2"/>=
    <!-- 转换成int 才可以正常计算 -->
    <span v-text="result"></span>
    <button v-on:click="change">计算</button>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
            name:"郑继坤自律", //相当于MVVM中的model
            num1:1, // 定义model
            num2:1,
            result:0 //定义计算结果model
        },
        methods:{
            change: function(){
                this.result= Number.parseInt(this.num1)+Number.parseInt(this.num2)
            }
        }
    });
</script>
</html>

4, v-bind

作用：

v-bind 可以将数据对象绑定在dom的任意属性中。（将model 绑定到view 中，但不是双向绑定，）

v-bind 可以给dom 对象绑定一个或多个特性，例如动态绑定style和class

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-bind</title>
</head>

<body>
<div id="app">
    <!-- v-bind 可以给dom对象绑定一个或多个特性，例如动态绑定style和class -->
    <a v-bind:href="url" v-bind:style="{fontSize:size+'px'}">传智播客</a> 
    <div v-bind:style="{fontSize:size+'px'}">JAVAEE培训</div>

    
    <span v-text="name"></span>
    <input type="text" v-model="num1"/>+
    <input type="text" v-model="num2"/>=
    <!-- 转换成int 才可以正常计算 -->
    <span v-text="result"></span>
    <button v-on:click="change">计算</button>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
            name:"郑继坤自律", //相当于MVVM中的model
            num1:1, // 定义model
            num2:1,
            result:0, //定义计算结果model
            url:"http://www.itcast.cn/",
            size:21
        },
        methods:{
            change: function(){
                this.result= Number.parseInt(this.num1)+Number.parseInt(this.num2)
            }
        }
    });
</script>
</html>

3，缩写形式

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-bind</title>
</head>

<body>
<div id="app">
    <!-- v-bind 可以给dom对象绑定一个或多个特性，例如动态绑定style和class -->
    <a v-bind:href="url" v-bind:style="{fontSize:size+'px'}">传智播客</a> 
    <div v-bind:style="{fontSize:size+'px'}">JAVAEE培训</div>

    <!-- 缩写后 -->
    <a :href="url" :style="{fontSize:size+'px'}">传智播客</a> 
    <div :style="{fontSize:size+'px'}">JAVAEE培训</div>

    
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
            name:"郑继坤自律", //相当于MVVM中的model
            num1:1, // 定义model
            num2:1,
            result:0, //定义计算结果model
            url:"http://www.itcast.cn/",
            size:21
        },
        methods:{
            change: function(){
                this.result= Number.parseInt(this.num1)+Number.parseInt(this.num2)
            }
        }
    });
</script>
</html>

1.2.4 v-if 和v-for

v-for

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-for v-if</title>
</head>

<body>
<div id="app">
    <ul>
        <!-- 简单数组 -->
        <li v-for="(item,index) in list" :key="index" v-if="item % 2 == 0">{{item}}--{{index}}</li>
        <!-- map对象 采用key，value-->
        <li v-for="(value,key) in user" :key="key">{{key}}--{{value}}</li>
        <!-- 数组对象-->
        <li v-for="(item,index) in userList" :key="item.user.usrename">{{index}}--{{item}}--{{item.user.usrename}}</li>
    </ul>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
           list:[1,2,3,4,5],
           user:{usrename:"张三",age:"12"},
           userList:[
            {user:{usrename:"张三",age:"12"}},
            {user:{usrename:"李四",age:"13"}},
            {user:{usrename:"王五",age:"14"}}
           ]
        },
        methods:{
            
        }
    });
</script>
</html>

v-if v-else

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-for v-if</title>
</head>

<body>
<div id="app">
    <ul>
        <!-- 
            用法：
                1，v-for: (x,y) in list , x 指实体，y 指索引值，这个可以随便定义，
                2, :key , 是指唯一值，这个时候一般用索引值，但是在遇到复杂类型时，就不能用索引值，需要手动找到每条数据唯一值
        -->
        <!-- 简单数组 -->
        <li v-for="(item,index) in list" :key="index" v-if="item % 2 == 0">{{item}}--{{index}}</li>
        <!-- map对象 采用key，value-->
        <li v-for="(value,key) in user" :key="key">{{key}}--{{value}}</li>
        <!-- 数组对象 :key重新定义了唯一值-->
        <li v-for="(item,index) in userList" :key="item.user.usrename">
            <div v-if="item.user.usrename == '张三'" style="background-color: brown;">
                {{index}}--{{item}}--{{item.user.usrename}}
            </div>
            <div v-else="item.user.usernanme != '张三'">
                {{index}}--{{item}}--{{item.user.usrename}}
            </div>
        </li>
    </ul>
</div>
</body>
<script type="text/javascript" src="/js/vue/vue.min.js" charset="UTF-8"></script>

<script>
    //实例化Vue对象
    //VM 叫做MVVM中的View Model
    var VM = new Vue({
        el:'#app',//表示当前vue对象接管app的div区域
        data:{
           list:[1,2,3,4,5],
           user:{usrename:"张三",age:"12"},
           userList:[
            {user:{usrename:"张三",age:"12"}},
            {user:{usrename:"李四",age:"13"}},
            {user:{usrename:"王五",age:"14"}}
           ]
        },
        methods:{
            
        }
    });
</script>
</html>

1.3 webpack 入门

使用vue.js开发大型应用需要使用webpack打包工具，本节研究webpack的使用方法。

1.3.1 webpack介绍

webpack 是一个前端资源的打包工具，它可以将js.image,css等资源当成一个模块进行打包。

webpack 的缺点

1，配置有些繁琐

2，文档不丰富

1.3.2 安装webpack

1.3.2.1 安装Node.js

webpack 基于node.js运行，首先需要安装node.js

1，下载对应你的系统的Node.js版本，推荐下载LTS版本。

安装好后，在cmd，直接 node -v 出现版本号即可。

1.3.2.2 安装NPM

1，npm 安装

node.js安装完成后，其实npm已经安装完成了，在黑窗口打印npm-v ,即可看到版本。

2,设置包路径

包路径就是npm从远程下载的js包所存放的路径

使用npm config ls 查询NPM管理包路径（NPM下载的依赖包所存放的路径）

NPM 默认的管理包路径 C:/用户/[用户名]/AppData/Roming/npm/node_meodules，为了方便对依赖包管理，我们可以将管理包的路径设置在单独的地方，本教程将安装目录设置在node.js的目录下，在node.js 安装路径下创建npm_modules 和 npm_cache, 执行下边的命令：

本教程安装node.js在D:\Software\NodeJs 下所以执行命令如下：

npm config set prefix "D:\Software\NodeJs\npm_modules"

npm config set cache "D:\Software\NodeJs\npm_cache"

此时再次使用 npm config ls 查询NPM 管理包路径发现路径已更改

3，安装cnpm

npm 默认会去国外的镜像去下载js 包，在开发中通常我们使用国内镜像，这里我们使用淘宝镜像下边我们来安装cnpm:

有时我们使用npm下载资源会很慢或者没网，所以我们可以安装一个cnmp(淘宝镜像) 来加快下载速度，

输入命令，进行全局安装淘宝镜像。

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果没网的话，就使用准备的教程资料，将npm_models.zip

解压后，放到npm 的包下。

安装后，我们可以使用一下命令来查看cnpm的版本。

cnpm -v 查看版本

此时，如果cpnm -v 不可以的话，执行下列方法

https://blog.csdn.net/weixin_41999084/article/details/98036282

用cpnm -v 可以看到

执行 nrm ls 查看镜像，

此时遇到这个问题，执行nrm ls 命令遇到问题

解决办法：https://www.cnblogs.com/Snowfun/p/14817559.html

上面的办法可能不能解决nrm ls 的问题，可以使用这个包，解压在Nodejs 下面

node_modeules 包下面的文件如图，

这里怎么使用npm install -g cnpm --registry=https://registry.npm.taobao.org 这个命令都报错，无奈，只能使用老师给的资料

链接: https://pan.baidu.com/s/1kA1doI5v8EEHvqHWxlSJvQ 提取码: vu82 复制这段内容后打开百度网盘手机App，操作更方便哦

将这个链接解压到nodeJS 的安装路径中，即可。

小※代表了当前镜像，如何切换镜像。

使用 nrm use XXX切换镜像

如果nrm 没有安装则需要进行全局安装：cnpm install -g nrm

1.3.2.3 安装webpack

1，联网安装

webpack 安装分为全局安装和本地安装

本地安装：仅将webpack安装到当前项目的node_modules 目录下，仅对当前项目有效

全局安装：将webpack安装在本机，对所有项目有效，全局安装会锁定一个webpack版本，该版本可能不适用某个项目，全局安装命令需要添加 -g 参数。

不详细讲解了，解压上面的资料会自动安装完成，如果以后安装，直接搜教程。

1.3.3 入门程序

通过入门程序体会webpack打包的过程及模块化开发的思想

1.3.3.1 需求分析

上面我们通过vue 实现的计算代码，可以通过webpack 进心模块化管理

1.3.3.2 定义模块

在前端项目里随便创建一个文件夹webpacktest01 ,将vue.min.js 及vue_02.html 拷贝到目录下

1. 定义model01.js (里面写的js方法)

在webpacktest01 文件夹里创建model01.js，

将加法这个程序运算的VM方法抽取到这个model01.js里面，此文件就是一个模块。

model01.js 下内容：

// 定义add函数
function add(x, y) {
    return x + y
}

// function add2(x, y) {
//     return x + y+1
// }

// 导出add方法
module.exports.add = add;
// module.exports ={add,add2};//如果有多个方法这样导出
// module.exports.add2 = add2//如果有多个方法也可以这样导出

后面的导出add方法，就是这个add方法可以进行导出了，然后启动类里有导入方法，可以将这个文件导入进去

2，定义main.js (webpack 下该模块的js主文件)

这个文件要做的事情，步骤

1，在此文件中会引用model1.js 文件（被我们抽取出来的VM代码的那个文件）

2，引用vue.min.js(它也是一个模块)，vue 的官方文件。

3，将html页面中构建vue实例的代码放到main.js中

//1,导入js 文件
var {add} = require("./model01");

// 2,导入vue.min.js 官网文件
var Vue = require("./vue.min");

//3, 第三步
var VM = new Vue({
    el:'#app',//表示当前vue对象接管app的div区域
    data:{
        name:"郑继坤自律", //相当于MVVM中的model
        num1:1, // 定义model
        num2:1,
        result:0 //定义计算结果model
    },
    methods:{
        change: function(){
            this.result= add(Number.parseInt(this.num1),Number.parseInt(this.num2));
        }
    }
});

1.3.3.3 打包测试

上边将mode01.js 模块及main.js主文件编写完成，下边使用webpack对这些js文件进行打包

1，进入程序目录，执行 webpack main.js build.js,这段指令表示将main.js打包输出为build.js文件

执行完成，观察程序目录是否出现build.js。

2，在html中引用build.js

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-on</title>

</head>

<body>
<div id="app">
    <span v-text="name"></span>
    <input type="text" v-model="num1"/>+
    <input type="text" v-model="num2"/>=
    <!-- 转换成int 才可以正常计算 -->
    <span v-text="result"></span>
    <button v-on:click="change">计算</button>
</div>
</body>
<script type="text/javascript" src="./build.js" charset="UTF-8"></script>

</html>

3，测试总结

总结：webpack 可以将js分模块开发，开发完成对各个模块代码打包成一个统一的文件。

前端模块开发的思想和服务端模块开发的思想是一致的，有利于多人协作开发。

1.3.4 webpack-dev- server

webpack-dev-server 开发服务器，他的功能可以实现热加载，自动刷新浏览器。

创建一个编写webpack -dev-server 的环境：

创建一个新的程序目录，这里我们创建webpackDevServer目录，将webpack 入门程序的代码拷贝进来（html 页面（静态页面），main.js文件（入口文件），vue.main.js（vue 官方文件）, js 文件（写js 方法的），build.js(webpack 生成的)），并在目录下创建src 目录，dist目录。

将main.js 和model01.js拷贝到src目录。

1.3.4.1 安装配置

1，安装webpack-dev-server

使用webpack-dev-server 需要安装webpack,webpack-dev-server 和html-webpack-plugin三个包。

在命令行输入下面命令：

cnpm install webpack@3.6.0 webpack-dev-server@2.9.1 html-webpack-plugin@2.30.1 --save-dev

安装完成，会发现程序目录下出现了一个package.json文件，此文件中记录了程序的依赖。

没有联网的话，执行上面的命令是无效的，可以使用下面的资源包，拷贝node_modules.zip到webpackDevServer 目录下，解压到node_modules目录下。

将资源解压到webpackDevServer 下，是这样的

2，配置webpack-dev-server

在package.json 中配置script(将下列代码复制到package.json)

"scripts": {
    "dev": "webpack‐dev‐server ‐‐inline ‐‐hot ‐‐open ‐‐port 5008"
},

--inline: 自动刷新

--hot: 热加载

--port：指定端口

--open：自动在默认浏览器打开

--host：可以指定服务器ip，不指定则为127.0.0.1，如果对外发布则填写公网iP地址。

此时package.json的文件内容如下：

{
  "scripts": {
    "dev": "webpack-dev-server --inline --hot --open --port 5008"
  },
  "devDependencies": {
    "html-webpack-plugin": "^2.30.1",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

devDependencies：开发任意在开发过程中所需要的依赖。

scripts：可执行的命令。

1.3.4.2 配置webpack.config.js

在webpackDevServer 文件夹下创建webpack.config.js，webpack.config.js是webpack的配置文件。在此文件中可以配置应用的入口文件，输出配置，插件等，其中要实现热加载自动刷新功能需要配置html-webpack-plugin 插件。

html-webpack-plugin 的作用是根据html 模板在内齿生成html 文件，他的工作原理是根据模板文件在内存中生成一个index.html文件。

1，配置模板文件

将原来的vue_04.html作为模板文件，为了和内存中的index.html文件名区别，注意将vue_04.html中的script标签去掉（<script type="text/javascript" src="./build.js" charset="UTF-8"></script>），内容如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>vue v-on</title>

</head>

<body>
<div id="app">
    <span v-text="name"></span>
    <input type="text" v-model="num1"/>+
    <input type="text" v-model="num2"/>=
    <!-- 转换成int 才可以正常计算 -->
    <span v-text="result"></span>
    <button v-on:click="change">计算</button>
</div>
</body>
</html>

2，配置 html-webpack-plugin

在webpack.config.js 配置html-webpack-plugin 插件

var htmlwp = require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js',//指定打包的入口文件
    output:{
            path : __dirname+'/dist',
            filename:'build.js'
        },

    plugins:[
        new htmlwp({
            title:'首页',//生成的页面标题<head><title>首页</title></head>
            filename: 'index.html',//webpack‐dev‐server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'vue_04.html'
        })
    ]
}

现在webpackDevServer 下已经有了webpack.config.js

1.3.4.3 启动

启动文件两种办法：

1，进入webpackDevServer 目录，在命令行中执行npm run dev

2，使用webstorm,右键package.json 文件，选择 “Show npm Scripts”,

此时启动有个问题，在命令行中执行npm run dev，出现找不到 Error: Cannot find module 'html-webpack-plugin'，这次的原因是因为我复制的命令是pdf 里直接粘贴的，所以格式可能有误，将html-webpack-plugin 用手敲出来即可改正错误。

因为 webpack-dev-server 会热加载，自动刷新浏览器，所以，修改src 中的任意文件内容，会自动加载并刷新浏览器。

1.3.4.4 debug 调试

使用了webpack之后就不能采用传统js的调试方法在chrome中打断点。

webpack将多个源文件打包成一个文件，并且文件的内容产生了很大的变化，webpack提供devtool进行调试，
devtool是基于sourcemap的方式，在调试时会生成一个map文件，其内容记录生成文件和源文件的内容映射，即
生成文件中的哪个位置对应源文件中的哪个位置，有了sourcemap就可以在调试时看到源代码。
配置如下：

1、在webpack.conﬁg.js中配置：

devtool:'eval‐source‐map',

var htmlwp = require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js',//指定打包的入口文件
    output:{
            path : __dirname+'/dist',
            filename:'build.js'
        },
    devtool:'eval‐source‐map',
    plugins:[
        new htmlwp({
            title:'首页',//生成的页面标题<head><title>首页</title></head>
            filename: 'index.html',//webpack‐dev‐server在内存中生成的文件名称，自动将build注入到这个页面底部，才能实现自动刷新功能
            template: 'vue_04.html'
        })
    ]
}

2，在js中跟踪代码的位置上添加debugger

一个例子：
在add方法中添加debugger

function add(x,y){
    
    return x+y;
}
function add1(x,y){
    debugger
    return x+y+1;
}
//导出add方法
//module.exports.add=add;
//多个方法可以这么写
module.exports={add,add1};

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)