青橙-2 网站管理前端与图片上传

最终效果如图
此内容仅仅完成此部分功能，后续逐步介绍整体的前端后台
实现查询效果的界面分页效果
实现图片上传到对象服务器（对于图片，文件等资源需要有专门的服务器，占用空间巨大）
对于上次mapper实现的增删改查进行界面编写
在这里插入图片描述

云服务器内的资源文件如下
在这里插入图片描述
项目序列-2：https://github.com/Jonekaka/javaweb-qingcheng-2-77

学习目标

掌握ElementUI常用组件的使用
掌握ES6常用语法的使用
完成品牌管理前端代码
掌握图片上传代码的编写
掌握阿里云OSS的使用

1. ElementUI介绍

1.1 什么是ElementUI

Element，“饿了么”出品的一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。
比如表格，表单，下拉列表样式等等，因此可以直接使用方便，后台开发可以较快完成实践
提供了现成的组件模板
需要什么组件，选择然后查看提供的源码，复制调用即可，有样式，有属性介绍
在这里插入图片描述

1.2 ElementUI 常用组件

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

2. ES6

2.1 什么是ES6

编程语言JavaScript是ECMAScript的实现和扩展。ecma本身是一套规范，javascript实现了这套规范
ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。
ECMAScript定义了：
语言语法 – 语法解析规则、关键字、语句、声明、运算符等。
类型 – 布尔型、数字、字符串、对象等。
原型和继承
内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。
没有4版本，因为有很多新特性导致备受争议，被搁置了

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）
的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用
场景，无论是浏览器环境还是类似node.js的非浏览器环境。

ECMAScript是一门充满活力的语言，并在不断进化中。
未来版本的规范中将持续进行重要的技术改进

ECMAScript 6.0（以下简称ES6）是JavaScript语言的下一代标准，2015年6月正式发
布。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开
发语言。

2.2 常用语法新特性

2.2.1 变量声明let

在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升，例如

function aa() {
   
        if(true) {
   
        var test = 'hello man'
        }
        alert(test)
        }

test不应该被检测到的，但是后面仍然可以使用
以上的代码实际上是:

function aa() {
   
        var test;
        if(true) {
   
        test = 'hello man'
        }
        alert(test)
        }

这其实并不好，因为声明一个变量，肯定是希望作用范围局限在声明的范围，而不是自由扩展，否则会导致语法混乱

接下来ES6
通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用
域。怎么理解这个块级作用域？在一个函数内部，在一个代码块内部。
相当于收缩了变量作用范围

function aa() {
   
        if(bool) {
   
        let test = 'hello man'
        } else {
   
//test 在此处访问不到
        console.log(test)
        }
        }

2.2.2 常量声明

const 用于声明常量，看以下代码

const name = 'lux'
name = 'joe' //再次赋值此时会报错

2.2.3 模板字符串

es6模板字符解决了ES5在字符串功能上的痛点。
比如拼接url地址，变量等等，需要考虑其中取值问题，现在自动解决了，输入变量名自动取值拼接
第一个用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用${}来界定。
注意使用反引号，就是英文~键下的小点

//es5
var name = 'lux'
        console.log('hello' + name)
//es6
        const name = 'lux'
        console.log(`hello ${
   name}`) //hello lux

第二个用途，在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反
引号(“)直接搞定。
假如字符很长，传统要使用斜杠保持适当的长度，现在使用反引号包着就行

// es5
var msg = "Hi \
        man!"
// es6
        const template = `<div>
<span>hello world</span>
</div>`

2.2.4 箭头函数

ES6有意思的一部分就是函数的快捷写法。也就是箭头函数。
箭头函数最直观的三个特点。
1不需要function关键字来创建函数
2省略return关键字
3继承当前上下文的 this 关键字
看下面代码（ES6）

(response,message) => {
   
        .......
        }

相当于ES5代码

function(response,message){
   
        ......
        }

ui有了，如何书写有了，功能函数也有了，开始写界面吧

3. 青橙管理后台-品牌管理前端

引入ui组件文件
css，字体文件
基于vue.js。内部js,异步js
在这里插入图片描述
使用的还是之前的增删改查代码，此为其添加界面

3.1 列表展示

eui组件
在这里插入图片描述

需求：如下图所示，使用表格控件显示全部的品牌数据，分页与条件查询下面依次完善。
对于图片也应该显示

在这里插入图片描述

代码实现：

<!--引入样式表-->
<!--引入js-->

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF‐8">
<title>品牌管理</title>

