一、后台servlet开发
1.1、在CustomerDAO中添加查询所有客户的方法
public List<Customer> selectAllCustomer() {
//显式查询
String sql = "SELECT c.*, u.nick_name FROM t_custom AS c LEFT JOIN t_user AS u ON c.uid=u.id";
//隐式查询
// SELECT t_custom.*, t_user.nick_name FROM t_custom, t_user WHERE t_custom.uid=t_user.id
ResultSet rs = this.excuteQuery(sql);
List<Customer> list = new ArrayList<Customer>();
try {
while (rs.next()){
Customer customer = new Customer();
customer.setId(rs.getInt("id"));
customer.setName(rs.getString("name"));
customer.setAge(rs.getInt("age"));
customer.setSex(rs.getInt("sex"));
customer.setPhone(rs.getString("phone"));
customer.setWeChat(rs.getString("wechat"));
customer.setAddr(rs.getString("addr"));
customer.setHoby(rs.getString("hoby"));
customer.setEmail(rs.getString("email"));
customer.setOccupation(rs.getString("occupation"));
customer.setNickName(rs.getString("nick_name"));
customer.setUid(rs.getInt("uid"));
list.add(customer);
}
this.closeAll();
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
1.2、在CustomDAO中添加根据用户id查询所有客户的方法
public List<Customer> selectAllCustomerById(int uid) {
// String sql = "select * from t_custom where uid="+uid;
String sql = "SELECT c.*, u.nick_name FROM t_custom AS c LEFT JOIN t_user AS u ON c.uid=u.id where uid="+uid;
ResultSet rs = this.excuteQuery(sql);
List<Customer> list = new ArrayList<Customer>();
try {
while (rs.next()){
Customer customer = new Customer();
customer.setId(rs.getInt("id"));
customer.setName(rs.getString("name"));
customer.setAge(rs.getInt("age"));
customer.setSex(rs.getInt("sex"));
customer.setPhone(rs.getString("phone"));
customer.setWeChat(rs.getString("wechat"));
customer.setAddr(rs.getString("addr"));
customer.setHoby(rs.getString("hoby"));
customer.setEmail(rs.getString("email"));
customer.setOccupation(rs.getString("occupation"));
try {
customer.setNickName(rs.getString("nick_name"));
} catch (SQLException e) {
e.printStackTrace();
}
customer.setUid(uid);
list.add(customer);
}
this.closeAll();
} catch (SQLException e) {
e.printStackTrace();
}
return list;
}
1.3、添加CustomAddServlet
在servlet中获取session中保存的用户,判断当前登录的用户是否是admin,如果是则显示全部用户,否则显示当前登录用户的客户列表
package controller;
import com.alibaba.fastjson.JSON;
import dao.CustomerDao;
import dao.Impl.CustomerDaoImpl;
import entity.Customer;
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("/customer_list")
public class CustomerListServlet 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;charser=utf8");
PrintWriter writer = resp.getWriter();
//从session中获取用户信息,看看是不是admin用户
HttpSession session = req.getSession();
User user = (User) session.getAttribute("user");
CustomerDao customerDao = new CustomerDaoImpl();
List<Customer> list = null;
if(user.getUserName().equals("admin")){
//显示全部用户信息
list = customerDao.selectAllCustomer();
}else{
//显示用户自己的客户信息
list = customerDao.selectAllCustomerById(user.getId());
}
//向页面输出
String str = JSON.toJSONString(list);
writer.print(str);
writer.close();
}
}
二、前端html开发
2.1、在created方法中通过axios发送请求获取客户列表
requestCustomerList(){ // 请求客户列表
axios.get("customer_list").then(response=>{
// console.log(response.data)
this.customers = response.data;
})
}
created:function(){
// 调用请求用户列表的函数
this.requestCustomerList();
}
2.2、通过v-for指令显示客户列表
<tr v-for="u in customers">
<td>{{u.id}}</td>
<td>{{u.name}}</td>
<td>{{u.age}}</td>
<td>{{u.sex == 0? '男':'女'}}</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="doAlert(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="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>
<!-- 导入vue依赖 -->
<script src="assets/axios.min.js"></script>
<script src="assets/vue.min-v2.5.16.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">
<!-- bootstrap行 -->
<div class="row">
<!-- 显示导航 -->
<div class="col-md-3" style="background-color: rgb(0,21,41);height: 800px">
<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="assets/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="#">客户管理</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="#">添加客户</a>
</div>
</div>
<div class="row">
<div class="col-md-12" style="text-align: center;padding: 20px 0px 20px 0px;">
<a href="user_alert.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 ;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: 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>
<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 customers">
<td>{{u.id}}</td>
<td>{{u.name}}</td>
<td>{{u.age}}</td>
<td>{{u.sex == 0? '男':'女'}}</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="doAlert(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:{
customers:null
},
methods:{
doAlert(id){//点击修改按钮后触发
window.location.href = 'customer_update.html?id='+id;
},
// 删除用户,根据id
doDelete(id){
axios.get("customer_delete?id="+id).then(response=>{
console.log(response.data)
if (response.data == '删除成功') {//删除成功
this.requestCustomerList();
} else {//删除失败
alert("删除失败!!!");//弹窗警告
}
})
},
requestCustomerList(){ // 请求客户列表
axios.get("customer_list").then(response=>{
// console.log(response.data)
this.customers = response.data;
})
}
},
created:function(){
// 调用请求用户列表的函数
this.requestCustomerList();
}
});
</script>
</body>
</html>