总觉得呢，一直学习字面上的知识有些枯燥，古人曰：实践是代码知识掌握程度的最好体现。所以，今天开始起我要开始自己学习开发一个电商项目，一来是对知识的实践与巩固，另外，也为面试做一些项目经验储备。废话不多说，开始我们“小宏商城”项目日志的第一篇。
本项目学习资源来源于慕课网，我只是在我的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-resourse --save
npm install axios --save
启动项目
npm run dev
[图片上传失败...(image-6b0b9f-1593914530853)]
二、数据库相关配置
按正常的套路应该是先搭起来我们的静态页面，然后再与我们的数据库相连接。但是配置这一块我搞了足足两天，遇到了好多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,开启防火墙端口
firewall-cmd --zone=public --add-port=21/tcp --permanent
//重启一下ftp服务
systemctl restart vsftpd
另外，对于我们使用的服务器来说，我们要进行一些安全组的添加，点击这里. 查看具体的添加步骤（各个厂商的服务器添加方法大同小异）
E,添加用户
//用户名
useradd xiaohong
//密码（会让你再输一次，但是默认密码是不显示的）
passwd xiaohong
F,记得，给自己的项目文件夹添加权限。（切记！）
//我默认把项目放到了/home/www/下，大家如果没有这个目录，可能是没
有下载nginx或者Apache的原因（如果是云服务器的话，这些默认是有的）
chown -R xiaohong:xiaohong /home/www/sweetymall
G,重启FTP服务
大致就是这样，但还有一个问题。
正常情况下，我们想在浏览器上访问我们的本地项目，是没什么大问题的。执行npm run dev命令后，我们就能通过访问localhost:8080/来查看我们的项目成品。可是，我们希望在别处也能够访问我们的项目。上传到服务器上不就好了嘛？确实，我们可以把正在开发中的项目或项目成品上传到我们的服务器。但是，当我们对我们的项目进行代码的添加或修改时，仅仅通过shell窗口就很麻烦了。我们希望能像操作本地项目那样操作我们服务器上的项目。那么，FileZlia无疑是不二之选。当然，这种可视化管理工具有很多，我选择了比较常用的。
输入正确的信息，即可登录。
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了，不过这个好像是付费滴，当然，我们也可以做坏事
E,给mongodb添加权限用户
不知道大家有没有注意到，我们在写mongodb.conf配置文件的时候,其中有一项noauth=true，这条语句表明只需要输入正确的ip就可以连接到我们的数据库，这无疑是很危险的，所以我们往往需要创立一个指定的用户并授予其权限，来进行访问，这样就不用担心任何人都可以访问我们的数据库了。
首先，我们使用mongo命令，进入我们书写mongo语句的状态。
创建用户
在这里有一个问题，我也没有得到合理的解决方式，就是我们授予用户权限时候的问题。<font color = blue size = 3>如果我们授予其role:'userAdmin'或者role:'dbOwner',那么我们只能在shell端操作，到Studio 3T这边呢，就会连接不上，报出权限不够的错误；反过来我们如果授予的是role:'readWrite',那么就成了只能在Studio 3T这边操作；再或者就是shell和Stuido两边都不能用</font>。这个问题还在困扰着我。。。不过倒是不影响正常的开发工作。得到解决后，我也会在此补充。
<font color = blue size = 5>问题已经得到解决，点我！</font>
验证（返回1就是成功了）
修改mongodb.conf
我们先Ctrl+C退出mongo命令编辑模式，然后输入下面的命令，停止mongo服务
mongod -f /usr/mongodb/mymongo/mongodb.conf --shutdown
修改我们的配置文件
vim /usr/mongodb/mymongo/mongodb.conf
//修改
auth=true
#noauth=true
以权限的方式登录Mongo
mongod -f /usr/mongodb/mymongo/mongodb.conf --auth
回到我们的Compass(Studio 3T也可以)
OK,大功告成！接下来可以开始我们的项目开发啦！
本文主要讲述了我们在开发项目之前做的准备工作，包括vue-cli的环境搭建，以及ftp和MongoDB的安装。整个过程令我非常‘愉悦’。大家也可以把遇到的问题写在评论区，看看是不是我遇到的，我也可以帮忙解决一下
另外，附上本文提到的软件或包（不然是真的慢。。。）
-
FileZila
-
mongodb-linux-x86_64-4.0.13.tgz
-
Studio 3T
那么。下次见！
