三、Vue组件库从入门到实战

郁子大约 15 分钟约 4497 字

（一）项目准备

1.VSCode 隐藏资源管理器显示的部分文件

配置 setting.json 中的 files.exclude 选项
不希望在文件目录中显示什么文件就配置什么文件

"files.exclude" : {
  "**/.git": true,
  "**/.svn": true,
  "**/.hg": true,
  "**/CVS": true,
  "**/.DS_Store": true,
  // "**/node_modules": true,
  "**/shims-tsx.d.ts": true,
  "**/shims-vue.d.ts": true,
  "**/.browserslistrc": true,
  "**/.eslintrc.js": true,
  "**/.gitignore": true,
  "**/babel.config.js": true,
  "**/package-lock.json": true,
  "**/README.md": true,
  "**/tsconfig.json": true,
  "**/.env": true,
  "**/.env.development": true,
  "**/.env.preview": true,
  "**/.env.production": true,
  "**/.travis.yml": true,
  "**/.env.staging": true,
  "**/.eslintignore": true,
  "**/.editorconfig": true,
  "**/.github": true,
  "**/tests": true,
  "**/jsconfig.json": true,
  "**/jest.config.js": true,
  "**/.postcssrc.js": true,
  "**/d2-admin.babel": true,
  "**/dependencies-cdn.js": true,
  "**/README.zh.md": true,
  "**/LICENSE": true,
  "**/postcss.config.js": true,
  "**/README-zh.md": true,
}

2.服务器地址

https://gitee.com/dev-edu/mysite-serveropen in new window

3.接口地址

https://app.apifox.com/project/2429912open in new window

4.安装 MongoDB 并恢复数据

1）下载

MongoDB 的官网：https://www.mongodb.com/open in new window

会自动根据操作系统选择对应的版本
直接点击 download 进行下载即可

2）安装

Mac 是一个 tgz 格式的压缩包，直接解压
解压后就是安装好的目录，放入到 /usr/local

需要创建几个文件

文件名	说明
data	存储数据的地方所有数据库的所有数据都在这个文件夹里面
mongod.log	日志文件
mongodb.conf	数据库的配置文件需要对这个配置文件进行一些必要的修改，之后让数据库以配置文件的配置来启动

3）配置文件

systemLog:
  # 日志输出方式：file/syslog，如果是file，需指定path，默认是输出到标准输出流中
  destination: file
  # 日志路径
  path: /usr/local/mongodb/mongod.log
  # 启动时，日志追加在已有日志文件内还是备份旧日志后，创建新文件记录日志，默认false
  logAppend: true

net:
  # 监听端口，默认27017
  port: 27017
  # 绑定监听的ip，设置为127.0.0.1时，只会监听本机
  bindIp: 127.0.0.1
  # 最大连接数，可接受的连接数还受限于操作系统配置的最大连接数
  maxIncomingConnections: 65536
  # 校验客户端的请求，防止错误的或无效BSON插入，多层文档嵌套的对象会有轻微性能影响，默认true
  wireObjectCheck: true

processManagement:
  # 后台运行
  fork: true

security:
  # 开启客户端认证：enabled/disabled
  authorization: disabled

storage:
  # 数据库地址
  dbPath: /usr/local/mongodb/data

4）启动

cd 到 MongoDB 的 bin 目录下
该 bin 目录全部都是一些可执行文件

常用命令	说明
`mongod`	启动数据库服务器
`mongo`	是一个命令行工具可以以命令行的形式来操作数据库

mongod -f 配置文件的路径

Mac 需要 ./mongod 找到 mongod 可执行文件， Windows 可以直接 mongod

使用 mongo 可执行命令连接数据库

5）安装可视化工具

一些拥有图形化界面的工具，能够更加方便的操作数据库
可视化工具安装一个就可以了

可视化工具	备注
robo3t	现在官方已经合并到了 stduio3t 里面
stduio3t
compass
navicat	可以连接 mongo、mysql...

创建本地连接

6）下载更多的可执行文件

在 mongodb 下的 bin 目录里面，可执行文件只有几个

需要去官网，下载其他的可执行文件压缩包
下载完成后，解压缩
之后将 bin 文件夹下面的所有可执行文件放入到 mongo 目录下的 bin 目录下即可

7）恢复数据

服务器地址：https://gitee.com/dev-edu/mysite-serveropen in new window

