网站服务器搭建小记

从零学网站搭建

学习搭网站~ web 方面啥都没接触，从零学起，特地开个博客记录学习过程中的点点滴滴~

现在已经买了服务器，域名还在审核（不知道要多久。。。），今晚开始搭。

一、Apache 的搭建及 Linux 的学习

参考文章https://blog.csdn.net/chenxiaohua/article/details/2047757

1. 怕搞坏服务器，所以在虚拟机上先试试。不知道这个VMware怎么了，不能直接从桌面拖动文件到虚拟机，搞了半天才把文件从主机传到虚拟机。我用的是文件共享的方法，把桌面的文件共享到虚拟机里，查了半天才知道* linux 系统会共享到 /mnt/hgfs * 中。

2. Linux源码编译安装包的过程一般都是 ./configure –> make –> make install. 其中 ./configure –prefix=/usr/local/ ** 的意思是安装到哪里，不懂，先记下来。

3. Linux命令控制中 command1 && command2 ：如果命令1执行成功，则执行命令2

command1 || command2 ： 如果命令1执行失败，则执行命令2

4. 在安装的时候出了车祸：因为要修改一下 sudo 的环境变量，chmod 777 sudoers，修改了之后直接无法运行 sudo ，要修改文件的权限又需要 sudo 。明天继续解决。

问题终于被干掉。先在腾讯云中重置root用户的密码，再通过腾讯云提供的 VNC 登录 root 用户，修改 /etc/sudoers 的权限，OK。

5. apache 的 access_log 文件记录着访问此服务器的历史记录，以空格分为 7 项。

第一项：访问此服务器的IP

第四项：[访问此服务器的时间 时区] 如 +0800 就表示东 8 区

第五项：“请求方法 请求资源 请求协议”

第六项：返回状态代码

第七项：返回数据字节数

6. Linux 光标操作（只写了我没记住的）

ctrl + e ：移动光标到行尾

ctrl + d ：删除光标之后的一个字符

ctrl + w ： 删除行首到当前光标所在位置的所有字符

crtl + k ： 删除当前光标到行尾的所有字符

apache的搭建就此结束٩(๑>◡<๑)۶



又get新东西：

主页都是 IP:PORT ，如果想访问子页面，只需要的Apache对应的文件里面建一个文件夹，里面放上index.html就可以了。

比如：你想访问 12.34.56.78:80/test ，只需要在你的服务器里的 htdoc 文件夹里在建一个文件夹叫 test ，建一个 index.html ，这个 html 文件就是会展示在你想访问的网址下面的。

二、web.py

web.py是官方演示的一个重要的包，用它可以来做一个轻量级的web服务器。

# -*- coding=utf-8 -*--
# filename : Web.py

import web
urls = ('/', 'Hello')
app = web.application(urls, globals())

class Hello:
def GET(self, name):
render = web.template.render('templates/')
name = 'Bob'
return render.index(name)

urls = (‘/’, ‘类名’) 一个元组，第一个是正则表达式，到现在还明白是怎么用的…原谅我太菜。第二个是下面自己定义的一个类的名字，表示受到请求后会实例化这个对象，然后执行你在类中写的GET / POST 方法。

app = web.application(urls, globals())，urls 就是上面的元组，作为构造方法的参数，globals() 是一个内置方法，返回所有的全局变量，作用是从这里面找到要实例化的类对象。

app.run() 阻塞状态执行代码，执行后即可接受请求。

有了这三步，就可以搭成一个简单的 web 服务器了。

运行参数： python3 Web.py 8080 表示开放 8080 端口当做服务接口

python3 Web.py IP:PORT 表示用此 IP 地址开放 PORT 端口当做服务器接口。

三、微信服务器绑定

首先，你要有一个服务器。（emmm废话么这不是）



如图，URL 不能加端口，否则会找不到你提供的服务器（微信官方提供的Wiki说格式是 http://IP:端口号 /wx ，这个格式是不对的）

token 是你自己约定的一个秘钥，在服务器端的 token 要与此对应起来

EncodingAESKey 暂时还用不到。

对于我这个萌新来说，消息加解密方式还是明文吧。。

这个服务器认证的过程，就是给你三个明文，一个用 sha1 加密过三个明文的密文，再让你在服务器运行一遍 sha1 加密，看看本地加密之后的密文是否与传来的密文对应，如果对应， 返回给服务器一个他告诉你他想要的结果（这个结果和明文密文一并发送过来）。

这是我服务器认证成功的 python3 代码：

（官方的 python2 把我折磨了好一顿￣ω￣= 好多常用的内置函数 python2 和 3 竟然都不一样）

# -*- coding: utf-8 -*-
# filename: handle.py

import hashlib
import web

