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

于 2022-04-09 16:30:57 发布
阅读量660 收藏 1
点赞数
分类专栏： 创新实训 文章标签： 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46025739/article/details/124062886
版权

首先想到的是用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>

呈现效果

 

Nine-Theta
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
什么是百数后端表
pythonbs的博客
04-20 212
百数后端表是指通过代码，可以自定义一个数据报表，任意的表单操作将由代码触发并执行。 相关名词解释 字段 后端表中所有字段均为虚拟字段，需要自行添加相应虚拟字段，才可以在后端事件当中进行使用。 显示字段 即点击”+”号添加所需要查看的字段。显示字段栏的字段可以修改其显示名称，显示字段名称可以和字段别名不同。显示字段栏的字段可以设置字段颜色。 过滤条件 后端表的数据可以进行过滤，只显示出满足过滤条件的数据。 报表别名 报表别名用于后端开发，别名长度限制32位字符。 后端表的别名 后端表的别名用于后端开发，别名长
【WeX5学习】 后端服务之访问数据库表
weixin_30813225的博客
07-20 285
WeX5是跨段移动开发框架，将H5的标签封装成组件，实现可视化、组件化快速开发。实现一次开发，多端（iOS、安卓和微信）运行。WeX5的IDE基于Eclipse，提供了一个完全可视化、组件化、拖拽式开发环境。开发工具为Studio，包含俩个视图（模型资源、数据库），其中在模型资源中有三个目录，Bass、UI2和Native。Bass是后端服务模型，UI2是前端页面模型，Nativ...
后端丢给你10万条数据如何渲染到表格里面不卡顿
天赐的博客
01-16 728
本文直接讲实战，不讲虚的，有源码，有展示。后端如果丢给你10万条数据你如果去展示？？？ 话不多说直接给结果。 页面有多大量我们首页就给他展示多大量，后面所以的操作就是可以监听，那么在监听过程中去展示操作行为后对应的数据不就可以了吗。 本着可视化展示原则。 就是在屏幕有限的可视范围内展示数据，再通过表格的监听事件，比如滚动条滚动，鼠标滚动，拖动等等操作行为最后对操作行为给出对应的展示。 预览地址 https://tcly861204.github.io/vite-react-hooks-bigdata/ .
JS实现动态生成表格并提交表格数据向后端
10-22
主要介绍了JS实现动态生成表格并提交表格数据向后端的相关资料,需要的朋友可以参考下
后端学习之数据库设计规范
一瓢西湖水的博客
09-21 522
话说，在一个大型项目中，后端工程将会有很多张数据表，这些表通过一些逻辑将数据组合起来，使项目的数据处理与运用更加合理与迅捷。好的数据库设计将会使整个架构清晰，数据模型完整，使用户查询信息更加迅速，用户体验更加友好。可以说，随着用户量的不断提升，数据库的性能是制约系统性能的一个重要的因素，因此，好的数据库设计是每个程序员都应该掌握的，团队内部形成一些规范将有助于开发工作的顺利进行，这其中包括数据库的设计规范以及数据库的操作规范。 今天我们首先来聊聊数据库的设计规范。 （1）数据表的字段设计中，字段尽量使用非空
易语言飞讯格式转换
07-23
易语言飞讯格式转换源码,飞讯格式转换
飞讯财务管理器 1.0┊注册版
03-14
1.支持多个帐套的管理。 2.支持多个银行帐户的管理。 3.显示列项随意更改。 4.可以随意分组进行查询统计，方便快捷。 5.支持excel、txt、html、xml等多种输出格式。 6.所见及所得的打印支持。 7.打印内容可以定制。
易语言源码易语言飞讯格式转换源码.rar
02-22
易语言源码易语言飞讯格式转换源码.rar 易语言源码易语言飞讯格式转换源码.rar 易语言源码易语言飞讯格式转换源码.rar 易语言源码易语言飞讯格式转换源码.rar 易语言源码易语言飞讯格式转换源码.rar 易语言源码...
金飞讯野狼版写频软件
10-07
金飞讯野狼版对讲机专用写频软件，WLT2000只适用于金飞讯野狼版对讲机写频
金飞讯A66对讲机写频软件
08-27
金飞讯A66对讲机写频软件，写频专用。
后端对表格字段排序_一个通用的表格设计（一）
weixin_39794734的博客
11-22 402
总述产品的价值在于提高效率，B端的产品就是要实实在在的挺高客户指定场景下的工作效率。作为一个产品人，我不禁想到了平时给开发同学们交付的需求中很多页面的表格，这让我不禁思考，能不能做一个通用的表格页面，通过配置来代替开发呢？说干就干，首先明确我要做什么？做一个通用的表格页面。需求的场景是什么？产品经理需要提出一个包含表格的需求时，开发同学会有大量的重复劳动，特别是后台包含大量表格的设计。解决什么问题...
前后端分离进行权限管理之后端表结构设计（一）
weixin_30398227的博客
09-04 714
一、表结构设计 from django.db import models # Create your models here. from django.db import models class Menu(models.Model): """ 菜单表 """ title = models.CharField(verbose_n...
「TodoList」后端-数据库表结构
冯晨薇的博客
10-03 1058
后端-数据库表结构 1、表结构 1-1、User - 用户 1-2、Board - 任务面板 1-3、BoardList - 任务列表 1-4、BoardListCard - 任务卡片 1-5、Attachment - 附件 1-6、CardAttachment - 卡片附件关联 1-7、Comment - 评论
后端开发如何设计数据库系列文章(二)设计大数据量表结构
渣渣
08-05 541
上篇文章讲解了传统数据库的一些设计注意点。 本篇为第二篇，在大数据量的情况下，如何去提前设计这个表结构，来达到一个比较好的效果。对于团队，对于后续的维护和扩展都带来更大的便利。 自增id 自增id还是可以有，但是不是必须的了。但是建议还是每张表中有一个自增id。 为什么，还是那句话，做数据查询，迁移，排序的时候，有着天然的一些优势。 唯一标识 这个标识无论是token，还是其他例如订单的订单号或者其他唯一标识都行。 重点是唯一，不只是在单系统中唯一，而是需要在并发的情况，也能够保持唯一。 关于分布
前端表格展示后端数据（vue+element）
DYHLHW的博客
12-27 9480
一、总体思路 根据请求回来的数据， 1.将表格具体的列和数据关联，从里面找到要放在表格里的信息 2.把找到的数据赋值给表格 具体实现 1.前端设计好表格，包括列名，绑定数据等,具体见下图 先在data（）{}里声明动态绑定的数组 datalist:[]， 然后写表格结构 2.查看一下网络请求返回来的数据，把值放在datalist里 先看返回数据情况，如果返回数据的结构是 data数组->直接是表格绑定的数据 这样就可以直接赋值，因为response.data拿到返回数据的值。 response.d
后台html表格制作,实战经验！如何做好网页后台的表单和表格设计？
weixin_30851261的博客
06-17 1511
矢量人生(作者)：一个完整的后台，由菜单/导航、数据/图形展示、表格、表单、控件/组件以及弹窗等构成，下面跟大家分享后台中的表格和表单的设计细节。当接到一个全新的网页后台项目时，首先确定设计风格，然后考虑这个后台尺寸是做居中固定式，还是全屏响应式。全屏响应式的网页设计，除非有规定，否则你可以选择任意主流尺寸作为基尺寸来设计网页。当然，不管选择什么尺寸，都得基于做好一个后台而开展工作。如何定义一个后...
前端如何以图表的形式展示后台的数据
liulang68的博客
09-22 4139
把商品的购买数量排列下来(quantity) 而且我们需要把(product_id)进行合并，因为表示的是同一个商品。 这里我们给的是商品的名称，但是上面的那个表格没有，所以我们这里要使用多表关联查询 order_detail里面的product_id对应的就是product里面的id ...
vue+element-ui的form多表单组件及Descriptions详情页面封装（可实现单页面有多个表单详情按模块的方式展示并且可以收缩）
web18798225112的博客
02-21 3621
一、最终效果 二、组件集成了以下功能 1、可以多模块配置form表单——配置formOpts对象 2、每个模块可以收起或展开——模块不设置title值取消此功能 3、每个模块可以自定义插槽设置 4、头部标题可以显示隐藏——有title则显示没有则隐藏 5、可以自定义设置footer操作按钮（默认：表单显示取消和保存按钮；详情显示取消按钮）——设置 :footer="null" 6、多表单校验不通过可以指定哪个模块 7、可以设置tabs（默认展示第一个tab；可以指定展示某一个根据setSelectedTa
表格的后端分页和后端搜索，前端的操作步骤
weixin_42218229的博客
01-09 1074
练习 我的第一篇技术博客

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值