node+vue實現一個商城Demo(1):專案介紹

本文的目的只是紀錄一下剛剛完成的個人demo,因為本人水平有限,所以將學習中遇到的坑加以總結，以免日後忘記。如果能能幫到您，不勝榮幸。如有不足，也懇請扶正。

剛剛學習完慕課程網上的Vue2.0+Node.js+MongoDB全棧打造商城系統視訊教程，加以改進。將它釋出到自己的Github上。
前端部分
服務端部分

與原版視訊不同，本demo採用mysql做資料庫，前端部分分頁改為傳統的分頁方式，並且加入了多條件的搜尋功能，添加了註冊使用者和新增地址功能。

專案啟動

前端部分：

//啟動前請確定安裝了npm和node喔～

在mm-fe目錄下開啟命令列，輸入cnpm i 即可下載專案所需的環境包。

安裝環境包

安裝完所需的環境包後，輸入 npm run dev 即可啟動專案

專案啟動

啟動完以後應該是這個樣子

光突突的啥也沒有，沒關係接下來進入伺服器部分。

後臺啟動

後臺採用的是node的express框架＋mysql資料庫，網上大多數node教程都是採用mongodb，但是mongodb學習成本較高，而且沒有太好用的視覺化工具，網就用回mysql了，畢竟順手的才是適合自己的。

言歸正傳
專案結構：

在啟動服務端前先匯入資料庫。
//匯入資料庫的時候需要先新建一個mmall庫再匯入喔～
服務端的環境包安裝方式同上

接下來啟動服務端，服務端的啟用通過：
node bin/www

伺服器啟動成功

啟動之後，資料就拉過來了：

總結

不論是前端還是後臺都需要安裝node以及npm，通過npm即可快速的搭建起我們的專案，
接下來的章節將會詳細講解這個demo