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

資訊專欄INFORMATION COLUMN

使用 vue + thinkjs 開發(fā)博客程序記錄

Mike617 / 1930人閱讀

摘要:一入冬懶癌發(fā)作,給自己找點(diǎn)事干。之前博客程序?qū)戇^幾次,的寫過兩次,用寫過,隨著版本從升級(jí)到之前的博客程序也做過升級(jí)。這里主要記錄一下開發(fā)過程中遇到的問題和解決方法。后端使用守護(hù)進(jìn)程即可。

一入冬懶癌發(fā)作,給自己找點(diǎn)事干。之前博客程序?qū)戇^幾次,php 的寫過兩次,nodejs 用 ThinkJS 寫過,隨著 ThinkJS 版本從1.x 升級(jí)到 2.x 之前的博客程序也做過升級(jí)。但是因?yàn)榍懊婵紤]搜索引擎抓取還是用傳統(tǒng)的方式開發(fā),沒有做前后端分離。這次準(zhǔn)備用 vue2.x 和 ThinkJS 3.X 重新寫一次。這里主要記錄一下開發(fā)過程中遇到的問題和解決方法。

地址 https://github.com/lscho/Thin...

尚未寫完,持續(xù)更新中,后續(xù)更新發(fā)布在個(gè)人博客中:https://lscho.com/tech/vue-th...

設(shè)計(jì)方案

1.前后端分離
2.后端只提供接口
3.RESTful API
4.使用 jwt 身份認(rèn)證

依賴 服務(wù)端
  "dependencies": {
    "think-logger3": "^1.0.0",
    "think-model": "^1.0.0",
    "think-model-mysql": "^1.0.0",
    "think-session": "^1.0.0",
    "think-session-jwt": "^1.0.8",
    "thinkjs": "^3.0.0"
  }
前端
  "dependencies": {
    "axios": "^0.17.0",
    "iview": "^2.5.1",
    "mavon-editor": "^2.4.13",
    "vue": "^2.5.2",
    "vue-axios": "^2.0.2",
    "vue-router": "^3.0.1",
    "vuex": "^3.0.0",
    "vuex-router-sync": "^5.0.0"
  }
結(jié)構(gòu)

|-client 前端
|-server 后端

問題 jwt 身份認(rèn)證

jwt 的原理很清楚,之前自己也實(shí)現(xiàn)過類似的功能,搜索了一下,找到了 node-jsonwebtoken 這個(gè)包,使用起來很簡單,主要就是加密和解密兩個(gè)功能。一番折騰之后成功運(yùn)行,但是去 ThinkJS 倉庫看了一下,竟然有發(fā)現(xiàn)了 think-session-jwt 這個(gè)插件,也是基于 node-jsonwebtoken 的。這個(gè)就更好用了,配置完之后直接用 ThinkJS 的 ctx.session 方法就可以生成和驗(yàn)證。配置的時(shí)候需要注意一下 tokenType 這個(gè)參數(shù),他決定了如何獲取 token ,我這里用的是 header ,也就是說后面會(huì)從每個(gè)請(qǐng)求的 header 中找 token,key 值為配置的 tokenName。

然后要處理前端部分,為每個(gè)請(qǐng)求附加上 token。這里我用的是 axios ,在請(qǐng)求攔截器中很方便的就可以加上。

let loadinginstace;
axios.interceptors.request.use(config => {
    if (localStorage.getItem("token")) {   
        config.headers.Authorization = localStorage.getItem("token")
    }    
    return config;
},error => {
    return error;
})

然后登錄之后的每個(gè)請(qǐng)求中就可以看到

后端權(quán)限認(rèn)證

因?yàn)?API 接口遵循 RESTful 風(fēng)格,所以對(duì)除了 GET 類型的請(qǐng)求,都要驗(yàn)證 token 是否有效,ThinkJS 的控制器提供了前置操作 __before。在這里可以做一下邏輯判斷,通過的才會(huì)繼續(xù)執(zhí)行。

  async __before(action) {
    try {
      this.userInfo=await this.ctx.session("userInfo");
    } catch(err) {
      this.userInfo={};
    }
    if(this.resource!="token"&&this.ctx.method!="GET"&&think.isEmpty(this.userInfo)){
      this.ctx.status=401;
      return this.ctx.fail(-1,"請(qǐng)登錄后操作");
    }
  }

這里遇到一個(gè)問題,就是當(dāng) token 為錯(cuò)誤時(shí),node-jsonwebtoken 會(huì)拋出一個(gè)異常,所以這里用了 try catch 捕獲,可能有更好的解決辦法,暫時(shí)放后面處理。

