于javaweb+jsp的停車場資訊管理系統-有解無憂

基于javaweb+jsp的停車場資訊管理系統

JavaWeb JavaBean JSP MVC MySQL Tomcat JavaScript

基礎JSP+Servlet或JSP+SSM(Spring、SpringMVC、MyBatis)框架或JSP+SSM+Maven(pom.xml)框架…均可

開發工具：idea或eclipse或myeclipse

部分代碼實作JSP

    });
</script>
<script type="text/html" id="myToolbar">
    <div class="layui-btn-container">
        <c:if test="${loginUser.userType == '管理員'}"><button class='layui-btn layui-btn-sm' lay-event='add'>添加</button></c:if>
    </div>
</script>
<script>
    function arrayBufferToBase64(buffer) {
        let binary = '';
        let bytes = new Uint8Array(buffer);
        let len = bytes.byteLength;
        for (let i = 0; i < len; i++) {
            binary += String.fromCharCode(bytes[i]);
        }

                ]
            ],
        });
        //監聽工具條
        table.on('tool(myTable)', function (obj) { //注：tool 是工具條事件名，myTable 是 table 原始容器的屬性 lay-filter="對應的值"
            let data = obj.data; //獲得當前行資料
            let layEvent = obj.event; //獲得 lay-event 對應的值（也可以是表頭的 event 引數對應的值）
            if (layEvent === 'del') { //洗掉
                // layer.confirm('洗掉' + data.cheweiName + "?", function (index) {
                $.ajax({
                    type: "GET",
                    dataType: "text",
                    url: "cheweiDelete?id=" + data.id,
                    success: function () {

                        {
                            field: 'cheweiText',
                            title: '備注',
                        },
                    {
                        align: 'center',
                        fixed: 'right',
                        title: '操作',
                        width: 130,
                        templet: vo => {
                            let flag = ${loginUser.userType == '管理員'};
                            return flag ? '<a class="layui-btn layui-btn-xs" lay-event="edit">編輯</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">洗掉</a>' : '';
                        }

    <title>修改車位</title>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">
</head>
<body style="padding: 20px">
<form class="layui-form" action="">
    <input type="hidden" name="id" class="layui-input" value="${vo.id}">
    
    <div class="layui-form-item">
        <label class="layui-form-label">車位號：</label>
        <div class="layui-input-block">
            <input type="text" name="cheweiName" lay-verify="required|cheweiName" class="layui-input" value="${vo.cheweiName}">
        </div>
    </div>
    <div class="layui-form-item">

                layer.msg('添加');
                layer.open({
                    type: 2,
                    area: ['800px', '550px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: 'chewei_add.jsp'
                });
            } else {
                //layer.alert('這是工具列右側自定義的一個圖示按鈕');
            }
        });
        //搜索
        let $ = layui.$, active = {
            reload: function () {
                let url = 'cheweiList?keyword=' + $('#search_keyword').val() + '&searchColumn=' + $('#searchColumn').val();

                        {
                            field: 'cheweiName',
                            title: '車位號',
                            templet: vo => (vo = vo.cheweiName) ? '<a href="#" style="color: #009688;">' + vo + '</a>' : '',
                            event: 'info',
                        },
                        {
                            field: 'cheweiArea',
                            title: '區域',
                        },
                        {
                            field: 'cheweiStatus',
                            title: '狀態',
                            templet: vo => vo.cheweiStatus ? vo.cheweiStatus : "",

            content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //監聽提交
        form.on('submit(submit-button)', function (data) {
            $.post("cheweiEdit", data.field, function () {
                let index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
                parent.layer.close(index); //再執行關閉
                parent.location.reload();//重繪父級頁面

            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a>${loginUser.username}</a></li>
                <li class="layui-nav-item"><a href="authLogout">退出登錄</a></li>
            </ul>
        </c:if>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <!-- 側邊欄 -->
                <jsp:include page="menu.jsp">
                    <jsp:param value="active" name="Chewei_active"/>
                </jsp:include>
            </ul>
        </div>
    </div>

    <div class="layui-body">
        <div class="search_style" style="padding-top: 10px;padding-left: 15px;">

                    "count": res.length, //決議資料長度（集合個數）
                    "data": result //決議資料串列
                };
            },
            page: { //支持傳入 laypage 組件的所有引數（某些引數除外，如：jump/elem） - 詳見檔案
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'], //自定義分頁布局
                groups: 1, //只顯示 1 個連續頁碼
                first: false, //不顯示首頁
                last: false, //不顯示尾頁
            },
            toolbar: '#myToolbar', //開啟頭部工具列，并為其系結左側模板
            defaultToolbar: ['filter', 'exports', 'print', { //自定義頭部工具列右側圖示，如無需自定義，去除該引數即可
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            title: '車位串列',
            cols: [

                搜索：
                <div class="layui-inline">
                    <input class="layui-input" name="search_keyword" id="search_keyword" autocomplete="off" placeholder="車位號">
                    <input type="hidden" class="layui-input" name="searchColumn" id="searchColumn" autocomplete="off" value="chewei_name">
                </div>
                <button class="layui-btn" data-type="reload">搜索</button>
            </div>
        </div>
        <!-- 內容主體區域 -->
        <table class="layui-hide" id="myData" lay-filter="myTable"></table>
    </div>
</div>
<script src="js/layui/layui.js"/>
<script>
    //JavaScript代碼區域
    layui.use('element', function () {

            return false;
        });
    });
</script>
</body>
</html>

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>車位詳情</title>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">
</head>
<body style="padding: 20px">
<form class="layui-form" action="">

                table.reload('myTable', {
                    url: url,
                    page: {
                        curr: 1 //重新從第 1 頁開始
                    }
                });
            }
        };
        $('.searchTable .layui-btn').on('click', function () {
            let type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
</script>

                    }
                });
                obj.del(); //洗掉對應行（tr）的DOM結構，并更新快取
                //parent.location.reload();//重繪父級頁面
                // layer.close(index);
                //parent.location.reload();//重繪父級頁面
                layer.msg(data.cheweiName + ' 洗掉成功！');
                // });
            } else if (layEvent === 'edit') { //編輯
                layer.open({
                    type: 2,
                    area: ['800px', '550px'],
                    fixed: false, //不固定

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">備注：</label>
        <div class="layui-input-block">
            <textarea type="text" name="cheweiText" class="layui-input" style="height: 100px;padding-left: 10px;" placeholder="請輸入內容......"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit-button">添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

                    content: 'cheweiEditPre?id=' + data.id
                });
                obj.update({});//同步更新快取對應的值
            } else if (layEvent === 'info') { //詳情
                layer.open({
                    type: 2,
                    area: ['800px', '650px'],
                    fixed: false, //不固定
                    maxmin: true,
                    content: 'cheweiGet?id=' + data.id
                });
                obj.update({});//同步更新快取對應的值
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，頭部工具列擴展的右側圖示，');
            }
        });
        //頭工具列事件
        table.on('toolbar(myTable)', function (obj) {

<form class="layui-form" action="">

    <div class="layui-form-item">
        <label class="layui-form-label">車位號：</label>
        <div class="layui-input-block">
            <input type="text" name="cheweiName" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">區域：</label>
        <div class="layui-input-block">
            <input type="text" name="cheweiArea" lay-verify="required" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">狀態：</label>
        <div class="layui-input-block">
            <input name="cheweiStatus" type="radio" value="占用中" checked="checked" class="layui-input" title="占用中"/>

        <div class="layui-input-block">
            <input type="text" name="cheweiArea" lay-verify="required|cheweiArea" class="layui-input" value="${vo.cheweiArea}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">狀態：</label>
        <div class="layui-input-block">
                   <input name="cheweiStatus" type="radio" value="占用中" ${vo.cheweiStatus=='占用中'?'checked':''} class="layui-input" title="占用中"/>
                   <input name="cheweiStatus" type="radio" value="空閑" ${vo.cheweiStatus=='空閑'?'checked':''} class="layui-input" title="空閑"/>
        </div>
    </div>
    <div class="layui-form-item">

        <label class="layui-form-label">車位號：</label>
        <div class="layui-input-block" style="padding: 9px 15px;">
            ${vo.cheweiName}
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">區域：</label>
        <div class="layui-input-block" style="padding: 9px 15px;">
            ${vo.cheweiArea}
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">狀態：</label>
        <div class="layui-input-block">
            <input name="cheweiStatus" type="radio" value="占用中" ${vo.cheweiStatus=='占用中'?'checked':''} class="layui-input" title="占用中" disabled/>
            <input name="cheweiStatus" type="radio" value="空閑" ${vo.cheweiStatus=='空閑'?'checked':''} class="layui-input" title="空閑" disabled/>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">備注：</label>

    }

    layui.use('table', function () {
        let table = layui.table;
        table.render({
            elem: '#myData',
            id: 'myTable',
            url: 'cheweiList',
            parseData: function (res) { //res：即為原始回傳的資料
                let result = this.page.curr ? res.slice(this.limit * (this.page.curr - 1), this.limit * this.page.curr) : res.slice(0, this.limit);
                return {
                    "code": 0, //決議介面狀態

            return false;
        });
    });
</script>
</body>
</html>

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="UTF-8">

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>添加車位</title>
    <script src="js/jquery.js"></script>
    <link rel="stylesheet" href="js/layui/css/layui.css">
</head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>停車場資訊管理系統</title>
    <link rel="stylesheet" href="js/layui/css/layui.css">
    <script src="js/jquery.js"></script>
    <script src="js/layer.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo" style="font-weight: bold;font-size: 19px">停車場資訊管理系統</div>
        <ul class="layui-nav layui-layout-left"></ul>
        <c:if test="${loginUser==null}">
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item"><a href="login.jsp">請登錄</a></li>
            </ul>
        </c:if>

<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        let form = layui.form, layer = layui.layer, layedit = layui.layedit;
        //創建一個編輯器
        let editIndex = layedit.build('LAY_demo_editor');
        //自定義驗證規則
        form.verify({
            content: function (value) {
                layedit.sync(editIndex);
            }
        });

        //監聽提交
        form.on('submit(submit-button)', function (data) {
            $.post("cheweiAdd", data.field, function () {
                let index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引
                parent.layer.close(index); //再執行關閉
                parent.location.reload();//重繪父級頁面

            <textarea type="text" name="cheweiText" disabled="disabled" class="layui-input" style="height: 100px;padding-left: 10px;" placeholder="請輸入內容......">${vo.cheweiText}</textarea>
        </div>
    </div>
</form>
<script src="js/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        let form = layui.form, layer = layui.layer, layedit = layui.layedit;
        //創建一個編輯器
        let editIndex = layedit.build('LAY_demo_editor');
    });
</script>
</body>
</html>

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>

        <div class="layui-input-block">
            <textarea type="text" name="cheweiText" class="layui-input" style="height: 100px;padding-left: 10px;" placeholder="請輸入內容......">${vo.cheweiText}</textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit-button">保存</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script src="js/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        let form = layui.form, layer = layui.layer, layedit = layui.layedit;
        //創建一個編輯器
        let editIndex = layedit.build('LAY_demo_editor');
        //自定義驗證規則