创新实训-python爬虫多线程|解决中文乱码问题|卡片向上浮动效果|图文切换

创新实训 专栏收录该内容
5 篇文章 0 订阅

创新实训-python爬虫多线程|乱码问题|前端样式重新修改

考完毛概,把上周的工作总结一下。爬虫在第一周的时候只爬了一个就业指导这一个模块,这一次又加了招聘服务模块,所以就用了两个线程。前端首页一开始用layui table显示的数据,但是小组成员讨论之后,觉得换一种方式会更好,于是重新写了两个页面。这次真的治好了我前端能看就行的毛病,之前写的实验中前端都是怎么简单怎么来,只要不出现大红配大绿就行,所以学到了很多CSS、js的知识。出现问题一定要去看控制台信息,这一次还遇到了锚点跳转的问题,本来以为是跳转那里写的不对,看控制台才发现是网页中有个方法出错,所以无法跳转。这类问题只靠搜索是不行的,必须自己排查。
注:前端知识参考菜鸟教程、w3school,图片素材来源于网络
一、python爬虫多线程
1.爬取招聘服务模块
这次爬取的页面链接为https://www.job.sdu.edu.cn/xwgg/tzgg/zpfw.htm 与上一次的爬取大致相同,除了一开始的url不同外,在爬取详情页时构造的页面也需要改(这个问题我也排查了好久,因为看起来数据爬取是正常的,但是数据量与自己看到的数据相比明显是少的)。因此保持之前的方法不变,加判断与参数。

 if(flagJiuZHAO==0):
        #就业指导的url
        url = 'https://www.job.sdu.edu.cn/xwgg/tzgg/jyzd.htm'
        #  就业指导的url
        url1 = 'https://www.job.sdu.edu.cn/xwgg/tzgg/jyzd/{}.htm'
 if(flagJiuZHAO==1):
        #招聘服务的url
        url='https://www.job.sdu.edu.cn/xwgg/tzgg/zpfw.htm'
        # 招聘服务
        url1 = 'https://www.job.sdu.edu.cn/xwgg/tzgg/zpfw/{}.htm'

2.遇到的问题:外链是微信的公众号文章,有一篇可以正常爬取,但还有一篇就出现了中文乱码的情况
在这里插入图片描述
然后手动查看该网页的源代码发现,编码是utf-8
在这里插入图片描述
但是在爬虫框架中

r.encoding=r.apparent_encoding

打印出来的r.encoding结果却是
在这里插入图片描述
于是就把爬虫框架中关于编码的部分改为以下形式:

r.encoding=r.apparent_encoding
if (r.encoding == 'Windows-1254'):
            r.encoding = 'UTF-8'
            

3.多线程:
一开始用_thread 模块中的start_new_thread()函数来产生新线程,运行的时候报错:
Unhandled exception in thread started by。于是改为threading模块。整个爬虫的主方法为:

def mediFunc():#多线程
    try:
        threading.Thread(target=UpdateMessage1, args=(19, 31, 0)).start()
        threading.Thread(target=UpdateMessage1, args=(19, 31, 1)).start()
    except:
        print("Error: 无法启动线程")

前两个参数为定时更新的小时与分钟,后面的参数表明是爬取招聘服务还是就业指导。
4.mysql自动增长的字段设定初始值
因为jobinfo表的主键是自动增长的,在插入数据库进行测试时,会删除之前的数据,所以id会不断增长,因此在每次删除数据之后都设定初始值。下面的sql语句就能使主键从1开始增长。

ALTER TABLE job_info AUTO_INCREMENT  = 1 

二、卡片向上浮动效果
1.为了方便小组其他成员进行后续的测试,直接重新添加资源文件夹,于是又出现了cannot find declaration to go to的问题,在经过重新将resources文件夹设为资源路径等种种措施后,还是不行。控制台显示问题为
css 未载入,因为它的 MIME 类型 “text/html” 不是 “text/css”,
发现我又被拦截了,所以最后还是改拦截器的设置解决了这一问题。
2.向上浮动并添加阴影
CSS中hover选择器:当鼠标移到该元素上,改变其样式
box-shadow:添加阴影
transform:进行旋转平移放大缩小,其中translate(x,y) 进行二维上的平移。

/*实现向上浮动*/
.card:hover {
    box-shadow: 0px 1rem 2rem 0px rgba(48, 55, 66, 0.15);
    transform: translate(0,-3px);
    transition-delay: 0s !important;
}

3.卡片点击跳转
数据的显示还是用ajax获取controller返回的列表信息。点击跳转直接用的onclick。

<div class="card " οnclick="showJob1()">
  // js中跳转页面
        function showJob1( ) {
            window.open("JobMessageShow?job_ID="+jobid0);
        }

4.布局
采用flex布局,
flex-direction:row;横向布局,从左侧开始
flex-wrap:nowrap;不换行
justify-content:space-between;两端对齐,卡片之间距离相等

.buju{
    padding-top:4em;
    padding-bottom:2em;
    display: flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:space-between;
}

5.效果
为了及时和小组成员交流,需要制作出gif。从知乎上了解了下面这款开源软件,用它录制屏幕后转为gif,
在这里插入图片描述
在这里插入图片描述
三、图文切换
用了一个模板,下图所示:
在这里插入图片描述把它改为了
在这里插入图片描述鼠标滑过文字放大、颜色改变、光标变化
(1)颜色变化
一开始想要进行底色的变化,但是在改变底色深浅、透明度之后,效果还是不尽如人意,因此改为颜色的变化。
不知道为什么,在CSS中单独设置

.subtitle:hover {
    color:#6a6da9;
}

无法实现颜色的变化,后来用到继承

.bline:hover .subtitle{
    color:#6a6da9;

讨论帖的内容、发布时间与更多都属于.bline,用继承就会出现鼠标移动到“more”,但讨论帖内容颜色也变化的问题。后来改为

.bline .subtitle:hover {
    color:#6a6da9;
}

就可以了。
(2)文字放大、光标变化
transform中scale进行缩放
cursor中pointer为一只手的形状

.subtitle:hover {
    /*background-color: #dbffe0;*/
    cursor: pointer;
    transform: scale(1.01);
}

前端是最直观展示出来的,因此每一个细节都得扣,包括字体、布局、颜色、图片设置等,比较繁琐。

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值