<link rel="stylesheet" href="../css/elementui.css">
</head>
<body>

<script src="../js/vue.js"></script>
<script src="../js/elementui.js"></script>
<script src="../js/axios.js"></script>
</body>
</html>

（2）编写页面js：

/*定义作用域，约定为上的div app*/
/*后端异步请求*/
/*箭头函数省略，e6新特性*/

<script>
new Vue({
   

        el: '#app',
        data() {
   
        return {
   
        
        tableData: []
        }
        },
        created() {
   
        
        axios.get('/brand/findAll.do').then(response=> {
   
        this.tableData = response.data;
        });
        }
        })
</script>

（3）使用表格控件展现数据
直接调控件即可

<!--取数据中的哪个属性-->
<!--表头，标题-->
 <!--图片模板列-->
 <!--scop行对象-->

<el‐table :data="tableData" border style="width: 100%">
<el‐table‐column

        prop="id"
        
        label="ID"
        width="180">
</el‐table‐column>
<el‐table‐column
        prop="name"
        label="名称"
        width="180">
</el‐table‐column>
<el‐table‐column
        prop="letter"
        label="首字母">
</el‐table‐column>
<el‐table‐column
        label="图片"
        width="180">
       
<template slot‐scope="scope">

<img :src="scope.row.image">
</template>
</el‐table‐column>
</el‐table>

在这里插入图片描述

结果全部展示并不现实就像百度搜索中的百万条结果，你只需要看到前10条，需要分页

3.2 分页列表展示

去eui找分页ui组件
在这里插入图片描述

（1）页面的表格下方添加分页组件

 <!--这里是分页-->
  <!--执行的方法-->
  <!--sync修饰符，不加表示从变量取值后，变量更改不会改变，就错误的固定了，就是点击没有反应，
        不会重新加载数据-->
  <!--从下面vue中取值-->
   <!--约定显示的控件有哪些-->


    <el-pagination>
           
            @size-change="fetchData"
            @current-change="fetchData"
        
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 30, 40]"
       
            :page-size="size"
       
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

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

new Vue({
   
el: '#app',
data(){
   
return {
   
tableData: [],
currentPage: 1,
total: 10,
size: 10
}
},
created(){
   
this.fetchData();
},
methods:{
   
fetchData (){
   
axios.get(
`/brand/findPage.do?page=${
   this.currentPage}&size=${
   this.size}`).then(
response=> {
   
this.tableData = response.data.rows;
this.total = response.data.total;
});
}
}
})

这里便创建了分页效果
在这里插入图片描述

3.3 条件查询

查找ui控件，
实现思路：表格上方添加表单，表单内的文本框等控件绑定查询对象，点击查询按钮触发方法，将查询对象传递给后端进行查询。
代码实现：
（1）在表格上方添加表单

<!‐‐查询表单‐‐>
<!--placeholder是文本框默认的文字提示,占位文本-->


<el‐form :inline="true" >
<el‐form‐item label="品牌名称">

<el‐input v‐model="searchMap.name" placeholder="品牌名称">
</el‐input>
</el‐form‐item>
<el‐form‐item label="品牌的首字母">
<el‐input v‐model="searchMap.letter" placeholder="品牌的首字母"></el‐input>
</el‐form‐item>
<el‐button type="primary" @click="fetchData()">查询</el‐button>
</el‐form>

（2）修改 js代码，data新增searchMap属性，既分页，又有条件

searchMap: {
   }

更改axios调用的代码，改为post提交，传递searchMap对象

axios.post(`/brand/findPage.do?
        page=${
   this.currentPage}&size=${
   this.size}`,this.searchMap)

在这里插入图片描述

3.4 新增品牌

在这里插入图片描述

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

formVisible: false

添加弹出窗口

<!‐‐弹出窗口‐‐>


<el‐dialog title="编辑" :visible.sync="formVisible" >
<el‐button @click="formVisible = false" >关闭</el‐button>
</el‐dialog>

添加按钮，控制窗口的弹出
（2）data添加属性pojo 用于保存实体

pojo: {
   }

在窗口添加表单

<!--标签宽度，不指定默认占一行-->


<el‐form label‐width="80px">
<el‐form‐item label="品牌名称">
<el‐input placeholder="品牌名称" v‐model="pojo.name">
</el‐input>
</el‐form‐item>
<el‐form‐item label="品牌首字母">
<el‐input placeholder="品牌首字母" v‐model="pojo.letter">
</el‐input>
</el‐form‐item>
<el‐form‐item label="品牌图片">
<el‐input placeholder="品牌图片" v‐model="pojo.image">
</el‐input>
</el‐form‐item>
<el‐form‐item label="排序">
<el‐input placeholder="排序" v‐model="pojo.seq"></el‐
        input>
