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

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後端的配置和一些技術參考能夠見 @大叔一枝花