上次冲刺我们主要是做了注册功能和搜索功能并且专注于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 id="toolbar" class="fixed-table-toolbar" style="margin-bottom: -40px"> <button id="add" class="btn btn-danger add"> 新增菜谱 </button> </div> <table id="table" data-toggle="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_id="+${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_id="+row.food_id+"&shop_id="+${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>
<%@ 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 id="toolbar" class="fixed-table-toolbar" style="margin-bottom: -40px"> <!-- <button id="add" class="btn btn-danger add"> 新增用户 </button> --> </div> <table id="table" data-toggle="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>
<%@ 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" id="form" enctype="multipart/form-data"> <div class="form-group"> <label for="foodname">名称</label> <input type="text" class="form-control" id="foodname" name="foodname" placeholder="请输入名称"> </div> <div class="form-group"> <label for="price">价钱</label> <input type="text" class="form-control" id="price" name="price" placeholder="请输入价钱"> </div> <div class="form-group"> <label for="intro">简介</label> <input type="text" class="form-control" name="intro" id="intro" placeholder="请输入简介"> </div> <div class="form-group"> <label for="foodtype">种类</label> <select name="foodtype" id="foodtype"> </select> </div> <div class="form-group"> <label for="recommand">是否推荐</label> <div class="radio"> <label> <input type="radio" name="recommand" id="recommand1" value="1" checked> 是 </label> </div> <div class="radio"> <label> <input type="radio" name="recommand" id="recommand2" value="0">否 </label> </div> </div> <div class="form-group"> <label for="pic">选择图片</label> <input type="text" id="pic" name="pic"> </div> <button type="button" class="btn btn-success" id="submit">提交</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_id="${food.food_id}";//是否为修改内容 $.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>