青橙项目之品牌管理前端 day2

最新推荐文章于 2021-10-03 19:20:00 发布

ZrZrZr.l

最新推荐文章于 2021-10-03 19:20:00 发布

阅读量242

点赞数

本文链接：https://blog.csdn.net/ZrZrZr666666/article/details/112513337

版权

青橙专栏收录该内容

7 篇文章 0 订阅

订阅专栏

学习掌握目标

1.Element-Ui组件了解与使用
2.ES6与ES5语法
3.品牌管理的前端代码
4.图片上传代码，本地和阿里云存储
5.掌握阿里云oss存储

未完成

1.ElementUI简介

学会使用官网，http://element-cn.eleme.io/2.0/#/zh-CN

Table Form Button
function (response，message){} 等价于（response，message)=>{}
ES6语法

2.品牌管理前端

2.1 列表展示

查询所有，不分页
代码实现

拷贝资源文件/js和css文件到qingcheng-web-manager工程的webapp下，在qincheng-web-manager工程下的webapp下创建goods文件夹下，在goods文件夹下brand.html

<!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>

编写
页面js

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

表格控件实现展现数据

<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>

2.2 分页列表展示

<!--分页-->
    <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>

修改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;
});
}
}
})

2.3 条件查询

表单上添加按钮查询

  <el-form :inline="true">//inline
        <el-form-item label="品牌名称">//表单项
            <el-input placeholder="品牌名称" v-model="searchMap.name"></el-input>//placeholder
        </el-form-item>
        <el-form-item  label="品牌首字母">
            <el-input placeholder="品牌首字母" v-model="searchMap.letter"></el-input>
        </el-form-item>
        <el-button type="primary" @click="fetchData">查询</el-button>//click
        <el-button type="primary" @click="pojo={},formVisible=true">新增</el-button>

    </el-form>

修改js（此时是调用后端findPage),在data中新增searchMap属性
fetchData(){

    axios.post(`/brand/findPage.do?page=${this.currentPage}&size=${this.size}`,this.searchMap).then(response=>{
        this.tableData= response.data.rows;
        this.total= response.data.total;
    })

    }

2.4 CRUD

新增
新增按钮，窗口的弹出与关闭，dialog

注意属性formVisible: false默认是关闭

<el-dialog
            title="品牌编辑"
            :visible.sync="formVisible">//visible.sync
       
            <el-form-item>
                <el-button @click="save()">保存</el-button>
                <el-button  @click="formVisible = false">关闭</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

data添加pojo属性，保存实体

 data(){
            return {
                tableData:[],
                currentPage:1,
                size:10,
                total:10,
                searchMap:{},
                formVisible:false,
                pojo:{},
                imageUrl:''
            }
        },

窗口dialog中添加表单

 <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-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>
            </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>

在methos中添加save方法

 save(){
                this.pojo.image=this.imageUrl;
                axios.post(`/brand/${this.pojo.id==null?'add':'update'}.do`,this.pojo).then(response=>{
                    this.formVisible=false;
                    this.fetchData();
                })
            },

修改

新增模板列

  <el-table-column
                label="操作"
                width="180"
        >

            <template slot-scope="scope">
                <el-button @click="edit(scope.row.id)" size="small">修改</el-button>
                <el-button  @click="dele(scope.row.id)" size="small">删除</el-button>
            </template>

        </el-table-column>

添加edit()

 edit(id){
                this.formVisible=true;//打开窗口
                axios.get(`/brand/findId.do?id=${id}`).then(
                    response=>{//调用查询
                        this.pojo=response.data//实体信息
                      //  this.imageUrl=this.pojo.image;
                    })
            },

注意，编辑打开的窗口，也要调用save方法保存修改信息。修改save方法
根据id判断是新添加的，还是修改操作，相应调用后台的操作。

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

删除

操作列中新增“删除”按钮

  <el-button  @click="dele(scope.row.id)" 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)
}
})
})
}

2.5 图片上传到本地

弹出窗口中，放置图片上传组件

 <el-form-item  label="品牌图片">
                <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>
            </el-form-item>

修改脚本，data增加属性

imageUrl: ''

增加方法

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;
}

修改edit和save方法
//save方法第一句添加

this.pojo.image= this.imageUrl;

//edit方法回调时添加

//edit方法回调时添加
this.imageUrl=this.pojo.image //显示图片

springmvc文件上传，通过MutipartResolver,，只要在 spring-mvc.xml 中注册相应的 MultipartResolver 即可
MultipartResolver 的实现类有两个：

CommonsMultipartResolver
StandardServletMultipartResolver

两个的区别：

第一个需要使用 Apache 的 commons-fileupload 等 jar 包支持，但它能在比较旧的
servlet 版本中使用。
第二个不需要第三方 jar 包支持，它使用 servlet 内置的上传功能，但是只能在
Servlet 3 以上的版本使用。

创建controller

2.6 图片上传到阿里云

暂时未完,需要开通,调用上传接口
实现过程：
1.在阿里云开通，并创建一个Bucket
2.添加依赖
2.本地brand.html中的img上传的action 地址修改
3.FileController新建一个方法oss.do

ZrZrZr.l

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录