目录
2.1、在created方法中通过axios发送请求获取客户列表
一、后台servlet开发
1.1、在CustomDAO中添加查询所有客户的方法
接口
接口1:根据id查询客户,即员工只可以查询到自己的客户
接口2:查询所有客户,超级管理员使用的,可以查到所有客户
DAO实现类
根据id查询
代码如下:
public List<Custom> selectCustomsByUid(int uid) { String sql="select * from t_custom where uid="+uid; ResultSet rs = executeQuery(sql); ArrayList<Custom> list = new ArrayList<Custom>(); try { if (rs.next()){ Custom custom = new Custom(); custom.setId(rs.getInt("id")); 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("nick_name")); } catch (SQLException throwables) { throwables.printStackTrace(); } custom.setUid(uid); list.add(custom); }
查询所有
代码如下:
public List<Custom> selectAllCustom() { String sql = "SELECT c.*, u.nick_name FROM t_custom AS c LEFT JOIN t_user AS u ON c.uid=u.id";//外连接 //String sql="SELECT t_custom.*, t_user.nick_name FROM t_custom, t_user WHERE t_custom.uid=t_user.id"; 内连接 ResultSet rs = this.executeQuery(sql); List<Custom> list = new ArrayList<Custom>(); //用于保存所有客户信息 try { while(rs.next()){ Custom custom = new Custom(); custom.setId(rs.getInt("id")); 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.setNickName(rs.getString("nick_name")); custom.setUid(rs.getInt("uid")); list.add(custom); } closeAll(); } catch (SQLException throwables) { throwables.printStackTrace(); } return list; }
1.2、添加CustomAddServlet
在servlet中获取session中保存的用户,判断当前登录的用户是否是admin,如果是则显示全部用户,否则显示当前登录用户的客户列表
package controller;
import com.alibaba.fastjson.JSON;
import dao.impl.CustomDAOImpl;
import entity.Custom;
import entity.User;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
@WebServlet("/custom_list")
public class CustomListServlet extends HttpServlet {
@Override
protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//修改编码集,解决中文乱码问题
req.setCharacterEncoding("utf-8");
resp.setCharacterEncoding("utf-8");
resp.setContentType("application/json;charset=utf-8");
//获取打印输出流,向网页输出内容
PrintWriter writer = resp.getWriter();
//从session中获取用户信息,看看是不是admin用户
HttpSession session = req.getSession();
User user = (User) session.getAttribute("user");
//通过dao查询客户列表
CustomDAOImpl dao = new CustomDAOImpl();
List<Custom> list=null;
if ("admin".equals(user.getUserName())){
//是超级管理员,显示所有的客户信息
list = dao.selectAllCustom();
}else{
//不是超级管理员,显示登录用户自己的客户信息
list=dao.selectCustomsByUid(user.getId());
}
//向页面输出客户信息
String json= JSON.toJSONString(list);
writer.print(json);
writer.close();
}
}
二、前端html开发
2.1、在created方法中通过axios发送请求获取客户列表
reqeustCustomList(){ //请求客户列表
//发送请求获取用户列表
axios.get("custom_list").then(response => {
this.customs = response.data;
});
}
created: function () { //页面加载完成之后执行
this.reqeustCustomList(); //调用请求用户列表的函数
},
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>
<!-- 导入Bootstrap依赖-->
<link rel="stylesheet" href="asset/bootstrap-3.3.7-dist/css/bootstrap.min.css">
<script src="asset/jquery-3.5.1/jquery-3.5.1.min.js"></script>
<script src="asset/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- 导入vue依赖-->
<script src="asset/vue.min-v2.5.16.js"></script>
<script src="asset/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);
}
/*鼠标悬浮链接上*/
/*text-decoration: none;不显示下划线*/
a:hover {
font-size: 20px;
color: white;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container" id="app">
<!-- bootstrap行-->
<div class="row">
<!-- 显示导航-->
<div class="col-md-3" style="background-color: rgb(0,21,41);height: 800px;">
<!-- bootstrap行-->
<div class="row">
<div class="col-md-12"
style="background-color: rgb(0,40,77);text-align: center;height: 70px;line-height: 70px;font-size: 20px;color: white;font-weight: bold;">
<img src="asset/img/logo.png" style="width: 30px;height: 30px;margin-right: 8px;"/>
蜗牛CRM管理系统
</div>
</div>
<!-- -->
<div class="row">
<div class="col-md-12" style="text-align: center; padding:20px 0px 20px 0px; ">
<a href="index.html">进入首页</a>
</div>
</div>
<!-- -->
<div class="row">
<div class="col-md-12" style="text-align: center; padding:20px 0px 20px 0px; ">
<a href="user_list.html">用户管理</a>
</div>
</div>
<!-- -->
<div class="row">
<div class="col-md-12" style="text-align: center; padding:20px 0px 20px 0px; ">
<a href="user_add.html">添加用户</a>
</div>
</div>
<!-- -->
<div class="row">
<div class="col-md-12" style="text-align: center; padding:20px 0px 20px 0px; ">
<a href="custom_list.html">客户管理</a>
</div>
</div>
<!-- -->
<div class="row">
<div class="col-md-12" style="text-align: center; padding:20px 0px 20px 0px; ">
<a href="custom_add.html">添加客户</a>
</div>
</div>
<!-- -->
<div class="row">
<div class="col-md-12" style="text-align: center; padding:20px 0px 20px 0px; ">
<a href="changepassword.html">修改密码</a>
</div>
</div>
<!-- -->
<div class="row">
<div class="col-md-12" style="text-align: center; padding:20px 0px 20px 0px; ">
<a href="login.html">退出登录</a>
</div>
</div>
</div>
<!-- 显示内容-->
<div class="col-md-9" style="border: 1px solid gray; height: 800px;">
<!-- 显示提示位置-->
<div class="row">
<div class="col-md-12"
style="height: 70px; color: rgb(109,109,109);font-size: 18px;line-height: 70px;font-weight: bold;padding-left: 20px;">
> 客户管理
</div>
</div>
<div class="row" style="background-color: rgb(240,242,245);height: 730px;padding: 20px;">
<!-- 显示内容-->
<div class="col-md-12" style="background-color: white;height: 730px;border:none;border-radius: 5px;">
<!-- 使用bootstrap表格斑马线样式-->
<table class="table table-striped" style="margin-top: 20px;">
<!-- 表格描述-->
<caption>用户管理-用户列表</caption>
<!-- thead 表头-->
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>手机号</th>
<th>微信号</th>
<th>住址</th>
<th>爱好</th>
<th>邮箱</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.reqeustCustomList();//调用请求客户列表的函数
},
methods:{
/*删除用户,根据id*/
doDelete(id){
/*尝试能不能找到要删除的id
console.log("要删除的用户id:"+id)
*/
//请求serverlet删除用户
axios.get("delete_user?id="+id).then(response =>{
if (response.data=='删除成功'){
//删除用户列表
this.reqeustCustomList();//调用请求用户列表的函数
}else{
alert("删除失败!!!");
}
});
},
doUpdate(id){//点击修改按钮后触发
//跳转到user_update.html页面,并且传递id过去
window.location.href="user_update.html?id="+id;
},
reqeustCustomList(){
//发送请求获取用户列表
axios.get("custom_list").then(response=>{
this.customs = response.data;
});
},
}
});
</script>
</body>
</html>