第二次冲刺第一天之后台管理

分类: IT文章 • 2022-08-10 17:23:13

上次冲刺我们主要是做了注册功能和搜索功能并且专注于app的功能

一个app也需要管理者进行后台的维护，所以我们首先把后台的管理员通过web端的方式来实现

后台主要是实现数据的增删改查和一个用户登录的界面，这个我们会用两天时间做完

用到的技术就是jsp直接数据库，没有用SERVLET

这里贴一下这个代码

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>菜谱管理</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-table.min.css" />
</head>
<body>
<div class="container">

<nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">后台管理</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li><a href="userManager.do">用户管理</a></li>
         <li class="active"><a href="shopManager.do">餐厅&菜谱管理</a></li>
         <li><a href="orderManager.do">订单&评论管理</a></li>
         
      </ul>
   </div>
</nav>
<div >
    <button >
        新增菜谱
    </button>
</div>
<table >
       data-url="getFoodByShop.do?shop_id=${shop_id }"
       data-click-to-select="true"
       data-query-params="queryParams"
       data-pagination="false"
       data-search="true"
       data-height="600">
    <thead>

    <tr>
        <th data-field="food_id">ID</th>
        <th data-field="foodname">菜谱名称</th>
        <th data-field="price">价钱</th>
        <th data-field="intro">简介</th>
        <th data-field="pic" data-formatter="picFormatter">图片</th>
        <th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">操作</th>
    </tr>
    </thead>
</table>
</div>
<script src="js/jQuery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.min.js"></script>
<script>
    function queryParams() {
        return {
            type: 'owner',
            sort: 'updated',
            direction: 'desc',
            per_page: 100,
            page: 1
        };
    }

    var $table = $('#table'), $add = $('#add');

    $(function () {
        $table.on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function () {
            $add.prop('disabled', !$table.bootstrapTable('getSelections').length);
        });
        $add.click(function () {
            var newpage="newfoodmanager.do?shop_>${shop_id};
            window.open(newpage);
        });
    });


    function actionFormatter(value, row, index) {
        return [
            '<button class="btn btn-primary update">修改</button>'+
            '<button class="btn btn-danger delete">删除</button>'
        ].join('');
    }
    function picFormatter(value, row, index) {
        console.log(value, row, index);

        return [
            '<img src='+value+' width="50p" height="50px"></img>'
        ].join('');
    }

    window.actionEvents = {
        'click .update': function (e, value, row, index) {
             console.log(value, row, index);
             var newpage="editFood.do?food_>${shop_id};
             window.open(newpage);
        },
        'click .delete': function (e, value, row, index) {
            $.ajax({
                cache: true,
                type: "POST",
                url:"deleteFood.do",
                data:{food_id:row.food_id},
                async: false,
                error: function(request) {
                    alert("Connection error");
                },
                success: function(data) {
                    if(data.success==1)
                        {
                        alert("删除成功");
                        
                        }
                           
                    else
                        alert("删除失败");
                }
            });
        }
    }

</script>
</body>
</html>

View Code

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-table.min.css" />
</head>
<body>
<div class="container">

  <nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">后台管理</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li class="active"><a href="userManager.do">用户管理</a></li>
         <li ><a href="shopManager.do">餐厅&菜谱管理</a></li>
         <li><a href="orderManager.do">订单&评论管理</a></li>
         
      </ul>
   </div>
</nav>
<div >
    <!-- <button >
        新增用户
    </button> -->
</div>
<table >
       data-url="getAllUsers.do"
       data-click-to-select="true"
       data-query-params="queryParams"
       data-pagination="false"
       data-search="true"
       data-height="600">
    <thead>

    <tr>
        <th data-field="user_id">ID</th>
        <th data-field="username">用户名</th>
        <th data-field="userpass">密码</th>
        <th data-field="mobilenum">电话</th>
        <th data-field="address">地址</th>
        <th data-field="comment">备注</th>
         <th data-field="action" data-formatter="actionFormatter" data-events="actionEvents">操作</th>
       
    </tr>
    </thead>
</table>
</div>
<script src="js/jQuery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.min.js"></script>
<script>   
    function queryParams() {
        return {
            type: 'owner',
            sort: 'updated',
            direction: 'desc',
            per_page: 100,
            page: 1
        };
    }

    var $table = $('#table'), $add = $('#add');

    function actionFormatter(value, row, index) {
        return [
            '<button class="btn btn-primary update">密码重置</button>'
           
        ].join('');
    }

    window.actionEvents = {
        'click .update': function (e, value, row, index) {
            $.ajax({
                cache: true,
                type: "POST",
                url:"resetPassword.do",
                data:{user_id:row.user_id},
                async: false,
                error: function(request) {
                    alert("连接失败");
                },
                success: function(data) {
                    if(data.success==1)
                           alert("密码重置为：123456");
                    else
                        alert("密码重置失败");
                }
            });
        }
        }

