油膩的前端SPA——CoolBlog（第一篇）

lovXin 發布于2019-08-22 11:19 / 3698人閱讀

摘要：線上部署也不復雜，以為例把監聽默認端口，定向文件。然后，我們以此為例大概講述此項目的前后端交互方式和一些技術選型吧。前端按照默認配置是，后端微服務的做法是。登錄的邏輯很簡單，先做驗證，發送登陸請求，執行回調。

1. 寫在前面

應小鮮肉@大叔一枝花之邀，幫他完成他的大作spring-boot + redis + nginx（其實是入門level）的博客系統，前端部分就是我來寫的，先簡單介紹下前端技術選型：vue-cli 的常用腳手架；iview的UI框架（表單驗證和后臺dashboard風格很贊）；一些簡單的庫吧比如 moment.js,以及quill-editor這種富文本編輯器等..

2.主要功能

登錄、登出

博客CRUD（后臺dashboard）

展示頁：主頁、歸檔、分類、關于等

2.1 Vue-cli

很多博客和教程都寫的很詳細了，入門的朋友建議從官方文檔看起。
這里簡單看看file tree吧

package 各個依賴項版本

"dependencies": {
    "axios": "^0.17.1",
    "iview": "^2.7.3",
    "moment": "^2.19.2",
    "querystring": "^0.2.0",
    "vue": "^2.5.2",
    "vue-quill-editor": "^2.3.3",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.1"
  },

通過vue-cli 中webpack構建成功后，簡單先把開發環境跑起來吧，默認端口8080
webpack 配置大概講一下

    dev{
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    host: "0.0.0.0", // 默認是localhost，改成0.0.0.0為了在手機訪問操作
    port: 8080, // 
    autoOpenBrowser: false,//自動打開瀏覽器，有點煩
    errorOverlay: true,
    notifyOnErrors: true,
    ... //其他暫時先按默認的來
    }

跨域配置等下再說。
dev 差不多了，來看看build。
執行

npm run build

文件根目錄下的dist就是webpack打包好的spa項目了，打開一般就是個index.html和其他靜態資源文件。
注意：大多數情況，部署至線上時，只需要把dist這個文件發布（distribution）
技術選擇就太多了，tomcat弄弄也行，nginx也罷（總之和后端溝通），你自己要測試這個文件可以推薦一個小插件吧chrome extensions市場里去找一個叫"200 ok"的小插件。

即插即用。

線上部署也不復雜，以nginx為例
把監聽默認端口80，定向dist文件。

server {
       listen 80;
       server_name localhost;
       location ~ .*.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|ttf|woff|woff2|zip|css|eot|woff|tff|svg|map)$
       {
          root /CoolBlog/front-end/cool-admin/dist;
       }   
}

好了dev環境，測試環境，線上環境，基本都能用了。來說說開發時具體功能及問題吧

2.2 登錄

先寫個登錄form吧，樣式自擬。
然后，我們以此為例大概講述此項目的前后端交互方式和一些技術選型吧。
大叔一枝花給我的api大約是這樣的：

一次簡單的get請求，這里無論你是吧spring部署在自己本地還是隔壁某ip下的這個接口，都是跨域的。
（前端dev按照默認配置是8080，后端微服務的做法是far away form front end。所以都必須面對跨域問題。）
dev下最簡單的方法是這樣的。
在webpack中配置中間件 proxyTable
教程里也比較詳細了，大概思路就是自己定義一個全局字符串pattern：" /api/** "去定向于你的tageturl。
注意：

 pathRewrite: {
          "^/api": "" //為空就行
        }

接著來談談ajax請求。
package.json里也有看到選的是 axios這個庫。總體來說，配置簡單、功能齊全。

登錄的邏輯很簡單，先做驗證，發送登陸請求，執行回調。
表單驗證的庫就不推薦了，iview用的是async-validate. 示例中能滿足大部分的需求了。自己寫的話，原則圍繞著：提示友好、驗證精確、ui規整。
簡單的get請求

 this.$axios.get("/api/ajaxLogin", { params:
            {name: name, password: password}
            })
            .then(function(response){
            // 請執行你回調操作
            )}

登錄api中回調success都要返回一個token，至于token的用途一般是作為一個令牌保存于瀏覽器的storage或者cookie，保障加密性和安全性。
處理token我們可以使用 vuex 啦，也算是個入門學習。
先看file tree吧

 store
    ├── index.js          # 我們組裝模塊并導出 store 的地方
    ├── actions.js        # 根級別的 action
    ├── mutations.js      # 根級別的 mutation
    └── types.js

