国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue+Express全棧購物商城

Richard_Gao / 2843人閱讀

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

一、前言提綱

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

二、歷史版本

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

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

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

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

    當前版本:點我查看

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

三、詳情 1.前端

在線預覽:www.fancystore.cn

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

1.1 技術棧:

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

Vue-Router(頁面KeepAlive的處理)

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

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

Less(CSS預處理)

I18n(國際化處理)

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

SEO(預渲染)

Sentry(線上錯誤日志監控)

Travic(自動構建,持續部署)

1.2適配

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

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

1.3 SEO

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

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

    將rouer.js模式改為mode:history

    下載安裝PrerenderSPAPlugin

    PrerenderSPAPlugin是Google的一個庫，基于Chromium是獲取數據，安裝PrerenderSPAPlugin的時候會自動下載Chromium瀏覽器，國內npm安裝Chromium會經常安裝失敗，建議用淘寶的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,理由爬蟲引擎抓取重要內容，利于SEO。

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

1.4 路由懶加載以及緩存keep-alive動的態判斷

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

1.5 Vuex狀態管理頁面刷新失效問題

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

1.6 封裝數據請求

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

1.7 打包構建優化vue.config.js

    區分開發環境和生產環境

    alias的方式直接指定目錄。

    CDN

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

    生產環境壓縮和出去console打印日志

    生產環境開啟gzip壓縮

    生產環境啟用預渲染

    生產環境分離css，外鏈CSS可以緩存

1.7 錯誤日志監控Sentry

集成Sentry開源日志監控系統，在官網注冊獲取key，在main.js中引入RavenVue并配置即可

1.8 自動構建和持續集成

Github自動構建和持續集成基于Travis

    登錄Travis選擇需要持續集成的項目。

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

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

    每次需要發版，只需要push代碼，然后去喝杯咖啡，回來就已經構建發布完成，解放勞動力

1.9 代碼自動格式化優化

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

1.10代碼優化

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

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

2.服務端

2.1 技術棧:

Node

Express

Mongo

Mongoose

Redis

Qiniu

PM2

2.2 登錄授權

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

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

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

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

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

2.5 PM2多進程啟動項目

2.6 Mongodb優化設置索引

2.7 Redis做緩存

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

3.后臺管理系統CMS

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

3.1技術棧

vue-element-admin

配合后端做了權限系統，根據用戶的權限來展示和隱藏菜單和按鈕。

4.服務器

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

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

Github:

前端: github.com/czero1995/f…

服務端: github.com/czero1995/f…

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/6816.html

相關文章

  • Vue+Express全棧購物商城

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

    luzhuqun 評論0 收藏0

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

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

    anRui 評論0 收藏0

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

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

    iflove 評論0 收藏0

  • 基于 Vue2+Node+mongoDB 的前后端分離全棧練手小項目

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

    jay_tian 評論0 收藏0

  • 個人的web商城網站

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

    quietin 評論0 收藏0

發表評論

0條評論

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