以表格形式将数据库数据输出（html和mybatisplus）

最新推荐文章于 2023-02-17 18:22:49 发布

不平衡的叉叉树

最新推荐文章于 2023-02-17 18:22:49 发布

阅读量1k

点赞数 1

分类专栏： java 文章标签： html5 css mybatisplus ssm mysql

本文链接：https://blog.csdn.net/NoviceZ/article/details/119116818

版权

java 专栏收录该内容

108 篇文章 9 订阅

订阅专栏

1 项目结构

2 各层级代码

2.1 mapper持久层

package com.jt.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jt.pojo.User;
import org.apache.ibatis.annotations.Param;
import java.util.List;
//继承接口时必须添加泛型对象，否则映射表报错
public interface UserMapper extends BaseMapper<User> {

    //查询表中所有数据(mybatis形式)
    List<User> getAll();
    //询指定id的数据
    List<User> getById(Integer id);
    //查询指定sex和age的数据
    List<User> getByAgeSex(@Param("sex") String sex,@Param("age") Integer age);
    //查询name包含指定字符的数据
    List<User> getNameContain(String str);
    //按年龄排序和性别排序
    List<User> toSort(Integer age);
    //根据name/age动态查询数据，如果name/age不为null则拼接where条件
    List<User> getByNameAge(@Param("name") String name, @Param("age") Integer age);
    //随机查询5个id的数据
    List<User> getByIdS(@Param("array") int[] id);
    //查询按照age>xx,并按照age和sex排序的数据
    List<User> getBySexAge(@Param("sex") String sex,@Param("age") Integer age);
    //根据name更新数据
    void updateByName(@Param("beforename") String beforename,@Param("aftername") String aftername,@Param("age") Integer age);
    //根据id主键删除单个数据
    void delById(Integer id);
    //根据id主键删除多条数据
    void delByIdS(@Param("arr") Integer[] id);
    //根据指定name删除数据
    void delByName(String name);
    //根据指定id主键更新数据
    void updateById1(@Param("id") Integer id,@Param("name") String name,@Param("sex") String sex,@Param("age") Integer age);
    //插入数据(主键自增)
    void insertInto(@Param("name") String name,@Param("sex") String sex,@Param("age") Integer age);
}

2.2 service业务层

service接口：

package com.jt.service;
import com.jt.pojo.User;
import java.util.List;
public interface UserService {
    List<User> getAll();
    int delById(Integer id);
}

service实现类：

package com.jt.service;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserServiceImpl implements UserService{
    @Autowired//依赖注入
    private UserMapper userMapper;
    @Override
    public List<User> getAll() {
        return userMapper.selectList(null);//mybatisplus方法获取全部元素
    }
    @Override
    public int delById(Integer id){
        return userMapper.deleteById(id);
    }
}

2.3 controller层

package com.jt.controller;
import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController//接收请求
@CrossOrigin
public class UserController {
    @Autowired
    private UserService userService;
    @RequestMapping("/getAll")
    public List<User> getAll(){
        System.out.println(userService.getClass());
        List<User> list = userService.getAll();
        int i = 0;
        for (User u:list){
            if (++i%3==0){
                System.out.println();
            }
            System.out.print(u);
        }
        return list;
    }
    @RequestMapping("/delbyId/{id}")
    public List<User> delById(@PathVariable Integer id){
        System.out.println(userService.delById(id));
        return userService.getAll();
    }
}

3 前端页面代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户数据</title>
		<script src="jquery-1.8.3.min.js"></script>
		
		<script>
			/**
			 * $.get(url,data,function(data){},dataType)
			 * 			1、url:请求服务器的网址
			 * 			2、data:前端向服务器传递的参数 字符串
			 * 			3、回调函数:请求成功之后开始回调
			 * 			4、dataType:返回值结果的数据类型，可以不写，会自动判断
			 */
			// 编程方式：函数式编程
			$(function(){
				var url = "http://localhost:8090/getAll"
				/**
				 * 关于data的语法：id=100 name="tom"
				 * 写法：
				 * 			1.js对象的写法
				 * 				{id:100,name:"tom"}
				 * 			2.字符串拼接写法
				 * 				id=100&name=tom
				 */		
				var data = {id:100,name:"tom"}
				//js可以将接收的JSON串动态转化为js对象
				$.get(url,function(data){
					//循环遍历返回值
					//1.基础循环方式
					/* for(var i=0;i<data.length;i++){
						console.log(data[i])
					} */
					//2.高效for循环
					/* for(index in data){
						console.log(data[index])
					} */
					//3.of关键字循环
					for(user of data){
						var tr = 
								`<tr align="center">
										<td>${user.id}</td>
										<td>${user.name}</td>
										<td>${user.age}</td>
										<td>${user.sex}</td>
										<td>
										<button class="delete"><a href="userList.html">删除</a></button>
										<button class="update"><a href="update.html">修改</a></button>
										</td>
								 </tr>`
						$("#tab1").append(tr)
					}
				})
			})
	
		</script>
	</head>
	<body>
		<table id="tab1" border="1px" align="center" width="80%">
			<tr>
				<td colspan="5" align="center" ><h2>用户信息表</h2></td>
			</tr>
			<tr>
				<td align="center">编号</td>
				<td align="center">姓名</td>
				<td align="center">年龄</td>
				<td align="center">性别</td>
				<td align="center">操作</td>
			</tr>
		</table>
	</body>
</html>