關于index.js主要來定義state，以及action,mutation,type的整合處理

const state = {
  token: window.localStorage.getItem("token"),//我存localStorage，自己看需求吧
  userid: window.localStorage.getItem("userId")
}

mutations.js 簡單來說是用來更改state的，不過不能直接調用，一般是通過type中定義常量方法來改變（commit），異步改變狀態用action

//type.js
export const LOGIN = "LOGIN"
export const LOGOUT = "LOGOUT"

//mutations.js
const mutations = {
  [types.LOGIN]: (state, data) => {
        // 更改token的值
    state.token = data
    window.localStorage.setItem("token", data)
  },
  [types.LOGOUT]: (state) => {
        // 登出時清除token
    state.token = null
    window.localStorage.removeItem("token")
  }

 //action.js
  userLogin ({ commit }, data) {
    commit(types.LOGIN, data)
    // console.log(data)
  },
  userLogout ({ commit }) {
    commit(types.LOGOUT)
  },

store中token定義好了，這樣我們就能全局使用了。
例如：在登錄axios的回調中

            this.$store.dispatch("userLogin", token) //異步
            // this.$store.commit(types.LOGIN, token) 同步

這樣token就存到localStorage里了，當然登出同理咯。
然后你還可以加點動畫呀提示啊anyway 就是后期優化的事情了。

好了今天先到這里，以后慢慢來，項目碰到的一些坑都會更新上來。

有關java后端的配置和一些技術參考可以見 @大叔一枝花

云服務器 GPU云服務器第一篇 CoolBlog spa single-spa

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

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

Spring IOC 容器源碼分析 - 余下的初始化工作

摘要：簡介本篇文章是容器源碼分析系列文章的最后一篇文章，本篇文章所分析的對象是方法，該方法用于對已完成屬性填充的做最后的初始化工作。后置處理器是拓展點之一，通過實現后置處理器接口，我們就可以插手的初始化過程。 1. 簡介本篇文章是Spring IOC 容器源碼分析系列文章的最后一篇文章，本篇文章所分析的對象是 initializeBean 方法，該方法用于對已完成屬性填充的 bean 做最...

Alfred 2019-08-15 18:18 評論0 收藏0
記一次基于vue的spa多頁簽實踐經驗

摘要：然后類似一樣我的命名是可以在頁面的任何地方使用，如果你對具體的實現方法有興趣，歡迎點擊本文結尾的鏈接，去我的倉庫上查看。前言最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝要求實現多頁簽,并且可以通過瀏...

ispring 2019-08-26 12:13 評論0 收藏0
記一次基于vue的spa多頁簽實踐經驗

摘要：然后類似一樣我的命名是可以在頁面的任何地方使用，如果你對具體的實現方法有興趣，歡迎點擊本文結尾的鏈接，去我的倉庫上查看。前言最近收到一個這樣的需求,要求做一個基于 vue 和 element-ui 的通用后臺框架頁,具體要求如下: 要求通用性高,需要在后期四十多個子項目中使用，所以大部分地方都做成可配置的. 要求做成腳手架的形式.可以 npm 安裝要求實現多頁簽,并且可以通過瀏...

張遷 2019-08-02 11:15 評論0 收藏0
Slog6_使用vue前端框架實現單頁應用(SPA)

摘要：時間時間時間每一份有限的時間里都飽含無限的價值需要非常珍惜開發環境需要的信息官方手冊，一款工具，具體內容請移步官方手冊官方手冊，一刻代碼包管理工具，具體內容請移步官方手冊官方安裝手冊，前端框架瀏覽器擴展，用于調試應用程序，下一篇進行詳細介 ArthurSlog SLog-6 Year·1 Guangzhou·China July 13th 2018 showImg(https://...

FingerLiu 2019-08-26 12:19 評論0 收藏0
雙十二大前端工程師讀書清單

摘要：本文最早為雙十一而作，原標題雙大前端工程師讀書清單，以付費的形式發布在上。發布完本次預告后，捕捉到了一個友善的吐槽讀書清單也要收費。這本書便從的異步編程講起，幫助我們設計快速響應的網絡應用，而非簡單的頁面。本文最早為雙十一而作，原標題雙 11 大前端工程師讀書清單，以付費的形式發布在 GitChat 上。發布之后在讀者圈群聊中和讀者進行了深入的交流，現免費分享到這里，不足之處歡迎指教...

happen 2019-08-02 16:00 評論0 收藏0