亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Vue+Express全棧購物商城

Richard_Gao / 2915人閱讀

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

一、前言提綱

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

二、歷史版本

    基于Vue-CLI2.0:點(diǎn)我查看

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

    基于 Vue-CLI3.0:點(diǎn)我查看

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

    當(dāng)前版本:點(diǎn)我查看

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

三、詳情 1.前端

在線預(yù)覽:www.fancystore.cn

手機(jī)直接掃描二維碼真機(jī)體驗:

1.1 技術(shù)棧:

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

Vue-Router(頁面KeepAlive的處理)

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

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

Less(CSS預(yù)處理)

I18n(國際化處理)

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

SEO(預(yù)渲染)

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是一個痛點(diǎn)，目前有兩種方式，一種是SSR,一種是預(yù)渲染(PrerenderSPAPlugin)。

這個項目是用預(yù)渲染(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，配置需要預(yù)渲染的路由。

    下載安裝 vue-meta-info

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

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

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)和相應(yīng)(response),統(tǒng)一處理錯誤信息或者登錄認(rèn)證的消息,所有的數(shù)據(jù)請求都存放到api目錄下，對應(yīng)的頁面方便后續(xù)的維護(hù)和管理。

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)站加載更快。推薦一個強(qiáng)大的cdn庫：[https://www.bootcdn.cn/](https://www.bootcdn.cn/)

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

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

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

    生產(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寫上相應(yīng)的config,服務(wù)器配置ssh_key，

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

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

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

團(tuán)隊合作的時候，每個成員用的編輯器不同，縮進(jìn)格式也不同，這樣合并代碼的時候會出現(xiàn)各種意外的情況，團(tuán)隊統(tǒng)一編輯器和編輯器不太現(xiàn)實，因為每個人的寫代碼習(xí)慣和風(fēng)格不一致?？梢越柚鷋usky 和 link-stage，每次commit的時候都會安裝配置的規(guī)則格式化代碼，參考文章:segmentfault.com/a/119000000…

1.10代碼優(yōu)化

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

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

2.服務(wù)端

2.1 技術(shù)棧:

Node

Express

Mongo

Mongoose

Redis

Qiniu

PM2

2.2 登錄授權(quán)

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

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

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

2.4 中間件判斷用戶的權(quán)限:

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

2.5 PM2多進(jìn)程啟動項目

2.6 Mongodb優(yōu)化設(shè)置索引

2.7 Redis做緩存

2.8 七牛云對象存儲配置Key還有域名的綁定以及HTTPS證書的申請

3.后臺管理系統(tǒng)CMS

在線預(yù)覽:www.fancystore.cn/admin

3.1技術(shù)棧

vue-element-admin

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

4.服務(wù)器

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

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

Github:

前端: github.com/czero1995/f…

服務(wù)端: github.com/czero1995/f…

后臺管理CMS: github.com/czero1995/f…

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/6816.html

相關(guān)文章

  • Vue+Express全棧購物商城

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

    luzhuqun 評論0 收藏0

  • 仿美團(tuán)外賣的全棧項目(vue+node+mongodb)帶支付->大三求實習(xí)

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

    anRui 評論0 收藏0

  • 仿美團(tuán)外賣的全棧項目(vue+node+mongodb)帶支付->大三求實習(xí)

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

    iflove 評論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 評論0 收藏0

  • 個人的web商城網(wǎng)站

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

    quietin 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<