用户管理-前端开发H5-01

编程语言 2018-09-12 13:13:47 阅读次数: 0

参考下

https://blog.csdn.net/qq_39150192?t=1 

根目录

page目录

js目录

page目录

config.xml

<?xml version="1.0" encoding="UTF-8"?>
<config scope="client" clientversion="4" devicetype="all">
  <appid>hz-ssm</appid>
  <appname>hz-ssm</appname>
  <description></description>
  <version>1.0.0</version>
  <date>2018-08-30</date>
  <homepage src="res:page/index.uixml"/>
  <faultconfig src=""/>
  <access network="true" gps="true" camera="true" certificate="true" land="false" orientation="port"/>
  <vendor email="" url=""/>
  <icon main="res:image/main.png" logo="res:image/logo.png"/>
</config>

index.uixml

<!-- ExMobi UIXML(XHTML)文件 -->
<html isbridge="true">
	<head>
		<meta content="charset=utf-8"/>
		<title show="false">Hello World</title>
		<script>
		<![CDATA[
			
		]]>
		</script>
	</head>
	<body>
		<webview url="res:page/html/queryUser.html"></webview>
	</body>
</html>

querryUser.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
        .container{
            padding-top: 20px;
        }

    </style>

</head>
<body>
<div class="container">
    <div class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="name" placeholder="请输入关键字"/>
        </div>
        <div class="form-group">
            <button class="btn btn-primary" id="query">搜索</button>
            <button class="btn btn-primary" id="add">新增用户</button>
            <button class="btn btn-primary" id="queryRole">角色查询</button>
        </div>
    </div>
    <br/>
    <table class="table table-bordered">
        <thead>
            <tr>
                <td>序号</td>
                <td>名称</td>
                <td>账号</td>
                <td>性别</td>
                <td>年龄</td>
                <td>注册时间</td>
                <td>角色</td>
                <td>操作</td>
            </tr>
        </thead>
        <tbody id="userTable">


        </tbody>
    </table>
</div>
</body>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/dateformat.js"></script>
<script type="text/javascript" src="../js/exmobi.js"></script>
<!--<script type="text/javascript" src="../js/core.js"></script>-->
<script>
	document.addEventListener("backmonitor",function(){
		ExMobiWindow.close();
	},false);
    document.addEventListener("plusready",function(){
    	$("#add").on("click",function () {
        	Exmobi.openWebview("res:page/html/addUser.html",true);
        });
        $("#query").on("click", function () {
            var data = {};
            data.name = $("#name").val();
            $.ajax({
                url:"http://127.0.0.1:8001/process/service/hz-ssm/user/query",
                type:"post",
                data:data,
                dataType:"json",
                success:function(data){
                    var userTable = $("#userTable");
                    userTable.empty();
                    for(var i=0;i<data.length;i++){
                        userTable.append("<tr><td>"+(data[i].id+1)+"</td><td>"+data[i].name+"</td><td>"+data[i].loginId+
                            "</td><td>"+data[i].sex+"</td><td>"+data[i].age+"</td><td>"+new Date(data[i].registerTime).Format("yyyy-MM-dd hh:mm:ss")+
                            "</td><td>"+data[i].roleName+"</td><td><button class='edit btn btn-primary' value='"+
                            data[i].id+"'>编辑</button></td></tr>");
                    }
                }
            })
        });
        
        $("#queryRole").on("click",function () {
        	Exmobi.openWebview("res:page/html/queryRole1.html",true)
        });
        $("tbody").on("click",".edit",function(){
            var id = $(this).val();
            Exmobi.setStringSession("userId", id);
            Exmobi.openWebview("res:page/html/editUser.html",true);
        })
    },false);
    
</script>


</html>

queryRole.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
        .container{
            padding-top: 20px;
        }

    </style>

</head>
<body>
<div class="container">
    <div class="form-inline">
        <div class="form-group">
            <input type="text" class="form-control" id="name" placeholder="请输入关键字"/>
        </div>
        <div class="form-group">
            <button class="btn btn-primary" id="query">搜索</button>
            <button class="btn btn-primary" id="countUser">统计</button>
        </div>
    </div>
    <br/>
    <table class="table table-bordered">
        <thead>
            <tr>
                <td>序号</td>
                <td>名称</td>
                <td>描述</td>
            </tr>
        </thead>
        <tbody id="roleTable">


        </tbody>
    </table>
</div>
</body>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/dateformat.js"></script>
<script type="text/javascript" src="../js/exmobi.js"></script>

<script>
	document.addEventListener("backmonitor",function(){
		ExMobiWindow.close();
	},false);
	
	document.addEventListener("plusready",function(){
        $("#query").on("click", function () {
            var data = {};
            data.name = $("#name").val();
            $.ajax({
                url:"http://127.0.0.1:8001/process/service/hz-ssm/role/query",
                type:"post",
                data:data,
                dataType:"json",
                success:function(data){
                    var userTable = $("#roleTable");
                    userTable.empty();
                    for(var i=0;i<data.length;i++){
                        userTable.append("<tr><td>"+(data[i].id+1)+"</td><td>"+data[i].name+"</td><td>"+data[i].notes+
                            "</td></tr>");
                    }
                }
            })
        });
        $("#countUser").on("click",function(){
        	Exmobi.openWebview("res:page/html/countRole.html",true);
        })
    },false);
    