前端身份失效檢測

為了安全起見,我們的 token 一般設(shè)置的都有效期,所以有兩種情況需要我們進(jìn)行處理.

token 不存在,這種很好處理,直接在路由的前置操作中判斷是否存在,存在則放行,不存在則轉(zhuǎn)向登錄界面

      beforeEnter:(to, from, next)=>{
        if(!localStorage.getItem("token")){
          next({ path: "/login" });
        }else{
          next();
        }
      }

2.token 超過有效期或者被篡改。這種需要后端檢測之后才能知道該 token 是否有效。這里服務(wù)端檢測失效之后會(huì)返回 401 狀態(tài)碼以便前端識(shí)別。

    if(this.resource!="token"&&this.ctx.method!="GET"&&think.isEmpty(this.userInfo)){
      this.ctx.status=401;
      return this.ctx.fail(-1,"請(qǐng)登錄后操作");
    }

我們?cè)赼xios的請(qǐng)求響應(yīng)攔截器中進(jìn)行判斷即可,因?yàn)?4XX 的狀態(tài)碼會(huì)拋出異常,所以代碼如下

axios.interceptors.response.use(data => {
        //這里可以對(duì)成功的請(qǐng)求進(jìn)行各種處理
    return data;
},error=>{
    if (error.response) {
            switch (error.response.status) {
            case 401:
            store.commit("clearToken");
                router.replace("/login");
            break;
            }
    }
    return Promise.reject(error.response.data)
})
markdown 編輯器及文件上傳

markdown 編輯器用了 mavonEditor 配置很方便,不多說,主要說一下文件上傳遇到的一個(gè)問題。
前端代碼

            imgAdd(pos, $file){
               var formdata = new FormData();
               formdata.append("image", $file); 
               image.upload(formdata).then(res=>{
                    if(res.errno==0&&res.data.url){
                        this.$refs.md.$img2Url(pos, res.data.url);
                    }
               });               
            }

后端處理

        const file = this.file("image");
        const extname=path.extname(file.name);//path.extname獲取文件后綴名,可做控制
          const filename = path.basename(file.path);
          const basename=think.md5(filename)+extname;
          const savepath = "/upload/"+basename;
        const filepath = path.join(think.ROOT_PATH, "www"+savepath);
        think.mkdir(path.dirname(filepath));
        try{
            //跨盤符移動(dòng)會(huì)拋出異常
            await rename(file.path, filepath);
        }catch(e){
            const readStream = fs.createReadStream(file.path);
            const writeStream = fs.createWriteStream(filepath);
            readStream.pipe(writeStream);
        }

這里也用了一個(gè) try catch 來捕獲異常,主要是因?yàn)?ThinkJS 會(huì)將上傳的文件先放到臨時(shí)目錄中,而在 windows 下臨時(shí)目錄可能和項(xiàng)目目錄不在同一盤符下,進(jìn)行移動(dòng)的話就會(huì)拋出一個(gè)異常:Error: EXDEV, cross-device link not permitted,沒有權(quán)限移動(dòng),這時(shí)候就只能先讀文件,再寫文件

2017-12-27 更新 在群里@阿特 大佬提到,可以對(duì) payload
這個(gè)中間件設(shè)置指定臨時(shí)目錄為項(xiàng)目下的某個(gè)目錄,這樣就不存在跨盤

    {
        handle: "payload",
        options: {
            uploadDir: path.join(think.ROOT_PATH, "runtime/data")
        }
    }

這樣就可以直接使用 rename 來操作了,關(guān)于跨盤 rename 的問題,在 https://github.com/nodejs/nod... 找到了原因,大意是操作系統(tǒng)限制 rename 僅僅是重命名路徑引用地址,并沒有將數(shù)據(jù)移動(dòng)過去,重命名不能跨文件系統(tǒng)操作,所以如果跨文件系統(tǒng)操作需要先復(fù)制、然后刪除舊數(shù)據(jù)

部署

因?yàn)榍岸寺酚墒褂?history 模式,所以要將請(qǐng)求轉(zhuǎn)發(fā)至 index.html 入口頁面處理,跟有些 mvc 框架單入口是一個(gè)概念。

        # 請(qǐng)求轉(zhuǎn)發(fā)至入口
        location / {
            try_files $uri $uri/ /index.html;
        }

然后還要處理一下后端請(qǐng)求部分,如果不是同一域名,就要解決跨域問題。這里前后端使用同一個(gè)域名,針對(duì) api 請(qǐng)求做一下反向代理即可。

        set $node_port 8360;
        location ~ ^/api/ {
            proxy_http_version 1.1;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_set_header X-NginX-Proxy true;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
            proxy_pass http://127.0.0.1:$node_port$request_uri;
            proxy_redirect off;
        }

