Vue+Express全棧購物商城

luzhuqun 發(fā)布于2019-08-26 13:50 / 3327人閱讀

摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗和技巧。服務端技術棧登錄授權用認證機制，來實現(xiàn)登錄登出。服務器配置和緩存策略，根據(jù)不同的來代理。申請證書全站升級到，配置的協(xié)議。

一、前言提綱

基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗和技巧。

二、歷史版本

基于Vue-CLI2.0:點我查看

這個分支版本是一兩年前的，基于Vue-CLI2.0寫的，數(shù)據(jù)請求是Mock，純前端的項目。

基于 Vue-CLI3.0:點我查看

這個分支版本是基于Vue-CLI3.0的，將腳手架從2.0遷移升級到了3.0，遇到的一些問題和坑也都填完了~也是純Web端Mock模擬數(shù)據(jù)的項目。

當前版本:點我查看

基于Vue-CLI3.0,前端用Vue全家桶，后端用Express+MongoDB+Redis，后臺管理系統(tǒng)CMS是用的Vue-Element-Admin

三、詳情 1.前端

在線預覽:https://www.fancystore.cn

手機直接掃描二維碼真機體驗:

1.1 技術棧:

Vue全家桶(Vue-CLI3,Vue2.x)

Vue-Router(頁面KeepAlive的處理)

Vuex(狀態(tài)管理庫，刷新保存狀態(tài))

Axios(二次封裝配置的數(shù)據(jù)請求)

Less(CSS預處理)

I18n(國際化處理)

Vant(UI庫,按需加載+rem)

SEO(預渲染)

Sentry(線上錯誤日志監(jiān)控)

Travic(自動構(gòu)建,持續(xù)部署)

1.2適配

項目代碼px自動轉(zhuǎn)換為rem，需要在main.js中引入amfe-flexible庫

Vant UI庫也有REM單位，需要在vue.config.js中配置:

1.3 SEO

單頁(SPA)SEO是一個痛點，目前有兩種方式，一種是SSR,一種是預渲染(PrerenderSPAPlugin)。

這個項目是用預渲染(PrerenderSPAPlugin)+vue-meta-info這兩個庫來做SEO優(yōu)化的。

將rouer.js模式改為mode:history

下載安裝PrerenderSPAPlugin

PrerenderSPAPlugin是Google的一個庫，基于Chromium是獲取數(shù)據(jù)，安裝PrerenderSPAPlugin的時候會自動下載Chromium瀏覽器，國內(nèi)npm安裝Chromium會經(jīng)常安裝失敗，建議用淘寶的cnpm安裝

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm install PrerenderSPAPlugin --save

在vue.config.js中引入PrerenderSPAPlugin，配置需要預渲染的路由。

下載安裝 vue-meta-info

在main.js中引入vue-meta-info，在每個頁面配置meta信息，這樣每個單頁路由都有不同的title,理由爬蟲引擎抓取重要內(nèi)容，利于SEO。

預渲染前只有一個index.html,預渲染后最后打包出來的預渲染目錄文件如下:

1.4 路由懶加載以及緩存keep-alive動的態(tài)判斷

項目中會使用keep-alive會提高用戶體驗和網(wǎng)站的性能,如果想實現(xiàn)部分頁面緩存，部分頁面不需要緩存，可以在router.js里面的路由添加meta.keepalive在跟router-vier加入判斷:

1.5 Vuex狀態(tài)管理頁面刷新失效問題

用Vuex管理全局的狀態(tài)，會遇到刷新頁面的時候所有的狀態(tài)丟失或者重置，可以在App.vue的鉤子函數(shù)添加代碼，會在頁面刷新的時候?qū)uex存儲到Storage中，刷新完成后又再從Storage取出來存到Vuex里面:

1.6 封裝數(shù)據(jù)請求

封裝Axios，添加Axios請求(request)和相應(response),統(tǒng)一處理錯誤信息或者登錄認證的消息,所有的數(shù)據(jù)請求都存放到api目錄下，對應的頁面方便后續(xù)的維護和管理。

