前言

??上星期將wedo的手機(jī)端寫出來(lái)了之后，帶哥掛念的管理端也被我搞出來(lái)了。由于是筆記本開發(fā)的，連接上顯示器之后樣式就可能亂了（可能是不同的顯示屏大小不一樣，也可能是我比較菜）。先寫點(diǎn)總結(jié)吧，就當(dāng)是復(fù)習(xí)vue了。(我用的是element ui)

開搞

??1.在寫之前一定要把結(jié)構(gòu)給捋清楚，vue項(xiàng)目就像是一個(gè)樹，App.vue就是一個(gè)根，當(dāng)然可以根上再寫個(gè)根，便于擴(kuò)展。我在做wedo的時(shí)候又增加了個(gè)index.vue作為其他的根并將它引進(jìn)App.vue。

例圖

??2.創(chuàng)建了一個(gè)Login.vue，作為登錄頁(yè)面，然后在router中配置他做為Index.vue的孩子，然后在Index.vue中寫上<router-view/>,這個(gè)<router-view/>很重要，沒(méi)他頁(yè)面就出不來(lái)。就像這樣

index和login的關(guān)系

例圖

??3.創(chuàng)建Main.vue作為主頁(yè)面，當(dāng)?shù)卿洺晒χ缶瓦M(jìn)入的頁(yè)面，他是和Login.vue同級(jí)的

例圖

??4.在Main.vue中使用elementui的導(dǎo)航菜單，在這些導(dǎo)航中用他自帶按照路由跳轉(zhuǎn)的方式跳轉(zhuǎn)，他按照<el-menu-item index="/index/mains/comment">管理評(píng)論信息</el-menu-item>這個(gè)index的路徑跳轉(zhuǎn)，要把之后里面跳轉(zhuǎn)的路由全部寫到Main.vue的子路由下，并且在Main.vue里面也要有<router-view/>不然子路由下的東西不出來(lái)。

例圖

默認(rèn)跳轉(zhuǎn)頁(yè)面

??5.通過(guò)路由傳遞對(duì)象，和uniapp封裝數(shù)據(jù)的方式一樣，只是跳轉(zhuǎn)的方式不一樣，

跳轉(zhuǎn)路由+參數(shù)

拿到參數(shù)

??6.我之前在uniapp中數(shù)組內(nèi)容的交換是用的forEarch，帶哥說(shuō)太low了，他還想用ES6，可就是報(bào)錯(cuò)，我不太會(huì)ES6的語(yǔ)法，因此就用了concat()方法，這個(gè)應(yīng)該是js里面的，他是用于連接兩個(gè)或多個(gè)數(shù)組，屬于淺拷貝吧！

例圖

??7.添加和修改使用同一個(gè)模態(tài)框

子組件的模態(tài)框

父組件設(shè)置并傳遞值

子組件通過(guò)判斷傳過(guò)來(lái)是否有值，沒(méi)值就變?yōu)樘砑樱兄稻妥優(yōu)樾薷?/div>

??8.面包屑傳值

在跳轉(zhuǎn)后的頁(yè)面用生命周期函數(shù)拿一下值就行

??9.路由攔截
????在要跳轉(zhuǎn)的所有路由上都添上

meta: {
   requireAuth: true//攔截
},

????在登錄頁(yè)面判斷死數(shù)據(jù)，如果不為空就在sessionStorage中設(shè)置一個(gè)變量

sessionStorage.setItem("token", 'true');

就像這樣

????在main.js中判斷要跳轉(zhuǎn)的頁(yè)面

router.beforeEach((to, from, next) => {//到哪去,從哪來(lái),然后干嘛
    if (to.meta.requireAuth) {//判斷哪個(gè)要攔截
      if (sessionStorage.getItem("token") === 'true') {//判斷存的變量
        next()//如果是就繼續(xù)跳轉(zhuǎn)
      } else {//如果不是那就跳轉(zhuǎn)到登錄頁(yè)面
        next({
          path: '/index/login',
          /*query: {redirect: to.fullPath}*/
        })
      }
    } else {//如果不攔截直接跳轉(zhuǎn)
      if (sessionStorage.getItem("token") === 'true') {
        next('/index/mains');
      } else {
        next();
      }
    }
  }
);

????當(dāng)退出的時(shí)候可以設(shè)置sessionStorage.removeItem("token");，然后再跳轉(zhuǎn)到登錄頁(yè)面