下载服务器后，安装依赖
启动之前，需要先将数据库服务器启动起来
默认会生成一个叫做 mysite 的数据库，里面默认只会初始化三张表
在 mongodb 中，如果连接一个不存在的数据库，会自动创建该数据库
如果往一个不存在的集合（表）里面添加数据，mongodb 就会自动创建该集合（表）

Mongodb.pdf
- 是一个关于 mongodb 的简易教程
mysiteDB.zip
- 是一个压缩包，里面是课堂上使用的数据

恢复数据库数据

mongorestore -h dbhost -d dbname --dir dbdirectory

修饰符	含义
`-h`	MongoDB 所在服务器地址
`-d`	需要恢复的数据库实例例如：test，当然这个名称也可以和备份时候的不一样，比如 test2
`--dir`	备份数据所在位置

要保证在启动了数据库服务器的前提下
先进入到 mongodb 下的 bin 目录

通过可视化工具也可以看到数据恢复成功

8）关于数据库的图片

数据库里面存储图片时，存储的是该图片在服务器所在目录的地址

（二）登录功能制作

1.点击登录按钮后

2.服务器返回数据后

（三）鉴权功能制作

1.vue-element-admin 中的鉴权流程

2.改造后的鉴权流程

router.beforeEach(async (to, from, next) => {
  NProgress.start();
  document.title = getPageTitle(to.meta.title);
  const getUserInfo = store.getters.user;
  if (to.meta.auth) {
    if (getUserInfo) {
      next();
      NProgress.done();
    } else {
      const getToken = localStorage.token;
      if (getToken) {
        try {
          await store.dispatch("user/getInfo");
          next();
          NProgress.done();
        } catch (err) {
          await store.dispatch("user/resetToken");
          Message.error("登录过期，请重新登录");
          next(`/login?redirect=${to.path}`);
          NProgress.done();
        }
      } else {
        next(`/login?redirect=${to.path}`);
        NProgress.done();
      }
    }
  } else {
    if (to.path === "/login" && getUserInfo) {
      next("/");
    } else {
      next();
    }
    NProgress.done();
  }
});

（四）首页标语制作

（五）文章模块制作

1.Markdown 编辑器

toast-ui 官网：https://ui.toast.com/open in new window
vue 版本：https://www.npmjs.com/package/@toast-ui/vue-editoropen in new window

（六）项目管理模块

（七）评论管理和留言板模块

（八）关于我、设置和个人信息模块

（九）项目部署

项目开发完毕后，需要将项目打包、部署到服务器上，供用户使用
常见的部署方式有两种
- 后端部署
- 前后端分离部署

1.后端部署

是最古老的部署方式，也是最常见的一种部署方式
前端只需要将项目打包好，交给后端开发人员即可
后端开发人员会把打包好的项目放到后端的静态资源目录里面

2.前后端分离部署

随着前后端分离开发模式的流行，现在可以采用前后端分离部署的形式
- 后端部署后端服务器的代码
- 前端将打包好的资源，部署到前端的服务器上面
大多采用 Node.js 或者 Nginx 来做静态资源部署
用户在做请求的时候，从前端服务器请求静态资源，然后从后端服务器获取数据

3.部署具体流程

1）阿里云购买服务器

阿里云：https://www.aliyun.com/open in new window

注册账号
选择云服务器 ECS ，点击查看详情

立即购买

选择一键购买

镜像选择 CentOS
进入到 Linux 系统后，使用命令操作

常用命令	说明
ls	查看当前目录下的文件
exit	退出系统
clear	清屏
touch	创建文件如：`touch 文件名`
mkdir	创建目录如：`mkdir 目录名称`
mv	移动目录或者文件如：`mv 要移动的文件或者目录要移动到哪儿`
`rm -rf 要删除的目录或者文件名`	删除目录或者文件

本地连接云服务器

ssh -p 22 root@xxx.xxx.xxx.xxx

2）安装 Node.js

安装 Node.js：https://help.aliyun.com/document_detail/50775.htmlopen in new window

3）安装 MongoDB

安装依赖库

yum -y install pcre*
yum -y install openssl*

下载

curl -O https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-4.2.1.tgz

解压

tar zxvf mongodb-linux-x86_64-4.2.1.tgz

移动