1.7 打包構(gòu)建優(yōu)化vue.config.js

區(qū)分開發(fā)環(huán)境和生產(chǎn)環(huán)境

alias的方式直接指定目錄。

CDN

生產(chǎn)環(huán)境中將一些共有庫Vue,vuex,vue-router等庫不打包到項目中，而是通過CDN的方式引入這些共有庫，這樣可以減少項目的大小，也可以借助CDN的優(yōu)勢，讓網(wǎng)站加載更快。推薦一個強大的cdn庫：[https://www.bootcdn.cn/](https://www.bootcdn.cn/)

生產(chǎn)環(huán)境壓縮和出去console打印日志

生產(chǎn)環(huán)境開啟gzip壓縮

生產(chǎn)環(huán)境啟用預渲染

生產(chǎn)環(huán)境分離css，外鏈CSS可以緩存

1.7 錯誤日志監(jiān)控Sentry

集成Sentry開源日志監(jiān)控系統(tǒng)，在官網(wǎng)注冊獲取key，在main.js中引入RavenVue并配置即可

1.8 自動構(gòu)建和持續(xù)集成

Github自動構(gòu)建和持續(xù)集成基于Travis

登錄Travis選擇需要持續(xù)集成的項目。

在.travis.yml寫上相應的config,服務器配置ssh_key，

每次代碼push到指定分支(比如master)的時候，Travis會自動執(zhí)行項目上的.travis.yml文件，開始自動構(gòu)建，構(gòu)建成功通過scp密令傳送到服務器，完成自動部署的功能。

每次需要發(fā)版，只需要push代碼，然后去喝杯咖啡，回來就已經(jīng)構(gòu)建發(fā)布完成，解放勞動力

1.9 代碼自動格式化優(yōu)化

團隊合作的時候，每個成員用的編輯器不同，縮進格式也不同，這樣合并代碼的時候會出現(xiàn)各種意外的情況，團隊統(tǒng)一編輯器和編輯器不太現(xiàn)實，因為每個人的寫代碼習慣和風格不一致。可以借助husky 和 link-stage，每次commit的時候都會安裝配置的規(guī)則格式化代碼，參考文章:https://segmentfault.com/a/1190000009546913

1.10代碼優(yōu)化

設計模式

表單驗證需要寫很多判斷條件，if-else 或者swith，當條件越多時或者后面需要修改需求條件的時候，會變得不是很好維護，可以用策略模式來重構(gòu)業(yè)務代碼:

善用Mixin,提取共用的組件，將項目組件化

Vue的Mixin復用代碼，可以更好的提高開發(fā)效率和可維護性
除了將一些共用的頁面做成組件引入的方式之外，大文件項目也分好幾個模塊，將文件才成模塊的方式會更好維護和更好的閱讀。

2.服務端 2.1 技術棧:

Node

Express

Mongo

Mongoose

Redis

Qiniu

PM2

2.2 登錄授權

用Session認證機制，來實現(xiàn)登錄登出。
配置Session的加密解密，將Session存儲到Redis，提高性能,如果有多臺服務器，Redis可以共享Session。

2.3 中間件判斷用戶是否登錄:

有些API請求是需要用戶登錄才可以訪問的，可以寫中間件來判斷:

2.4 中間件判斷用戶的權限:

有些API的請求是需要判斷用戶是否有權限，比如添加、刪除和更新，會在中間件判斷是否有權限

2.5 PM2多進程啟動項目 2.6 Mongodb優(yōu)化設置索引 2.7 Redis做緩存 2.8 七牛云對象存儲配置Key還有域名的綁定以及HTTPS證書的申請 3.后臺管理系統(tǒng)CMS

在線預覽:https://www.fancystore.cn/admin

3.1技術棧

vue-element-admin

配合后端做了權限系統(tǒng)，根據(jù)用戶的權限來展示和隱藏菜單和按鈕。

4.服務器

Nginx配置gzip和緩存策略，根據(jù)不同的 URL來代理。

申請HTTPS證書,全站升級到HTTPS，配置HTTP2.0的協(xié)議。

Github:

前端: https://github.com/czero1995/fancy-store

服務端: https://github.com/czero1995/fancy-store-server.git

后臺管理CMS: https://github.com/czero1995/fancy-store-admin.git

GPU云服務器云服務器 Vue+Express 全棧購物商城 -express Express

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/109631.html

Vue+Express全棧購物商城

摘要：一前言提綱基于和框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗和技巧。服務端技術棧登錄授權用認證機制，來實現(xiàn)登錄登出。服務器配置和緩存策略，根據(jù)不同的來代理。申請證書全站升級到，配置的協(xié)議。一、前言提綱基于Vue和Express框架寫的一個全棧購物商城，記錄項目過程中遇到的一些問題以及經(jīng)驗和技巧。二、歷史版本基于Vue-CLI2.0:點我查看這個分支版本是一兩年前...

Richard_Gao 2019-05-22 18:23 評論0 收藏0
仿美團外賣的全棧項目(vue+node+mongodb)帶支付->大三求實習

摘要：前端項目包含多個路由，涉及到文件有個，功能設計登錄，定位，瀏覽商品，加購物車，下訂單，支付支持微信和支付寶的掃碼支付和調(diào)起支付，評價，個人信息更改，是一個較為完整的項目。關于 2019屆大三學生，前段時間一直想一個人單獨開發(fā)一個較為完整的項目，在眾多應用中，考慮之后選擇了美團外賣來模仿，這段時間就利用課余時間進行開發(fā)，前端用vue+vuex+vue-router+axios，因為需要...

anRui 2019-06-26 17:38 評論0 收藏0
仿美團外賣的全棧項目(vue+node+mongodb)帶支付->大三求實習

摘要：前端項目包含多個路由，涉及到文件有個，功能設計登錄，定位，瀏覽商品，加購物車，下訂單，支付支持微信和支付寶的掃碼支付和調(diào)起支付，評價，個人信息更改，是一個較為完整的項目。關于 2019屆大三學生，前段時間一直想一個人單獨開發(fā)一個較為完整的項目，在眾多應用中，考慮之后選擇了美團外賣來模仿，這段時間就利用課余時間進行開發(fā)，前端用vue+vuex+vue-router+axios，因為需要...

iflove 2019-08-22 16:09 評論0 收藏0
基于 Vue2+Node+mongoDB 的前后端分離全棧練手小項目

摘要：本文源碼簡介之前剛?cè)腴T并做好了一個簡而全的純?nèi)彝暗捻椖?，?shù)據(jù)都是本地模擬請求的詳情請移步這里為了真正做到數(shù)據(jù)庫的真實存取，于是又開始入門了并以此來為之前的頁面寫后臺數(shù)據(jù)接口。本文源碼：Github 簡介：之前剛?cè)腴Tvue并做好了一個簡而全的純vue2全家桶的項目，數(shù)據(jù)都是本地 json 模擬請求的；詳情請移步這里：vue-proj-demo 為了真正做到數(shù)據(jù)庫的真實存取，于是又...

jay_tian 2019-06-26 17:20 評論0 收藏0
個人的web商城網(wǎng)站

摘要：于是在查找了大量資料，思考著技術選型，終于決定做一個展現(xiàn)商品的全棧網(wǎng)站。當然這個網(wǎng)站還有許許多多需要完善并增加的功能，在此之后也會不斷去完善這個網(wǎng)站。所幸的是問題都已經(jīng)解決，項目也順利部署。項目介紹 1、作為前端的菜鳥，每每看到Github上有很多大神分享著自己的項目時，內(nèi)心都是蠢蠢欲動，這次終于下定決心要給自己一段時間來完成屬于自己的一份作品。2、于是在查找了大量資料，思考著技術選...

quietin 2019-08-26 11:43 評論0 收藏0