飞讯管理员端的后端数据表格展现

最新推荐文章于 2024-01-06 13:46:26 发布

Nine-Theta

最新推荐文章于 2024-01-06 13:46:26 发布

阅读量705

点赞数

分类专栏：创新实训文章标签：前端 html

本文链接：https://blog.csdn.net/qq_46025739/article/details/124062886

版权

创新实训专栏收录该内容

6 篇文章 0 订阅

订阅专栏

首先想到的是用layui自带的动态表格进行加载，实例

table.render({
    elem: '#demo'
    ,height: 312
    ,url: '/demo/table/user/' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
      ,{field: 'username', title: '用户名', width:80}
      ,{field: 'sex', title: '性别', width:80, sort: true}
      ,{field: 'city', title: '城市', width:80} 
      ,{field: 'sign', title: '签名', width: 177}
      ,{field: 'experience', title: '积分', width: 80, sort: true}
      ,{field: 'score', title: '评分', width: 80, sort: true}
      ,{field: 'classify', title: '职业', width: 80}
      ,{field: 'wealth', title: '财富', width: 135, sort: true}
    ]]
  });

呈现效果是

此时需要传入数据，因此撰写后端代码，但是在下载alibaba.JSON时出现问题，因此选择另一种渲染方法

table.render({
  elem: '#demo' //指定原始表格元素选择器（推荐id选择器）
  ,height: 315 //容器高度
  ,cols: [{}] //设置表头
  //,…… //更多参数参考右侧目录：基本参数选项
});

使用servlet+jsp形式将数据展示到前台。

（由于数据库设计还未完善，因此使用我之前的数据库进行测试）

user表

user类


public class User {
	private Integer id;
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	
	private String username;
	private String password;
	public String getUsername() {
		return username;
	}
	public void setUsername(String username) {
		this.username = username;
	}
	public String getPassword() {
		return password;
	}
	public void setPassword(String password) {
		this.password = password;
	}
	
	private String name;
	private String tel;
	private String address;
	private String jifen;
	private String datetime;
	private String type;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getTel() {
		return tel;
	}
	public void setTel(String tel) {
		this.tel = tel;
	}
	public String getAddress() {
		return address;
	}
	public void setAddress(String address) {
		this.address = address;
	}
	public String getJifen() {
		return jifen;
	}
	public void setJifen(String jifen) {
		this.jifen = jifen;
	}
	public String getDatetime() {
		return datetime;
	}
	public void setDatetime(String datetime) {
		this.datetime = datetime;
	}
	public String getType() {
		return type;
	}
	public void setType(String type) {
		this.type = type;
	}
	
	
	
	

}

创建数据库连接

public class DBConnection {
	final static String DRIVER="com.mysql.jdbc.Driver";
	final static String URL="jdbc:mysql://localhost:3306/diningroom?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8";
	final static String USER="root";
	final static String PASSWORD="123456789";
	public static Connection getConnection(){
		try{
			Class.forName(DRIVER);
			Connection connection=DriverManager.getConnection(URL,USER,PASSWORD);
			return connection;
		}catch(Exception e){
			e.printStackTrace();
			return null;
		}
	}
	
	public static void closeConnection(Connection c){
		try{
			c.close();
		}catch(Exception e){
			e.printStackTrace();
		}
	} 
	
	public static void main(String[] args){
		System.out.println("123"+DBConnection.getConnection());
	}

}

UserDao（测试时使用调取所有用户和调取用户数量两个方法）

import entity.User;
public class UserDao  {
	public User ByUserName(String uname,String type) {
		Connection con=null;
		try{
			con=DBConnection.getConnection();
			String sql="select * from user where username=? and type =?";
			PreparedStatement pst=con.prepareStatement(sql);
			pst.setString(1, uname);
			pst.setString(2, type);
			ResultSet rs=pst.executeQuery();
			if(rs.next()==false){
				return null;
			}else{
				User user=new User();
				user.setId(rs.getInt("id"));
				user.setUsername(rs.getString("username"));
				user.setPassword(rs.getString("password"));
				return user;
			}
		}catch(Exception e){
			e.printStackTrace();
			return null;
		}finally{
			DBConnection.closeConnection(con);
		}
		
	}
	
	public User userById(int id) {
		Connection con=null;
		try{
			con=DBConnection.getConnection();
			String sql="select * from user where id=?";
			PreparedStatement pst=con.prepareStatement(sql);
			pst.setInt(1, id);
			ResultSet rs=pst.executeQuery();
			if(rs.next()==false){
				return null;
			}else{
				User user =new User();
				user.setId(rs.getInt("id"));
				user.setUsername(rs.getString("username"));
				user.setPassword(rs.getString("password"));
				user.setName(rs.getString("name"));
				user.setTel(rs.getString("tel"));
				user.setAddress(rs.getString("address"));
				user.setDatetime(rs.getString("datetime"));
				user.setType(rs.getString("type"));
				return user;
			}
		}catch(Exception e){
			e.printStackTrace();
			return null;
		}finally{
			DBConnection.closeConnection(con);
		}
		
	}
	
	
		//用户列表
		public List<User> userList(int id){
			Connection c=null;   
			List<User> list =new ArrayList<User>();
			try{
				c=DBConnection.getConnection();
				/*String sql="select * from user where type=2 or id=1 ORDER BY type";*/
				String sql= "";
				if(id==0){
					 sql="select * from user  ORDER BY type";
				}else{
					 sql="select * from user  where id = "+id+"";
				}
				
				PreparedStatement pst=c.prepareStatement(sql);
				ResultSet rs=pst.executeQuery();
				while(rs.next()){
					User user =new User();
					user.setId(rs.getInt("id"));
					user.setUsername(rs.getString("username"));
					user.setPassword(rs.getString("password"));
					user.setName(rs.getString("name"));
					user.setTel(rs.getString("tel"));
					user.setAddress(rs.getString("address"));
					user.setDatetime(rs.getString("datetime"));
					user.setType(rs.getString("type"));
					list.add(user);
				}
				return list;
			}catch(Exception e){
				e.printStackTrace();
				return null;
			}finally{
				DBConnection.closeConnection(c);
			}
			
		}
		public int userCount(){
			Connection c=null;
			try {
				c=DBConnection.getConnection();
				PreparedStatement ps = null;
				String sql = "select * from user";
				ps = c.prepareStatement(sql);
				ResultSet rs = ps.executeQuery();
				rs.last();//移动到ResultSet的最后一行
				int count = rs.getRow(); //获得当前行号，也就是记录数
				return count;

			} catch (Exception e) {
				e.printStackTrace();
			} finally {
				DBConnection.closeConnection(c);
			}
			return 0;
		}
		
