一、图像组件

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

//1.src属性：图像的地址，绑定变量用来指定图片的地址，通常需要使用require来拉取图片
//2.fit属性：确定图片如何适应到容器框（'fill', 'contain', 'cover', 'none', 'scale-down'）
//3.lazy属性：图片懒加载（按需加载）

二、导航菜单（NavMenu）

1、导航方向：通过mode属性设置

2、菜单项

 //菜单项 //子菜单项出版图书教案管理教材管理//disabled属性：表示该菜单项不可用

三、上传组件：Upload

将图书图片拖到此处，或点击上传
只能上传jpg/png文件，且不超过2M
/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存放用户选择的文件信息

1. let formData = new FormData()
2. formData.append('bookName',this.form.bookName)
3. formData.append('bookAuthor',this.form.bookAuthor)
4. formData.append('publishTime',this.form.publishTime)
5. formData.append('bookPrice', this.form.bookPrice)
6. formData.append('uploadImage', this.uploadImage)

​ B、将formData提交给服务器端的接口

​ （4）在后台接口中使用formidable模块来解析formData中的数据

​ （5）将上传到服务器端的图片在客户端的表格（el-table）中显示出来

四、分页组件

1、实现分页的方式：

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

​ （2）前端分页：一次性从数据库中取出数据缓存起来，然后对缓存中的数据进行分页处理

2、实现分页的要素：

​ （1）总记录数

​ （2）每页显示的记录数

​ （3）需要的页数

​ （4）每页数据的起始索引

3、element-ui的分页组件：

 //1.size-change事件：每页显示的记录数发生改变时触发，会自动给事件处理函数传递一个参数，参数值是新的每页显示的记录数
//2.current-change事件：当前的页码发生改变时触发，会自动给事件处理函数传递一个参数，参数值是新的页码
//3.current-page属性：当前页的页码
//4.page-sizes属性：每页显示的记录数的列表，属性值是一个数组
//5.page-size属性：当前每页显示的记录数，属性值是一个数字
//6.layout属性：分页组件的布局
//7.total属性：总记录数