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

朵朵宝

已于 2022-11-29 16:06:47 修改

阅读量323

点赞数

分类专栏：智慧社区管理系统文章标签： java mysql 开发语言

于 2022-11-29 11:05:35 首次发布

本文链接：https://blog.csdn.net/magic_818/article/details/128094019

版权

智慧社区管理系统专栏收录该内容

15 篇文章 0 订阅

订阅专栏

后端代码

实体类

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>

效果图: