智慧社区管理系统04(楼宇列表和功能实现)

r囧r小猫 2023-10-11 20:01 21阅读 0赞

**目录**

后端代码

实体类

mapper层

mappers sql语句

Service层

接口

实现类

Controller层

前端部分

列表显示

增加或修改

--------------------

##  ##

## 后端代码 ##

### 实体类 ###

package com.woniu.community.entity;
    
    import lombok.AllArgsConstructor;
    import lombok.Data;
    import lombok.NoArgsConstructor;
    
    @Data
    @AllArgsConstructor
    @NoArgsConstructor
    public class Build {
        private int id;
        private String numbers;
        private String uints;
        private String remarks;
    
    }

### mapper层 ###

package com.woniu.community.mapper;
    
    import com.woniu.community.entity.Build;
    import com.woniu.community.entity.User;
    
    import java.util.List;
    
    public interface BuildMapper {
        List<Build> selectAll(String numbers,int start,int size);
        int selectCount(String numbers);
        int insertBuild(Build build);
        int updateBuild(Build build);
    
        int deleteBuild(int id);
    
        Build selectBuildById(int id);
    }

### mappers sql语句 ###

<?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
    <mapper namespace="com.woniu.community.mapper.BuildMapper">
        <resultMap id="buildResult" type="Build">
        <result column="id" property="id"></result>
        <result column="numbers" property="numbers"></result>
        <result column="uints" property="uints"></result>
        <result column="remarks" property="remarks"></result>
        </resultMap>
        <select id="selectAll" resultMap="buildResult">
            select * from building
            <where>
             <if test="numbers!=null and numbers!='null'">
               and numbers like '%${numbers}%'
             </if>
            </where>
            limit #{start},#{size}
        </select>
        <select id="selectCount" resultType="int">
            select count(id) from building
            <where>
                <if test="numbers!=null and numbers!='null'">
                    and numbers like '%${numbers}%'
                </if>
            </where>
        </select>
        <insert id="insertBuild">
          insert into building (numbers,uints,remarks) values (#{numbers},#{uints},#{remarks})
        </insert>
        <update id="updateBuild">
            update building set numbers=#{numbers},uints=#{uints},remarks=#{remarks} where id=#{id}
        </update>
        <delete id="deleteBuild">
            delete from building where id=#{id}
        </delete>
        <select id="selectBuildById" resultMap="buildResult">
            select * from building where id=#{id}
        </select>
    </mapper>

### Service层 ###

#### 接口 ####

package com.woniu.community.service;
    
    import com.woniu.community.entity.Build;
    import com.woniu.community.utils.HttpResult;
    
    public interface IBuildService {
        HttpResult selectAll(String numbers,int pageIndex, int pageSize);
    
        HttpResult addBuild(Build build);
    
        HttpResult updateBuild(Build build);
    
        HttpResult removeBuild(int id);
    
        HttpResult selectBuildById(int id);
    }

### 实现类 ###

package com.woniu.community.service.Impl;
    
    import com.woniu.community.entity.Build;
    import com.woniu.community.entity.User;
    import com.woniu.community.mapper.BuildMapper;
    import com.woniu.community.service.IBuildService;
    import com.woniu.community.utils.HttpResult;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Service;
    
    import java.util.List;
    
    @Service
    public class BuildServiceImpl implements IBuildService {
        @Autowired(required = false)
        private BuildMapper buildMapper;
        @Override
        public HttpResult selectAll(String numbers,int pageIndex, int pageSize) {
            List<Build> builds = buildMapper.selectAll(numbers,(pageIndex - 1) * pageSize, pageSize);
            int count = buildMapper.selectCount(numbers);
            HttpResult result = null;
            if (builds != null && builds.size() > 0) {
                result = new HttpResult(builds, count, 200, null);
            } else {
                result = new HttpResult(null, 0, 500, "没有更多数据");
            }
            return result;
        }
    
        @Override
        public HttpResult addBuild(Build build) {
            int count = buildMapper.insertBuild(build);
            HttpResult result = null;
            if (count > 0 ) {
                result = new HttpResult(null, 0, 200, "新增成功");
            } else {
                result = new HttpResult(null, 0, 500, "新增失败");
            }
            return result;
        }
    
        @Override
        public HttpResult updateBuild(Build build) {
            int count = buildMapper.updateBuild(build);
            HttpResult result = null;
            if (count > 0 ) {
                result = new HttpResult(null, 0, 200, "修改成功");
            } else {
                result = new HttpResult(null, 0, 500, "修改失败");
            }
            return result;
        }
    
        @Override
        public HttpResult removeBuild(int id) {
            int count = buildMapper.deleteBuild(id);
            HttpResult result = null;
            if (count > 0 ) {
                result = new HttpResult(null, 0, 200, "删除成功");
            } else {
                result = new HttpResult(null, 0, 500, "删除失败");
            }
            return result;
        }
    
        @Override
        public HttpResult selectBuildById(int id) {
            Build build = buildMapper.selectBuildById(id);
            HttpResult result = null;
            if (build != null ) {
                result = new HttpResult(build, 0, 200, null);
            } else {
                result = new HttpResult(null, 0, 500, "没有更多数据");
            }
            return result;
        }
    }

### Controller层 ###

package com.woniu.community.controller;
    
    import com.woniu.community.entity.Build;
    import com.woniu.community.entity.User;
    import com.woniu.community.entity.vo.UserVO;
    import com.woniu.community.service.IBuildService;
    import com.woniu.community.utils.HttpResult;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.web.bind.annotation.*;
    
    @RestController
    @CrossOrigin(origins = "*")
    @RequestMapping("/build")
    public class BuildController {
        @Autowired
        private IBuildService buildService;
        @RequestMapping("/list")
        public HttpResult selectAll(String numbers,int pageIndex,int pageSize){
            return buildService.selectAll(numbers,pageIndex,pageSize);
        }
        @RequestMapping("/add")
        public HttpResult addBuild( String numbers,String uints) {
            return buildService.addBuild(new Build(0,numbers,uints,"无"));
        }
        @RequestMapping("/update")
        public HttpResult updateBuild(int id, String numbers,String uints){
            return buildService.updateBuild(new Build(id,numbers,uints,"无"));
        }
        @RequestMapping("/delete")
        public HttpResult deleteBuild(int id){
            return buildService.removeBuild(id);
        }
        @RequestMapping("/info")
        public HttpResult getBuildInfo(int id){
            return buildService.selectBuildById(id);
        }
    }

## 前端部分 ##

### 列表显示 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/css/right.css" rel="stylesheet">
        <script src="assets/jquery-3.5.1.min.js"></script>
        <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <script src="assets/vue.min-v2.5.16.js"></script>
        <script src="assets/vue-router.min-2.7.0.js"></script>
        <script src="assets/axios.min.js"></script>
    </head>
    <body>
    <div id="app" class="container">
        <div class="row">
            <div class="col-md-1" style="height: 50px; line-height: 50px;">
                <label>楼号:</label>
            </div>
            <div class="col-md-3" style="height: 50px; line-height: 50px;">
                <input class="form-control" v-model="numbers">
    
            </div>
            <div class="col-md-3" style="height: 50px; line-height: 50px;">
                <button class="btn btn-default" @Click="doQuery">搜索</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-2" style="height: 50px; line-height: 50px;">
    
                <button class="btn btn-default" @Click="doAdd">新增</button>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped">
                    <caption>楼宇列表</caption>
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>楼号</th>
                        <th>单元</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="b in buildList">
                        <td>{
       {b.id}}</td>
                        <td>{
       {b.numbers}}</td>
                        <td>{
       {b.uints}}</td>
                        <td>{
       {b.remarks}}</td>
                        <td>
                            <button class="btn btn-info" @Click="doUpdate(b.id)">编辑</button>
                            <button class="btn btn-danger" @Click="doDelete(b.id)">删除</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <ul class="pagination" v-for="p in pageNum">
                    <li v-if="p==pageIndex" class="active"><a @click="doGo(p)">{
       {p}}</a></li>
                    <li v-else="p==pageIndex"><a @click="doGo(p)">{
       {p}}</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                buildList: null,
                numbers: null,
                //用于分页
                pageIndex: 1,//当前页数
                pageSize: 10,//每页显示的条数
                pageTotle: 0,//总条数
                pageNum: 0,//页数(分页器)
            },
            methods: {
                requestBuildList(url) {
    
                    axios.get(url).then(response => {
                        this.buildList = response.data.data;
                        this.pageTotle = response.data.pageTotle;
                        this.pageNum = Math.ceil(this.pageTotle / this.pageSize);
                    });
                },
                doGo(p) {
                    this.pageIndex = p;
                    var url = "http://localhost:8080/build/list?pageIndex=" + p + "&pageSize=" + this.pageSize;
                    this.requestBuildList(url);//调用请求用户列表的函数
                },
                doDelete(id) {
                    axios.get("http://localhost:8080/build/delete?id=" + id).then(response => {
                        if (response.data.code == 200) {//删除成功
                            this.pageIndex = 1;
                            this.requestBuildList(this.pageIndex);
                        } else {//删除失败
                            alert(response.data.msg);
                        }
                    });
                },
                doQuery() {
                    var url = "http://localhost:8080/build/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize + "&numbers=" + this.numbers;
                    this.requestBuildList(url);
                },
    
                doAdd() {
                    window.parent.main_right.location.href = "build_add_update.html";
                },
                doUpdate(id) {
                    window.parent.main_right.location.href = "build_add_update.html?id=" + id;
                },
            },
            created: function () {
                var url = "http://localhost:8080/build/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize;
                this.requestBuildList(url);
            }
        });
    </script>
    </body>
    </html>