</script>


</html>

editUser.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
        .container{
            padding-top: 20px;
        }

    </style>

</head>
<body>
<div class="container">
    <div class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label" for="loginId">账号</label>
            <div class="col-sm-10">
                <input class="form-control" readonly="readonly" id="loginId" name="loginId" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="name">名称</label>
            <div class="col-sm-10">
                <input class="form-control" id="name" name="name" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="password">密码</label>
            <div class="col-sm-10">
                <input class="form-control" id="password" name="password" type="password">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="sex">性别</label>
            <div class="col-sm-10">
                <input class="form-control" id="sex" name="sex" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="age">年龄</label>
            <div class="col-sm-10">
                <input class="form-control" id="age" name="age" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="status">状态</label>
            <div class="col-sm-10">
                <input class="form-control" id="status" name="status" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="registerTime">注册时间</label>
            <div class="col-sm-10">
                <input class="form-control" id="registerTime" value="2018-09-05T08:30:01" type="datetime-local">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label col-sm-2" for="roleList">角色</label>
            <div class="col-sm-10">
                <select class="form-control" id="roleList">
                    <option value="0">请选择</option>
                </select>
            </div>

        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-6">
                <button type="button" id="save" class="btn btn-primary">保存</button>
                <button data-toggle="modal" data-target="#modal" class="btn btn-primary">删除</button>
                <button type="button" id="addRole" class="btn btn-primary">新增角色</button>
            </div>
        </div>

    </div>
    <div class="modal" id="modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">X</button>
                    <h4 class="modal-title">消息框</h4>
                </div>
                <div class="modal-body">
                    <p>确认删除？</p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button class="btn btn-primary" id="delete">确认</button>
                </div>
            </div>
        </div>

    </div>
</div>
</body>

<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/exmobi.js"></script>

