總結：iview（基於vue.js的開源ui組件）學習的一些坑

一、要改變組件的樣式

找到這個組件的class名，而後覆蓋樣式。

舉例：修改select框，顯示圓角。只需給找到類名並寫樣

.ivu-select-selection{
  border-radius:15px;
}

二、form表單必須有:model="formInline" :rules="ruleInline"

<Form ref="formInline" :model="formInline" :rules="ruleInline">

數據綁定爲formInline，這樣再之後表單提交的時候，只需提交formInline便可。

：rules是表單的驗證規則

<FormItem prop="user">
        <Input type="text" v-model="formInline.user" placeholder="Username">
             <Icon type="ios-person-outline" slot="prepend"></Icon>
        </Input>
 </FormItem>
 <FormItem prop="password">
        <Input type="password" v-model="formInline.password" placeholder="Password">
            <Icon type="ios-lock-outline" slot="prepend"></Icon>
        </Input>
 </FormItem>

每一個formItem即爲表單的一項。prop參數即爲這項所填數據的驗證規則。

三、作表格時須要分頁以及和後臺的交互

export async function getInformList(pid = 0, page_size, page_num, keyword){
return $http.post('Inform_Inform.getList',
{   pid: pid,
page_size: page_size,
page_num: page_num,
keyword: keyword,
});

這是查詢接口，須要給後臺傳遞4個參數，page_size是每頁展現的條數。page_num是指當前是第幾頁。Keyword用於搜索時查詢關鍵字相關的list。

在頁面初始化時候，先運行一次getInformList函數，取到全部的數據

再搜索的時候，把key值傳遞給keyword.用watch來監聽keyword的變化。

created: function () {
             this.getAllInformList();
 },
 watch:{           
          keyword: function (newQuestion) {
                 console.log(newQuestion)            
               this.search();
           },
 }

分頁主要作兩部分

（1）、點擊頁數，顯示本頁。要觸發page這個組件的@on-change事件。這個事件方法只須要把函數的返回值頁碼賦給要傳遞給服務器接口的參數便可。

（2）、點擊每頁顯示多少條數，要觸發page這個組件的@on-page-size-change事件，這個事件方法一樣把函數返回的條數傳遞給接口接口。

//改變頁數
    change(page) {
            this.page_num = page;
            this.getAllInformList();
         },
     changeSize(page_size) {           
           this.page_num = 1;
           this.page_size = page_size;
           this.getAllInformList();
}

四、在頁面A點擊修改按鈕，要去頁面B從新填表單，這個表單默認的值是須要傳給頁面B的。

想法：在頁面A點擊修改按鈕的時候把這條數據的id值傳遞給頁面B,運用到路由傳參。

this.$router.push({name:'announce',params:{id:id}});

注意！這樣傳遞參數的方式是不會在瀏覽器url欄顯示？id=123這樣。只有如下這種方式傳參時會有。

this.$router.push({path: '/describe',query: {id: id}})

那麼此時B頁面須要判斷是不是從A頁面這個路由進入本頁面而且攜帶一個params.id參數。

beforeRouteEnter(to,from,next){
    next(vm => {
 if(to.params.id){
//請求後臺接口，根據此id找到這一條數據而且，填入默認數據，
}else{
//不是從修改這一操做進的頁面，不作處理
}
}

五、本次項目先後端接口查看用的是postman，請求後臺接口的時候有時會出現499,這是由於給後臺的token過時了。

更新token ：打開fidder抓包工具，進入一個請求接口的網頁。點擊某一項請求，找到響應頭的token，而且在postman裏面更新便可。

六、本次項目引入了富文本編輯器。

import { quillEditor } from 'vue-quill-editor'

這個編輯器會把傳入的圖片的地址進行base64編碼，這樣上傳到服務器會慢，數據很長。因此本次處理是先把照片上傳到服務器，服務器提供一個接口把圖片地址轉爲真實地址，頁面取到這一地址在顯示出來。

七、對一條記錄新增和修改，能夠用同一個頁面，只不過請求的接口不同而已。

頁面	請求接口	功能
新增公告	http://192.168.1.13/ApiForProjectManage/public/?s=Inform_Inform.addInform	把本頁面form表單進行提交，提交的數據爲data=formItem
修改公告	http://192.168.1.13/ApiForProjectManage/public/?s=Inform_Inform.getInfo&inform_id=12219	根據公告ID來查找本條數據
	http://192.168.1.13/ApiForProjectManage/public/?s=Inform_Inform.editInform	把修改後的表單進行提交，提交的數據爲formItem，注意這條公告id不變

 

思考：在公告頁面點擊編輯（修改）按鈕，會進入編輯頁面，這時要攜帶本條公告form_id。到了編輯頁面。須要判斷是從建立公告按鈕到達的仍是經過點擊編輯過來的，須要判斷路由來歷。befoerRouterEnter

editInform(id) {
                console.log(id);
                 this.$router.push({name:'announce',params:{id:id}});   
            }

 vm是一個組件

beforeRouteEnter(to,from,next){
       next(vm => {
      if(to.params.id){
          vm.isModify=true;
          vm.announceList(to.params.id);
          vm.inform_id_temp=to.params.id;
        }
      })     
    },

注意這裏調用this.announceList是不行的。必須用vm來調用。vm能夠獲取到method中的方法 以及變量

提交按鈕新增和編輯也不同。

<Button v-show="!isModify" type="primary" @click="handleSubmit('formValidate')">確認提交</Button>
 <Button v-show="isModify" type="primary" @click="handleModify('formValidate')">確認修改</Button>

formItem:{
                title: '',
                content: '',
                inform_type: '',
                inform_id: 0
            },

在這裏有一個小點，困了我半個小時。一開始我只有3條數據，沒有inform_id.由於新增的時候，只需提交前三條數據，Inform_id是後臺生成的。而修改的時候，顯示接口調用成功，可是數據並無改變，後來檢查發現inform_id必須也事先定義在formItem裏面。默認爲0，若是是調用修改接口，在把Inform_id從新賦值爲從上一個頁面過來時攜帶的參數。

handleModify(name) {
             this.$refs[name].validate(valid => {           
               if (valid) {
                        let app = this;
                        app.send_loading = true;
                        app.formItem.inform_id = app.inform_id_temp;
                        modifyInform(app.formItem).then(res => {
                             console.log(app.formItem.inform_id);
                            const code = res.ret;
                            const msg = res.msg;   
                            if (code !== 200) {
                                app.$Message.warning(msg);
                            } else {
                                app.$Message.success('修改爲功');
                                this.$router.push('list');
                              //  app.getTeamList()
                            }
                        });
                    }
                })          
        },

八、經過類型篩選公告列表時，我給Select綁定事件，發現@click沒有用。經過查API得知要用@on-change。

 

來源：https://blog.csdn.net/runner_123/article/details/85169975