0


element-ui组件

一、图像组件

< 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:上传时是否需要附带额外的参数
 //5.multiple:是否可以上传多个文件
 //6.on-change事件:当上传文件的内容发生改变时触发,
 //7.on-success事件:当上传成功后触发   
 //8.before-upload事件:在上传之前触发(通常用于检查上传文件的格式、大小)  

对应的代码:
//before-upload事件的处理函数:图片上传之前的验证
    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事件的处理函数:显示图片
    handlePreview(file){
      console.log('#####:',file)
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    //on-success事件触发的函数:图片上传成功后
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
示例:
(1)使用elementUI的上传组件将图片上传到服务器并保存到数据库中
(2)在el-table控件中将上传的图片显示出来
实现过程:

(1)给数据库中的数据表增加一列(image_url):保存图片在服务器中存储路径

(2)在服务器端给BookModel增加一个属性imageUrl,该属性映射的是数据表中的image_url列

(3)在前端组件中使用FormData对数据进行打包(直接使用内置模块):将表单控件的值和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中的数据

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、实现分页的方式:

(1)服务器端分页:通过底层的数据库来实现,前端会频繁的和服务器交互,客户端每次请求的是分页的数据而不是所有数据

(2)前端分页:一次性从数据库中取出数据缓存起来,然后对缓存中的数据进行分页处理

2、实现分页的要素:

(1)总记录数

(2)每页显示的记录数

(3)需要的页数

(4)每页数据的起始索引

  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事件:每页显示的记录数发生改变时触发,会自动给事件处理函数传递一个参数,参数值是新的每页显示的记录数
//2.current-change事件:当前的页码发生改变时触发,会自动给事件处理函数传递一个参数,参数值是新的页码
//3.current-page属性:当前页的页码
//4.page-sizes属性:每页显示的记录数的列表,属性值是一个数组
//5.page-size属性:当前每页显示的记录数,属性值是一个数字
//6.layout属性:分页组件的布局
//7.total属性:总记录数
标签: ui vue.js elementui

本文转载自: https://blog.csdn.net/m0_74331185/article/details/128667103
版权归原作者 不想写,还得写,写就写,慢慢写 所有, 如有侵权,请联系我们删除。

“element-ui组件”的评论:

还没有评论