[项目实战]Vue小宏商城开发日志（一）环境配置与搭建

Z时代
2024-01-10
分类：综合

vue

总觉得呢，一直学习字面上的知识有些枯燥，古人曰：实践是代码知识掌握程度的最好体现。所以，今天开始起我要开始自己学习开发一个电商项目，一来是对知识的实践与巩固，另外，也为面试做一些项目经验储备。废话不多说，开始我们“小宏商城”项目日志的第一篇。

本项目学习资源来源于慕课网，我只是在我的 Blog 里记录一下我的学习过程，方便复习与总结。

vue-项目环境配置">一、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的安装。整个过程令我非常‘愉悦’。大家也可以把遇到的问题写在评论区，看看是不是我遇到的，我也可以帮忙解决一下

另外，附上本文提到的软件或包（不然是真的慢。。。）