</script>
</body>
</html>

View Code

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>新增菜谱</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-theme.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-table.min.css" />
</head>
<body>
<div class="container">

  <nav class="navbar navbar-default" role="navigation">
   <div class="navbar-header">
      <a class="navbar-brand" href="#">后台管理</a>
   </div>
   <div>
      <ul class="nav navbar-nav">
         <li><a href="userManager.do">用户管理</a></li>
         <li class="active"><a href="shopManager.do">餐厅&菜谱管理</a></li>
         <li><a href="orderManager.do">订单&评论管理</a></li>
         
      </ul>
   </div>
</nav>
<form role="form" >
   <div class="form-group">
      <label for="foodname">名称</label>
      <input type="text" class="form-control" >
         placeholder="请输入名称">
   </div>
   <div class="form-group">
      <label for="price">价钱</label>
      <input type="text" class="form-control" > 
         placeholder="请输入价钱">
   </div>

   <div class="form-group">
      <label for="intro">简介</label>
      <input type="text" class="form-control" name="intro" > 
         placeholder="请输入简介">
   </div>
   <div class="form-group">
      <label for="foodtype">种类</label>
     <select name="foodtype" >
     </select>
   </div>
   <div class="form-group">
      <label for="recommand">是否推荐</label>
      
   <div class="radio">
       <label>
          <input type="radio" name="recommand" > 
             value="1" checked> 是
       </label>
    </div>
    <div class="radio">
       <label>
          <input type="radio" name="recommand" >
             value="0">否
       </label>
    </div>
</div>
   <div class="form-group">
      <label for="pic">选择图片</label>
      <input type="text" >
   </div>
   <button type="button" class="btn btn-success" >提交</button>
</form>
</div>
<script src="js/jQuery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.min.js"></script>
<script src="js/bootstrap-table-zh-CN.min.js"></script>
<script>

$(function () {
     var food_>是否为修改内容
        
     $.ajax({
            cache: true,
            type: "POST",
            url:"getFoodType.do",
            data:null,
            async: false,
            error: function(request) {
                alert("连接失败");
            },
            success: function(data) {
                var optionstring = "";   
                for (var i in data) {  
                    var jsonObj =data[i];                    
                     optionstring += "<option value='" + jsonObj.type_id +"'";
                     if(food_id!=""&&"${food.type_id}"==jsonObj.type_id)
                         optionstring +=" selected ";
                     optionstring+=">" + jsonObj.typename + "</option>";                     
                }  
                 $("#foodtype").html("<option value='0'>请选择口味...</option> "+optionstring);  
                
            }
        });
    
        if(food_id!="")
            {
            console.log(food_id);
            $("#foodname").val("${food.foodname}");
            $("#price").val("${food.price}");
            $("#foodtype").val("${food.type_id}");
            $("#intro").val("${food.intro}");
            if("${food.type_id}"=="0")
                $("#recommand2").attr("checked",true);
            //$("#pic").val("${food.pic}");
            }
        $('#submit').click(function () {
        var foodname=$("#foodname").val();
        var price=$("#price").val();
        var type_id=$("#foodtype").val();
        var intro=$("#intro").val();
        var pic=$("#pic").val();
        var recommand= $("input[name='recommand'][checked]").val();
        if(food_id!="")
            $.ajax({
                cache: true,
                type: "POST",
                url:"updateFood.do",
                data:{food_id:food_id,foodname:foodname,price:price,type_id:type_id,intro:intro,pic:pic,recommand:recommand},
                async: false,
                error: function(request) {
                    alert("连接失败");
                },
                success: function(data) {
                    if(data.success==1)
                           alert("修改成功");
                    else
                        alert("修改失败");
                }
            });
        else
        $.ajax({
                     cache: true,
                     type: "POST",
                     url:"insertFood.do",
                     data:{foodname:foodname,price:price,type_id:type_id,intro:intro,shop_id:${shop_id},pic:pic,recommand:recommand},
                     async: false,
                     error: function(request) {
                         alert("连接失败");
                     },
                     success: function(data) {
                         if(data.success==1)
                                alert("增加成功");
                         else
                             alert("增加失败");
                     }
                 });

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

View Code

第二次冲刺第一天之后台管理

相关推荐