<script>
	document.addEventListener("backmonitor",function(){
		ExMobiWindow.close();
	},false);
	document.addEventListener("plusready",function(){
        var id = Exmobi.getStringSession("userId");
        alert(id);
        var data = {};
        data.id = id;
        $.ajax({
            url:'http://127.0.0.1:8001/process/service/hz-ssm/role/query',
            type:"post",
            data:"",
            dataType:"json",
            success:function (data) {
                if(data.length>0){
                    for(var i=0;i<data.length;i++){
                        $("#roleList").append("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                    }
                }
            }
        });

        $.ajax({
            url:'http://127.0.0.1:8001/process/service/hz-ssm/user/query',
            type:"post",
            data:data,
            dataType:"json",
            success:function (data) {
                if(data.length>0){
                    $("#loginId").val(data[0].loginId);
                    $("#name").val(data[0].name);
                    $("#password").val(data[0].password);
                    $("#sex").val(data[0].sex);
                    $("#age").val(data[0].age);
                    $("#status").val(data[0].status);
                    $("#registerTime").val(data[0].registerTime);
                    if(data[0].roleId != null){
                        $("#roleList").val(data[0].roleId);
                    }
                }
            }
        });

        $("#delete").on("click",function () {
            $.ajax({
                url:"http://127.0.0.1:8081/hz-ssm/user/delete",
                type:"post",
                data:data,
                dataType:"json",
                success:function(data){
                    if(data.result=="success"){
                        alert("删除成功！");
                        Exmobi.openWebview("res:page/html/queryUser.html");
                    }
                }
            })
        });

        $("#addRole").on("click",function () {
        	Exmobi.openWebview("res:page/html/addRole.html",true);
        });

        $("#save").on("click", function () {
            data.loginId = $("#loginId").val();
            data.name = $("#name").val();
            data.password = $("#password").val();
            data.sex = $("#sex").val();
            data.age = $("#age").val();
            data.status = $("#status").val();
            data.roleId = $("#roleList").val();
            data.registerTime = $("#registerTime").val();
            $.ajax({
                url:"http://127.0.0.1:8001/process/service/hz-ssm/user/update",
                type:"post",
                data:data,
                dataType:"json",
                success:function(data){
                    if(data.result =="success"){
                        alert(data.result);
                        Exmobi.openWebview("res:page/html/queryUser.html",false);
                    }
                }
            })

        });
    })
</script>
</html>

countRole.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
        .container{
            padding-top: 20px;
        }

    </style>

</head>
<body>
<div class="container">
    <div class="form-inline">
        <div class="form-group">
            <button id="user" class="btn btn-primary">用户管理</button>
            <button id="role" class="btn btn-primary">角色管理</button>
        </div>
    </div>
    <br/>
    <div id="myCarousel" class="carousel slide">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <div id="main" style="height: 300px;width: 300px;">

                </div>
            </div>
            <div class="item">
                <div id="main1" style="height: 300px;width: 300px">

                </div>
            </div>

        </div>
        <!-- 轮播（Carousel）导航 -->
        <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
</body>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/dateformat.js"></script>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/exmobi.js"></script>

<script>
	document.addEventListener("backmonitor",function(){
		ExMobiWindow.close();
	},false);
	
	document.addEventListener("plusready", function(){
        var chart = echarts.init(document.getElementById("main"));
        var chart1 = echarts.init(document.getElementById("main1"));
        $.ajax({
            url:"http://127.0.0.1:8001/process/service/hz-ssm/role/countrole",
            type:"post",
            data:"",
            dataType:"json",
            success:function (data) {
                var roleName = new Array();
                var userNum = new Array();
                var userNum1 = new Array();
                for(var i=0;i<data.length;i++){
                    roleName[i] = data[i].roleName;
                    userNum[i] = data[i].userNum;
                    userNum1[i] = {value:data[i].userNum,name:data[i].roleName}
                }
                var option = {
                    tooltip:{},
                    legend:{
                        data:["用户数"]
                    },
                    xAxis:{
                        type:"category",
                        data:roleName
                    },
                    yAxis:{
                        type:"value"
                    },
                    series:{
                        name:"用户数",
                        data:userNum,
                        type:"bar"
                    }
                };
                var option1 = {
                    tooltip:{
                        formatter: "{a} <br/>{b} : {c}  ({d}%)"
                    },
                    series:{
                        name:"用户数",
                        data:userNum1,
                        type:"pie"
                    }
                };
                chart.setOption(option);
                chart1.setOption(option1);
            }
        });
        $("#user").on("click",function () {
        	Exmobi.openWebview("res:page/html/queryUser.html",false);
        });
        $("#role").on("click",function () {
        	Exmobi.openWebview("res:page/html/queryRole1.html",false);
        });
    })
</script>


</html>

addUser.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <style>
        .container{
            padding-top: 20px;
        }

    </style>
<script type="text/javascript" src="../js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/exmobi.js"></script>

<script>
	document.addEventListener("backmonitor",function(){
			ExMobiWindow.close();
		},false);
	document.addEventListener("plusready",function(){
        $("#save").on("click", function () {
            var data = {};
            data.loginId = $("#loginId").val();
            data.name = $("#name").val();
            data.password = $("#password").val();
            data.sex = $("#sex").val();
            data.age = $("#age").val();
            data.registerTime = $("#registerTime").val();
            data.status = $("#status").val();
            $.ajax({
                url:"http://127.0.0.1:8001/process/service/hz-ssm/user/add",
                type:"post",
                data:data,
                dataType:"json",
                success:function(data){
                    if(data.result =="success"){
                        alert(data.result);
                        Exmobi.openWebview("res:page/html/queryUser.html",false);
                    }
                }
            })

        })
    })
</script>
</head>
<body>
<div class="container">
    <div class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label" for="loginId">账号</label>
            <div class="col-sm-10">
                <input class="form-control" id="loginId" name="loginId" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="name">名称</label>
            <div class="col-sm-10">
                <input class="form-control" id="name" name="name" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="password">密码</label>
            <div class="col-sm-10">
                <input class="form-control" id="password" name="password" type="password">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="sex">性别</label>
            <div class="col-sm-10">
                <input class="form-control" id="sex" name="sex" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="age">年龄</label>
            <div class="col-sm-10">
                <input class="form-control" id="age" name="age" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="registerTime">注册时间</label>
            <div class="col-sm-10">
                <input class="form-control" id="registerTime" name="registerTime" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="status">状态</label>
            <div class="col-sm-10">
                <input class="form-control" id="status" name="status" type="text">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-2">
                <button type="button" id="save" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>

addRole.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <style>
        .container{
            padding-top: 20px;
        }

    </style>

</head>
<body>
<div class="container">
    <div class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-2 control-label" for="name">名称</label>
            <div class="col-sm-10">
                <input class="form-control" id="name" name="name" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="notes">描述</label>
            <div class="col-sm-10">
                <input class="form-control" id="notes" name="notes" type="text">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-2">
                <button type="button" id="save" class="btn btn-default">保存</button>
            </div>
        </div>
    </div>
</div>
</body>

<script type="text/javascript" src="static/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $("#save").on("click", function () {
            var data = {};
            data.name = $("#name").val();
            data.notes = $("#notes").val();
            $.ajax({
                url:"http://127.0.0.1:8081/hz-ssm/role/add",
                type:"post",
                data:data,
                dataType:"json",
                success:function(data){
                    if(data.result =="success"){
                        alert(data.result);
                        $(location).attr("href","http://127.0.0.1:8081/hz-ssm/queryUser.html");
                    }
                }
            })

        })
    })
</script>
</html>

猜你喜欢

转载自blog.csdn.net/juiceda/article/details/82584790
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022