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

创新实训-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);
}

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