mv mongodb-linux-x86_64-4.2.1/ /usr/local/mongodb

创建数据文件夹、日志文件和 mongo 配置文件

mkdir -p  /usr/local/mongodb/data/db
touch /usr/local/mongodb/mongod.log
touch /usr/local/mongodb/mongodb.conf

在配置文件中加入如下代码

dbpath=/usr/local/mongodb/data/db
logpath=/usr/local/mongodb/log/mongod.log
logappend = true
port = 27017
fork = true
auth = true

切换到 mongodb 的 bin 下

启动

./mongod --dbpath /usr/local/mongodb/data/db

指定所有的 ip 都可以连接上
- 只是暂时的，项目部署上去后要关闭

mongod -dbpath=/usr/local/mongodb/data/db --bind_ip 0.0.0.0

可能遇到的错误以及解决方案

Segmentation fault (core dumped)
- https://blog.csdn.net/weixin_44320761/article/details/107671990open in new window
error while loading shared libraries: libssl.so.10
- libssl.so.10 缺失库文件
- https://blog.csdn.net/xcyja/article/details/115357818open in new window

4）上传服务器代码以及数据库数据

导出数据库的数据

Windows 系统，参阅：https://www.runoob.com/mongodb/mongodb-mongodump-mongorestore.htmlopen in new window

将打包好的数据库数据压缩包以及服务器代码压缩包（删除 node_modules）上传到云服务器

Windows 系统可以使用 FinalShell，安装，连接服务器，将要上传的文件拖动到对应窗口即可

Mac 系统可以使用自带的 shell 工具
打开 shell 工具，选择新建远程连接

选择安全文件传输（sftp）
填写用户名和对应的服务器的 ip 地址

点击连接

使用命令：put 要上传的文件的地址远程服务器的具体地址

put /Users/Jie/Desktop/dbData.zip /usr/local

解压 zip 压缩包命令：unzip 压缩包名

unzip dbData.zip

启动服务器，进入到服务器目录
安装依赖包， npm start 启动即可

5）安装 Nginx 静态资源服务器

下载依赖

yum -y install pcre*
yum -y install openssl*

下载 wget
- 类似于迅雷，用来下载文件的

yum install wget

下载 nginx

wget http://nginx.org/download/nginx-1.21.1.tar.gz

解压

tar zxvf nginx-1.21.1.tar.gz

./configure

安装

make install

安装完毕后，会在同级目录生成一个 nginx 的目录，这个才是服务器目录

常用命令	含义
nginx	启动
nginx -v	查看版本
nginx -s stop	停止
nginx -s reload	重启

6）打包静态资源

打包前台代码
- 放入 nginx/html 目录下

npm run build

打包后台代码
- 放入 nginx/html/admin 目录下

npm run build:prod

修改 nginx 的配置文件
- 该文件位于 conf/nginx.conf
- 添加代理设置

location / {
  root   html;
  index  index.html index.htm;
  try_files $uri $uri/ /index.html;
}

location /api {
  proxy_pass http://127.0.0.1:7001;
}

location /res {
  proxy_pass http://127.0.0.1:7001;
}

location /static {
  proxy_pass http://127.0.0.1:7001;
}

7）进程守护

在 Linux 中可以使用 nohup command & 把进程挂起
即使退出了远程连接，也能够继续保持进程

nohup npm start &

进程挂起后，使用 exit 命令退出远程连接

8）域名映射

项目已经部署成功了
但是用 IP 访问不太友好
需要进行域名的映射
购买一个域名

购买完成后，点击管理我的域名

找到要映射的域名，点击解析

点击添加记录

记录类型选择 A
主机记录填写 www
记录值填写 IP 地址

9）数据库加密

为了权限接入可用，必须确保有一个用户是 userAdmin 或者 userAdminAnyDatabase 的角色在 admin 数据库里
首先在 admin 数据库里创建用户 root

# 切换 admin 数据库
use admin
db.createUser({user:"root",pwd:"123456",roles:[{role:"userAdminAnyDatabase",db: "admin"}]})

使用命令 db 可以查看当前所使用的数据库

接下来在其他数据库上面创建用户
一定要注意先在 admin 数据库上面使用刚才的超级管理员登录
再进行其他数据库用户的创建

use amdin
db.auth("root","123456")

