一、圖像組件

< el-image>：保留了原生的img的屬性

<el-image
      style="width: 100px; height: 100px"
      :src="url"
      :fit="fit">
</el-image>

//1.src屬性：圖像的地址，綁定變量用來指定圖片的地址，通常需要使用require來拉取圖片
//2.fit屬性：確定圖片如何適應到容器框（'fill', 'contain', 'cover', 'none', 'scale-down'）
//3.lazy屬性：圖片懶加載（按需加載）

二、導航菜單（NavMenu）

1、導航方向：通過mode屬性設置

2、菜單項：

<el-menu mode="方向" background-color="背景色" text-color="文本顏色" 
         default-active="默認打開的菜單" 
         active-text-color="活動的菜單的文本的顏色">
    <el-submenu index="1"> //菜單項
            <template slot="title">  //標題文本
              <i class="el-icon-notebook-2"></i> //文本前的圖標
              <span>在線教材</span>
            </template>
              <el-menu-item index="1-1"> //子菜單項
                <router-link to="/books" class="link">出版圖書</router-link>
              </el-menu-item>
              <el-menu-item index="1-2">教案管理</el-menu-item>
              <el-menu-item index="1-3">教材管理</el-menu-item>
   </el-submenu>

  //disabled屬性：表示該菜單項不可用

三、上傳組件：Upload

<el-upload
            class="avatar-uploader"
            style="margin-left: 30px;"
            drag
            action="http://localhost:8089/books/upload"
            :show-file-list="false"
            :on-change="handlePreview"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            multiple >
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">將圖書圖片拖到此處，或<em>點擊上傳</em></div>
          <div class="el-upload__tip" slot="tip">只能上傳jpg/png文件，且不超過2M</div>
/el-upload>

 //1.drag屬性：表示是否啟用拖拽上傳 
 //2.action屬性：上傳服務器的地址
 //3.show-file-list：  是否顯示已上傳文件列表(true/false) 
 //4.data：上傳時是否需要附帶額外的參數(shù)
 //5.multiple：是否可以上傳多個文件
 //6.on-change事件：當上傳文件的內(nèi)容發(fā)生改變時觸發(fā)，
 //7.on-success事件：當上傳成功后觸發(fā)   
 //8.before-upload事件：在上傳之前觸發(fā)(通常用于檢查上傳文件的格式、大小)  

對應的代碼：
//before-upload事件的處理函數(shù)：圖片上傳之前的驗證
    beforeAvatarUpload(file) {
      const isJPG = (file.type === 'image/jpeg'||'image/png');
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上傳頭像圖片只能是 JPG 格式!');
        this.imageUrl = ''
      }
      if (!isLt2M) {
        this.$message.error('上傳頭像圖片大小不能超過 2MB!');
        this.imageUrl = ''
      }
      return isJPG && isLt2M;
    },
    //on-change事件的處理函數(shù)：顯示圖片
    handlePreview(file){
      console.log('#####:',file)
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    //on-success事件觸發(fā)的函數(shù)：圖片上傳成功后
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },

示例：

（1）使用elementUI的上傳組件將圖片上傳到服務器并保存到數(shù)據(jù)庫中

（2）在el-table控件中將上傳的圖片顯示出來

實現(xiàn)過程：

（1）給數(shù)據(jù)庫中的數(shù)據(jù)表增加一列（image_url）：保存圖片在服務器中存儲路徑

（2）在服務器端給BookModel增加一個屬性imageUrl，該屬性映射的是數(shù)據(jù)表中的image_url列

（3）在前端組件中使用FormData對數(shù)據(jù)進行打包（直接使用內(nèi)置模塊）：將表單控件的值和el-upload組件的值

A、在組件的data中增加變量：uploadImage存放用戶選擇的文件信息

      let formData = new FormData()
      formData.append('bookName',this.form.bookName)
      formData.append('bookAuthor',this.form.bookAuthor)
      formData.append('publishTime',this.form.publishTime)
      formData.append('bookPrice', this.form.bookPrice)
      formData.append('uploadImage', this.uploadImage)

B、將formData提交給服務器端的接口 npm install formidable

（4）在后臺接口中使用formidable模塊來解析formData中的數(shù)據(jù)

let cacheFolder = 'public/images/uploads'
    if(!fs.existsSync(cacheFolder)){
        fs.mkdirSync(cacheFolder)
    }

    let form = new formidable.IncomingForm();
    form.encoding = 'utf-8'; //設置編輯
    form.uploadDir = cacheFolder; //設置上傳目錄
    form.keepExtensions = true; //保留后綴
    // form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
    // form.type = true;

    form.parse(req,function (err,fields,files){
        console.log(files)
        let newPath = cacheFolder + '/' + files.uploadImage.originalFilename;
        let displayUrl =  `http://localhost:8089/images/uploads/${files.uploadImage.originalFilename}`

        fs.renameSync(files.uploadImage.filepath,newPath);

        let book = {
            bookName: fields.bookName,
            bookAuthor: fields.bookAuthor,
            publishTime: fields.publishTime,
            bookPrice: fields.bookPrice,
            imageUrl: displayUrl
        }
        BookDao.insertBook(book).then(result=>{
            if (result){
                res.json({
                    code: 200
                })
            }
        }).catch(err=>{
            console.log(err)
            res.json({
                code: 500
            })
        })
    })

（5）將上傳到服務器端的圖片在客戶端的表格（el-table）中顯示出來

四、分頁組件

1、實現(xiàn)分頁的方式：

（1）服務器端分頁：通過底層的數(shù)據(jù)庫來實現(xiàn)，前端會頻繁的和服務器交互，客戶端每次請求的是分頁的數(shù)據(jù)而不是所有數(shù)據(jù)

（2）前端分頁：一次性從數(shù)據(jù)庫中取出數(shù)據(jù)緩存起來，然后對緩存中的數(shù)據(jù)進行分頁處理

2、實現(xiàn)分頁的要素：

（1）總記錄數(shù)

（2）每頁顯示的記錄數(shù)

（3）需要的頁數(shù)

（4）每頁數(shù)據(jù)的起始索引文章來源地址http://www.zghlxwxcb.cn/news/detail-787410.html

1. • element-ui的分頁組件：

@size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400">

//1.size-change事件：每頁顯示的記錄數(shù)發(fā)生改變時觸發(fā)，會自動給事件處理函數(shù)傳遞一個參數(shù)，參數(shù)值是新的每頁顯示的記錄數(shù)
//2.current-change事件：當前的頁碼發(fā)生改變時觸發(fā)，會自動給事件處理函數(shù)傳遞一個參數(shù)，參數(shù)值是新的頁碼
//3.current-page屬性：當前頁的頁碼
//4.page-sizes屬性：每頁顯示的記錄數(shù)的列表，屬性值是一個數(shù)組
//5.page-size屬性：當前每頁顯示的記錄數(shù)，屬性值是一個數(shù)字
//6.layout屬性：分頁組件的布局
//7.total屬性：總記錄數(shù)