Web开发技术—实验1

实验1：Web服务器

        搭建Web服务器，正确部署任意网站，并利用浏览器访问（可以尝试如何支持不同版本的HTTP协议）

        目前市场上有很多的Web服务器，如Apache，IIS，Nginx，Tomcat，Lighttpd，Zeus等等。截止2020年8月，Nginx市场份额达到了36%，成为排名第一的Web服务器。因此本次实验通过Nginx搭建Web服务器。以Linux Debian为系统，进行nginx安装。安装过程中报错，一般是缺少依赖库，搜索报错即可解决。

1
sudo apt-get install nginx

安装后查看nginx安装位置：

1
whereis nginx

进入/etc/nginx，目录下nginx.conf为Nginx的配置文件，打开添加server配置。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
user www-data; #配置用户或者组，默认为nobody nobody
worker_processes auto; #允许生成的进程数，默认为1
pid /run/nginx.pid; #指定nginx进程运行文件存放地址
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768; #最大连接数，默认为512
	# multi_accept on; #设置一个进程是否同时接受多个网络连接，默认为off
}

http {

	##
	# Basic Settings
	##

	sendfile on; #允许sendfile方式传输文件，默认为off，可以在http块，server块，location块
	tcp_nopush on;  #必须在sendfile开启模式才有效，告诉nginx在一个数据包里发送所有头文件，而不一个接一个的发送。
	types_hash_max_size 2048;
	# server_tokens off;

	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# SSL Settings
	##

	ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
	ssl_prefer_server_ciphers on;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log; #combined为日志格式的默认值
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##
	
	gzip on; #开启页面压缩

	# gzip_vary on;
	# gzip_proxied any;
	# gzip_comp_level 6;
	# gzip_buffers 16 8k;
	# gzip_http_version 1.1;
	# gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;

	server { 
	    listen 10.122.200.178:80; #监听端口
	    server_name localhost; #监听地址
	    location / { #请求的url过滤，可为正则匹配，~为区分大小写，~*为不区分大小写。
	    	root /home/llrber/桌面; #根目录
			index index.html;  #设置默认页
	    }
	}
}

        主要是加server内的内容，其中监听端口80（因为我虚拟机同时配置了apache，所以为了避免端口冲突才在前面加入了本机IP）。root为浏览器访问的根目录，这里选用的为桌面，其中放入html相关的代码文件，index为打开的默认页。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web开发技术基础实操</title>
    <style>
        p {
            font-size: 10vh;
            text-align: center;
        }
        img {
            margin-left: 46%;
            height: 100px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div>
        <p>Web开发技术基础实操</p>
        <p>搭建Web服务器</p>
        <p>LLrber</p>
        <img src="https://lrblog-img-1304667442.file.myqcloud.com/method.jpg">
    </div>

</body>
</html>

配置好后重启nginx服务。

1
/etc/init.d/nginx restart

成功后可以通过本机的IP地址访问搭建的网站了。可以ifconfig查询本机IP。

利用浏览器的检查的network，可以查看到http当前的版本和Web服务器信息。

或者，通过curl指令请求Web服务器，也可查看。

nginx在最新版本中已经支持HTTP/2的协议，可以通过nginx -V来查验。

        因为HTTP/2需要开启SSL支持，所以需配置SSL和更改nginx的配置。添加SSL支持需要添加证书，一种方式是购买或者在网上有一些免费的SSL证书可用，如果只是在测试环境中的话，还可以生成自签名证书。这里使用openssl命令来完成生成自签名证书这个工作。

openssl详情         openssl是一个非常强大的密钥生成工具，可以完成绝大多数的密钥生成工作。
  • req表示的是这是一个X.509 certificate signing request (CSR)。
  • -x509表示我们希望生成的是一个自签名的证书。
  • -nodes表示我们不需要对生成的密钥进行密码加密。
  • -days 365表示证书的有效期。
  • -newkey rsa:2048表示使用RSA算法同时生成证书和key，key的长度是2048。
  • -keyout:指定key的生成路径。
  • -out:指定证书的生成路径。
1
openssl req -x509 -nodes -days 365 -newkey rsa:2048 -keyout selfsigned.key -out selfsigned.crt

        我是在桌面运行的，为了好找到生成的文件。输入后会要求填写一些证书的相关信息，完成后就会在当前目录下生成了两个文件：selfsigned.crt和selfsigned.key。

        这里即使是使用了SSL，为了保证安全，我们还可以使用一项叫做完美的向前保密的技术，这里需要生成Diffie-Hellman group：

1
openssl dhparam -out dhparam.pem 2048

运行完成即可。再配置nginx.conf，主要就是修改了server部分。

1
2
3
4
5
6
7
8
9
10
11
server { 
    listen 443 ssl http2;
    server_name 10.122.200.178;
    ssl_certificate /home/llrber/桌面/selfsigned.crt;
	    ssl_certificate_key /home/llrber/桌面/selfsigned.key;

    location / {
    	root /home/llrber/桌面;
		index index.html; 
    }
}

        之后重启nginx服务/etc/init.d/nginx restart。打开浏览器验证HTTP协议版本号。用https进入时会提醒网站不安全，只要选择高级-继续访问即可。

实验2：HTTP协议

访问任意Web网站首页，利用浏览器的Web开发工具观察HTTP交互过程和涉及到的HTTP头部字段。

HTTP协议为应用侧协议，其通过TCP，或者TLS（加密的TCP连接来发送）。TCP三次握手创立连接。

请求与响应头

四次挥手断开连接。

HTTP头部字段总结

https://www.cnblogs.com/soldierback/p/11714052.html

实验3：自动化无头浏览器

        利用自动化测试工具操纵无头浏览器，进行网页爬虫、截图等实验。

        首先，解释下无头浏览器，其指可以在没有图形界面情况下运行的浏览器。可以通过编程来控制无头浏览器自动执行各种任务，比如爬虫，网页截屏，DDoS等。

        在之前学习网络爬虫时，就接触到过selenium模块，其为一个Web自动化测试工具，既可以自动化操作有图形界面的浏览器，也可以操作无头浏览器在后台操作，其中的原理是相近的，因此需要同第三方浏览器结合使用。

        安装selenium。

1
pip install selenium

       配置webdriver， 查看自己电脑Microsoft Edge的版本，设置-关于Microsoft Edge。

        前往微软官方网站下载Microsoft Edge的webdriver，找到与自己浏览器对应的版本下载，解压后得到一个msedgedriver.exe。

        然后，可以将msedgedriver.exe放在python的安装目录下。

        简单的编写下程序，验证是否能够自动启动浏览器。需要注意的是填写executable_path是因为源文件中默认的驱动名称与实际名称不一致，所以要添加这个参数更改。

        目前为止，只是初步的自动化启动浏览器，并没有做到爬虫等功能，并且也并不是无头浏览器的状态，需要更进代码完成。

        之前使用过chrome的无头浏览器自动化，因为selenium封装了chrome和firefox的配置函数，但是Edge需要安装与selenium的链接库才可以进行配置。

1
pip install msedge-selenium-tools

        以研招网的经验心得为例，将其文章爬取下来。根据开发者工具定位模拟人的操作进行文章内容的爬取。edge_options.add_argument('--headless')将其取消注释即可为后台运行，代码如下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import os
import re
from msedge.selenium_tools import EdgeOptions
from msedge.selenium_tools import Edge
from selenium.common.exceptions import NoSuchElementException
from selenium.webdriver.support.wait import WebDriverWait

# 创建保存爬虫结果的word
path = os.getcwd() + '\\webtest'  # 当前目录和要创建文件夹名的组合
folder = os.path.exists(path)  # 判断是否当前目录存在该文件夹，存在返回True
if not folder:
    os.makedirs(path)

# 添加配置项
edge_options = EdgeOptions()
edge_options.use_chromium = True
# 无头浏览器，取消注释后则为后台运行，不再弹出浏览器
# edge_options.add_argument('--headless')
# 绑定驱动和配置
edge = Edge(executable_path='msedgedriver.exe', options=edge_options)
# 打开初始网页
edge.get("https://yz.chsi.com.cn/kyzx/jyxd/")

# 用来判断是否翻到最后一页
end_state = 0
# 页数计数器
page_count = 0
# 文章计数器
passage_count = 0

while True:
    # 获取文章列表
    ul = edge.find_element_by_class_name("news-list")
    li_list = ul.find_elements_by_xpath("li")
    # 循环文章列表
    for i in li_list:
        # 从超链接中找文章标题，并去除特殊符号，创建文档有特殊符号限制
        a = i.find_element_by_xpath("a")
        title = a.text
        title = re.findall(r'[^\*"/:?\\|<>]', title, re.S)
        title = "".join(title)
        # 文章发布时间
        time = i.find_element_by_class_name("span-time").text

        try:
            # 点击进入文章
            a.click()
            # 等待文章加载，超时10s，每1m判断下
            WebDriverWait(edge, 60, 1, NoSuchElementException).until(
                lambda edge: edge.find_element_by_class_name("ch-sticky"))
        except NoSuchElementException as e:
            edge.refresh()
            print("页面没刷新出来，又刷新了一次")

        # 驱动重定位到新标签页
        edge.switch_to.window(edge.window_handles[-1])
        new_window = edge.current_window_handle
        # 爬取文章内容，并保存成文档
        content = edge.find_element_by_class_name("content-l")
        with open(os.getcwd() + '\\webtest\\' + title + "_" + time + ".txt", "w", encoding='utf-8') as f:
            f.write(content.text)
        # 关闭标签页，重定位到目录页面
        edge.close()
        edge.switch_to.window(edge.window_handles[-1])
        new_window = edge.current_window_handle
        passage_count += 1

    page_count += 1
    # 定位到下一页和末页的链接处
    next = edge.find_element_by_link_text("下一页").get_attribute("href")
    end = edge.find_element_by_link_text("末页").get_attribute("href")
    print("完成第" + str(page_count) + "页的爬虫")
    # 如果上一次末页和标签页的链接相同，说明这次是最后一页

    if end_state == 1:
        break

    # 点击到下一页
    page = edge.find_element_by_link_text("下一页")
    try:
        page.click()
        WebDriverWait(edge, 60, 1, NoSuchElementException).until(
            lambda edge: edge.find_element_by_class_name("ch-sticky"))
    except NoSuchElementException as e:
        edge.refresh()
        print("页面没刷新出来，又刷新了一次")

    # 如果末页和标签页的链接相同，说明这是倒数第二页
    if next == end:
        end_state = 1

edge.quit()
print("完成爬虫，共" + str(passage_count) + "篇文章")

        这次实操中仅仅是利用了selenium的元素定位和内容的获取，其最魅力的地方还是自动化。关于截图也有很多有意思的地方，比如可以多张截图拼接成整个网页的样子。当然，也结合更多的配置和微信小程序。

        个人观点，selenium自动化比较细节化，因此代码专项性很强，但需要面对不同需求而特定编写。

鸣谢❀参考大佬文章