uniapp实现tabs切换(可滑动)效果实例
<template>
<view class="body-view">
<!-- 使用scroll-view实现tabs滑动切换 -->
<scroll-view class="top-menu-view" scroll-x="true" :scroll-into-view="tabCurrent">
<view class="menu-topic-view" v-for="item in tabs" :id="'tabNum'+item.id" :key="(item.id - 1)" @click="swichMenu(item.id - 1)">
<view :class="currentTab==(item.id - 1) ? 'menu-topic-act' : 'menu-topic'">
<text class="menu-topic-text">{{item.name}}</text>
<view class="menu-topic-bottom">
<view class="menu-topic-bottom-color"></view>
</view>
</view>
</view>
</scroll-view>
<!-- 内容 -->
<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
<swiper-item class="swiper-topic-list" v-for="item in swiperDateList" :key="item.id">
<view class="swiper-item">
{{item.content}}
</view>
</swiper-item>
</swiper>
</view>
</template>
<script>
export default {
data() {
return {
tabs: [{
id: 1,
name: '推荐'
},
{
id: 2,
name: '交通交通'
},
{
id: 3,
name: '住房'
},
{
id: 4,
name: '社会保障'
},
{
id: 5,
name: '民生热点'
},
{
id: 6,
name: '即日头条'
},
{
id: 7,
name: '新闻联播'
},
],
currentTab: 0,
tabCurrent: 'tabNum1',
// Tab切换内容
swiperDateList: [{
id: 1,
content: '推荐'
},
{
id: 2,
content: '交通交通'
},
{
id: 3,
content: '住房'
},
{
id: 4,
content: '社会保障'
},
{
id: 5,
content: '民生热点'
},
{
id: 6,
content: '即日头条'
},
{
id: 7,
content: '新闻联播'
},
],
}
},
onLoad() {
},
methods: {
swichMenu(id) {
this.currentTab = id
console.log(11,id)
this.tabCurrent = 'tabNum'+ id
},
swiperChange(e) {
console.log(22,e.detail.current)
let index = e.detail.current
this.swichMenu(index)
}
}
}
</script>
<style scoped lang="scss">
.body-view {
height: 100vh;
width: 100%;
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
align-items: flex-start;
justify-content: center;
}
.top-menu-view {
display: flex;
position: fixed;
top: 100rpx;
left: 0;
white-space: nowrap;
width: 100%;
background-color: #FFFFFF;
height: 86rpx;
line-height: 86rpx;
border-top: 1rpx solid #d8dbe6;
.menu-topic-view {
display: inline-block;
white-space: nowrap;
height: 86rpx;
position: relative;
.menu-topic-text {
font-size: 30rpx;
color: #303133;
padding: 10rpx 40rpx;
}
// .menu-topic-act {
// margin-left: 30upx;
// margin-right: 10upx;
// position: relative;
// height: 100%;
// display: flex;
// align-items: center;
// justify-content: center;
// }
.menu-topic-bottom {
position: absolute;
bottom: 0;
width: 100%;
.menu-topic-bottom-color {
width: 40rpx;
height: 4rpx;
}
}
.menu-topic-act .menu-topic-bottom {
display: flex;
justify-content: center;
}
.menu-topic-act .menu-topic-bottom-color {
background: #3d7eff;
}
}
}
.swiper-box-list {
width: 100%;
padding-top: 200rpx;
flex:1;
background-color: #FFFFFF;
.swiper-topic-list {
width: 100%;
}
}
</style>
传递access_token参数的正确方式
在OAuth中, access_token参数的传递如何才能更安全呢? 不知你有没有具体去研究过, 在此总结传递access_token的正确方式,
(所谓正确方式是指传递方式更安全, 更隐匿, 更不容易被网络拦截,网络攻击的方式)
在 spring-oauth-server 与 oauth2-shiro 中均支持以下提到的传递access_token的方式.
1. 通过Header传递 access_token; [推荐]
在请求URL的Header中, 添加header -> Authorization: bearer access_token, 示例代码(Java):postHandler.addHeader(“Authorization”, “bearer 0fe12a74-e613-4d1b-9785-f96847bad346”);
一般在代码中使用httpclient或URLConnection来实现,如Android, IOS客户端, 不适用于浏览器传递access_token
2.若请求URL使用POST方式提交, 将access_token放在请求body中而不是拼接在URL上, 示例代码(HTML):<form action=”db_table_description” method=”post”> <input type=”hidden” name=”access_token” value=”0fe12a74-e613-4d1b-9785-f96847bad346″/> <input type=”text” name=”username”/> <button type=”submit”>Submit</button> </form>
3.最后的选择, 通过URL拼接参数access_token, 示例代码:http://monkeyk.com/oauth_test?access_token=0fe12a74-e613-4d1b-9785-f96847bad346
一般使用在GET请求, POST等其他请求方式也支持
以上三种方式, 优先选择第一,第二种, 少用第三种方式.这些方式都是基于HTTP请求下所采用的.
更安全的传递access_token的方式是启用HTTPS连接,保证网络传输安全.
文件批量处理
- 批量重命名文件
在这里最核心的就是os.listdir(),这个函数可以返回文件夹里所有文件的文件名. 有了这个我们才能进行其他操作,包括遍历。
import sys import os #OS库是文件处理中经常用到的库 import comtypes.client #单个word转PDF wdFormatPDF = 17 addr = 'C:\\Users\\wang\\Desktop\\G13-a\\' #文件夹的绝对路径 names = os.listdir(addr) # 读取文件夹下的所有文件名 #进行遍历 for name in names: old_name = addr + name #注意rename函数里要放完整的路径,不能只放新旧名字 new_name = addr + name[:13] #这是当时甲方要求去除后缀,故只取旧题目的前13位 os.rename (old_name, new_name)
2. 文件分类
在tender的最后提交时,甲方要求按工作编号进行提交,这里需要按照register里的编号进行分类。
首先读取文档,观察数据形式
import pandas as pd df = pd.read_excel('C:\\Users\\wang\\Desktop\\DCC_file.xlsx')
接下来,需要完成的就是:(1) 获取每一类DCC编码下的文件名;(2)复制对应文件名至相应文件夹。
其中文档的复制移动主要依靠shutil模块.
import os import shutil file_dir = r'C:\Users\wang\Desktop\All file' #这里是存放所有文件的位置,它们需要进行分类 os.chdir(file_dir) numb = '10-01902-0002-050' #这是其中一个DCC 编码 os.mkdir(numb) #在当前路径下创建对应的文件夹 filenames = df.loc[(df['DCC']== numb)]['NATIVE'] #利用loc函数筛选出 '10-01902-0002-050' 对应的所有文件名 # 这里操作是因为DC部门在命名文件时,Pdf, Word 和drawing的文件名后三位分别是“P00”,“W00”和“V00”, # 所以通过这个,为对应的文件名加上对应的后缀,来构成完整的文件名 for name in filenames: if name[-3] == 'X': fname = name + '.xls' if name[-3] == 'V': fname = name + '.dgn' if name[-3] == 'W': fname = name + '.doc' if os.path.exists(fname) ==1: #判断文件是否存在 shutil.copy(fname,numb) #复制文件至文件夹 else: print(fname) #输出不存在的文件名,用来检查
3. 批量Word转PDF
这个很常见的需求,需要将word转为PDF,但传统的Adobe转PDF需要一个一个点,比较慢,而网上大部分批量转PDF的软件基本收费,所以也是临时想起用python写个小程序。
这里呢,如前面提到的DC要求,转换得到的PDF,名字后三位需要时“P00″, 例如C860040001W00.doc 转换后的PDF应该是 C860040001W00.pdf.
所以这里目标有两个:
(1) 遍历,也就是达到批量处理的目的
(2) 重命名后三位为”P00″
这里用到的库是 comtypes.client,用它访问COM组件达到转PDF的目的。
import sys import os import comtypes.client wdFormatPDF = 17 addr = 'C:\\Users\\wang\\Desktop\\doc\\10-01902-0002-711\\' # 目标路径,存放word的位置 doc_names = os.listdir(addr) #读取文件夹里所有文件的名字 pdf_names = [] #将用来存放转换后PDF的名字 #开始遍历 for name in doc_names: pdf_name = name[:10] +'P00.pdf' #实现文件名转换:C860040001W00.doc 到 C860040001W00.pdf. pdf_names.append(pdf_name) #存放新的PDF文档文件名 in_file = os.path.abspath(addr + name) #构造完整路径的文件名 out_file = os.path.abspath(addr + pdf_name) word = comtypes.client.CreateObject('Word.Application') doc = word.Documents.Open(in_file) doc.SaveAs(out_file, FileFormat=wdFormatPDF) #转换为PDF doc.Close() word.Quit()
有了这些小程序,基本可以处理工作中的文档操作了!感谢Python让我现在有时间喝咖啡写文章,而不用继续click,click,click.
实践美文 (一)
层次看鞋子,卫生看指甲
人品看眼神,自律看身材
格局看买单,家教看坐姿
性格看笑声,脾气看语气
境界看表情,态度看嘴角
pycharm激活
pycharm激活码最新提取方式:www.ajihuo.com
(如果不好用了可以到www.ajihuo.com中提取)
GPT4网页导航,永久免费,你想要的都在这里!
提取试卷题目及题号和选项
以下代码的功能是为了实现提取题目中的题号,题目,如是选择题则提取选项,具体代码如下:
// 提取试卷题目及题号
$text = "11. 已知椭圆 $C: \frac{x^{2}}{a^{2}}+\frac{y^{2}}{b^{2}}=1(a>b>0)$ 的左、右焦点分别为 $F_{1}, F_{2}$, 点 $M$ 是椭圆 $C$ 上任意一点, 且 $\overrightarrow{M F_{1}} \cdot \overrightarrow{M F_{2}}$ 的取值范围为 $[2,3]$. 当点 $M$ 不在 $x$ 轴上时, 设 $\triangle M F_{1} F_{2}$ 的内切圆半径为 $m$, 外接圆 半径为 $n$, 则 $m n$ 的最大值为 ( ) A. $\frac{1}{3}$ B. $\frac{1}{2}$ C. $\frac{2}{3}$ D. 1
12. 设函数 $f(x)=\mathrm{e}^{3 \ln -x}-x^{2}-(a-4) x-4$, 若 $f(x) \leqslant 0$, 则 $a$ 的最小值为 $(\quad)$ A. e B. $\frac{1}{\mathrm{e}}$ C. $\frac{1}{\mathrm{e}^{2}}$ D. $\frac{4}{\mathrm{e}^{2}}$
13. $\left(x^{2}-\frac{2}{x}\right)^{6}$ 的展开式中常数项是___.
14. 数列 $\left\{a_{n}\right\}$ 的前 $n$ 项和为 $S_{n}$, 若 $a_{1}=1, a_{n+1}=S_{n}$, 则 $a_{n}=$
15. 在棱长为 2 的正方体 $A B C D-A_{1} B_{1} C_{1} D_{1}$ 中, 若 $E$ 为棱 $B B_{1}$ 的中点, 则平面 $A E C_{1}$ 截正方体 $A B C D-A_{1} B_{1} C_{1} D_{1}$ 的截面面积为___
16. 若函数 $f(x)=\left|x-\sqrt{4-4 x^{2}}-2\right|-2 a-1$ 有两个零点, 则实数 $a$ 的取值范围为___";
$pattern = "/(\d+)\.\s(.*?)(?=\d+\.|\Z)/ms";
preg_match_all($pattern, $text, $matches, PREG_SET_ORDER);
// print_r($matches);
foreach ($matches as $match) {
$item['number'] = $match[1];
$item['content'] = $match[2];
// $number = $match[1];
// $title = $match[2];
// echo "题号:$number;题目:$title\n";
$regex = '/[A-D]\.(.*?)(?=[A-D]\.|\Z)/ms';
# $regex = '/^[A-D]\.\s(.+)(?=[A-D]+\.|\Z)$/ms';
if(preg_match_all($regex, $item['content'], $matches2))
{
// print_r($matches2);
$item['options'] = $matches2[1];
$item['content'] = str_replace($matches2[0],'',$item['content']);
}
print_r($item);
}
运行效果如下:
不合规范的html段落php处理细则
最近业余时间在维护一个rss聚合应用,就发现很多网站feed的条目摘要存在各种问题,用strip_tags一刀切吧,对摘要的段落和样式扭曲了
例如:有一些网站的摘要是截断输出,例如指定的摘要长度截断,这样会导致摘要中出现非闭合的html标签,下面的摘要是一个例子:
$str=<<<EOF <P> 【手机中国 导购】时间过得真快,转眼就我们就已经度过了2013年的上半年,而我们也悄无声息地老了半岁。不过随着时间的流逝,手机行业也在快速的进步着,其发展速度之快可以用日新月异来形容了。</P> <P align=center><IMG style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid" alt="2.2GHz骁龙800四核 上半年热门机N宗最 " align=1 src="http://imgm.cnmo.com/cnmo_product/18_500x375/698/ceFYnyzZgUijQ.jpg"><BR>2012年的旗舰机型HTC Butterfly</P> <P> 回首2012年,手机市场还处于一个相对比较矛盾的时期,国产手机的初露锋芒以及国际大牌的推陈出新,让消费者有些摸不清头脑。到了2013年之后,虽然这个现象还存在着,唯一不同的就是消费者已经逐渐习惯了这个现状,整个手机行业也是在不断的向前进。</P> <P> 毫不夸张的说,今天刚刚上市了一款各个方面都表现突出的机皇级旗舰机,也许明天就被其他品牌旗舰所取代,这是一个不争的事实。但相比来说,每个品牌每款旗舰也都有自己的特长,比如处理器主频高或是屏幕尺寸大等等。</P> <P align=center><IMG style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid" alt="6.44英寸屏骁龙800 上半年热门机N宗最 " src="http://img.cnmo-img.com.cn/905/904155.jpg"></P> <P> 俗话说风水轮流转,曾经榜上有名的强机也许今天就名落孙山,物竞天择,适者生存这句话说的不无道理。今天笔者也给大家统计了2013上半年最新智能手机N宗最,下面就让我们一起看一下吧。<STRONG> EOF;
上面的摘要有几点不合法:
1.html标签大写
2.最后一个strong由于截断没有正常闭合,strong的父标签p丢失
3.标签的属性中出现了一些样式属性和定义,像:align,style
下面说一说它们的影响
2:如果不加处理的输出会造成页面样式混乱,像非正常闭合的strong浏览器会自动把它后面的输出算成它的子元素.
3:样式定义可能影响你的页面样式,图片溢出你的摘要容器
1:不会造成视觉上的错误,但它会影响你的html合法性
下面来说说处理方法
3:可以用正则把属性给替换掉,像
preg_replace("/<([a-z][a-z0-9]*)(?:[^>]*(\ssrc=['\"][^'\"]*['\"]))?[^>]*?(\/?)>/i",'<$1$2$3>',$str);
2:可以用DOMNode::C14N方法来规范,它可以把丢失的标签给补上,只不过<img />会变成<img></img>
等等:
1.为什么不用strip_tags来处理呢?
是可以,虽然它也可以保留指定的标签,但我会把哪些不安全的标签交给htmlentities
2.好像dom可以删除属性吧!
对,这是下面要讲的,综合处理1,2,3的代码如下
$doc = new DOMDocument(); $doc->formatOutput=false; $doc->loadHTML(mb_convert_encoding($str, 'HTML-ENTITIES', 'UTF-8')); $nodes = $doc->getElementsByTagName('*'); foreach ( $nodes as $node ) { $delAtts=array(); //找到节点的所有属性 $nodeN=$node->tagName; $nodeAtts=$node->attributes; foreach($nodeAtts as $attN=>$att){ //是img保留src属性 if(strtolower($attN)=='src' && strtolower($nodeN)=='img') continue; //不是直接删除所有属性 array_push($delAtts,$attN); } foreach($delAtts as $A){ $node->removeAttribute($A); } } $doc->saveHTML(); $pstr=$doc->GetElementsByTagName('body')->item(0)->C14N(); //clear empty tag $pstr=preg_replace('/<(\w+)>(\s| )*<\/\1>/i',"",$pstr);
大体上已经OK了,$pstr的内容是body包裹的$str,最后只需要把body解决掉就可以.
最后要说的有几点:
1.一定不要在遍历属性时把它删除,例如:img有三个属性style,src,alt,它只会删除掉style,style后面的并不会删除
2.一定不要用saveHTML()的返回值作为后续处理的内容,后果是汉字变成如下的东东:
  回首2012年,手机市场还
也不要怕,只需要再调一次
mb_convert_encoding($str, 'UTF-8','HTML-ENTITIES')
就ok了,为了偷懒,所以它的返回值不要用
3.$doc->GetElementsByTagName('body')->item(0)->C14N();
也可以换成:
$doc->documentElement->C14N();
只不过返回值不光有body还有html标签,不在乎的话也可以用它,毕竟比GetElementsByTagName更省事
nginx 配置跨域 status code 200,但是报错CORS error,实际还是跨域了
原文链接:https://blog.csdn.net/m0_46496355/article/details/123706879
昨天才完成的ubuntu通过nginx发布vue线上项目
结果今天调试后台接口的时候就出现了跨域问题,由于线上是在同一个域名下,所以在线上项目中调用接口的时候不会出现跨域问题,主要的就是本地调试的时候出现了跨域问题;
解决方法:
在nginx配置中加上这一段配置
add_header Access-Control-Allow-Methods '';
add_header Access-Control-Max-Age 3600;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Origin '';
add_header Access-Control-Allow-Headers $http_access_control_request_headers always;
if ($request_method = OPTIONS) {
return 200;
}
// 在server下的location中配置
配置完记得重启一下
这时候已经可以访问了,但是调用接口的时候会发现,在network中status code返回的是200,但是state显示的是CORS error。如下
这是为什么,我不理解~~
这时候其实nginx中已经配置成功了。
经过不断咨询度娘之后,看到了一个比较可信的原因:浏览器的js引擎解析的时候也是遵循同源策略的,由于本地浏览器地址跟访问的地址不在同一个域名下,所以返回了跨域的错误。
知道原因就比较简单了,可以参考我前面的文章前后端本地联调跨域,虽然已经不是本地联调了,但是使用的方法是一样的,利用proxy代理转发来骗过浏览器。
按照前后端本地联调跨域配置完成proxy代理之后,再去访问就可以了。
正式项目是不应该配置Access-Control-Allow-Methods ‘*’的,不安全,因为不管是谁配置个proxy都能访问到你的接口了,并且关于上面的nginx配置我也没有解释,解释了也是误导读者,因为我对其中的概念也比较模糊,目前正在探索学习中,需要深入了解的请自行百度,O(∩_∩)O哈哈哈~
每天分享一个踩坑经历~~~