一、后台servlet开发
1.1、在CustomDAO中添加查询所有客户的方法
public List<Custom> selectAllCustoms() { String sql="SELECT c.*, u.nick_name FROM t_custom AS c LEFT JOIN t_user AS u ON c.uid=u.id"; ResultSet rs = this.executeQuery(sql); List<Custom> list=new ArrayList<Custom>(); try { while(rs.next()){ Custom custom=new Custom(); custom.setName(rs.getString("name")); custom.setAge(rs.getInt("age")); custom.setSex(rs.getInt("sex")); custom.setPhone(rs.getString("phone")); custom.setWechat(rs.getString("wechat")); custom.setAddr(rs.getString("addr")); custom.setHoby(rs.getString("hoby")); custom.setEmail(rs.getString("email")); custom.setOccupation(rs.getString("occupation")); custom.setUid(rs.getInt("uid")); try { custom.setNickName(rs.getString("nickName")); } catch (SQLException tHRowables) { throwables.printStackTrace(); } list.add(custom); } this.closeAll(); } catch (SQLException throwables) { throwables.printStackTrace(); } return list; }}1.2、在CustomDAO中添加根据用户id查询所有客户的方法
public List<Custom> selectAllCustomById(int uid) { String sql="select * from t_custom where uid="+uid; ResultSet rs = this.executeQuery(sql); List<Custom> list=new ArrayList<Custom>(); try { while(rs.next()){ Custom custom=new Custom(); custom.setName(rs.getString("name")); custom.setAge(rs.getInt("age")); custom.setSex(rs.getInt("sex")); custom.setPhone(rs.getString("phone")); custom.setWechat(rs.getString("wechat")); custom.setAddr(rs.getString("addr")); custom.setHoby(rs.getString("hoby")); custom.setEmail(rs.getString("email")); custom.setOccupation(rs.getString("occupation")); try { custom.setNickName(rs.getString("nickName")); } catch (SQLException throwables) { throwables.printStackTrace(); } custom.setUid(uid); list.add(custom); } this.closeAll(); } catch (SQLException throwables) { throwables.printStackTrace(); } return list;}1.3、添加CustomAddServlet
@WebServlet("/custom_list")public class CustomListServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { req.setCharacterEncoding("utf8"); resp.setCharacterEncoding("utf8"); resp.setContentType("application/json;charset=utf8"); //获取打印输出流 PrintWriter writer = resp.getWriter(); //从session中获取用户信息,看看是不是admin用户 HttpSession session = req.getSession(); Manger manger=(Manger) session.getAttribute("user"); //通过到查询 CustomDAO dao =new CustomDAOImpl(); List<Custom> list = null; if("admin".equals(manger.getUser_name())){ //显示全部的客户信息 list=dao.selectAllCustoms(); }else{ //显示用户看到自己的信息 list=dao.selectAllCustomById(manger.getId()); } String json= JSON.toJSONString(list); writer.print(json); writer.close();//释放资源 }2.2、通过v-for指令显示客户列表
<tr v-for="u in customs"> <td>{{u.id}}</td> <td>{{u.name}}</td> <td>{{u.age}}</td> <td>{{u.sex}}</td> <td>{{u.phone}}</td> <td>{{u.wechat}}</td> <td>{{u.addr}}</td> <td>{{u.hoby}}</td> <td>{{u.email}}</td> <td>{{u.occupation}}</td> <td>{{u.nickName}}</td> <td> <button class="btn btn-link" @click="doUpdate(u.id)">修改</button> <button class="btn btn-link" @click="doDelete(u.id)">删除</button> </td></tr>2.3、完好前端代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css"/> <script src="assets/jquery-3.5.1/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/axios.min.js"></script> <style> a:link{font-size: 20px;color:rgb(109,109,109);} a:visited{font-size: 20px;color:rgb(109,109,109);} a:hover{font-size: 20px;color:white;text-decoration:none; } </style></head><body><div class="container" id="app"> <div class="row"> <!--导航--> <div class="col-md-3" style="background-color: rgb(0,21,41);height: 600px;"> <!--行--> <div class="row"> <div class="col-md-12" style="background-color: rgb(0,40,77);text-align: center;line-height: 70px;height: 70px;font-size: 20px;color: white;font-weight: bold;"> <!--添加蜗牛logo图片并设置大小--> <img src="assets/img/logo.png" style="width:30px;height: 30px;margin-right: 8px;"/> 蜗牛GRC管理系统 </div> </div> <div class="row"> <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;"> <a href="index.html">进入首页</a> </div> </div> <div class="row"> <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;"> <a href="user_list.html">用户管理</a> </div> </div> <div class="row"> <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;"> <a href="user_add.html">添加用户</a> </div> </div> <div class="row"> <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;"> <a href="custom_list.html">客户管理</a> </div> </div> <div class="row"> <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;"> <a href="custom_add.html">添加客户</a> </div> </div> <div class="row"> <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;"> <a href="update_pwd.html">修改密码</a> </div> </div> <div class="row"> <div class="col-md-12" style="text-align: center;padding:20px 8px 20px 8px;"> <a href="login.html">退出登录</a> </div> </div> </div> <!--内容--> <div class="col-md-9" style="border: 1px solid gray;height: 600px"> <div class="row"> <!--显示提升位置--> <div class="col-md-12" style="height: 70px;font-size: 18px;color: rgb(109,109,109);line-height:70px;font-weight: bold;padding-left: 20px"> > 客户管理 </div> </div> <div class="row" style="background-color: rgb(240,242,245);height: 530px;padding: 20px"> <!--显示内容--> <div class="col-md-12" style="background-color: white;height: 530px;border:none;border-radius: 5px;" > <!--使用bootstap斑马线款式--> <table class="table table-striped" style="margin-top: 20px;"> <!--表头描绘--> <caption>客户管理-客户列表</caption> <!--表头--> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>手机号</th> <th>微信号</th> <th>住址</th> <th>喜好</th> <th>Email</th> <th>职业</th> <th>创建者</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="u in customs"> <td>{{u.id}}</td> <td>{{u.name}}</td> <td>{{u.age}}</td> <td>{{u.sex}}</td> <td>{{u.phone}}</td> <td>{{u.wechat}}</td> <td>{{u.addr}}</td> <td>{{u.hoby}}</td> <td>{{u.email}}</td> <td>{{u.occupation}}</td> <td>{{u.nickName}}</td> <td> <button class="btn btn-link" @click="doUpdate(u.id)">修改</button> <button class="btn btn-link" @click="doDelete(u.id)">删除</button> </td> </tr> </tbody> </table> </div> </div> </div> </div></div><script> new Vue({ el:'#app', data:{ customs:null }, created:function () { this. requestCustomList(); }, methods:{ //要删除的用户id doDelete(id){ //发送servlet删除用户发恳求(删除) axios.get("delete_user?id="+id).then(response=>{ if(response.data=="删除胜利"){ this. requestCustomList(); }else{ alert("删除失败"); } }); }, doUpdate(id){ //跳转到user_update.html页面,并且传送id过去 window.location.href="user_update.html?id="+id; }, requestCustomList(){//恳求客户列表(查询方法) axios.get("custom_list").then(response=>{ this.customs=response.data; }); } } });</script></body></html> |
