[项目实战]Vue小宏商城开发日志 （一）环境配置与搭建
总觉得呢，一直学习字面上的知识有些枯燥，古人曰：实践是代码知识掌握程度的最好体现。所以，今天开始起我要开始自己学习开发一个电商项目，一来是对知识的实践与巩固，另外，也为面试做一些项目经验储备。废话不多说，开始我们“小宏商城”项目日志的第一篇。
本项目学习资源来源于慕课网，我只是在我的 Blog 里记录一下我的学习过程，方便复习与总结。
一、Vue 项目环境配置
1，安装 Node 和 Git
接下来我们需要先下载Node和Git，很简单，去百度一下Node和GitBash的官网，点击下载安装即可。这里要说明一下哈，我们下载时尽可能地选择稳定的版本而不是最新的版本，因为最新的版本可能出现对项目某些模块不支持的情况，再一个，因为是最新版本，出了问题我们能查询的解决方案也是很少的。
当然，下载好了别忘了检查一下
2，安装 Vue-cli 脚手架及初始化 Webpack 项目
npm install -g @vue/cli
vue init webpack XXX
这个地方需要注意，我们在配置的时候尽量不要开启我们的ESLint。开启了之后可能会报一些莫名奇妙的错误，往往是这个ESLint搞得鬼。但是我并不是说他没用哈，这是我们书写代码的格式标杆，当我们逐渐地熟悉了代码操作后，我们再加上就是了。
大家可以给自己的项目起一个好听的名字，把那个 XXX 替换掉。我的就叫 SweetyMall 啦！
3，下载相关依赖
npm install
可是呢，我们的package.json文件并不是那么写的那么全面，我们项目中还要用到很多很重要的插件，在这里我就先下载了vue-resource和axios，以后遇到会及时做出补充
npm install vue-resource --save
npm install axios --save
启动项目
npm run dev
二、数据库相关配置
按正常的套路应该是先搭起来我们的静态页面，然后再与我们的数据库相连接。但是配置这一块我搞了足足两天，遇到了好多 bug，甚至一度以为服务器让我搞坏掉了，不过好在是顺利运行。为了避免再度踩坑，小宏就先进行对整个配置工作的记录。
首先说明一下，我选择了是在腾讯云的服务器上进行安装的。当然，大家也可以选择虚拟机，这是没有问题的，步骤差不多都是一样的。
1，FTP 的安装与配置
FTP 是我们进行本地与服务器文件传输的一个必要手段，是少不了滴
A,安装 vsftpd
yum -y install vsftpd
B,进入配置文件，配置参数
vi /etc/vsftpd/vsftpd.conf
//输入vi命令后，要在非中文输入法敲一下i，书写完成后，先按ESC，再输入:wq即可
//下面指令，部分是存在与默认配置中的，我们只需要改一下值即可，如果没有，在文件的末尾加上就好了。
anonymous_enable=NO
chroot_local_user=YES
allow_writeable_chroot=YES
pasv_enable=YES
pasv_min_port=40000
pasv_max_port=40100
C,开启 ftp 服务
systemctl start vsftpd
//我们可以设置开机自启动，这样就不用我们一直输入start命令了
systemctl enable vsftpd
另外，对于我们使用的服务器来说，我们要进行一些安全组的添加，点击这里. 查看具体的添加步骤（各个厂商的服务器添加方法大同小异）
D,添加用户
//用户名
useradd xiaohong
//密码（会让你再输一次，但是默认密码是不显示的）
passwd xiaohong
E,记得，给自己的项目文件夹添加权限。（切记！）
//我默认把项目放到了/home/www/下，大家如果没有这个目录，可能是没
有下载nginx或者Apache的原因（如果是云服务器的话，这些默认是有的）
chown -R xiaohong:xiaohong /home/www/sweetymall
F,重启 FTP 服务
大致就是这样，但还有一个问题。
正常情况下，我们想在浏览器上访问我们的本地项目，是没什么大问题的。执行npm run dev命令后，我们就能通过访问localhost:8080/来查看我们的项目成品。可是，我们希望在别处也能够访问我们的项目。上传到服务器上不就好了嘛？确实，我们可以把正在开发中的项目或项目成品上传到我们的服务器。但是，当我们对我们的项目进行代码的添加或修改时，仅仅通过shell窗口就很麻烦了。我们希望能像操作本地项目那样操作我们服务器上的项目。那么，FileZilla无疑是不二之选。当然，这种可视化管理工具有很多，我选择了比较常用的。
输入正确的信息，即可登录。
2，MongoDB 的安装与配置
OK，工作已经完成了一大半，接下来是我们的第二关
A,安装 mangoDB
这里呢，我还是不太推荐大家使用yum等方式从官网上拉包，真的是太。。。。。慢了。推荐大家找找资源，直接下载个 tgz 包。我也会在文章的最后列出我们本文提及到的一些相关下载。我们自己下载时，一定要注意版本问题，一定要对号入座，版本也不要下载太新的，尽量用稳定的版本。
我们先在服务器/usr/目录下建一个 mongodb 文件夹，下载好了 tgz 包后，用我们的FileZlia，直接把包移动到我们的 mongodb 文件夹里，然后解压:
cd /usr/
//直接在这里授予权限
mkdir -m 777 mongodb
//解压
tar -zxvf mongodb-linux-x86_64-4.0.13.tgz
//我们换个名字
mv mongodb-linux-x86_64-4.0.13 mymongo
B,环境变量与配置
先给我们的 mongo 写到环境变量里，要不每次的启动命令很麻烦的。
vim /etc/profile
//在配置文件中添加下面的语句，好像原来也有一个export，写在它上边好啦。哦对了，输入的时候别忘了
//先敲一下i,写完了，别忘了Esc然后:wq
export PATH=/usr/mongodb/mymongo/bin:$PATH
//使我们的修改生效
source /etc/profile
接下来我们就要整理一下我们的 mymongo 目录，现在里面还什么都没有呢
(1)跳到我们的mymongo文件夹下，新建数据库目录和日志目录
cd /usr/mongodb/mymongo
mkdir db
mkdir log
(2)设置权限
chmod 777 db
chmod 777 log
(3)创建配置文件
touch mongodb.conf
(4)跳到log目录下，新建日志文件
cd log
touch mongodb.log
(5)回到配置文件，写入如下语句
cd ..
vim mongodb.conf
//写入下面的语句
port=27017
dbpath=/usr/mongodb/mymongo/db
logpath=/usr/mongodb/mymongo/log/mongodb.log
logappend=true
fork=true
maxConns=100
#auth=true
noauth=true
journal=true
storageEngine=wiredTiger
bind_ip=0.0.0.0
C,启动 Mongo
mongod --config /usr/mongodb/mymongo/mongodb.conf --port 27017
出现类似下面的界面，那么就恭喜你啦。
D,可视化工具的选择
OK，为什么要用可视化工具，我们学过 Mysql 都知道，直接用 SQL 命令操作是很麻烦的，我们需要一个管理工具来帮我们简易的实现增删改查的操作。
官方给我们提供了一个管理化工具--MongoDBCompassCommunity，当然，官网的东西，下载速度可想而知。不过这个还是挺好用的，就是导入数据的时候最好是以导入文件的形式。自己手写好像总是报错。。
那么好一些的就是 Studio 3T 了，不过这个好像是付费滴，当然，我们也可以做坏事
注意：当然不可能这么轻松就测试成功的，如果我们使用Studio 3T测试失败时，可以考虑将我们的服务器防火墙关闭就可以了。
E,给 mongodb 添加权限用户（顺序很重要！！）
不知道大家有没有注意到，我们在写 mongodb.conf 配置文件的时候,其中有一项noauth=true，这条语句表明只需要输入正确的 ip 就可以连接到我们的数据库，这无疑是很危险的，所以我们往往需要创立一个指定的用户并授予其权限，来进行访问，这样就不用担心任何人都可以访问我们的数据库了。
首先，在第一次做验证登录的时候，我们在noauth=true的情况下，新建一个admin用户
使用 mongo 命令，进入我们书写 mongo 语句的状态。
创建用户
use admin
db.createUser(
{
user: "admin",
pwd: "password",
roles: [ { role: "root", db: "admin" } ]
}
);
exit;
退出 mongo 服务，修改配置文件，将其改为权限登录
mongod -f /usr/mongodb/mymongo/mongodb.conf --shutdown
F,以权限的方式进行登录(admin)
mongo -u admin -p password --authenticationDatabase admin
创建我们项目用的数据库，并为其配备一个 user
use vuemall
db.createUser(
{
user: "xiaohong",
pwd: "xiaohong",
roles: [ { role: "readWrite", db: "vuemall" } ]
}
);
exit;
以权限的方式再次进行登录
mongod -f /usr/mongodb/mymongo/mongodb.conf --auth
回到我们的Compass(Studio 3T 也可以)
进行到这里，基本上是已经成功了。但是我们发现了一个问题：既然 xiaohong 才是我们可视化工具中用到的那个用户，那么多此一举创建 admin 用户干什么呢？原因是因为，当我们直接创建我们的 user 时，虽然db.auth(user,userpwd)会给我们返回 1，但可视化工具那边就是登不上去，甚至报错。对于这个问题，官方文档是这样说的：先创建一个{role: "userAdminAnyDatabase", db:""}的 user,而实际上在开启验证模式的时候第一个需要创建的 user 是拥有 root 角色的 admin，再通过 admin 去创建其他角色的用户。这样的话，之后通过创建的其他 user 再去做 authentication 登录的时候就不会再报一些莫名其妙的错误了。
OK,大功告成！接下来可以开始我们的项目开发啦！
本文主要讲述了我们在开发项目之前做的准备工作，包括vue-cli的环境搭建，以及ftp和MongoDB的安装。整个过程令我非常‘愉悦’。大家也可以把遇到的问题写在评论区，看看是不是我遇到的，我也可以帮忙解决一下
另外，附上本文提到的软件或包（不然是真的慢。。。）
-
FileZila
-
mongodb-linux-x86_64-4.0.13.tgz
-
Studio 3T
-
XShell(免费版) / XFtp(免费版)
那么。下次见！
