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

lovXin 發(fā)布于2019-08-22 11:19 / 3704人閱讀

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

1. 寫在前面

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

2.主要功能

登錄、登出

博客CRUD（后臺dashboard）

展示頁：主頁、歸檔、分類、關(guān)于等

2.1 Vue-cli

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

package 各個(gè)依賴項(xiàng)版本

"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構(gòu)建成功后，簡單先把開發(fā)環(huán)境跑起來吧，默認(rèn)端口8080
webpack 配置大概講一下

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

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

npm run build

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

即插即用。

線上部署也不復(fù)雜，以nginx為例
把監(jiān)聽默認(rèn)端口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環(huán)境，測試環(huán)境，線上環(huán)境，基本都能用了。來說說開發(fā)時(shí)具體功能及問題吧

2.2 登錄

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

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

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

接著來談?wù)刟jax請求。
package.json里也有看到選的是 axios這個(gè)庫?？傮w來說，配置簡單、功能齊全。

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

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

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

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

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

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

mutations.js 簡單來說是用來更改state的，不過不能直接調(diào)用，一般是通過type中定義常量方法來改變（commit），異步改變狀態(tài)用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) => {
        // 登出時(shí)清除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的回調(diào)中

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

這樣token就存到localStorage里了，當(dāng)然登出同理咯。
然后你還可以加點(diǎn)動畫呀提示啊anyway 就是后期優(yōu)化的事情了。

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

有關(guān)java后端的配置和一些技術(shù)參考可以見 @大叔一枝花

云服務(wù)器 GPU云服務(wù)器第一篇 CoolBlog spa single-spa

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

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

發(fā)表評論

登陸后可評論

0條評論

lovXin

男|高級講師

我要關(guān)注我要私信

TA的文章

【平衡小車】前言

閱讀 1599·2021-11-16 11:44
ip地址怎么判斷主機(jī)地址-如何判斷一個(gè)ip地址是不是有效主機(jī)地址？

閱讀 7492·2021-09-22 15:00
虛擬機(jī)wmware workstation pro 16.1.2 Build 17966106官方版

閱讀 4525·2021-09-02 10:20
知名開源軟件廠商 Grafana Labs 完成5000萬美元B輪融資，估值已達(dá)30億美元

閱讀 1955·2021-08-27 16:20
【JavaScript系列】vue項(xiàng)目中實(shí)現(xiàn)滾動條（具體視窗口的滾動條）操作：（1）置底，（2）置于

閱讀 2402·2019-08-26 14:00
高級 Angular 組件模式 (4)

閱讀 2916·2019-08-26 11:44
websocket pc端調(diào)試成功，手機(jī)端不可通信

閱讀 1647·2019-08-23 18:33
自開發(fā)的EasyCanvas繪圖庫實(shí)踐、Pixeler項(xiàng)目開發(fā)小結(jié)

閱讀 1878·2019-08-22 17:28

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

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

**記一次基于vue的spa多頁簽實(shí)踐經(jīng)驗(yàn)**

**記一次基于vue的spa多頁簽實(shí)踐經(jīng)驗(yàn)**

**Slog6_使用vue前端框架實(shí)現(xiàn)單頁應(yīng)用(SPA)**

雙十二大前端工程師讀書清單

發(fā)表評論

0條評論

lovXin

男|高級講師

TA的文章

【平衡小車】前言

ip地址怎么判斷主機(jī)地址-如何判斷一個(gè)ip地址是不是有效主機(jī)地址？

虛擬機(jī)wmware workstation pro 16.1.2 Build 17966106官方版

知名開源軟件廠商 Grafana Labs 完成5000萬美元B輪融資，估值已達(dá)30億美元

【JavaScript系列】vue項(xiàng)目中實(shí)現(xiàn)滾動條（具體視窗口的滾動條）操作：（1）置底，（2）置于

高級 Angular 組件模式 (4)

websocket pc端調(diào)試成功，手機(jī)端不可通信

自開發(fā)的EasyCanvas繪圖庫實(shí)踐、Pixeler項(xiàng)目開發(fā)小結(jié)

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！