</el‐form‐item>
<el‐form‐item>
<el‐button @click="save()">保存</el‐button>
<el‐button @click="formVisible = false">关闭</el‐button>
</el‐form‐item>
</el‐form>

（3）添加save方法

save (){
   
        axios.post('/brand/add.do',this.pojo).then(response => {
   
        this.fetchData ();//刷新列表
        this.formVisible = false ;//关闭窗口
        });
        }

在这里插入图片描述

3.5 修改品牌

eui选择按钮组件
需求：在表格中添加操作列，操作列中有修改按钮，点击修改按钮弹出窗口加载数据。
用户修改数据后点击保存，保存后关闭窗口刷新列表。
共用新增的弹出编辑窗口
既然是新增，修改和新增的不同在于id是否存在，因此可以通过判断微调路径实现统一，判断即可
本质就是新增UI按钮，编写按钮触发的函数，函数调用后台函数
（1）在表格中新增模板列

<el‐table‐column
        label="操作" >
<template slot‐scope="scope">
<el‐button @click="edit(scope.row.id)" type="text" size="small">
        修改</el‐button>
</template>
</el‐table‐column>

（2）增加edit方法，用于加载数据

edit (id){
   
        this.formVisible = true // 打开窗口
// 调用查询
        axios.get(`/brand/findById.do?id=${
   id}`).then(response => {
   
        this.pojo = response.data;
        })
        }

（3）修改save方法
新增id不存在，修改id存在

save (){
   
        axios.post(`/brand/${
   this.pojo.id==null?'add':'update'}.do`,this.pojo).th
        en(response => {
   
        this.fetchData (); //刷新列表
        this.formVisible = false ;//关闭窗口
        });
        }

（4）编辑拉取当前id的数据是应该的，但是新增不行，要清空

<!--这里希望数据新增时，之前的pojo数据清空，否则上一次操作的如新增，编辑数据还在弹出框中-->


        <el-button type="primary" @click="pojo={},formVisible = true">新增</el-button>

修改拉取当前id数据

新增则清空pojo数据
在这里插入图片描述

3.6 删除品牌

eui找到弹出创接口插件
在这里插入图片描述

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

<el‐button @click="dele(scope.row.id)" type="text" size="small">删除</el‐
        button>

（2）新增dele方法

/*删除后重新刷新数据*/
/*对于删除应该有提示窗，否则点击就删除完蛋*/


dele (id){
   
        this.$confirm('确定要删除此记录吗?', '提示', {
   
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
        }).then( () => {
   
        axios.get(`/brand/delete.do?id=${
   id}`).then(response => {
   
        if(response.data.code==0){
   
        
        this.fetchData (); //刷新列表
        }else{
   
        this.$alert(response.data.message)
        }
        })
        })
        }

4. 图片上传

4.1 图片上传组件

eui组件
在这里插入图片描述

（1）在弹出窗口中放置图片上传组件

/* 上传之后会触发钩子函数*/
/* 上传之前会触发钩子函数*/

<el‐upload
class="avatar‐uploader"
        action="/upload/native.do"
        :show‐file‐list="false"
       
        :on‐success="handleAvatarSuccess"
        
        :before‐upload="beforeAvatarUpload">
<img v‐if="imageUrl" :src="imageUrl" class="avatar">
<i v‐else class="el‐icon‐plus avatar‐uploader‐icon"></i>
</el‐upload>

（2）修改脚本，data 增加属性
url地址默认为空

imageUrl: ''

增加方法

/*上传文件，返回的具体地址*/
/*上传之前对图片格式检测*/


handleAvatarSuccess(res, file) {
   
        this.imageUrl = file.response;
        },
        
        beforeAvatarUpload(file) {
   
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
   
        this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
   
        this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
        }

（3）修改edit方法和save方法

//save方法第一句添加，将url上传
this.pojo.image= this.imageUrl;
//edit方法回调时添加，上传后显示
this.imageUrl=this.pojo.image //显示图片

需要注意的是商品图片上传大小不一，应该用统一格式显示

