说明在许多情况下，您需要将错误通知给正在使用API的客户端。FastAPI使用Python的HTTPException异常进行处理，所以raise它。实例fromfastapiimportFastAPI,HTTPExceptionimportuvicornapp=FastAPI()@app.get("/user")asyncdefread_item(age:int,name:str):ifage<18:#返回客户端500状态码及错误原因raiseHTTPException(status_code=500,detail="age小于18")return{"name":name,"age":age}if__name__=='__main__':uvicorn.run(app=app,host="127.0.0.1",port=80,)添加自定义Headers@app.get("/user")asyncdefread_item(age:int,name:str):ifage<18:#返回客户端500状态码及错误原因raiseHTTPException(status_code=500,#detail可以是list、dict、strdetail={"msg":"age小于18"},#自定义headersheaders={"X-Error":"Theregoesmyerror"})return{"name":name,"age":age}自定义异常处理程序fromfastapiimportFastAPI,Requestfromfastapi.responsesimportJSONResponseimportuvicornapp=FastAPI()#异常参数类classUnicornException(Exception):def__init__(self,status_code:int,msg:str):#错误状态码self.status_code=status_code#错误内容self.msg=msg#异常响应@app.exception_handler(UnicornException)asyncdefunicorn_exception_handler(request:Request,exc:UnicornException):returnJSONResponse(#错误响应状态码status_code=exc.status_code,#错误返回内容格式content={"msg":exc.msg},)@app.get("/user/{name}")asyncdefread_item(name:str):ifname=="bigdata":#错误提示raiseUnicornException(status_code=404,msg="用户名错误，没有该用户")return{"name":name}if__name__=='__main__':uvicorn.run(app=app,host="127.0.0.1",port=80,)测试URL：http://127.0.0.1/user/bigdata?name=bigdataboy
实例代码fromfastapiimportFastAPIimportuvicornapp=FastAPI()@app.post("/user/{name}")#路径参数asyncdefread_item(name:str):return{"name":name}if__name__=='__main__':uvicorn.run(app=app,host="127.0.0.1",port=80,)导入验证fromfastapiimportFastAPI,Query可选参数name可传可不传#正常写法name为可选参数@app.get("/user/")asyncdefread_item(age:int,name:str=None):return{"name":name,"age":age}#验证写法name为可选参数@app.get("/user/")asyncdefread_item(age:int,name:str=Query(None)):return{"name":name,"age":age}必选参数name必须传#正常写法name为必选参数asyncdefread_item(age:int,name:str):return{"name":name,"age":age}#验证写法name为必选参数asyncdefread_item(age:int,name:str=Query(...)):return{"name":name,"age":age}默认参数值#正常写法name默认值asyncdefread_item(age:int,name:str="bigdataboy"):return{"name":name,"age":age}#验证写法name默认值asyncdefread_item(age:int,name:str=Query("bigdataboy")):return{"name":name,"age":age}Query验证Query主要支持一下验证长度验证：max_length、min_length正则验证：regex@app.get("/user")#路径参数asyncdefread_item(age:int,name:str=Query(...,#该参数必选min_length=1,#最小长度为1max_length=50,#最大长度为50#regex=re.compile(".+bigdataboy.+").pattern#使用编译的正则表达式需要导入re库regex=".+bigdataboy.+"#正则表达式匹配验证)):return{"name":name,"age":age}其他参数这些参数主要是对接口进行描述@app.get("/user")#路径参数asyncdefread_item(age:int,name:str=Query(...,#该参数必选title="name",#标题description="用户的新名字",#参数作用的描述alias="new-name",#接口参数别名，URL参数就使用该别名deprecated=True,#代表该参数，即将弃用)):return{"name":name,"age":age}
POST请求需要首先定义参数模型fromfastapiimportFastAPIfrompydanticimportBaseModelimportuvicorn#声明参数模型classItem(BaseModel):name:strdescription:str=Noneapp=FastAPI()#接受POST类型@app.post("/")asyncdefread_item(item:Item):#参数类型是returnitemif__name__=='__main__':uvicorn.run(app=app,host="127.0.0.1",port=80,)参数模型#导入模型类frompydanticimportBaseModelclassItem(BaseModel):#必要参数name:str#可选参数description:str=None参看文档http://127.0.0.1/docs请求测试importrequestsurl="http://127.0.0.1"data={"name":"bigdataboy","description":"",}r=requests.post(url=url,json=data)print(r.json())高级用法与路径参数一起使用fromfastapiimportFastAPIfrompydanticimportBaseModelimportuvicorn#声明参数类classItem(BaseModel):name:strdescription:str=Noneapp=FastAPI()@app.post("/user/{id}")#路径参数asyncdefread_item(id:int,item:Item):return{"id":id,**item.dict()}if__name__=='__main__':uvicorn.run(app=app,host="127.0.0.1",port=80,)
路径参数比如访问：127.0.0.1/user/123/fromfastapiimportFastAPIimportuvicornapp=FastAPI()@app.get("/user/{id}/")asyncdefmain(id:int):return{"id":id}if__name__=='__main__':uvicorn.run(app=app,host="127.0.0.1",port=80,)API文档地址：http://127.0.0.1/docs固定的路径参数@app.get("/user/id/")asyncdefmain():return{"id":"thecurrentuser"}@app.get("/user/{id}/")asyncdefmain(id:int):return{"id":id}预留路径值传入的路径参数只能在预留路径里，不然就报错fromfastapiimportFastAPI#导入枚举类fromenumimportEnumimportuvicorn#预留路径类继承str，文档将能够知道这些值的类型classModelName(str,Enum):#预留的路径alexnet="alexnet"resnet="resnet"lenet="lenet"app=FastAPI()@app.get("/model/{model_name}")asyncdefget_model(model_name:ModelName):#参数类型是预留路径类#第一种判定写法ifmodel_name==ModelName.alexnet:return{"model_name":model_name,"message":"DeepLearningFTW!"}#第二种判定写法ifmodel_name.value=="lenet":return{"model_name":model_name,"message":"LeCNNalltheimages"}#默认返回return{"model_name":model_name,"message":"Havesomeresiduals"}if__name__=='__main__':uvicorn.run(app=app,host="127.0.0.1",port=80,)路径转换器访问/files/bigdataboy/a.txt，file_path将能得到bigdataboy/a.txt#添加上:path即可@app.get("/files/{file_path:path}")asyncdefread_file(file_path:str):return{"file_path":file_path}查询参数查询参数是指?后面的&分割的键值对http://127.0.0.1:8000/items/?skip=0&limit=2fromfastapiimportFastAPIimportuvicornapp=FastAPI()fake_items_db=[{"item_name":"Foo"},{"item_name":"Bar"},{"item_name":"Baz"}]@app.get("/items/")#设置的默认值，当默认值是None时，表示该值为可选asyncdefread_item(skip:int=0,limit:int=2,default:str=None):#一个列表切片returnfake_items_db[skip:skip+limit]if__name__=='__main__':uvicorn.run(app=app,host="127.0.0.1",port=80,)注意如果声明可选时出现以下类似错误#声明可选limit:int=None#出现以下类似错误Incompatibletypesinassignment(expressionhastype"None",variablehastype"int")这是你需要这样做fromtypingimportOptionallimit:Optional[int]=None完整实例fromfastapiimportFastAPIfromtypingimportOptionalimportuvicornapp=FastAPI()@app.get("/items/")asyncdefread_item(skip:str,limit:Optional[int]=None):item={"skip":skip,"limit":limit}returnitemif__name__=='__main__':uvicorn.run(app=app,host="127.0.0.1",port=80,)
安装FastAPI#下载fastapi模块pipinstallfastapi-ihttps://pypi.tuna.tsinghua.edu.cn/simple#安装uvicorn用作服务器pipinstalluvicorn-ihttps://pypi.tuna.tsinghua.edu.cn/simpleget请求测试importuvicornfromfastapiimportFastAPIapp=FastAPI()@app.get("/")asyncdefget_demo():return{"message":"HelloWorld"}if__name__=='__main__':uvicorn.run(app=app,host="127.0.0.1",port=5000,debug=True)查看Api文档所有的Api接口文档，都会自动生成，不需要额外的Api测试软件http://127.0.0.1:5000/docs
Scrapy选择器xpath选择器xpath匹配后返回的结果是一个列表get提取list()里面的值#extractextract_first以被getall()get()方法取代defparse(self,response):#获取第一个结果，没有结果返回default设置的默认值Noneresponse.xpath("").get(default=0)#获取全部匹配结果response.xpath("").getall()正则获取list()里面的值defparse(self,response):#正则匹配返回list()的第一个值，没有匹配返回默认值response.xpath('').re_first(r'.',default=0)#匹配list()里面的所有值response.xpath('').re(r'href="(.+?)"')其他方法index(value)返回value所在列表位置的索引值。defparse(self,response):response.xpath('').index("大数据男孩")count(value)返回value出现的个数。defparse(self,response):response.xpath('').count("大数据男孩")css选择器提取css选择器匹配结果的方法同上defparse(self,response):response.css('a::attr(href)').getall()
申请地图开发者Api申请网址：http://lbsyun.baidu.com/apiconsole/key#/home说明mui使用申请百度地图Api秘钥，App端和浏览器端秘钥都需要申请。申请App端秘钥需要填写的项应用名称：自己写应用类型：AndroidSDK发布版SHA1（HBuilder官方提供的测试码）：BA:AD:09:3A:82:82:9F:B4:32:A7:B2:8C:B4:CC:F0:E9:F3:7D:AE:58包名：io.dcloud.HBuilder（在HBuilder发行打包里查看）申请浏览器端秘钥注意使用*号进行网址通配查看获取到的秘钥秘钥（Ak）使用浏览器端秘钥引入百度地图SDK<scripttype="text/javascript"src="http://api.map.baidu.com/api?ak=你的浏览器端ak&v=3.0">style与Html<styletype="text/css">html{height:100%}body{height:100%;margin:0px;padding:0px}#container{height:100%}</style><divid="container"></div><scripttype="text/javascript">varmap=newBMap.Map("container");varpoint=newBMap.Point(116.404,39.915);map.centerAndZoom(point,15);</script>Android秘钥填写打包测试浏览器、模拟器、真机都能运行
安装&加载pip3installrequests-ihttps://mirrors.aliyun.com/pypi/simple/importrequestsGET请求#普通请求r=requests.get('https://bigdataboy.cn/')#带Query参数，等价于https://bigdataboy.cn/?key1=value1&key2=value2payload={'key1':'value1','key2':'value2'}r=requests.get('https://bigdataboy.cn/',params=params)#带Headersheaders={'user-agent':'anoyi-app/0.0.1'}r=requests.get('https://bigdataboy.cn/',headers=headers)#带BasicAuthenticationr=requests.get('https://bigdataboy.cn/',auth=('user','pass'))POST请求POST请求-表单提交r=requests.post('https://bigdataboy.cn/',data={'key':'value'})POST请求-x-www-form-urlencodedheaders={'content-type':'application/x-www-form-urlencoded;charset=UTF-8'}r=requests.post('https://bigdataboy.cn/',headers=headers,data='key=value')POST请求-application/jsonpayload={'some':'data'}r=requests.post('https://bigdataboy.cn/',json=payload)其他请求#PUTr=requests.put('https://bigdataboy.cn/',data={'key':'value'})#DELETEr=requests.delete('https://bigdataboy.cn/')#HEADr=requests.head('https://bigdataboy.cn/')#OPTIONSr=requests.options('https://bigdataboy.cn/')网络响应-Reponse基本信息#状态码r.status_code#响应头r.headers#响应Cookier.cookies返回结果#文本内容r.text#二进制r.content#JSONr.json()#流r=requests.get('https://bigdataboy.cn/',stream=True)r.raw.read(10)常用方法URL编码fromrequests.utilsimportquotequote('ab')->'a%20b'URL解码fromrequests.utilsimportunquoteunquote('a%20b')->'ab'自动推断响应编码r.encoding=r.apparent_encoding下载文件r=requests.get('https://bigdataboy.cn/')open('bigdataboy.html','wb').write(r.content)上传文件files={'file':open('report.xls','rb')}r=requests.post(url,files=files)超时设置#单位：秒requests.get('https://bigdataboy.cn/',timeout=0.001)
说明为了提高切换窗口的效率，所以会有一个预加载的操作。窗口切换使用到了H5的plusApi，所以一般浏览器不会有效果，最好真机测试官方文档：https://dev.dcloud.net.cn/mui/window/#window窗口切换以底部导航栏作为切换按钮<navclass="mui-barmui-bar-tab"><aid="btn-home"class="mui-tab-itemmui-active"><spanclass="mui-iconmui-icon-home"></span><spanclass="mui-tab-label">首页</span></a><aid="btn-phone"class="mui-tab-item"><spanclass="mui-iconmui-icon-phone"></span><spanclass="mui-tab-label">电话</span></a><aid="btn-email"class="mui-tab-item"><spanclass="mui-iconmui-icon-email"></span><spanclass="mui-tab-label">邮件</span></a><aid="btn-gear"class="mui-tab-item"><spanclass="mui-iconmui-icon-gear"></span><spanclass="mui-tab-label">设置</span></a></nav>创建单独页面<headerclass="mui-barmui-bar-nav"><aclass="mui-action-backmui-iconmui-icon-left-navmui-pull-left"></a><h1class="mui-title">邮件</h1></header>l设置首页加载，其他页面预加载<scripttype="text/javascript">mui.init({//主页面subpages:[{url:"views/home.html",id:"home.html",styles:{top:0,//高度是为了留够底部导航栏的位置bottom:"45px"}}],//预加载页面preloadPages:[{url:"views/phone.html",id:"phone.html",styles:{top:0,bottom:"45px"}},{url:"views/email.html",id:"email.html",styles:{top:0,bottom:"45px"}},{url:"views/gear.html",id:"gear.html",styles:{top:0,bottom:"45px"}},],});</script>这时，只能加载首页，并不能切换切换窗口事件<script>//首页事件跟其他的不一样document.getElementById("btn-home").addEventListener("tap",function(){plus.webview.getLaunchWebview().show();});//展示电话页document.getElementById("btn-phone").addEventListener("tap",function(){//通过id获取到预加载的页面varview=plus.webview.getWebviewById("phone.html");plus.webview.show(view);})//展示邮箱页document.getElementById("btn-email").addEventListener("tap",function(){//通过id获取到预加载的页面varview=plus.webview.getWebviewById("email.html");plus.webview.show(view);})//展示设置页document.getElementById("btn-gear").addEventListener("tap",function(){//通过id获取到预加载的页面varview=plus.webview.getWebviewById("gear.html");plus.webview.show(view);})</script>
概述为实现下拉刷新功能，大多数H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况);mui通过使用原生webview下拉刷新解决这个DIV动画的卡顿问题，并且拖动效果更加流畅；官方文档：https://dev.dcloud.net.cn/mui/pulldown/有两种下拉刷新的方式单webview模式当控件拖动到一定位置触发动态加载数据以及刷新操作。此模式下拉刷新，不创建额外webview，性能更优。使用只需要指定一个下拉刷新容器标识即可代码块：mpullrefresh<!--下拉刷新容器--><divid="refreshContainer"class="mui-contentmui-scroll-wrapper"><divclass="mui-scroll">刷新的内容写在这里面</div></div>下拉刷新<scripttype="text/javascript">mui.init({pullRefresh:{container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等down:{style:'circle',//必选，下拉刷新样式，目前支持原生5+‘circle’样式color:'#2BD009',//可选，默认“#2BD009”下拉刷新控件颜色height:'50px',//可选,默认50px.下拉刷新控件的高度,range:'100px',//可选默认100px,控件可下拉拖拽的范围offset:'0px',//可选默认0px,下拉刷新控件的起始位置auto:true,//可选,默认false.首次加载自动上拉刷新一次callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；//下拉刷新的业务逻辑//一般是ajax请求//停止刷新，如果是ajax可以放在，ajax处理完成之后。mui('#refreshContainer').pullRefresh().endPulldown();}}}});</script>小例子刷新成功，创建一个<li><!--下拉刷新容器--><divid="refreshContainer"class="mui-contentmui-scroll-wrapper"><divclass="mui-scroll"><ulid="list"class="mui-table-view"><!--列表--><liclass="mui-table-view-cell">1</li></ul></div></div><!--Js--><scripttype="text/javascript">mui.init({pullRefresh:{container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等down:{style:'circle',//必选，下拉刷新样式，目前支持原生5+‘circle’样式auto:false,//可选,默认false.首次加载自动上拉刷新一次callback:function(){varlist=document.getElementById("list")//创建新的<li>标签varli=document.createElement("li")li.className="mui-table-view-cell"li.innerHTML="刷新成功"list.appendChild(li)//停止刷新，其实是停止刷新的动画mui('#refreshContainer').pullRefresh().endPulldownToRefresh()}}}});</script>双webview模式使用只需要指定一个下拉刷新容器标识即可，容器与上面一样代码块：mpullrefresh<!--下拉刷新容器--><divid="refreshContainer"class="mui-contentmui-scroll-wrapper"><divclass="mui-scroll">刷新的内容写在这里面</div></div>下拉刷新，双webview模式不需要指定style:'circle',<scripttype="text/javascript">mui.init({pullRefresh:{container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等down:{auto:false,//可选,默认false.首次加载自动上拉刷新一次contentdown:"下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容contentover:"释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容contentrefresh:"正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；//下拉刷新的业务逻辑//一般是ajax请求//停止刷新，如果是ajax可以放在，ajax处理完成之后。mui('#refreshContainer').pullRefresh().endPulldown();}}}});</script>小例子刷新成功，创建一个<li><!--下拉刷新容器--><divid="refreshContainer"class="mui-contentmui-scroll-wrapper"><divclass="mui-scroll"><ulid="list"class="mui-table-view"><!--列表--><liclass="mui-table-view-cell">1</li></ul></div></div><scripttype="text/javascript">mui.init({pullRefresh:{container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等down:{auto:true,//可选,默认false.首次加载自动上拉刷新一次contentdown:"下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容contentover:"释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容contentrefresh:"正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；varlist=document.getElementById("list")//创建新的<li>标签varli=document.createElement("li")li.className="mui-table-view-cell"li.innerHTML="刷新成功"list.appendChild(li)//停止刷新，其实是停止刷新的动画mui('#refreshContainer').pullRefresh().endPulldownToRefresh()}}}});</script>上拉加载其实跟下拉刷新差不多，只是变成了on<scripttype="text/javascript">mui.init({pullRefresh:{container:"#refreshContainer",up:{height:50,//可选.默认50.触发上拉加载拖动距离auto:false,//可选,默认false.自动上拉加载一次contentrefresh:"正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；setTimeout(function(){//停止动画//传入true会提示没有更多数据了this.endPullupToRefresh(true)}.bind(this),500)}}}});</script>小例子<!--下拉刷新容器--><divid="refreshContainer"class="mui-contentmui-scroll-wrapper"><divclass="mui-scroll"><ulid="list"class="mui-table-view"><!--列表--><liclass="mui-table-view-cell">1</li></ul></div></div><scripttype="text/javascript">mui.init({pullRefresh:{container:"#refreshContainer",up:{height:50,//可选.默认50.触发上拉加载拖动距离auto:false,//可选,默认false.自动上拉加载一次contentrefresh:"正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；callback:function(){//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；setTimeout(function(){//传入true会提示没有更多数据了this.endPullupToRefresh(true)}.bind(this),500)}}}});</script>下拉刷新&上拉加载同时使用，只需要on、down同时定义即可
Div选项卡代码块：mTabSegmented<divclass="mui-content"><divclass="mui-segmented-control"><aclass="mui-control-itemmui-active"href="#item1">选项卡1</a><aclass="mui-control-item"href="#item2">选项卡2</a></div></div>例子:能切换的DIv选项卡锚点的形式的进行切换添加几个样式，在mui-segmented-control添加mui-segmented-control-invertedmui-segmented-control-negativemui-segmented-control-positivemui-segmented-control-vertical<divclass="mui-segmented-control"><!--href锚点--><aclass="mui-control-itemmui-active"href="#item1">选项卡1</a><aclass="mui-control-item"href="#item2">选项卡2</a></div><div><divid="item1"class="mui-control-content">选项卡1的内容</div><divid="item2"class="mui-control-content">选项卡2的内容</div></div>底部选项卡代码块：mtab<navclass="mui-barmui-bar-tab"><aclass="mui-tab-itemmui-active"><spanclass="mui-iconmui-icon-home"></span><spanclass="mui-tab-label">首页</span></a><aclass="mui-tab-item"><spanclass="mui-iconmui-icon-phone"></span><spanclass="mui-tab-label">电话</span></a><aclass="mui-tab-item"><spanclass="mui-iconmui-icon-email"></span><spanclass="mui-tab-label">邮件</span></a><aclass="mui-tab-item"><spanclass="mui-iconmui-icon-gear"></span><spanclass="mui-tab-label">设置</span></a></nav>左右滑动选项卡代码块：mtabviewpage<divclass="mui-slider"><divclass="mui-slider-indicatormui-segmented-controlmui-segmented-control-inverted"><aclass="mui-control-item"href="#item1">选项卡1</a><aclass="mui-control-item"href="#item2">选项卡2</a></div><divid="sliderProgressBar"class="mui-slider-progress-barmui-col-xs-6"></div><divclass="mui-slider-group"><divid="item1"class="mui-slider-itemmui-control-contentmui-active"><ulclass="mui-table-view"><liclass="mui-table-view-cell">第1个选项卡子项</li><liclass="mui-table-view-cell">第1个选项卡子项</li></ul></div><divid="item2"class="mui-slider-itemmui-control-content"><ulclass="mui-table-view"><liclass="mui-table-view-cell">第2个选项卡子项</li><liclass="mui-table-view-cell">第2个选项卡子项</li></ul></div></div></div>升级版标题也能滚动<divclass="mui-slider"><divclass="mui-slider-indicatormui-segmented-controlmui-segmented-control-invertedmui-scroll-wrapper"><divclass="mui-scroll"><!--锚点关联--><ahref="#item1"class="mui-control-itemmui-active">Item1</a><ahref="#item2"class="mui-control-item">Item2</a><ahref="#item3"class="mui-control-item">Item3</a><ahref="#item4"class="mui-control-item">Item4</a><ahref="#item5"class="mui-control-item">Item5</a></div></div><!--横条，可以调整长短--><!--<divid="sliderProgressBar"class="mui-slider-progress-barmui-col-xs-6"></div>--><divclass="mui-slider-group"><!--选项内容1--><divid="item1"class="mui-slider-itemmui-control-contentmui-active"><ulclass="mui-table-view"><liclass="mui-table-view-cell">第1个选项卡子项</li><liclass="mui-table-view-cell">第1个选项卡子项</li></ul></div><!--选项内容2--><divid="item2"class="mui-slider-itemmui-control-content">item2content</div><!--选项内容3--><divid="item3"class="mui-slider-itemmui-control-content">item3content</div><!--选项内容4--><divid="item4"class="mui-slider-itemmui-control-content">item4content</div><!--选项内容5--><divid="item5"class="mui-slider-itemmui-control-content">item5content</div></div></div>