Day93 Java项目 (SSM+Dubbo)商城(二) 品牌管理前端与图片上传

1. ElementUI介绍

一.什么是ElementUI

Element，“饿了么”出品的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。

二.ElementUI查用组件

详见elementUI官网  http://element-cn.eleme.io/2.0/#/zh-CN

2. ES6

一.什么是ES6

1. 编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：
   语言语法 – 语法解析规则、关键字、语句、声明、运算符等。
   类型 – 布尔型、数字、字符串、对象等。
   原型和继承
   内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。
2. ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似node.js的非浏览器环境。
3. ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，2015年6月正式发布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

二.常用语法新特性

1. 变量声明let :
   我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函
   数的最顶部(不在函数内即在全局作用域的最顶部)。
   这就是函数变量提升例如
   
   以上的代码实际上是:
   
   接下来ES6主角登场：
   我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？在一个函数内部 ，在一个代码块内部。看以下代码
   
2. 常量声明 :
   const 用于声明常量，看以下代码
   
3. 模板字符串
   1. 第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
      
   2. 第二个用途，在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定。
      
4. 箭头函数
   ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。
   箭头函数最直观的三个特点。
   1.不需要function关键字来创建函数
   2.省略return关键字
   3.继承当前上下文的 this 关键字
   看下面代码（ES6）
   
   相当于ES5代码
   

3.商城管理后台-品牌管理前端

一.列表展示

1. 需求：如下图所示，使用表格控件显示全部的品牌数据，不用分页与条件查询。
2. 代码实现:
   1. 拷贝资源：将资料\前端相关\js 和css文件夹拷贝到qingcheng_web_manager工程的webapp下，
      qingcheng_web_manager工程的webapp下创建goods文件夹, 在goods文件夹下创建brand.html
      
   2. 编写页面
      
   3. 使用表格控件展现数据
      

二.分页列表展示

1. 页面的表格下方添加分页组件
   
   size-change 页大小更改时触发的事件
   current-change 当前页更改时触发的事件
   current-page 当前页变量
   page-sizes 每页记录数选项列表
   page-size 当前选择的每页记录数
   layout布局列表 total 总记录数 sizes 每页记录数选择框 prev 上一页 next下一页
   pager 页码 jumper 为页码跳转
   total 为总记录数
2. 修改js脚本
   

三.条件查询

1. 实现思路： 表格上方添加表单，表单内的文本框等控件绑定查询对象，点击查询按钮触
   发方法，将查询对象传递给后端进行查询。
2. 代码实现 :
   1. 在表格上方添加表单
      
   2. 修改js代码 ，data新增searchMap属性
      
   3. 更改axios调用的代码，改为post提交，传递searchMap对象
      

四.新增品牌

1. 需求：页面上添加“新增”按钮，点击新增按钮弹出窗口，窗口中包含表单和保存、关闭按
   钮。填写数据后点击保存按钮关闭窗口，刷新列表数据。
2. 窗口的弹出与关闭：data添加属性，用于控制窗口显示
   
   添加弹出窗口
   
   添加按钮，控制窗口的弹出
   
3. data添加属性pojo 用于保存实体
   
   在窗口添加表单
   
4. 添加save方法
   

五.修改品牌

1. 需求：在表格中添加操作列，操作列中有修改按钮，点击修改按钮弹出窗口加载数据。
   用户修改数据后点击保存，保存后关闭窗口刷新列表。
2. 在表格中新增模板列
   
3. 增加edit方法，用于加载数据
   
4. 修改save方法
   三目运算符, 判断id是否为空, 空就add, 非空就update
   

六.删除品牌

1. 需求: 表格操作列增加“删除”按钮，点击删除，弹出提示，确定后删除数据刷新列表。
2. 操作列中新增“删除”按钮
   
3. 新增dele方法
   

4.图片上传

一.图片上传组件

1. 在弹出窗口中放置图片上传组件
   
2. 修改脚本，data 增加属性
   
   增加方法
   
3. 修改edit和save方法
   
   

二.SpringMVC接收图片上传

1. SpringMVC 中，文件的上传，是通过 MultipartResolver 实现的。 所以，如果要实现文件的上传，只要在 spring-mvc.xml 中注册相应的 MultipartResolver 即可。
2. MultipartResolver 的实现类有两个：
   1. CommonsMultipartResolver
   2. StandardServletMultipartResolver
   两个的区别：
   1. 第一个需要使用 Apache 的 commons-fileupload 等 jar 包支持，但它能在比较旧的
   servlet 版本中使用。
   2. 第二个不需要第三方 jar 包支持，它使用 servlet 内置的上传功能，但是只能在
   Servlet 3 以上的版本使用。
3. qingcheng_common_web增加配置
   
   maxUploadSize： 设置允许上传的最大文件大小，以字节为单位计算。当设为-1时表示无限制，默认是-1。
4. qingcheng_web_manager工程新建controller
   
   MultipartFile是spring类型，代表HTML中form data方式上传的文件，包含二进制数据
   +文件名称

5.云存储解决方案-阿里云OSS

一.什么是阿里云OSS

1. 阿里云对象存储服务（Object Storage Service，简称OSS）为您提供基于网络的数据存取服务。使用OSS，您可以通过网络随时存储和调用包括文本、图片、音频和视频等在内的各种非结构化数据文件。
   阿里云OSS将数据文件以对象（object）的形式上传到存储空间（bucket）中。
2. 可以进行以下操作：
   1. 创建一个或者多个存储空间，向每个存储空间中添加一个或多个文件。
   2. 通过获取已上传文件的地址进行文件的分享和下载。
   3. 通过修改存储空间或文件的属性或元信息来设置相应的访问权限。
   4. 在阿里云管理控制台执行基本和高级OSS任务。
   5. 使用阿里云开发工具包或直接在应用程序中进行RESTful API调用执行基本和高级OSS任务

二.OSS开通

1. 打开https://www.aliyun.com/ ，申请阿里云账号并完成实名认证。
2. 开通OSS: 登录阿里云官网。将鼠标移至产品找到并单击对象存储OSS打开OSS产品详情页面。在OSS产品详情页中的单击立即开通。开通服务后，在OSS产品详情页面单击管理控制台直接进入OSS管理控制台界面。您也可以单击位于官网首页右上方菜单栏的控制台，进入阿里云管理控制台首页，然后单击左侧的对象存储OSS菜单进入OSS管理控制台界面。
   
   
3. 创建存储空间
   新建Bucket，命名为qingcheng ，读写权限为公共读

三.OSS快速入门

1. 创建测试工程，引入依赖
   
2. 新建类和main方法
   

四.商城管理后台-OSS图片上传

1. qingcheng_common_web添加依赖
   
2. qingcheng_common_web添加配置
   
3. UploadController新增方法
   
4. 修改brand.html页面的上传组件