项目需求分析 | 「小慕读书」管理后台

一、项目技术架构

1.三个应用

小慕读书管理后台（管理电子书）
小慕读书小程序（查阅电子书）
小慕读书h5（提供阅读器）

2.项目目标

完全在本地搭建开发环境
贴近企业真实应用场景
依赖别人提供的 API 将无法真正理解项目的运作逻辑

二、技术难点分析

1.登录

用户名密码校验
token 生成、校验和路由过滤
前端 token 校验和重定向

2.电子书上传

文件上传
静态资源服务器

3.电子书解析

epub 原理
zip 解压
xml 解析

4.电子书增删改

mysql 数据库应用
前后端异常处理

5.epub 电子书

epub 是一种电子书格式，它的本质是一个 zip 压缩包

参考：

免费课 2-1：快速入门Web阅读器开发

实战课 2-2：Vue2.5 实战微信读书

找到一本epub电子书，后缀名修改为.zip；
解压后会发现有一个图片目录，好多html文件、一些css还有几个其他文件和目录；
图片主要包括封面和配图；
html是图书文字内容；
mimetype文件（资源类型）：application/epub+zip；
META-INF/container.xml：容器信息，主要用于告诉阅读器，电子书的根文件（rootfile）的路径和打开格式；
content.opf：OPF文档是epub的核心文件，且是一个标准的xml文件，主要文件内容如下：
- ：图书元数据信息（标题、语言、作者、出版社等）
- ：图书的资源文件，以及相关格式定义
- ：定义了图书阅读顺序（封面=>目录=>内容…）
- ：图书摘要，非必须项
- ：导读，非必须项
toc.ncx（★）：目录文件（xml格式）

拓展：

三、Nginx 服务器搭建

Nginx中文文档
 Nginx 使用手册_w3cschool

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"

在这里插入图片描述

http: http://localhost:8089
# https: https://localhost

在这里插入图片描述
https 会提示证书有风险，不用理会，直接选择继续访问即可

拓展：

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，远程服务器也是相似的操作步骤

拓展：

ssl证书多级域名单个域名区别与联系 - 简书

onc-virn

发布了30 篇原创文章 · 获赞 79 · 访问量 2万+

私信关注

【笔记】Vue Element+Node.js开发企业通用管理后台系统——项目需求分析

文章目录

一、项目技术架构

1.三个应用

2.项目目标

二、技术难点分析

1.登录

2.电子书上传

3.电子书解析

4.电子书增删改

5.epub 电子书

三、Nginx 服务器搭建

1.安装 nginx

2.修改配置文件

3.启动服务

4.资源文件

5.常见问题

(1)解决 macOS operation not permitted 问题

(2)解决 Windows 同学路径配置错误启动出现 500 异常

(3)如何申请 https 证书

四、MySQL 数据库搭建

1.安装 MySQL

2.安装配置 Navicat

3. 创建数据库并导入数据

五、阿里云https证书申请与部署

1.证书申请

2.证书部署

猜你喜欢