智慧社区管理系统07(车位管理列表和功能实现)

最新推荐文章于 2024-08-12 16:47:32 发布

朵朵宝

最新推荐文章于 2024-08-12 16:47:32 发布

阅读量204

点赞数

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

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

版权

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

15 篇文章 0 订阅

订阅专栏

后端代码

实体类

package com.woniu.community.entity;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Parking {
    private int id;
    private String numbers;//车位号
    private int  status;//状态:0=关闭;1=开启
    private int ownerId;//关联owner主键
    private String remarks;
    private String userName;//业主姓名
    private String tel;//联系方式
}

mapper层

package com.woniu.community.mapper;




import com.woniu.community.entity.Parking;

import java.util.List;

public interface ParkingMapper {
    List<Parking> selectAll(String numbers ,int start, int size);

    int count(String numbers);

    int insertParking(Parking parking);

    int deleteParking(int id);
    int updateParking(Parking parking);

    Parking selectById(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.ParkingMapper">
<resultMap id="parkingResult" type="Parking">
        <result column="id" property="id"></result>
        <result column="numbers" property="numbers"></result>
        <result column="status" property="status"></result>
        <result column="owner_id" property="ownerId"></result>
        <result column="remarks" property="remarks"></result>
        <result column="username" property="userName"></result>
        <result column="tel" property="tel"></result>
</resultMap>
    <select id="selectAll" resultMap="parkingResult">
    select parking.*,owner.tel,owner.username from parking left join owner on parking.owner_id=owner.id
    <where>
        <if test="numbers!=null and numbers !='null'"></if>
        and numbers like '%${numbers}%'
    </where>
        limit #{start},#{size}
    </select>
    <select id="count" resultType="int">
        select count(parking.id) from parking left join owner on parking.owner_id=owner.id
        <where>
            <if test="numbers!=null and numbers !='null'"></if>
            and numbers like '%${numbers}%'
        </where>
    </select>
    <insert id="insertParking">
        insert into parking (numbers,status,owner_id) values (#{numbers},#{status},#{ownerId})
    </insert>
    <delete id="deleteParking">
        delete from parking where id=#{id}
    </delete>
    <update id="updateParking">
        update parking set numbers=#{numbers},status=#{status},owner_id=#{ownerId}
        where id=#{id}
    </update>
    <select id="selectById" resultMap="parkingResult">
        select * from  parking where id=#{id}
    </select>
</mapper>

Service层

接口

package com.woniu.community.service;

import com.woniu.community.entity.Parking;
import com.woniu.community.utils.HttpResult;

public interface IParkingService {
    HttpResult selectAll(String numbers, int pageIndex, int pageSize);

    HttpResult addParking(Parking parking);

    HttpResult removeParking(int id);

    HttpResult updateParking(Parking parking);

    HttpResult getInfo(int id);
}

实现类

package com.woniu.community.service.Impl;

import com.woniu.community.entity.Parking;
import com.woniu.community.mapper.ParkingMapper;
import com.woniu.community.service.IParkingService;
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 ParkingServiceImpl implements IParkingService {
    @Autowired(required = false)
    private ParkingMapper parkingMapper;


    @Override
    public HttpResult selectAll(String numbers, int pageIndex, int pageSize) {
        List<Parking> parkings = parkingMapper.selectAll(numbers, (pageIndex - 1) * pageSize, pageSize);
        int count = parkingMapper.count(numbers);
        HttpResult result = null;
        if (parkings != null && parkings.size() > 0) {
            result = new HttpResult(parkings, count, 200, null);
        } else {
            result = new HttpResult(null, 0, 500, "没有更多数据");
        }
        return result;
    }

    @Override
    public HttpResult addParking(Parking parking) {
        int count = parkingMapper.insertParking(parking);
        HttpResult result = null;
        if (count > 0) {
            result = new HttpResult(null, 0, 200, "新增成功");
        } else {
            result = new HttpResult(null, 0, 500, "新增失败");
        }
        return result;
    }

    @Override
    public HttpResult removeParking(int id) {
        int count = parkingMapper.deleteParking(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 updateParking(Parking parking) {
        int count = parkingMapper.updateParking(parking);
        HttpResult result = null;
        if (count > 0) {
            result = new HttpResult(null, 0, 200, "修改成功");
        } else {
            result = new HttpResult(null, 0, 500, "修改失败");
        }
        return result;
    }

    @Override
    public HttpResult getInfo(int id) {
        Parking parking = parkingMapper.selectById(id);
        HttpResult result = null;
        if (parking != null) {
            result = new HttpResult(parking, 0, 200, null);
        } else {
            result = new HttpResult(null, 0, 500, "没有更多数据");
        }
        return result;
    }
}

Controller层

package com.woniu.community.controller;

import com.woniu.community.entity.Parking;
import com.woniu.community.service.IParkingService;
import com.woniu.community.utils.HttpResult;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

@RestController
@CrossOrigin(origins = "*")
@RequestMapping("/parking")
public class ParkingController {
    @Autowired(required = false)
    private IParkingService parkingService;
    @RequestMapping("/list")
    public HttpResult selectAll(String numbers, int pageIndex, int pageSize){
        return  parkingService.selectAll(numbers,pageIndex,pageSize);
    }
    @PostMapping("/add")
    public HttpResult addParking(@RequestBody  Parking parking){
        return parkingService.addParking(parking);
    }
    @RequestMapping("/delete")
    public   HttpResult removeParking(int id){
        return  parkingService.removeParking(id);
    }
    @PostMapping("/update")
    public  HttpResult updateParking(@RequestBody Parking parking){
        return parkingService.updateParking(parking);
    }
    @RequestMapping("/info")
    public  HttpResult selectById(int id){
        return parkingService.getInfo(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-2" style="height: 50px; line-height: 50px;">
            <input type="text" class="form-control" v-model="numbers">
        </div>
        <div class="col-md-1 " style="height: 50px; line-height: 50px;">
            <button class="btn btn-default" @click="doQuery">搜索</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" 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>车位号</th>
                    <th>业主姓名</th>
                    <th>业主电话</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="p in parkingList">
                    <td>{{p.numbers}}</td>
                    <td>{{p.userName}}</td>
                    <td>{{p.tel}}</td>
                    <td>{{p.status|statusFilter}}</td>
                    <td>
                        <button class="btn btn-info" @click="doUpdate(p.id)">编辑</button>
                        <button class="btn btn-danger" @click="doDelete(p.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" @click="doGo(p)"><a>{{p}}</a></li>
            </ul>
        </div>
    </div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            parkingList: null,
            numbers:null,
            pageIndex: 1,//当前页数
            pageSize: 10,//每页显示的条数
            pageTotle: 0,//总条数
            pageNum: 0,//页数(分页器)
        },
        filters:{//自定义过滤器
            statusFilter:function(value){//格式化性别字符串
                switch (value) {//0为关闭,1为开启,
                    case 0:
                        return '未使用';
                    case 1:
                        return '使用';
                    default:
                        return'故障';
                }
            }
        },

        methods: {
            requestParkingList(url){
                axios.get(url).then(response => {
                    console.log(response.data);
                    this.parkingList = 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/parking/list?pageIndex=" + p + "&pageSize=" + this.pageSize;
                this.requestParkingList(url);
            },
            doQuery(){
                var url = " http://localhost:8080/parking/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize+"&numbers="+this.numbers;
                this.requestParkingList(url);
            },
            doAdd() {
                window.parent.main_right.location.href = "parking_add_update.html";
            },
            doUpdate(id) {
                window.parent.main_right.location.href = "parking_add_update.html?id=" + id;
            },
            doDelete(id){
                //通过axios发送请求
                axios.get("http://localhost:8080/parking/delete?id=" + id).then(response => {
                    if (response.data.code == 200) {
                        var url = " http://localhost:8080/parking/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize;
                        this.requestParkingList(url);
                    } else {
                        alert(response.data.msg);
                    }
                });
            }
        },
        created: function () {
            var url = " http://localhost:8080/parking/list?pageIndex=" + this.pageIndex + "&pageSize=" + this.pageSize;
            this.requestParkingList(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>
                    <select v-model="ownerId">
                        <option v-for="p in parkingList" :value="p.ownerId">{{p.userName}}</option>
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="col-md-4 col-md-offset-4" >
                    <label style="margin-right:15px;">状态</label>
                    <label class="radio-inline">
                        <input type="radio" name="status" v-model="status" value="0"/>未使用
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="status" v-model="status" value="1"/>使用
                    </label>
                </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: {
            parkingList:null,
            userName:null,
            tel:null,
            status:null,
            parkingId:null,
            numbers: null,
            ownerId:null,
        },
        methods: {
            doSave() {
                if (this.parkingId == null) {//添加
                    axios.post("http://localhost:8080/parking/add", {
                        numbers: this.numbers,
                        status:this.status,
                        ownerId:this.ownerId,
                    }).then(response => {
                        if (response.data.code == 200) {//成功
                            window.parent.main_right.location.href = "parking_list.html";
                        } else {//失败
                            alert(response.data.msg);
                        }
                    })
                }
                else {//修改
                    //通过axios发送请求
                    axios.post("http://localhost:8080/parking/update", {
                        id: this.parkingId,
                        numbers: this.numbers,
                        status:this.status,
                        ownerId:this.ownerId,
                    }).then(response => {
                        if (response.data.code == 200) {//成功
                            window.parent.main_right.location.href = "parking_list.html";
                        } else {//失败
                            alert(response.data.msg);
                        }
                    })
                }
            },
            requestHouseList() {
                //通过axios发送请求
                axios.get("http://localhost:8080/parking/list?pageIndex=1&pageSize=10000").then(response => {
                    console.log(response.data);
                    this.parkingList = response.data.data;
                });
            },
            //取消按钮
            doCancel() {
                //返回上一个页面
                history.go(-1);
            },

            //请求房屋列表信息
            requesetParking() {
                axios.get("http://localhost:8080/parking/info?id=" + this.parkingId).then(response => {
                    console.log(response.data);
                    this.numbers = response.data.data.numbers;
                    this.status = response.data.data.status;
                    this.ownerId= response.data.data.ownerId;
                });
            },
        },
        created: function () {
            this.requestHouseList();
            var url = window.location.href;
            if (url.indexOf("id") != -1) {
                this.parkingId = url.substring(url.indexOf("=") + 1);
            }
            console.log("页面跳转传递的id:" + this.parkingId);
            if (this.parkingId == null) {//说明添加
                this.title = '添加车位';
            } else {//说明修改
                this.title = '修改车位';
                this.requesetParking();//调用请求房屋信息的函数
            }
        }
    });
</script>
</body>
</html>