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

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


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

一、Vue项目环境配置

1,安装Node和Git

  接下来我们需要先下载NodeGit,很简单,去百度一下NodeGitBash的官网,点击下载安装即可。这里要说明一下哈,我们下载时尽可能地选择稳定的版本而不是最新的版本,因为最新的版本可能出现对项目某些模块不支持的情况,再一个,因为是最新版本,出了问题我们能查询的解决方案也是很少的。

node
git

  当然,下载好了别忘了检查一下

result

2,安装Vue-cli脚手架及初始化Webpack项目

    npm install -g @vue-cli

    vue init webpack XXX

  这个地方需要注意,我们在配置的时候尽量不要开启我们的ESLint。开启了之后可能会报一些莫名奇妙的错误,往往是这个ESLint搞得鬼。但是我并不是说他没用哈,这是我们书写代码的格式标杆,当我们逐渐地熟悉了代码操作后,我们再加上就是了。

项目初始化

  大家可以给自己的项目起一个好听的名字,把那个XXX替换掉。我的就叫SweetyMall啦!

3,下载相关依赖

    npm install

  可是呢,我们的package.json文件并不是那么写的那么全面,我们项目中还要用到很多很重要的插件,在这里我就先下载了vue-resourceaxios,以后遇到会及时做出补充

    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无疑是不二之选。当然,这种可视化管理工具有很多,我选择了比较常用的。

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

  出现类似下面的界面,那么就恭喜你啦。

success

  D,可视化工具的选择

  OK,为什么要用可视化工具,我们学过Mysql都知道,直接用SQL命令操作是很麻烦的,我们需要一个管理工具来帮我们简易的实现增删改查的操作。

  官方给我们提供了一个管理化工具--MongoDBCompassCommunity,当然,官网的东西,下载速度可想而知。不过这个还是挺好用的,就是导入数据的时候最好是以导入文件的形式。自己手写好像总是报错。。

compass
compass

  那么好一些的就是Studio 3T了,不过这个好像是付费滴,当然,我们也可以做坏事

studio
studio

  E,给mongodb添加权限用户

  不知道大家有没有注意到,我们在写mongodb.conf配置文件的时候,其中有一项noauth=true,这条语句表明只需要输入正确的ip就可以连接到我们的数据库,这无疑是很危险的,所以我们往往需要创立一个指定的用户并授予其权限,来进行访问,这样就不用担心任何人都可以访问我们的数据库了。

  首先,我们使用mongo命令,进入我们书写mongo语句的状态。

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就是成功了)

mongo

  修改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

mongo

  回到我们的Compass(Studio 3T也可以)

mongo
mongo

  OK,大功告成!接下来可以开始我们的项目开发啦!


  本文主要讲述了我们在开发项目之前做的准备工作,包括vue-cli的环境搭建,以及ftpMongoDB的安装。整个过程令我非常‘愉悦’。大家也可以把遇到的问题写在评论区,看看是不是我遇到的,我也可以帮忙解决一下

  另外,附上本文提到的软件或包(不然是真的慢。。。)

  那么。下次见!

推荐阅读更多精彩内容