搭建商城前臺門戶系統(tǒng)怎么做「搭建系統(tǒng)」

今天是劉小愛自學(xué)Java的第156天。

感謝你的觀看，謝謝你。

學(xué)習(xí)計劃安排如下：

開始前臺門戶系統(tǒng)的學(xué)習(xí)。今天只涉及到系統(tǒng)搭建，以及一些簡單的介紹，并不涉及到具體的業(yè)務(wù)。明天開始進入具體的業(yè)務(wù)學(xué)習(xí)。

后臺管理系統(tǒng)的學(xué)習(xí)就暫且告一段落了，其實無外乎就是各種增刪改查。

筆記中主要是記錄了查詢和新增操作，關(guān)于修改和刪除基本也是大同小異。

一、前臺門戶介紹

后臺管理系統(tǒng)是給網(wǎng)站管理人員看的，前幾天寫的功能主要都用于對商品的管理。

管理人員通過該系統(tǒng)控制商品的樣式啊，是否上下架，庫存啊這些。

而前臺門戶系統(tǒng)是給用戶看的，如下圖：

現(xiàn)在主流電商網(wǎng)站的前臺門戶系統(tǒng)，基本上都是這么一個樣式。

以前后臺管理系統(tǒng)較簡單，我可以在對應(yīng)頁面做一個修改，從而將其轉(zhuǎn)換成劉小愛商城。

現(xiàn)在前臺門戶系統(tǒng)較為復(fù)雜，有的還涉及到圖片，我一時修改不過來，索性就不改了。

但愿不會說我在打廣告什么的哈哈哈，到時候被平臺給屏蔽了可就不好了。

那使用到的技術(shù)是什么呢？

以前后臺系統(tǒng)使用的是SPA（單頁應(yīng)用），SPA理解起來其實非常簡單。

它就是只有一個html文件，其它的都是以vue組件的形式拼接，從而實現(xiàn)了頁面切換。

SPA的好處在于速度快，但是第一次加載慢，它等于是第一次將靜態(tài)資源全部加載下來了，所以后續(xù)頁面切換時就非常流暢。

但是這樣有一個問題，不利于SEO優(yōu)化，當(dāng)然還有緩存的問題，在此就不說明了。

這個SEO是啥？我大致說下，當(dāng)然不可能將其說得很清楚，我自己也不太懂，但作為一名程序員對這些有一定的了解肯定是沒壞處的。

比如說用戶要買東西，他可能會在百度上面搜索，那百度出來的頁面是如何排序的呢？

這就涉及到SEO搜索引擎優(yōu)化了，如果優(yōu)化好，會排在更前面。

當(dāng)然最前面的肯定是直接給百度錢打廣告的。

而百度搜索引擎的一個機制，是利用爬蟲爬別人的網(wǎng)站，再顯示出來。

如果只是SPA單頁應(yīng)用，爬蟲就只能爬到一個html文件，不利于SEO搜索引擎優(yōu)化。

當(dāng)然做一個強調(diào)：

SEO這塊我也不是太了解，所以只是簡單地做一個描述，自己了解的說不定也有問題。

總之SEO對于網(wǎng)站來說很重要，會增加搜索后的排名，使用單頁應(yīng)用就不太合適了。

所以前臺門戶系統(tǒng)使用多頁應(yīng)用：

依舊是前后端分離，不過前端頁面會獨立多個html頁面，每個頁面使用vue完成渲染。

做一個總結(jié)就是：

前端門戶系統(tǒng)使用vue Nuxt實現(xiàn)多頁應(yīng)用后臺管理系統(tǒng)使用vue vuetify實現(xiàn)單頁應(yīng)用二、搭建前臺系統(tǒng)

后臺管理系統(tǒng)中用了webpack，很簡單地就實現(xiàn)了熱部署，這個太重要了，不像Java代碼每次一改就要重啟微服務(wù)，很麻煩。

而此處使用的叫l(wèi)ive-server，其翻譯過來就是“活的服務(wù)器”，很生動形象。

安裝live-server

使用npm命令完成安裝即可，命令如下：

npm install -g live-server

這里使用的是全局安裝，以后任意位置可用。

npm：是Node.js的包管理工具。install：也就是安裝的意思。-g：也就是表示全局安裝，我大膽地猜測下應(yīng)該就是global的首字母縮寫。live-server：活的服務(wù)器。

安裝好了之后運行l(wèi)ive-server，同時可以使用命令指定端口：

命令：live-server --port=9002

port即端口的意思，我們這里指定9002為前臺門戶系統(tǒng)的端口。

域名即為本地域名，通過域名 端口就能訪問到對應(yīng)的頁面了。

和后臺管理系統(tǒng)一樣，為了讓域名更加地正規(guī)好看，我們使用SwitchHosts nginx實現(xiàn)域名和端口的反向代理。

該方式在第142天的學(xué)習(xí)筆記中專門講解過，這里做一個簡單的回顧：

在SwitchHosts配置我們想要的一個域名為本地域名，也就是說當(dāng)在瀏覽器上訪問該域名時，系統(tǒng)會自動認為它對應(yīng)本地域名。

而瀏覽器上如果不指定端口時，會默認解析成80端口，所以在nginx配置中監(jiān)聽該端口，并跳轉(zhuǎn)到前臺門戶系統(tǒng)路徑。

所以當(dāng)在瀏覽器上訪問對應(yīng)域名時，實際上訪問的就是nginx中配置的那個路徑。

三、業(yè)務(wù)需求

今天不涉及到具體的業(yè)務(wù)實現(xiàn)，但是對接下來一段時間的學(xué)習(xí)做一個了解。

①搜索業(yè)務(wù)的實現(xiàn)

一個電商網(wǎng)站，搜索肯定是核心關(guān)鍵了。

現(xiàn)在可不像以前那樣，還用什么模糊查詢，效率太低了，有專門的搜索技術(shù)，明天開始就專門學(xué)習(xí)。

②商品詳細以及RabbitMQ？

這是個啥還不太清楚，后續(xù)學(xué)到了再說。

③用戶中心的實現(xiàn)

最常見的也就是用戶的注冊和登錄了，這個以前就實現(xiàn)過好幾次了。

當(dāng)然還有其它的一些比如個人信息管理呀，用戶地址管理，收藏管理……等。

④購物車以及下單的實現(xiàn)

購物車也是商城非常核心的一環(huán)，并且肯定是需要使用到支付的，微信支付或者支付寶支付等多種方式。

最后

行有不得反求諸己，我是@劉小愛

一個白天上班晚上學(xué)習(xí)的95后滬漂，不為其它，只為學(xué)會自律做好自己，也愿我的每日打卡能給你帶來勇氣，歡迎點贊關(guān)注和評論。