ssm+vue+ElementUI实现增删改查及带条件分页查询demo_ssm+vue+element 增删改查

作者：Monodyee | 2024-03-25 12:08:43

踩

ssm+vue+element 增删改查

1.首先搭建ssm环境，这里默认已经搭好了

将css js配置到webapp下
在这里插入图片描述

2.在dao层中操作数据库，这里使用mybatis的通用Mapper

package com.mall.dao;

import com.mall.pojo.goods.Brand;
import tk.mybatis.mapper.common.Mapper;

public interface BrandMapper extends Mapper<Brand> {

}

1
2
3
4
5
6
7
8
9

3.在interface中编写增删改查等一系列的接口

package com.mall.service.goods;

import com.mall.entity.PageResult;
import com.mall.pojo.goods.Brand;

import java.util.List;
import java.util.Map;

public interface BrandService {
    public List<Brand> findAll();
    //分页查询
    public PageResult<Brand> findPage(int page,int size);
    //品牌条件查询
    public List<Brand> findList(Map<String ,Object> searchMap);
    //根据条件分页查询
    public PageResult<Brand> findPage(Map<String ,Object> searchMap,int page,int size);
    //根据id查询
    public Brand findById(Integer id);
    //新增
    public void add(Brand brand);
    //修改
    public void update(Brand brand);
    //删除
    public void delete(Integer id);

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

4.在实现类中实现

package com.mall.service.impl;

import com.alibaba.dubbo.config.annotation.Service;
import com.github.pagehelper.Page;
import com.github.pagehelper.PageHelper;
import com.mall.dao.BrandMapper;
import com.mall.entity.PageResult;
import com.mall.pojo.goods.Brand;
import com.mall.service.goods.BrandService;
import org.springframework.beans.factory.annotation.Autowired;
import tk.mybatis.mapper.entity.Example;
import java.util.List;
import java.util.Map;

@Service
public class BrandServiceImpl implements BrandService {

    @Autowired
    private BrandMapper brandMapper;

    @Override
    public List<Brand> findAll() {
        return brandMapper.selectAll();
    }

    @Override
    public PageResult<Brand> findPage(int page, int size) {
        PageHelper.startPage(page,size);
        Page<Brand> pageResult = (Page<Brand>) brandMapper.selectAll();
        return new PageResult<>(pageResult.getTotal(),pageResult.getResult());
    }

    @Override
    public List<Brand> findList(Map<String, Object> searchMap) {
        Example example = createExample(searchMap);
        brandMapper.selectByExample(example);
        return brandMapper.selectByExample(example);
    }

    @Override
    public PageResult<Brand> findPage(Map<String, Object> searchMap, int page, int size) {
        PageHelper.startPage(page,size);
        Example example = createExample(searchMap);
        Page<Brand> pageResult = (Page<Brand>) brandMapper.selectByExample(example);
        return new PageResult<>(pageResult.getTotal(),pageResult.getResult());
    }

    @Override
    public Brand findById(Integer id) {
        return brandMapper.selectByPrimaryKey(id);
    }

    @Override
    public void add(Brand brand) {
        brandMapper.insert(brand);
    }

    @Override
    public void update(Brand brand) {
        //updateByPrimaryKeySelective null值会被忽略
        brandMapper.updateByPrimaryKeySelective(brand);
    }

    @Override
    public void delete(Integer id) {
        brandMapper.deleteByPrimaryKey(id);
    }


    private Example createExample(Map<String, Object> searchMap){
        Example example = new Example(Brand.class);
        Example.Criteria criteria = example.createCriteria();
        if(searchMap!= null){
            if (searchMap.get("name") != null && !"".equals(searchMap.get("name"))) {
                //模糊查询
                criteria.andLike("name","%"+(String) searchMap.get("name")+"%");
            }
            if (searchMap.get("letter") != null && !"".equals(searchMap.get("letter"))) {
                //精确匹配
                criteria.andEqualTo("letter",(String) searchMap.get("letter"));
            }
        }
        return example;
    }

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

5.在controller层中编写视图映射，这里使用resultful风格，并在浏览器中测试

package com.mall.controller.goods;

import com.alibaba.dubbo.config.annotation.Reference;
import com.mall.entity.PageResult;
import com.mall.entity.Result;
import com.mall.pojo.goods.Brand;
import com.mall.service.goods.BrandService;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.Map;

@RestController
@RequestMapping("/brand")
public class BrandController {

    @Reference
    private BrandService brandService;

    @RequestMapping("/findAll")
    public List<Brand> findAll(){
        return brandService.findAll();
    }

    @GetMapping("/findPage")
    public PageResult<Brand> findPage( int page, int size){
        return brandService.findPage(page,size);
    }

    @PostMapping("/findList")
    public List<Brand> findList(@RequestBody Map searchMap){
        return brandService.findList(searchMap);
    }

    @PostMapping("/findPage")
    public PageResult<Brand> findPage(@RequestBody Map searchMap,int page, int size){
        return brandService.findPage(searchMap,page,size);
    }

    @GetMapping("/findById")
    public Brand findById(Integer id){
        return brandService.findById(id);
    }

    @PostMapping("/add")
    public Result add(@RequestBody Brand brand){
        brandService.add(brand);
        return new Result();
    }

    @PostMapping("/update")
    public Result update(@RequestBody Brand brand){
        brandService.update(brand);
        return new Result();
    }

    @GetMapping("/delete")
    public Result delete(Integer id){
        brandService.delete(id);
        return new Result();
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

6.测试通过后编写页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>品牌管理</title>
    <link rel="stylesheet" href="../css/elementui.css">
</head>
<body>
<div id="app">
    <el-form :inline="true">
        <el-form-item label="品牌名称">
            <el-input placeholder="品牌名称" v-model="searchMap.name"></el-input>
        </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>
        <el-button type="primary" @click="pojo={},formVisible=true">新增</el-button>
    </el-form>

    <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" width="100px" height="50px">
            </template>
        </el-table-column>
        <el-table-column
                label="操作"
                width="180">
            <template slot-scope="scope">
                <el-button type="text" @click="edit(scope.row.id)" size="small">修改</el-button>
                <el-button type="text" @click="dele(scope.row.id)" size="small">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

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

    <el-dialog
            title="品牌编辑"
            :visible.sync="formVisible">
        <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>
    </el-dialog>
</div>
</body>
<script  src="../js/axios.js"></script>
<script  src="../js/vue.js"></script>
<script  src="../js/elementui.js"></script>

<script>
    new Vue({
        el:"#app",
        data(){
            return {
                tableData:[],
                currentPage:1,
                size:10,
                total:10,
                searchMap:{},
                formVisible:false,
                pojo:{}
            }
        },
        created(){
            this.fetchData()
        },
        methods:{
            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;
                })
            },
            save(){
                axios.post(`/brand/${this.pojo.id == null?'add':'update'}.do`,this.pojo).then(response=>{
                    this.formVisible = false;
                    this.fetchData();
                })
            },
            edit(id){
                //打开窗口
                this.formVisible = true;
                axios.get(`/brand/findById.do?id=${id}`).then(response=>{
                    this.pojo = response.data;
                })
            },
            dele(id){
                //弹出提示
                this.$confirm('确定要删除吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //删除
                    axios.get(`/brand/delete.do?id=${id}`).then(response=>{
                        this.$alert('删除成功', '提示');
                        this.fetchData();
                    })
                });
            }
        }

    })
</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150

效果：

在这里插入图片描述
点击新增

点击修改：

点击删除

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/309775