文章目录
一、项目技术架构
1.三个应用
- 小慕读书管理后台(管理电子书)
- 小慕读书小程序(查阅电子书)
- 小慕读书h5(提供阅读器)
2.项目目标
- 完全在本地搭建开发环境
- 贴近企业真实应用场景
- 依赖别人提供的 API 将无法真正理解项目的运作逻辑
二、技术难点分析
1.登录
- 用户名密码校验
- token 生成、校验和路由过滤
- 前端 token 校验和重定向
2.电子书上传
- 文件上传
- 静态资源服务器
3.电子书解析
- epub 原理
- zip 解压
- xml 解析
4.电子书增删改
- mysql 数据库应用
- 前后端异常处理
5.epub 电子书
- epub 是一种电子书格式,它的本质是一个 zip 压缩包
参考:
- 找到一本epub电子书,后缀名修改为
.zip
; - 解压后会发现有一个图片目录,好多html文件、一些css还有几个其他文件和目录;
- 图片主要包括封面和配图;
- html是图书文字内容;
- mimetype文件(资源类型):application/epub+zip;
- META-INF/container.xml:容器信息,主要用于告诉阅读器,电子书的根文件(rootfile)的路径和打开格式;
- content.opf:OPF文档是epub的核心文件,且是一个标准的xml文件,主要文件内容如下:
-
:图书元数据信息(标题、语言、作者、出版社等) - :图书的资源文件,以及相关格式定义
- :定义了图书阅读顺序(封面=>目录=>内容…)
- :图书摘要,非必须项
- :导读,非必须项
-
- toc.ncx(★):目录文件(xml格式)
拓展:
三、Nginx 服务器搭建
1.安装 nginx
- windows 通过下载官网安装包,下载地址:http://nginx.org/en/download.html
- mac 通过 brew 安装,参考:https://www.jianshu.com/p/c3294887c6b6
使用 macOS 的同学可能会碰到无法写入 /usr/local 问题,后面会提供解决方法
2.修改配置文件
- 打开配置文件 nginx.conf:
- windows 位于安装目录下
- macOS 位于:/usr/local/etc/nginx/nginx.conf
- 修改一:添加当前登录用户为owner
user aimooc owner;
- 修改二:在结尾大括号之前添加:
include C:/Users/AImooc-Oliver/upload/upload.conf; #mac用户添加 include /Users/sam/upload/upload.conf;
这里 C:/Users/AImooc-Oliver/upload
是资源文件路径,C:/Users/AImooc-Oliver/upload/upload.conf
是额外的配置文件,当然把 C:/Users/AImooc-Oliver/upload/upload.conf
配置文件的内容加入 nginx.conf 也是可行的!
使用 windows 的同学可能会碰到路径配置错误导致 500 的情况,最后一节有解法
- 修改三:添加 C:/Users/AImooc-Oliver/upload/upload.conf 文件,配置如下:
server
{
charset utf-8;
listen 8089;
server_name http_host;
root C:/Users/AImooc-Oliver/upload;
autoindex on; # 自动打开索引
add_header Cache-Control "no-cache, must-revalidate"; # 客户端缓存设置
location / { # 对所有路由生效的配置
add_header Access-Control-Allow-Origin *; # 防止跨域(生产环境需改为实际域名)
}
}
如果需要加入 https 服务,可以再添加一个 server:
server
{
listen 443 default ssl;
server_name https_host;
root C:/Users/AImooc-Oliver/upload;
autoindex on;
add_header Cache-Control "no-cache, must-revalidate";
location / {
add_header Access-Control-Allow-Origin *;
}
ssl_certificate C:/Users/AImooc-Oliver/https/book.aimooc.top.pem;
ssl_certificate_key C:/Users/AImooc-Oliver/https/book.aimooc.top.key;
ssl_session_timeout 5m;
ssl_protocols SSLv3 TLSv1;
ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
ssl_prefer_server_ciphers on;
}
往下翻到五、阿里云https证书申请与部署
- https证书:C:/Users/AImooc-Oliver/https/book.aimooc.top.pem
- https:私钥:C:/Users/AImooc-Oliver/https/book.aimooc.top.key
- 静态资源配置只能放在 location / 中,访问地址:http://localhost:8089
- 修改四:修改hosts文件
- 打开目录:C:\Windows\System32\drivers\etc\hosts
- 最下面追加
127.0.0.1 dev.book.xxx.xxx
3.启动服务
- 启动 nginx 服务:
start nginx # windows下
sudo nginx # mac下
- 重启 nginx 服务:
./nginx -s reload # windows下
sudo nginx -s reload # mac下
- 停止 nginx 服务(快速停止nginx) :
./nginx -s stop # windows下
sudo nginx -s stop # mac下
- 退出nginx(完整有序的停止nginx):
./nginx -s quit # windows下
sudo nginx -s quit # mac下
taskkill /f /t /im nginx.exe
也可快速结束任务
- 检查配置文件是否存在语法错误:
./nginx -t # windows下
sudo nginx -t # mac下
- 检查80端口是否被占用:
netstat -ano | findstr 0.0.0.0:80 # 或 netstat -ano | findstr "80"
- Windows cmd下输入,检查启动情况
tasklist /fi "imagename eq nginx.exe"
git bash或linux中输入
tasklist -fi "imagename eq nginx.exe"
- upload目录访问地址:
http: http://localhost:8089
# https: https://localhost
https 会提示证书有风险,不用理会,直接选择继续访问即可
拓展:
- windows下配置nginx环境
- Nginx 配置详解 | 菜鸟教程
- Nginx include和Nginx指令的使用 - 博客园
- Nginx user 配置引发的血案 - 大象笔记
- Windows下Nginx的配置及配置文件部分介绍_脚本之家
4.资源文件
- 资源文件下载地址:
https://pan.baidu.com/s/1x2N7vl8nd2x6x7FnlQH3Cg#list/path=%2F
提取码:ksjv
- 将 epub 和 epub2 目录放入 C:/Users/AImooc-Oliver/upload/
5.常见问题
(1)解决 macOS operation not permitted 问题
- macOS 从 El Capitan(10.11)后加入了 Rootless 机制,很多系统目录不再能够随心所欲的读写了,即使设置 root 权限也不行,解决方法:
- 重启按住 Command+R,进入恢复模式,打开 Terminal:
csrutil disable
- 之后再次进入系统就可以获得修改 /usr 的写入权限了,打开 csrutil 方法是进入恢复模式,在 Terminal 中:
csrutil enable
(2)解决 Windows 同学路径配置错误启动出现 500 异常
- windows 中不允许在 nginx 配置文件中出现转义字符,比如 \resource 这样的路径会被编译为:esrouce,从而导致 nginx 启动异常,我们可以更换文件夹名称来解决这个问题。
(3)如何申请 https 证书
- 阿里云提供免费的 https 证书申请,首先需要申请域名,并完成域名实名认证
四、MySQL 数据库搭建
1.安装 MySQL
- 下载地址:https://dev.mysql.com/downloads/mysql/
- 解压到本地目录
- 配置环境变量(我的电脑-右键-属性-环境变量)
- 创建系统变量
MYSQL_HOME
,变量值为mysql所在路径D:\Program Files\mysql-8.0.19-winx64
- 在系统变量Path中新建一条
%MYSQL_HOME%\bin
- 创建系统变量
- 在安装目录下创建一个my.ini文件:
[mysqld]
# 设置3306端口
port=3306
# 设置mysql的安装目录
basedir=D:\\Program Files\mysql-8.0.19-winx64
# 设置mysql数据库的数据的存放目录
datadir=D:\\Program Files\mysql-8.0.19-winx64\Data
# 允许最大连接数
max_connections=200
# 允许连接失败的次数(防止有人攻击数据库系统)
max_connect_errors=10
# 服务端使用的字符集默认为UTF8
character-set-server=utf8
# 创建新表时将使用的默认存储引擎
default-storage-engine=INNODB
# 默认使用“mysql_native_password”插件认证
default_authentication_plugin=mysql_native_password
[mysql]
# 设置mysql客户端默认字符集
default-character-set=utf8
[client]
# 设置mysql客户端连接服务端时默认使用的端口
port=3306
default-character-set=utf8
- 以管理员身份打开cmd:
- 进入安装目录:
cd D:\Program Files\mysql-8.0.19-winx64
- 初始化mysql
mysqld --initialize --console
PS:一定要记住初始密码,一会儿需要修改初始密码(比如我这里是:3pqP%Awhe2AP)
如果手残关掉太快了,可以把datadir(即我这里的Data文件夹)删掉,再初始化一次.
- 开始安装MySQL服务,假如服务名字为mysql8,则输入命令:
mysqld install mysql8
- 启动服务:net start Mysql8
关闭服务:net stop Mysql8
- 登陆
mysql -u root -p
回车之后会提示输入密码,这时就使用之前记住的初始密码登录
- 然后开始修改密码,输入如下命令:
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '新密码';
- 输入
quit
退出登录:
- 使用新密码登录:
mysql -u root -p
******
- 查看用户信息:
select user,host,authentication_string from mysql.user;
- 可以看见此时数据库的root用户仅限localhost登录访问。如果要允许开放其他ip登录,则需要添加新的host。如果要允许所有ip访问,可以直接修改成"%":
use mysql;
select user,host from user;
update user set host='%' where user='root';
flush privileges;
PS:最后一句很重要,目的是使修改生效,如果没有写,则还是不能进行远程连接。
这条命令本质上的作用是:将当前user和privilige表中的用户信息/权限设置从mysql库(MySQL数据库的内置库)中提取到内存里。
- 授权处理(需要授权的话上面一步可以省略)
grant all privileges on *.* to 'root'@'%' with grant option;
查看结果:
- 不写
with grant option
,报错:
- 多写了
dentified by 'root用户密码'
,报错:
- mysql8.0 引入了新特性 caching_sha2_password;这种密码加密方式客户端不支持;客户端支持的是mysql_native_password 这种加密方式;可以用如下语句查看加密方式:
select host,user,plugin from user;
- 查询结果:
- 如果不是,可以使用命令修改为mysql_native_password加密模式:
update user set plugin='mysql_native_password' where user='root';
- 再次连接的时候,就成功了。
- mac 安装可参考:https://blog.csdn.net/qq_25628891/article/details/88431942
2.安装配置 Navicat
- 官网下载地址:https://www.navicat.com.cn/products
- 也可以下载免安装版的:navicat for mysql中文版下载
- 下载后,解压到自己常用目录
- 接下来运行Navicat for MySQL\navicat.exe,点击 帮助-注册即安装成功。
- 输入连接名和密码,测试连接
- 查看表中数据
3. 创建数据库并导入数据
- 创建数据库
book
,字符集utf8 -- UTF-8 Unicode
,排序规则utf8_general_ci
- 下载 book.sql:
https://www.youbaobao.xyz/resource/admin/book.sql - 执行 book.sql 导入数据
- 刷新即可看到如下:
五、阿里云https证书申请与部署
1.证书申请
- 登录阿里云官网:https://www.aliyun.com/
- 搜索ssl,点进第一个搜索结果
- 滑到底
- 选择免费证书,点击购买
- 再次点击立即购买
- 去支付
- 确认支付
- 支付成功,返回证书控制台
- 未签发栏下点击证书申请
- 填写申请需要的相关内容,点击下一步:
- 进行信息验证(上面勾选了自动DNS验证的话这里就可以直接点击认证,系统已经为我们自动添加了DNS解析记录)
- 显示验证成功,点击提交审核
- 接下来就是等待。。。
- 闪现。。证书已签发
2.证书部署
- 下载证书
- 解压到相应目录
- https证书:C:/Users/AImooc-Oliver/https/book.aimooc.top.pem
- https:私钥:C:/Users/AImooc-Oliver/https/book.aimooc.top.key
- 按照:三、Nginx服务器搭建 2.修改配置文件 的 修改三中关于https的说明进行配置
server
{
listen 443 default ssl;
server_name https_host;
root C:/Users/AImooc-Oliver/upload;
autoindex on;
add_header Cache-Control "no-cache, must-revalidate";
location / {
add_header Access-Control-Allow-Origin *;
}
ssl_certificate C:/Users/AImooc-Oliver/https/book.aimooc.top.pem;
ssl_certificate_key C:/Users/AImooc-Oliver/https/book.aimooc.top.key;
ssl_session_timeout 5m;
ssl_protocols SSLv3 TLSv1;
ssl_ciphers ALL:!ADH:!EXPORT56:RC4+RSA:+HIGH:+MEDIUM:+LOW:+SSLv2:+EXP;
ssl_prefer_server_ciphers on;
}
- 保存,重启nginx,访问域名
- 然后看到如下,即成功!!!
linux,远程服务器也是相似的操作步骤
拓展: