2.前端-环境搭建-目录结构
一.前端环境搭建
1.VsCode
我下载了中文插件，直接在插件中搜索中文就有了
2.Node.js：不能低于16
环境安装教程：Node.js下载安装及环境配置教程
node -v
npm -v
3.创建工作区
1.创建一个文件夹
2.打开到vscode
3.保存工作区
有了这个文件，就成功了👩❤️💋👩
4.搭建后台环境--使用Element-Admin
Element-vue2官网：Element - 网站快速成型工具
Element-plas官网：一个 Vue 3 UI 框架 | Element Plus
Element-admin：Vue3-Element-Admin
要求：
在线演示：Vue3 Element Admin
1.开始搭建：
第一个方法：
下载：https://github.com/huzhushan/vue3-element-admin/archive/refs/heads/master.zip
解压—>改名Element-admin—>添加到工作区
根据配置文件
下载依赖
在这个目录下：
报错：如果在cmd命令行可以用npm在VsCode里报错，则电脑需要重启，大概是刚配好环境变量的问题
运行：
npm install如果下载很慢，就用镜像安装： 国内npm源镜像（npm加速下载） 指定npm镜像_npm 国内镜像_夜空孤狼啸的博客-CSDN博客
比如我用淘宝的：
npm install https://registry.npmmirror.com
报错：之前下载的依赖和缓存，有破损
解决：
解决命令：清除之前下载的依赖，和缓存
rm -rf node_modules
npm cache clean 问题解决不了，不浪费时间，启动第二套方案
第二个方法：
官方提供：快速上手 | Vue3-Element-Admin (gitee.io)
回到这一步：
需要安装GIt：Git下载与安装-CSDN博客
Git镜像：git clone 换源 / GitHub 国内镜像_面里多加汤的博客-CSDN博客
重启vsCode，命令行输入git这样就对了
下载项目：
git clone https://github.com/huzhushan/vue3-element-admin.git如果超时多试几次，或开科技 ，我是把电脑连的我手机的热点，用流量就好了
就不改名了直接下载依赖，方法和上一个方法一样：
等待。。。。。。。。。。。。。
这样应该是可以了，又好像报错了：参考：run `npm fund` for details解决，前端开发：项目运行npm install 提示XXX ...for funding run `npm fund`...的解决方法-CSDN博客
不管了就这样吧
官方说：
测试一下：执行npm run dev
启动后白屏。。。。。。。。。。。。。。。。。。
看来没有成功，继续往下看：
5.修复bug
老师说这个模板自带一个bug................（我的法克）
找到这个js，修改
import { TOKEN } from '@/store/modules/app' // TOKEN变量名import { TOKEN } from '@/pinia/modules/app' // TOKEN变量名 
虽然还有两个警告，，好像是什么组件没有被使用，不用管他
但是启动成功
6.项目结构
mock // 用于测试，模拟后端接口地址
public // 存储公共的静态资源：图片
src // 源代码目录，非常重要
| api // 提供用于请求后端接口的js文件
| assets // 存储静态资源：图片、css
| components // 存储公共组件,可重用的一些组件
| directive // 存储自定义的一些指令
| hooks // 存储自定义的钩子函数
| i18n // 存储用于国际化的js文件
| layout // 存储首页布局组件
| pinia // 用于进行全局状态管理
| router // 存储用于进行路由的js文件
| utils // 存储工具类的js文件
| views // 和路由绑定的组件
| App.vue // 根组件
| default-settings.js // 默认设置的js文件
| error-log.js // 错误日志js文件
| global-components.js // 全局组件的js文件
| main.js // 入口js文件(非常重要)
| permission.js // 权限相关的js文件(路由前置守卫、路由后置守卫)
vite.config.js // vite的配置文件，可以在该配置文件中配置前端工程的端口号后端环境要安装 ： mysql8.30 ，和redis 7.0
强烈推荐使用第一种方法，若无法配置再用以此类推,也越来越简单
第一种方法:
一.安装VMvare
1.下载vmware我用的17pro，下载地址：下载 VMware Workstation Pro | CN
2.激活：vmware17许可证密钥匙
我用的是：NZ4RR-FTK5H-H81C1-Q30QH-1V2LA
嘿嘿嘿😆
3.安装CentOS镜像
虽然这个镜像已经停更了，但是还是挺好用的
1.下载镜像
然后需要手动下载镜像：CentOS8国内镜像下载地址_centos 8 企业版 国内下载-CSDN博客
我用的镜像：https://mirrors.aliyun.com/centos/8/isos/x86_64/CentOS-8.5.2111-x86_64-boot.iso
2.安装开始
按这个教程一步步来： 虚拟机VMware安装docker完成个人web项目部署_docker vmware用哪个-CSDN博客、
选择镜像安装：
我安装的是这个：
我安装好了，选择Contos8，等一会：（按参考文章走，有图有文）
3.安装软件源
我卡在了这里：参考：CentOS8下载及设置安装源(最新设置)_centos8安装源设置_li.siyuan的博客-CSDN博客
我用的是：https://mirrors.aliyun.com/centos/8-stream/BaseOS/x86_64/os/
软件列表为了不出问题全选，并选择可视化（没图了）反正肯定是最后一个
4.打开网络连接
这个一定一定要打开网络开关，否则没有网啥也搞不了，，我第一次没打开，重装了一遍系统
其他的一路跟着教程安装就行了！！！
4.配置网络
先打开自带的火狐浏览器试一下有没有网，如果没有
首先保证我上面说的那个开关打开了
如果没有网络：（虚拟网络适配器是vm自带的可以按win键搜索的到）
打开浏览器看一下，是否能联网，
5.禁用测缓通道
（提升速度）
如果出现，
参考：vmware关闭侧通道缓解(windows端)-CSDN博客
需要关闭侧缓通道：如果是灰色
需要先关机
参考：VMWARE虚拟机提示 "您正在运行的此虚拟机已启用侧通道缓解。侧通道缓解可增强安全性，但也会降低性能"" - 木古白水 - 博客园 (cnblogs.com)
如果第一个方法不能用再参考这一篇，推荐第一个：VMware问题：为启用了Hyper-V的主机禁用侧通道缓解_vmware侧通道缓解需不需要关闭-CSDN博客
5.设置虚拟机核
（提升速度）
6.切换yum源
用到的换，用不到可以不换，后面安装docker时也会换（那个方法可能更简单）
参考：Centos7更换yum国内源教程_centos7更换yum源-CSDN博客
到此，vw虚拟机就安装完成了，，其他镜像安装也差不多。。。
三.下载WindTerm
1.下载安装
我们需要安装一共远程连接的ssh工具便于操作docker: 【远程工具】- WindTerm 下载、安装、使用、配置【Telnet/ssh/Serial】-免安装、解压即用-CSDN博客
下载地址不好找：滚动到最下面，并且不能是预发行版本，
下载好启动：
四.连接vm和windterm
1.打开ssh找到ip
虚拟机需要开机，
右键配置ssh
2.点击连接后出现cmd界面，复制ip地址
或者虚拟机内部：
3.打开windTerm，填上ip和端口
输入你虚拟机的账户和密码
这样就成功了
五.安装docker
其他：kali下对Docker的详细安装_怎么在kali安装docker-CSDN博客
1. 按照这个教程走：
Docker安装指南——如何在Linux中安装Docker？（最新2022-2 for centOS stream 8）_linux安装docker-CSDN博客
他里面的这个sudo yum install docker-ce 改成： sudo yum install docker-ce --allowerasing 覆盖安装稳定版本
最后看版本号是：docker version ，能够出现版本就对了
六.docker安装mysql8.30
1. 需要换源, 否则访问超时
换源：docker换源（docker镜像源）pull超时（pull镜像超时）/etc/docker/daemon.json_docker pull
命令行，修改配置文件，并重启docker：
sudo tee /etc/docker/daemon.json <<-'EOF'
{
"debug": true,
"experimental": false,
"insecure-registries": [],
"registry-mirrors": [
"http://hub-mirror.c.163.com",
"https://docker.mirrors.ustc.edu.cn"
]
}
EOF
sudo systemctl daemon-reload
sudo systemctl restart docker
2. 拉取mysql8.30镜像
docker pull mysql:8.0.30
3.如果:
出现这个
，说明当前用户组没有root'权限
执行这个：需要逐条执行，不能一起执行
sudo groupadd docker #添加用户组sudo gpasswd -a ${USER} docker #将当前用户添加至用户组newgrp docker #更新用户组
Docker提示permission denied的解决方案_docker permission-CSDN博客
4.创建容器：启动mysql
端口 和 密码自己改
docker run -d --name mysql -p 3306:3306 -v mysql_data:/var/lib/mysql -v mysql_conf:/etc/mysql --restart=always --privileged=true -e MYSQL_ROOT_PASSWORD=1234 mysql:8.0.30 
出现一串编码就成功了
4.修改mysql密码
1. 执行：查看id
docker ps
2.复制前面的编码，执行进入mysql容器
sudo docker exec -it 89ef00687530 bash3.执行：连接数据库
mysql -uroot -p 密码默认是我们创建容器的时候设置的密码， 这是密码错误：别被yes误导
正确是这样：
4.修改密码，我还是用的1234
ALTER USER 'root'@'%' IDENTIFIED WITH mysql_native_password BY '1234';
exit退出
七.docker安装Rebis7.0
1.拉取镜像：
docker pull redis:7.0.10 
2.创建卷轴：
docker volume create redis-config3.创建配置文件,打开持久化
到这个目录下，编辑这个文件：
cd /var/lib/docker/volumes/redis-config/_data/
vim redis.conf文件内容：
#开启持久化
appendonly yes
port 6379
# requirepass 1234
bind 0.0.0.0保存退出：方式：linux系统中如何退出vim编辑模式_linux中vim怎么退出编辑模式-CSDN博客
到虚拟机里检查了一下：ok了
4.创建容器，启动redis
出现：See 'docker run --help'.表示docker没有启动，先启动容器，或者docker中已经有了这个容器，不用再启动了
docker run -d -p 6379:6379 --restart=always -v redis-config:/etc/redis/config -v redis-data:/data --name redis redis redis-server /etc/redis/config/redis.conf会自动安装这个library，出现编码就行了
八.删除容器的方法：
docker rm -f 89ef00687530
第二种方法：
1.安装docker
先看一下宝塔上有没有
没有算了
参考：Windows10 Docker安装详细教程 - 追逐时光者 - 博客园 (cnblogs.com)
下载地址：Get Started | Docker
刚下下来一直转圈圈，重启了大约五六次才好，也有人说登录就好了，但是我没有登录也成功了！！
2.修改镜像源：
{
"debug": true,
"experimental": false,
"insecure-registries": [],
"registry-mirrors": [
"http://hub-mirror.c.163.com",
"https://docker.mirrors.ustc.edu.cn"
]
}
打开电脑的：shell ，输入docker不报错就行了
3.打开电脑shell ，安装mysql8.30
1.拉取镜像
# 拉取镜像
docker pull mysql:8.0.30
2.安装完成后：打开mysql 端口3306
# 创建容器
docker run -d --name mysql -p 3306:3306 -v mysql_data:/var/lib/mysql -v mysql_conf:/etc/mysql --restart=always --privileged=true -e MYSQL_ROOT_PASSWORD=1234 mysql:8.0.303.输入docker ps 查看当前运行的服务：出现这样就成功了
如果没有出现可以用可视化界面调试一下
4.打开电脑shell ，安装redis7.0
1.拉取镜像
docker pull redis:7.0.10
2.修改redis配置
手动创建配置文件文件夹
能对应的上下面的命令行
并在conf文件夹下创建
内容是：
#开启持久化
appendonly yes
port 6379
# requirepass 1234
bind 0.0.0.03.启动
运行：(开启了持久化，并设置密码为：root)
docker run --name redis -p 6379:6379 -v /Z/docker/redis/conf/redis_6379.conf:/etc/redis/redis_6379.conf -v /Z/docker/redis/data:/data/ -d redis:latest redis-server /etc/redis/redis_6379.conf --requirepass "root" --appendonly yes 完成后输出很长一段字
并且检查配置文件是否加载
或再我们的data目录下是否生成文件
符合要求就成功了：运行会自动下载redis:latest
第三种方法：
1.首先下载宝塔
本地安装的话，我建议下载一个宝塔宝塔面板 - 简单好用的Linux/Windows服务器运维管理面板 (bt.cn)
，然后用宝塔里一键安装，方便管理的同时，防止出错
2.安装redis
宝塔只有更新到5.0，有的系统会高一点，如果版本低再，想办法手动安装吧
设置为
三。安装Navicat数据库操作，并连接数据库
然后安装Navicat数据库可视化工具Navicat Premium 16 永久破解激活 - 酷酷的阿杰 - 博客园 (cnblogs.com)
显示这个就是，版本太高
可破解的版本：https://download.navicat.com.cn/download/navicat160_premium_cs_x64.exe
连接上数据库，变成
绿色就成功了
如果数据库是在虚拟机里, 这里的主机地址和我们的SSH是相同的
最终可以点开这个：灰色的点亮就成功了
四。创建数据库数据
直接导入准备好的数据库，里面有数据：https://zhe--xin--ke--ji.lanzouw.com/ihsNA1g9w1rc
到这个界面直接把下载的拖进来
完成后右键刷新一下就会出现：就成功了
若是其他数据库管理工具不支持sql文件运行，可以复制sql里的数据，直接再数据库上运行，效果一样
数据库的内容描述
和我用的一样的 ：navicat16可以看到到，sql脚本里也有
五.下载Redis管理工具
参考:RedisDesktopManager2021.7 - 『精品软件区』 - 吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn
直接下载安装即可
打开连上你虚拟机的 ip, 和数据库的一样 , 接口就是你的redis接口
可以用命令: docker ps 查看
六、安装Minio
1.安装
参考： docker搭建最新minio访问不了页面解决及注意事项_linux中minio已启动,但页面无法访问_ouyang_zhen的博客-CSDN博
//拉取镜像
docker pull quay.io/minio/minio
// 创建数据存储目录
mkdir -p ~/minio/data
// 创建minio
docker run \
-p 9001:9000 \
-p 9090:9090 \
--name minio \
-v ~/minio/data:/data \
-e "MINIO_ROOT_USER=admin" \
-e "MINIO_ROOT_PASSWORD=admin123456" \
-d \
quay.io/minio/minio server /data --console-address ":9090"密码不能少于8位
账号密码：
2. 看到这个才行：
没有端口号，参考：Docker(八)Container无法正常启动Restarting (1) Less than a second ago的原因及解决办法_凝眸伏笔的博客-CSDN博客
3.创建桶
输入
，输入账号密码
创建一个桶：
查看镜像： docker images
删除镜像：docker rmi -f 镜像id
删除容器：docker rm -f 容器id
重启：sudo systemctl restart docker
运行中的容器： docker ps
linux查看端口：netstat -anp
linux查看指定端口： netstat -nltp|grep id
linux关闭进程：sudo kill -9 id
浙公网安备 33010602011771号