MYTOKEN = 'token' # 自己约定的token，需要与网页上的token对应起来

class Handle(object):
def GET(self): #执行GET方法
data = web.input()
if len(data) == 0: # data 为空一般是从网页传来的无参数的GET方法
return 'Hello, this is handle view'
signature = data.signature # signature是发送过来的密文
timestamp = data.timestamp
nonce = data.nonce
echostr = data.echostr # echostr是如果对应成功服务器想要的结果
token = MYTOKEN
lst = [token, timestamp, nonce] # 自己约定的token，微信端发来的timestamp和nonce就是三个将被加密的明文
# 加密的方式是，先对三个字符串排序，再按顺序从小到大经过sha1加密
for i in range(len(lst)): # 官方的Wiki用的是map，因为是py2的代码，所以map能实现这个for循环的功能，然而在py3中map是不能达到此功能的
lst[i] = bytes(str(lst[i]), encoding='utf8')
lst.sort()
sha1 = hashlib.sha1()
for each in lst:
sha1.update(each)
hashcode = sha1.hexdigest() # hashcode就是最终加密的结果
print('handle/GET func: hashcode, signature: ', hashcode, signature)
if hashcode == signat
4000
ure:
return echostr # 对应成功则发送给服务器
else:
return "" # 对应失败发送任意字符表示失败

# -*- coding: utf-8 -*-
# filename: main.py

import web
from handle import Handle
urls = ('/wx', 'Handle')

if __name__ == '__main__':
app = web.application(urls, globals())
app.run() #让自己的服务器运行起来，接受微信服务器的GET方法并返回数据

最后在命令行执行 python3 main.py 80 ，再在网页中点确认即可。

关于微信的 API 的使用，找了个做过的大佬请教了一下，在博客上记录一下最基本的东西。

1. access_token ： access_token 是获得所有微信公众号 API 权限的凭据。首先需要请求一个网址获得一个 ‘code’ 值，在根据 ‘code’ 值再请求一个网址获得access_token。access_token的对象是一个公众号

2. OpenID ： 一个微信用户在多个不同公众号上会对应多个 OpenID ，OpenID 是公众号用来识别用户的一个 ID ，对于未认证公众号不开放。

四、css单位

ch —- 一个数字字符或半个中文字符的宽度

em —- 2em代表当前字符的两倍宽度，相当于 ‘%’

px —- 一个像素的宽度

vh —- 把当前窗口的高度分成 100 份，1vh 就是一份高度

vw —- 把当前窗口的宽度分成 100 份，1vw 就是一份宽度

vm —- vh和vw中取较小的那个

五、HTML新学到的东西

多媒体元素

在 H5 中，要播放视频或音频，vedio 和 audio 标签兼容性较高。

<vedio src='URL' controls autoplay loop muted poster='URL' width='200px' height='200px'>
若无法正常显示则出现此文本
</vedio>
<!-- src表示视频的地址，controls表示是否让用户控制视频播放（暂停等功能），poster表示视频加载前显示的图片 -->

<audio src='URL' controls autoplay loop muted>
若音频无法播放，则显示此文本
</audio>
<!-- 各个属性参照上面video标签 -->

label 标签

把 input 标签用 label 标签包起来，可以更方便的实现 input 文本输入的焦点获得。

好吧说白点就是 input 的文本输入用 label 包起来后，点击 label 标签内的任意元素（文字等），input 输入框都可以获得焦点。

<label> 点击此文本可以获得输入框焦点 <input type="text"> </label>

让背景不随滑轮的滚动而变化：

body {
background-attachment: fixed
}

六、CSS新学到的东西

一个标签可以有多个 class ，同时受到 css 文件中多个 class 的效果

子类选择器：

#p span{ <!-- 只有p标签里的所有span标签会受到此选择器的效果 -->
font-size=18px;
}
<!-- 注意中间是空格 -->

同时针对多个类型选择器

#idValue1, .classValue1, #idValue2 { <!-- 多个类型选择器用逗号隔开，都会受到同样效果 -->
font-size=15px;
}

ol 或者 ul 的 css 属性中的 list-style 中可以设置开头标志是空心圆、实心圆或者自定义图片，还可以设置开头标志 inside 或者 outsize。

注：list-style-img 与 style-list-type 不能同时出现。

<ol style="list-style: url(./img/xx.jpg) outside">
<option> op1 </option>
</ol>

float ：不改变当前标签的上下位置，而让标签向你希望的方向漂浮，常用于将多个块级标签放在一排。

与此相对的有 clear ，有标签 float 后，下面的标签会往上凑，会导致下面的标签被 float 的标签覆盖，如果不想覆盖，而放在 float 标签的下面，需要增加新放上去的标签一个 clear : both / left / right 属性。