		public boolean jifenUpdate(int userid,int jifen){
			Connection c=null;
		 	try{
		 		c=DBConnection.getConnection();
				String sql="update user set jifen=? where id=?";
				PreparedStatement pst=c.prepareStatement(sql);
				pst.setInt(1,jifen);
				pst.setInt(2,userid);
				pst.execute();	
				return true;		 	
		 	}catch(Exception e){
		 		e.printStackTrace();
		 		return false;
		 	}finally{
		 		DBConnection.closeConnection(c);
		 	}
			
		}
		
		
		public boolean userinsert(User user){
			Connection c=null ;      ;
			try{
				c=DBConnection.getConnection();
				String sql="insert into user(username,password,name,tel,address,datetime,type) values (?,?,?,?,?,?,?)";
				PreparedStatement pst=c.prepareStatement(sql);
				pst.setString (1,user.getUsername());
				pst.setString(2,user.getPassword());
				pst.setString(3,user.getName());
				pst.setString(4,user.getTel());
				pst.setString(5,user.getAddress());
				pst.setString(6,user.getDatetime());
				pst.setString(7,user.getType());
				
				pst.execute();
				return true;
			}catch(Exception e){
				e.printStackTrace();
				return false;
			}finally{
				DBConnection.closeConnection(c);
			}
			
		}
		
		
		public boolean userupdatesave(User user){
			Connection c=null;
		 	try{
		 		c=DBConnection.getConnection();
				String sql="update user set username=?,password=?,name=?,tel=?,address=?,datetime=?,type=? where id=?";
				PreparedStatement pst=c.prepareStatement(sql);
				pst.setString(1, user.getUsername());
				pst.setString(2, user.getPassword());
				pst.setString(3, user.getName());
				pst.setString(4, user.getTel());
				pst.setString(5, user.getAddress());	
				pst.setString(6, user.getDatetime());
				pst.setString(7, user.getType());
				pst.setInt(8,user.getId());
				pst.execute();	
				return true;		 	
		 	}catch(Exception e){
		 		e.printStackTrace();
		 		return false;
		 	}finally{
		 		DBConnection.closeConnection(c);
		 	}
			
		}
		
		
		
		public boolean userdel(int id){
			Connection c=null;
			try{
				c=DBConnection.getConnection();
				String sql="delete from user where id=?";
				PreparedStatement pst=c.prepareStatement(sql);
				pst.setInt(1,id);
				pst.execute();
				return true;
			}catch(Exception e){
				e.printStackTrace();
				return false;
			}finally{
				DBConnection.closeConnection(c);
			}
		}
	
	public static void main(String[] args) {
		
	}	
}

servlet将ulist传入前端

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
				// TODO Auto-generated method stub
				request.setCharacterEncoding("utf-8");

				UserDao dao=new UserDao();


				List<User> ulist=dao.userList(0);
				System.out.println(ulist.toString());
				request.setAttribute("ulist",ulist);
				request.getRequestDispatcher("/main/QuestionnaireTable.jsp").forward(request, response);
			}

前端通过jsp${}接收

<table class="result-tab" width="100%" lay-filter="demo">
                <thead>
                <tr align="left" >
                    <!-- <th class="tc" width="5%"><input class="allChoose" name="" type="checkbox"></th>
                    <th>排序</th> -->
                    <th lay-data="{field:'id', width:50}">ID</th>
                    <th lay-data="{field:'username', width:100}">用户名</th>
                    <th lay-data="{field:'password', width:100}">密码</th>
                    <th lay-data="{field:'name', width:100}">姓名</th>
                    <th lay-data="{field:'tel', width:150}">电话</th>
                    <th lay-data="{field:'address', width:150}">地址</th>
                    <th lay-data="{field:'datetime', width:200}">更新时间</th>
                    <th lay-data="{field:'type', width:100}">类型</th>
                </tr>
                </thead>

                <c:forEach items="${ulist}" var="user">
                    <tr>

                        <td>${user.id}</td>
                        <td>${user.username}</td>
                        <td>${user.password}</td>
                        <td>${user.name}</td>
                        <td>${user.tel}</td>
                        <td>${user.address}</td>
                        <td>${user.datetime}</td>
                        <td>
                            <c:if test="${user.type==1}">
                                管理员
                            </c:if>
                            <c:if test="${user.type==2}">
                                会员
                            </c:if>
                        </td>

                    </tr>
                </c:forEach>
            </table>

呈现效果