<style>
        .avatar-uploader .el-upload {
   
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
   
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
   
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
   
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>

4.2 SpringMVC接收图片上传

SpringMVC 中，文件的上传，是通过 MultipartResolver 实现的。所以，如果要实现文
件的上传，只要在 spring-mvc.xml 中注册相应的 MultipartResolver 即可。
MultipartResolver 的实现类有两个：

CommonsMultipartResolver
StandardServletMultipartResolver
两个的区别：
第一个需要使用 Apache 的 commons-fileupload 等 jar 包支持，但它能在比较旧的
servlet 版本中使用。
第二个不需要第三方 jar 包支持，它使用 servlet 内置的上传功能，但是只能在
Servlet 3 以上的版本使用。
为了通用性，一般选择第一种
（1）qingcheng_common_web增加配置

<!‐‐ 多部分文件上传 ‐‐>
<bean id="multipartResolver"
class="org.springframework.web.multipart.commons.CommonsMultipartResolver
        ">
<property name="maxUploadSize" value="104857600" />
<property name="defaultEncoding" value="UTF‐8"></property>
</bean>

maxUploadSize：设置允许上传的最大文件大小，以字节为单位计算。当设为-1时表示
无限制，默认是-1。
defaultEncoding：表示用来解析request请求的默认编码格式，当没有指定的时候根据
Servlet规范会使用默认值ISO-8859-1。当request自己指明了它的编码格式的时候就会忽
略这里指定的defaultEncoding。
（2）qingcheng_web_manager工程新建controller

@RestController
@RequestMapping("/upload")
public class UploadController {
   
    @Autowired
    private HttpServletRequest request;
    /*本地文件上传，取参数file*/
    @PostMapping("/native")
    public String nativeUpload(@RequestParam("file") MultipartFile file)
    {
   
    /*确定用户上传的路径，写入的路径，获得img的绝对路径*/
        String  path=request.getSession().getServletContext().getRealPath("img");
        /*存储路径，获得文件的原始文件名*/
        String filePath = path +"/"+ file.getOriginalFilename();
        File desFile = new File(filePath);
        /*确保目录一定存在，不存在就创建*/
        if(!desFile.getParentFile().exists()){
   
            desFile.mkdirs();
        }
        try {
   
        /*写文件的细节，已经封装好*/
            file.transferTo(desFile);
        } catch (Exception e) {
   
            e.printStackTrace();
        }
        /*最终返回上传后的文件名*/
        return "http://localhost:9101/img/"+file.getOriginalFilename();
    }
}

MultipartFile是spring类型，代表HTML中form data方式上传的文件，包含二进制数据
+文件名称
但是
通常文件图片不会放到本地，否则本地服务器将承担巨大的存储压力，而是单独开辟一个云空间存储，因为其空间需求增长迅速

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

5.1 什么是阿里云OSS

对于一些小公司自建文件存储仓库并非最佳方案，可以使用阿里云存储

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

5.2 OSS开通

（1）打开https://www.aliyun.com/ ，申请阿里云账号并完成实名认证。
（2）找到控制台
（3）开通OSS:
在这里插入图片描述
进入控制台
（4）创建存储空间
新建Bucket，命名为qcshangchenglilia(我瞎编的，名字是不可以重复的，自己注册一个去) ，
读写权限设置为公共读，任何人都有读权限
私有，必须拥有高级权限，（太麻烦）
公共读写，任何人都具备读写权限（不安全）
在这里插入图片描述

会提供访问域名，所有图片等等会存储在其下
根据流量，访问次数收费
创建好后可见

然后为项目创建访问账号密码
在这里插入图片描述
有子账号与母账号区别
子账号可以为每个项目都独立访问，母账号则一个key访问所有，一旦泄露，所有项目都不安全
当然为每一个项目创建一个访问的独立子账号
需要注意的是，如果开通编程访问，除了创建时可见秘钥，其他不可见，因此应该及时保存信息
子账号如此
母账号想要得到秘钥还需要手机号验证
在这里插入图片描述

在这里插入图片描述

5.3 OSS快速入门

看官方oss文档即可，引入javajar包
（1）创建测试工程，引入依赖

<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun‐sdk‐oss</artifactId>
<version>2.8.2</version>
</dependency>

（2）新建类和main方法

//输入自己选择的服务器的域名，控制台窗口查看
String endpoint = "http://oss‐cn‐beijing.aliyuncs.com";
// 云账号AccessKey有所有API访问权限，建议遵循阿里云安全最佳实践，创建
        并使用RAM子账号进行API访问或日常运维，请登录
        String accessKeyId = "LTAI5tMGz1h9CtwUTo39169A";
        String accessKeySecret = "自己注册不香吗？）";
        //bucket创建时写的名字
        String bucketName = "qcshangchenglilia";
// 创建OSSClient实例
        OSSClient ossClient = new OSSClient(endpoint, accessKeyId,
        accessKeySecret);
// 上传文件流
        InputStream inputStream = null;
        try {
   
        inputStream = new FileInputStream("d:/a.jpg");
        } catch (FileNotFoundException e) {
   
        e.printStackTrace();
        }
        ossClient.putObject(bucketName, "test.html", inputStream);
// 关闭client
        ossClient.shutdown();

上传后，在仓库-文件管理可见
并且每个文件都有了域名，拥有权限后即可查看，成为互联网共用资源
在这里插入图片描述

总是如此连接不现实，应该配置成bean文件

5.4 青橙管理后台-OSS图片上传

（1）qingcheng_common_web添加依赖

<dependency>
<groupId>com.aliyun.oss</groupId>
<artifactId>aliyun‐sdk‐oss</artifactId>
<version>2.8.2</version>
</dependency>

（2）qingcheng_common_web添加配置

<!‐‐阿里云OSS‐‐>
<bean id="ossClient" class="com.aliyun.oss.OSSClient">
<constructor‐arg index="0" value="oss‐cn‐beijing.aliyuncs.com">
</constructor‐arg>
//id,秘钥，自己注册不香吗？
<constructor‐arg index="1" value="accessKeyId">
</constructor‐arg>
<constructor‐arg index="2"
        value="accessKeySecret"></constructor‐arg>
</bean>

（3）UploadController新增方法

@Autowired
private OSSClient ossClient;
@PostMapping("/oss")
public String ossUpload(@RequestParam("file") MultipartFile
        file,String folder){
   
        //bucket名字
        String bucketName="qcshangchenglilia";
        String fileName= folder+ "/"+ UUID.randomUUID()+
        file.getOriginalFilename();
        try {
   
        ossClient.putObject(bucketName,fileName,file.getInputStream());
        } catch (IOException e) {
   
        e.printStackTrace();
        }
        return "https://"+bucketName +".oss‐cn‐
        beijing.aliyuncs.com/"+fileName;
        }

（4）修改brand.html页面的上传组件
这样点击上传时，就将图片文件上传到阿里云oss对象服务器了

<el‐upload
        ......
        action="/upload/oss.do?folder=brand"
        ......
        >
</el‐upload>

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/100216.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...

javaweb-青橙项目-2-77

文章目录

青橙-2 网站管理前端与图片上传

学习目标

1. ElementUI介绍

1.1 什么是ElementUI

1.2 ElementUI 常用组件

2. ES6

2.1 什么是ES6

2.2 常用语法新特性

2.2.1 变量声明let

2.2.2 常量声明

2.2.3 模板字符串

2.2.4 箭头函数

3. 青橙管理后台-品牌管理前端

3.1 列表展示

3.2 分页列表展示

3.3 条件查询

3.4 新增品牌

3.5 修改品牌

3.6 删除品牌

4. 图片上传

4.1 图片上传组件

4.2 SpringMVC接收图片上传

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

5.1 什么是阿里云OSS

5.2 OSS开通

5.3 OSS快速入门

5.4 青橙管理后台-OSS图片上传

发表回复

javaweb-青橙项目-2-77

文章目录

青橙-2 网站管理前端与图片上传

学习目标

1. ElementUI介绍

1.1 什么是ElementUI

1.2 ElementUI 常用组件

2. ES6

2.1 什么是ES6

2.2 常用语法新特性

2.2.1 变量声明let

2.2.2 常量声明

2.2.3 模板字符串

2.2.4 箭头函数

3. 青橙管理后台-品牌管理前端

3.1 列表展示

3.2 分页列表展示

3.3 条件查询

3.4 新增品牌

3.5 修改品牌

3.6 删除品牌

4. 图片上传

4.1 图片上传组件

4.2 SpringMVC接收图片上传

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

5.1 什么是阿里云OSS

5.2 OSS开通

5.3 OSS快速入门

5.4 青橙管理后台-OSS图片上传

相关推荐

STM32F103笔记（一）[通俗易懂]

java英文参考文献最新_外文文献网站

如何查看被占用的端口_java端口被占用怎么解决

C语言将int强制转换为char_C语言char数组长度

java检验数组重复_java – 如何遍历数组并检查重复项？「建议收藏」

图片链接如何在excel里转成图片_mdf文件怎么转成Excel

发表回复