??10.使用vuex存儲(chǔ)變量，在登錄的時(shí)候?qū)①~號(hào)和密碼存進(jìn)vuex中，之后再在主頁(yè)面中取出來(lái)

存進(jìn)actions

存進(jìn)statue

取出

??11.vue-quill-editor的使用（這是我找的一個(gè)大神的博客看著搞的，但是他的地址我給搞沒(méi)了，找不到了，希望大神看到我的博客內(nèi)容請(qǐng)勿責(zé)怪）

npm install vue-quill-editor --save//安裝

//main.js使用
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
Vue.use(VueQuillEditor);

//在一個(gè),vue文件中使用
<quill-editor class="editor" ref="myTextEditor" v-model="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" @change="onEditorChange($event)"/>

data() {
   return {
      content: '',
      item: {},
      input: "",
      editorOption: {
          modules: {
            toolbar: [
              ["bold", "italic", "underline", "strike"], // 加粗 斜體 下劃線 刪除線
              ["blockquote", "code-block"], // 引用  代碼塊
              [{header: 1}, {header: 2}], // 1、2 級(jí)標(biāo)題
              [{list: "ordered"}, {list: "bullet"}], // 有序、無(wú)序列表
              [{script: "sub"}, {script: "super"}], // 上標(biāo)/下標(biāo)
              [{indent: "-1"}, {indent: "+1"}], // 縮進(jìn)
              // [{'direction': 'rtl'}],                         // 文本方向
              [{size: ["small", false, "large", "huge"]}], // 字體大小
              [{header: [1, 2, 3, 4, 5, 6, false]}], // 標(biāo)題
              [{color: []}, {background: []}], // 字體顏色、字體背景顏色
              [{font: []}], // 字體種類
              [{align: []}], // 對(duì)齊方式
              ['clean'], // 清除文本格式
              ["link", "image", "video"], // 鏈接、圖片、視頻
            ], //工具菜單欄配置
          },
          placeholder: '章節(jié)內(nèi)容', //提示
          readyOnly: false, //是否只讀
          theme: 'snow', //主題 snow/bubble
          syntax: true, //語(yǔ)法檢測(cè)
       }
   }
}, 

methods: {
      // 失去焦點(diǎn)
      onEditorBlur(editor) {},
      // 獲得焦點(diǎn)
      onEditorFocus(editor) {},
      // 開始
      onEditorReady(editor) {},
      // 值發(fā)生變化
      onEditorChange(editor) {
        this.content = editor.html;
        console.log(editor);
      },
},

<style scoped>
  .editor {
    line-height: normal !important;
    height: 400px;
  }

  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "請(qǐng)輸入鏈接地址:";
  }

  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0;
    content: '保存';
    padding-right: 0;
  }

  .ql-snow .ql-tooltip[data-mode=video]::before {
    content: "請(qǐng)輸入視頻地址:";
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '14px';
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
    content: '10px';
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
    content: '18px';
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
    content: '32px';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: '文本';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: '標(biāo)題1';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: '標(biāo)題2';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: '標(biāo)題3';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: '標(biāo)題4';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: '標(biāo)題5';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: '標(biāo)題6';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '標(biāo)準(zhǔn)字體';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
    content: '襯線字體';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
    content: '等寬字體';
  }
</style>

在此我貼上另一個(gè)大神的地址地址

寫在最后
??1.終于把基本的頁(yè)面給寫完了，剩下的就是開始對(duì)接口和提高用戶友好度了，不過(guò)這都是可以解決的。如果想要了解具體的頁(yè)面寫法可以私聊我哦!
??2.最近的后端，帶哥還是比較愁的，之前接口和表結(jié)構(gòu)都想的比較復(fù)雜，導(dǎo)致現(xiàn)在要改接口和表，真是一大失誤??！不過(guò)這只是我們第一次前后端完全分離，畢竟萬(wàn)事開頭難嘛！
??3.最后我還是貼上帶哥，這個(gè)小哥哥可是年輕有為，長(zhǎng)得帥還有錢，這些都不是關(guān)鍵，關(guān)鍵還是技術(shù)好！嗯！編碼技術(shù)！可以私聊他后端技術(shù)哦！想要聊騷的就出門左拐吧！地址

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

wedo(前端)pc端總結(jié)

wedo(前端)pc端總結(jié)

前言

開搞

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

wedo(前端)pc端總結(jié)

前言

開搞

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av