在 MongoDB 中 admin 数据库是一个特别的数据库
这个数据库的用户，可以访问 MongoDB 中的所有数据库
如果要为其他数据库设置用户，步骤也是一样的
- 首先切换到其他数据库
- 然后创建用户

use 数据库名
db.createUser({user:"用户名",pwd:"密码",roles:[{role:"read",db: "数据库名"},{role:"readWrite",db:"数据库名"}]})

最后执行

db.auth("用户名","密码")

返回 1，说明登录成功
至此，就在数据库上面添加了一个用户，并且设置了账号和密码
修改 MongoDB 的配置文件

systemLog:
  # 日志输出方式：file/syslog，如果是file，需指定path，默认是输出到标准输出流中
  destination: file
  # 日志路径
  path: /usr/local/mongodb/mongod.log
  # 启动时，日志追加在已有日志文件内还是备份旧日志后，创建新文件记录日志，默认false
  logAppend: true

net:
  # 监听端口，默认27017
  port: 27017
  # 绑定监听的ip，设置为127.0.0.1时，只会监听本机
  bindIp: 0.0.0.0
  # 最大连接数，可接受的连接数还受限于操作系统配置的最大连接数
  maxIncomingConnections: 65536
  # 校验客户端的请求，防止错误的或无效BSON插入，多层文档嵌套的对象会有轻微性能影响，默认true
  wireObjectCheck: true

processManagement:
  # 后台运行
  fork: true

security:
  # 开启客户端认证：enabled/disabled
  authorization: enabled

storage:
  # 数据库地址
  dbPath: /usr/local/mongodb/data/db
  #启动journal，64位系统默认开启，32位默认关闭
  journal:
    enabled: true

在启动 MongoDB 时指定读取配置文件

./mongod --config /usr/local/mongodb/mongodb.conf

命令	含义	示例
`lsof -i:端口号`	查看进程的 PID	lsof -i:27017
`kill -9 PID`	停止进程	kill -9 24311

远程连接数据库时，需要输入账号以及密码
在服务器端代码里面，使用 Mongoose 时连接的是有权限的数据库，需要修改连接字符串
mongodb://username:password@ip:port/database?authSource=admin
- testadmin 用户名称
- testadmin123 用户密码
- 88.888.88.888 服务器地址
- 27017 端口号码
- testmongodb 连接的数据库
- ?authSource=admin 权限来源

mongodb://testadmin:testadmin123@88.888.88.888:27017/testmongodb?authSource=admin

至此，可以通过 mongoose 连接数据库

（十）项目部署补充

1.数据库恢复数据

新的 MongoDB 不会包含以前的一大堆命令
所以要恢复数据库，还需要下载命令
根据操作系统下载对应的工具包

2.CentOS Linux 停止维护

CentOS 官方已计划停止维护 CentOS Linux 项目
阿里云上 CentOS Linux 公共镜像来源于 CentOS 官方
当 CentOS Linux 停止维护后，阿里云将会同时停止对该操作系统的支持

具体参阅：https://help.aliyun.com/document_detail/347584.html?spm=5176.11346930configuration.0.0.284e5ca3pjg7iYopen in new window

选择它家自研的 Alibaba Cloud Linux 2.1903 LTS 64
因为做了很多优化，而且全面兼容 RHEL/CentOS 生态，并且这也是官方所提供的一个替代方案

参阅：https://help.aliyun.com/document_detail/172788.htmlopen in new window 部署 Node.js 环境（Alibaba Cloud Linux 2）

fatal: unable to access 'https://github.com/cnpm/nvm.git/': Encountered end of file
- 原因：阿里云服务器未开启 443 端口
- 参阅：https://www.cnblogs.com/pangya/p/15735974.htmlopen in new window

# 开启防火墙
systemctl start firewalld

# 添加 443 端口访问
firewall-cmd --zone=public --add-port=443/tcp --permanent

# 重新加载让配置生效
firewall-cmd --reload

# 查看开启情况，返回 yes 说明已开启
firewall-cmd --zone=public --query-port=443/tcp

3.安装 MongoDB

由于更换了操作系统，所以安装 MongoDB 的方式也和之前有所不同
- Alibaba Cloud Linux 2 对应的是 CentOS7
- Alibaba Cloud Linux 3 对应的是 CentOS8

1）添加 yum 源

使用 yum 命令安装，需要先添加 yum 源