后端使用 pm2 守護(hù)進(jìn)程即可。

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

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/51640.html

相關(guān)文章

  • Vue+thinkJs博客網(wǎng)站(一)之vue多頁面應(yīng)用的webpack3配置

    摘要:首先看下的代碼編譯前刪除之前編譯生成的靜態(tài)資源首先需要改的是入口文件,因?yàn)槭嵌囗撁鎽?yīng)用,需要多個(gè)入口文件來保證打包成不同的。 一.項(xiàng)目簡介 ? ? 本項(xiàng)目使用vue作為前端框架,thinkJs作為后端框架,構(gòu)建個(gè)人博客網(wǎng)站,頁面分為博客展示和后臺(tái)管理,主要目的是學(xué)習(xí)使用thinkJs。現(xiàn)在只完成了主要的博客增刪改功能,發(fā)現(xiàn)webpack的配置遇到了一些坑,這里先記錄下。項(xiàng)目目錄結(jié)構(gòu)如下...

    NickZhou 評(píng)論0 收藏0
  • Vue+thinkJs博客網(wǎng)站(一)之vue多頁面應(yīng)用的webpack3配置

    摘要:首先看下的代碼編譯前刪除之前編譯生成的靜態(tài)資源首先需要改的是入口文件,因?yàn)槭嵌囗撁鎽?yīng)用,需要多個(gè)入口文件來保證打包成不同的。 一.項(xiàng)目簡介 ? ? 本項(xiàng)目使用vue作為前端框架,thinkJs作為后端框架,構(gòu)建個(gè)人博客網(wǎng)站,頁面分為博客展示和后臺(tái)管理,主要目的是學(xué)習(xí)使用thinkJs。現(xiàn)在只完成了主要的博客增刪改功能,發(fā)現(xiàn)webpack的配置遇到了一些坑,這里先記錄下。項(xiàng)目目錄結(jié)構(gòu)如下...

    dongxiawu 評(píng)論0 收藏0
  • Vue+thinkJs博客網(wǎng)站(二)之thinkJs使用

    摘要:插件機(jī)制可以說是自定義的鉤子函數(shù)。首先在新建文件夾,新建文件以為例更新內(nèi)容緩存里對(duì)應(yīng)的數(shù)組表示鉤子函數(shù)的調(diào)用名,具體調(diào)用的是下面的方法。 一.簡介 這個(gè)個(gè)人博客網(wǎng)站最初制作的目的就是練習(xí)使用thinkJs,這一篇就主要講一下thinkJs的一些特性和注意事項(xiàng)。涉及到了文件上傳,thinkJs的插件機(jī)制,model層建立以及CURD的編寫方式等。本項(xiàng)目github地址在這里。 項(xiàng)目thi...

    desdik 評(píng)論0 收藏0
  • Vue+thinkJs博客網(wǎng)站(二)之thinkJs使用

    摘要:插件機(jī)制可以說是自定義的鉤子函數(shù)。首先在新建文件夾,新建文件以為例更新內(nèi)容緩存里對(duì)應(yīng)的數(shù)組表示鉤子函數(shù)的調(diào)用名,具體調(diào)用的是下面的方法。 一.簡介 這個(gè)個(gè)人博客網(wǎng)站最初制作的目的就是練習(xí)使用thinkJs,這一篇就主要講一下thinkJs的一些特性和注意事項(xiàng)。涉及到了文件上傳,thinkJs的插件機(jī)制,model層建立以及CURD的編寫方式等。本項(xiàng)目github地址在這里。 項(xiàng)目thi...

    lucas 評(píng)論0 收藏0
  • Vue+thinkJs博客網(wǎng)站(二)之thinkJs使用

    摘要:插件機(jī)制可以說是自定義的鉤子函數(shù)。首先在新建文件夾,新建文件以為例更新內(nèi)容緩存里對(duì)應(yīng)的數(shù)組表示鉤子函數(shù)的調(diào)用名,具體調(diào)用的是下面的方法。 一.簡介 這個(gè)個(gè)人博客網(wǎng)站最初制作的目的就是練習(xí)使用thinkJs,這一篇就主要講一下thinkJs的一些特性和注意事項(xiàng)。涉及到了文件上傳,thinkJs的插件機(jī)制,model層建立以及CURD的編寫方式等。本項(xiàng)目github地址在這里。 項(xiàng)目thi...

    _Suqin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<