### 增加或修改 ###

##  ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
        <link href="assets/css/right.css" rel="stylesheet">
        <script src="assets/jquery-3.5.1.min.js"></script>
        <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <script src="assets/vue.min-v2.5.16.js"></script>
        <script src="assets/vue-router.min-2.7.0.js"></script>
        <script src="assets/axios.min.js"></script>
        <script src="assets/date_picker.js"></script>
    </head>
    <body>
    <div id="app" class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="row">
                    <div class="col-md-12"
                         style="text-align: center; font-weight: bold; font-size: 18px; height: 80px; line-height: 80px;">
                        {
       {title}}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>楼号</label>
                        <input type="text" class="form-control" v-model="numbers">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>单元</label>
                        <input type="text" class="form-control" v-model="uints">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <button class="btn btn-primary" @Click="doSave">保存</button>
                        <button class="btn btn-default" @Click="doCancel">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                title: null,
                buildId: null,
                numbers: null,
                uints: null,
    
            },
            methods: {
                doSave() {
                    if (this.buildId == null) {//id为null说明是增加
                        axios.get("http://localhost:8080/build/add?numbers=" + this.numbers + "&uints=" + this.uints).then(response => {
                            if (response.data.code == 200) {//添加成功
                                //跳转到用户列表页面
                                window.parent.main_right.location.href = "build_list.html";
                            } else {//添加失败
                                alert(response.data.msg);
                            }
                        });
                    } else {//说明是修改
                        axios.get("http://localhost:8080/build/update?id=" + this.buildId + "&numbers=" + this.numbers + "&uints=" + this.uints).then(response => {
                            if (response.data.code == 200) {//添加成功
                                console.log(this.buildId)
                                //跳转到用户列表页面
                                window.parent.main_right.location.href = "build_list.html";
                            } else {//添加失败
                                alert(response.data.msg);
                            }
                        });
                    }
    
                },
                //取消按钮
                doCancel() {
                    //返回上一个页面
                    history.go(-1);
                },
            },
            created: function () {
                var url = window.location.href;
                if (url.indexOf("id") != -1) {//是否传递了id
                    this.buildId = url.substring(url.indexOf("=") + 1);
                }
                console.log(this.buildId);
                if (this.buildId == null) {//添加
                    this.title = "添加楼宇";
                } else {//修改
                    this.title = "修改楼宇";
                    //发送请求获取用户信息,回显数据
                    axios.get("http://localhost:8080/build/info?id=" + this.buildId).then(response => {
                        this.numbers = response.data.data.numbers;
                        this.uints = response.data.data.uints;
                    });
                }
            }
        });
    </script>
    </body>
    </html>

效果图:![258f32328325434f848202c32e6d625d.png][]

![6440d2a56f224cc9a4c7856263836c43.png][]

![528d3c097aaa454db614ec12b647b85b.png][]

有疑问也可以评论打出也可以参考其他有注释介绍

[258f32328325434f848202c32e6d625d.png]: https://img-blog.csdnimg.cn/258f32328325434f848202c32e6d625d.png
[6440d2a56f224cc9a4c7856263836c43.png]: https://img-blog.csdnimg.cn/6440d2a56f224cc9a4c7856263836c43.png
[528d3c097aaa454db614ec12b647b85b.png]: https://img-blog.csdnimg.cn/528d3c097aaa454db614ec12b647b85b.png