vi /etc/yum.repos.d/mongodb-org-5.0.repo

然后添加如下内容

[mongodb-org-5.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/5.0/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-5.0.asc

在 vi 中，按键盘的 i 键是插入内容，插入完毕后按 ESC 退出，然后输入 :wq 保存并退出

按照官方文档添加了 yum 源文件
执行 yum install -y mongodb-org 命令报错 Error: Failed to download metadata for repo 'mongodb-org-5.0': Cannot download repomd.xml: Status code: 404 for https://repo.mongodb.org/yum/redhat/3/mongodb-org/5.0/x86_64/repodata/repomd.xml
解决办法是将 $releasever 变量直接修改为 Centos 的版本 7

[mongodb-org-5.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/7/mongodb-org/5.0/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-5.0.asc

修改完后再次执行

yum install -y mongodb-org

MongoDB 就能安装成功

2）启动 MongoDB

安装完成后，使用 systemctl 命令启动 MongoDB 服务

# 启动
systemctl start mongod

# 查看状态
systemctl status mongod

# 重新启动
systemctl restart mongod

3）远程连接

先把阿里云的安全组的对应端口打开

点击配置规则

添加 27017 端口，不把这个端口打开，后期本地电脑无法远程连接数据库

首先在云端系统输入 mongo，连接上云端的数据库

进行数据库加密，步骤和上一个文档一样
接下来修改 MongoDB 的配置文件

vi /etc/mongod.conf

将 bingIp 修改为 0.0.0.0 ，这样本地的电脑才能访问到

重新启动 MongoDB

systemctl restart mongod

在本地的 robo3T 就能连接云端数据库

三、Vue组件库从入门到实战

# （一）项目准备

# 1.VSCode 隐藏资源管理器显示的部分文件

# 2.服务器地址

# 3.接口地址

# 4.安装 MongoDB 并恢复数据

# 1）下载

# 2）安装

# 3）配置文件

# 4）启动

# 5）安装可视化工具

# 6）下载更多的可执行文件

# 7）恢复数据

# 8）关于数据库的图片

# （二）登录功能制作

# 1.点击登录按钮后

# 2.服务器返回数据后

# （三）鉴权功能制作

# 1.vue-element-admin 中的鉴权流程

# 2.改造后的鉴权流程

# （四）首页标语制作

# （五）文章模块制作

# 1.Markdown 编辑器

# （六）项目管理模块

# （七）评论管理和留言板模块

# （八）关于我、设置和个人信息模块

# （九）项目部署

# 1.后端部署

# 2.前后端分离部署

# 3.部署具体流程

# 1）阿里云购买服务器

# 2）安装 Node.js

# 3）安装 MongoDB

# 4）上传服务器代码以及数据库数据

# 5）安装 Nginx 静态资源服务器

# 6）打包静态资源

# 7）进程守护

# 8）域名映射

# 9）数据库加密

# （十）项目部署补充

# 1.数据库恢复数据

# 2.CentOS Linux 停止维护

# 3.安装 MongoDB

# 1）添加 yum 源

# 2）启动 MongoDB

# 3）远程连接

（一）项目准备

1.VSCode 隐藏资源管理器显示的部分文件

2.服务器地址

3.接口地址

4.安装 MongoDB 并恢复数据

1）下载

2）安装

3）配置文件

4）启动

5）安装可视化工具

6）下载更多的可执行文件

7）恢复数据

8）关于数据库的图片

（二）登录功能制作

1.点击登录按钮后

2.服务器返回数据后

（三）鉴权功能制作

1.vue-element-admin 中的鉴权流程

2.改造后的鉴权流程

（四）首页标语制作

（五）文章模块制作

1.Markdown 编辑器

（六）项目管理模块

（七）评论管理和留言板模块

（八）关于我、设置和个人信息模块

（九）项目部署

1.后端部署

2.前后端分离部署

3.部署具体流程

1）阿里云购买服务器

2）安装 Node.js

3）安装 MongoDB

4）上传服务器代码以及数据库数据

5）安装 Nginx 静态资源服务器

6）打包静态资源

7）进程守护

8）域名映射

9）数据库加密

（十）项目部署补充

1.数据库恢复数据

2.CentOS Linux 停止维护

3.安装 MongoDB

1）添加 yum 源

2）启动 MongoDB

3）远程连接