[項目實戰]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-resourse --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,開啓防火牆端口


    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語句的狀態。

創建用戶

在這裏有一個問題，我也沒有得到合理的解決方式，就是我們授予用戶權限時候的問題。如果我們授予其role:'userAdmin'或者role:'dbOwner',那麼我們只能在shell端操作，到Studio 3T這邊呢，就會連接不上，報出權限不夠的錯誤；反過來我們如果授予的是role:'readWrite',那麼就成了只能在Studio 3T這邊操作；再或者就是shell和Stuido兩邊都不能用。這個問題還在困擾着我。。。不過倒是不影響正常的開發工作。得到解決後，我也會在此補充。

問題已經得到解決，點我！

驗證（返回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

https://pan.baidu.com/s/19JPLeJHipX3eW7PiMg6png 提取碼：s3iu
mongodb-linux-x86_64-4.0.13.tgz

https://pan.baidu.com/s/1lm4XlSrQkGqKGBZv4VUvQA 提取碼：kel3
Studio 3T

https://pan.baidu.com/s/1WP4snZHK9RpEimqnRwqI7g 提取碼：tsnh

那麼。下次見！

[項目實戰]Vue小宏商城開發日誌 ——（一）環境配置與搭建

一、Vue項目環境配置

1，安裝Node和Git

2，安裝Vue-cli腳手架及初始化Webpack項目

3，下載相關依賴

啓動項目

二、數據庫相關配置

1，FTP的安裝與配置

2，MongoDB的安裝與配置

[項目實戰]Vue小宏商城開發日誌 ——（一）環境配置與搭建

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結