ssm项目 --简单的分页展示以及图片上传

最新推荐文章于 2020-03-22 20:58:12 发布
最新推荐文章于 2020-03-22 20:58:12 发布
阅读量213 收藏 2
点赞数
分类专栏： 博客 文章标签： ssm
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangwenqiang27/article/details/100692282
版权

**分页查询部分参考[https://blog.csdn.net/qq_41875817/article/details/80499303]

index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <a href="account/findAll?page=1&pageSize=4">分页</a><br>
    <a href="account/findAll01">不分页</a><br>
    <hr>
    <form action="account/save" method="post" enctype="multipart/form-data">
        <div>
            <table>
                <tr>
                    <td>账户名称</td>
                    <td><input type="text" name="name" placeholder="输入2-4个中文字符" required pattern="/^[\u4e00-\u9fa5]{2,4}$/"></td>
                </tr>
                <tr>
                    <td>账户金额</td>
                    <td><input type="text" name="money" required></td>
                </tr>
                <tr>
                    <td>账户图片</td>
                    <td><input type="file" name="upload"></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="submit" value="提交"></td>
                </tr>
            </table>
        </div>

    </form>

</body>
</html>

不分页，展示上传的图片（在此处图片展示问题困扰许久，图片原因上传到target目录，但是因为静态资源拦截，导致图片不显示 ，需要在mvc配置文件中添加配置）

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false"  %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <h1>SUCCESS</h1>
    <c:forEach var="account" items="${accounts}" >
        <c:out value="${account.id}" />
        <c:out value="${account.name}" />
        <c:out value="${account.money}" />
        <c:out value="${account.image}" />
        <img src="http://localhost:8080/uploads/${account.image}" width="100px" height="100px" />

        <br><hr>
    </c:forEach>

</body>
</html>

分页展示页面

 <%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <h1>SUCCESS</h1>


    <table frame="box" rules="all">
        <tr>
            <td>序号</td>
            <td>姓名</td>
            <td>金额</td>

        </tr>
        <c:if test="${list!= null || fn:length(list) != 0}">
            <c:forEach items="${list}" var="account" begin="0" end="${fn:length(list) }">
                <tr>
                    <td>${account.id}</td>
                    <td>${account.name}</td>
                    <td>${account.money}</td>
                </tr>
            </c:forEach>
        </c:if>
    </table>
    <table>
        <tr items="${page}">
            <%-- ${pageContext.request.contextPath}  获得应用的web目录的名称  --%>
            <form method="post" action="${pageContext.request.contextPath}/account/findAll">
                <td><input type="hidden" name="page" value="1"></td>
                <%--获取当前的pageSize--%>
                <td><input type="hidden" name="pageSize" value="${requestScope.pageSize}"></td>
                <td><input type="submit" value="首页"></td>
            </form>

            <form method="post" action="${pageContext.request.contextPath}/account/findAll">
                <td><input type="hidden" name="page" value="${page.prefPage}"></td>
                <td><input type="hidden" name="pageSize" value="${requestScope.pageSize}"></td>
                <td><input type="submit" value="上一页"></td>
            </form>

            <td>当前：第${page.currentPage}页<--></td>
            <td>共：${page.totalPages}页</td>

            <form method="post" action="${pageContext.request.contextPath}/account/findAll">
                <td><input type="hidden" name="page" value="${page.nextPage}"></td>
                <td><input type="hidden" name="pageSize" value="${requestScope.pageSize}"></td>
                <td><input type="submit" value="下一页"></td>
            </form>

            <form method="post" action="${pageContext.request.contextPath}/account/findAll">
                <td><input type="hidden" name="page" value="${page.totalPages}"></td>
                <td><input type="hidden" name="pageSize" value="${requestScope.pageSize}"></td>
                <td><input type="submit" value="尾页"></td>
            </form>


            <form method="post" action="${pageContext.request.contextPath}/account/findAll">
                <td><input type="hidden" name="page" value="1"></td>
                <td>每页展示记录数<input type="text" name="pageSize" style="width: 40px"></td>
                <td><input type="submit" value="确定"></td>
            </form>

        </tr>
    </table>
    <form method="post" action="${pageContext.request.contextPath}/account/findAll">
        <table>
            <tr>
                <td>跳转到第:<input type="text" name="page" />页</td>
                <td><input type="hidden" name="pageSize" value="${requestScope.pageSize}" style="width: 40px"></td>
                <td><input type="submit" value="确定"></td>
            </tr>
        </table>
    </form>

</body>
</html>

分页界面page实体类

@Component
public class Page {
    private int currentPage=1;    //当前页数
    private int totalPages;       //总页数
    private int totalUsers;            //总行数
    private int pageSize;    //每页记录行数
    private int nextPage;        //下一页
    private int prefPage;       //前一页

    public int getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }

    public int getTotalPages() {
        totalPages = totalUsers % pageSize == 0 ? totalUsers / pageSize : totalUsers / pageSize + 1;
        return totalPages;
    }

    public int getTotalUsers() {
        return totalUsers;
    }

    public void setTotalUsers(int totalUsers) {
        this.totalUsers = totalUsers;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getNextPage() {
        if (currentPage < totalPages) {
            nextPage = currentPage + 1;
        } else {
            nextPage = currentPage;
        }
        return nextPage;
    }

    public int getPrefPage() {
        if (currentPage > 1) {
            prefPage = currentPage - 1;
        } else {
            prefPage = currentPage;
        }
        return prefPage;
    }
}

控制器

@Controller
@RequestMapping("/account")
public class AccountController {

    @Autowired
    AccountService accountService;
    @Autowired
    Page p;

    /**
     * 分页
     * @param model
     * @param page
     * @return
     */
    @RequestMapping("/findAll")
    public String findAll(Model model,int page，int pageSize){

        System.out.println("方法执行了。。。。");
        List<Account> accounts = accountService.findAll();

        p.setTotalUsers(accounts.size());  //记录总数据数
        p.setCurrentPage(page);   //根据前台数据  当前页数
        p.setPageSize(pageSize);  //传入每页显示记录数

        //当前页数减1，乘页面大小获得已经显示的记录数
        List<Account> list = accountService.findUsersByPage((page - 1) * p.getPageSize(), p.getPageSize());
        model.addAttribute("list", list);
        model.addAttribute("page", p);
        model.addAttribute("pageSize",pageSize);  //存储当前每页展示记录数

        return "page";
    }

    /**
     * 不分页
     * @param model
     * @return
     */
    @RequestMapping("/findAll01")
    public String findAll(Model model){

        System.out.println("方法执行了。。。。");
        List<Account> accounts = accountService.findAll();
        model.addAttribute("accounts",accounts);

        return "success";
    }

    /**
     * 文件上传，使用fileupload   springmvc文件解析器
     * @param request
     * @param upload
     * @param account
     * @return
     * @throws IOException
     */
    @RequestMapping("/save")
    public String save(HttpServletRequest request, MultipartFile upload,Account account) throws IOException {

        // 上传的位置（获取Web项目的全路径target）
        String path = request.getSession().getServletContext().getRealPath("/uploads/");
        System.out.println(path);
        // 判断，路径是否存在
        File file = new File(path);
        if(!file.exists()){
            file.mkdirs();
        }
        // 获取上传文件的名称
        String filename = upload.getOriginalFilename();
        // 把文件的名称设置唯一值
        String uuid = UUID.randomUUID().toString().replace("-", "");
        filename = uuid+"_"+filename;
        // 完成文件上传
        upload.transferTo(new File(path,filename));


        System.out.println(filename);
        account.setImage(filename);
        System.out.println(account);

        accountService.saveAccount(account);


        return "success";
    }
}

dao层

@Repository
public interface AccountDao {

    /**
     * 查询所有账户信息
     * @return  Account
     */
    @Select("select * from account")
    List<Account> findAll();

    /**
     * 保存账户信息
     * @param account
     */
    @Insert("insert into account(name,money,image) values(#{name},#{money},#{image})")
    boolean saveAccount(Account account);
    /**
     * 分页查询
     */
    @Select("select * from account limit #{start},#{perPageUsers}")
    List<Account> findUsersByPage(@Param("start") int start, @Param("perPageUsers") int perPageUsers) ;

}

解决图片读取不出来

  <!-- 设置静态资源不过滤 -->
     <mvc:resources location="/static/**" mapping="/static/**" />
    <mvc:resources mapping="/uploads/**" location="/uploads/"/>  <!--配置图片上传的maven编译目录不拦截   报错因为是不存在工程之中-->
似清风
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SSM框架图片上传与显示
09-19
SSM框架图片上传与显示，mysql数据库。mysql文件在项目下db文件夹中
高清版图片展示了ssm框架
09-07
Spring Spring就像是整个项目中装配bean的大工厂，在配置文件中可以指定使用特定的参数去调用实体类的构造方法来实例化对象。 Spring的核心思想是IoC（控制反转），即不再需要程序员去显式地`new`一个对象，而是让Spring框架帮你来完成这一切。 SpringMVC SpringMVC在项目中拦截用户请求，它的核心Servlet即DispatcherServlet承担中介或是前台这样的职责，将用户请求通过HandlerMapping去匹配Controller，Controller就是具体对应请求所执行的操作。SpringMVC相当于SSH框架中struts。 mybatis mybatis是对jdbc的封装，它让数据库底层操作变的透明。mybatis的操作都是围绕一个sqlSessionFactory实例展开的。mybatis通过配置文件关联到各实体类的Mapper文件，Mapper文件中配置了每个类对数据库所需进行的sql语句映射。在每次与数据库交互时，通过sqlSessionFactory拿到一个sqlSession，再执行sql命令。
SSM+图片选择显示
冷秋凋零你可知的博客
03-26 675
撰写时间：2019年1月27日
SSM使用layui实现商品展示并分页，类似淘宝那样
Android_la的博客
03-22 6444
一. 问题背景 1.1 效果图 如下： 1.2 本项目用到的技术 后台：SSM 前台：layui，全是html，没有jsp，所以在写路径时要记得加上/项目名 商品展示：使用layui的laypage，用ajax 同步请求提交 二. 解决方案 首先定义一个容器div用来展示商品，定义一个容器div用来显示分页导航栏 <div style="margin-top:70px;" id...
基于ssm的商品显示
11-15
使用spring+springMVC+myBatis框架搭建的商品显示功能，可以进行商品修改
ssm框架-mysql的简单分页
11-25
使用ssm框架做的一个简单的mysql分页,虽然部分功能没有完全实现,但简单了解够了。注意修改jdbc.properties 中的密码为本机mysql密码。
SSM项目-慕课书评网
12-21
前端开发组件
ssm项目--demo
12-06
ssm项目--demo
ssm项目-电商项目
10-10
经典的ssm框架电商项目，使用技术：ssm+MySql数据库+MyEclipse开发工具；资源文件中包含使用文档，数据库和项目代码。
JSP+SSM项目-高校教师科研信息展示网站的Java毕业设计(源码+演示视频+说明).rar
最新发布
05-06
JSP+SSM项目-高校教师科研信息展示网站的Java毕业设计(源码+演示视频+说明).rar 【项目技术】 开发语言：Java 框架：ssm+jsp 架构：B/S 数据库：mysql 【演示视频-编号：095】 https://pan.quark.cn/s/b3a97032fae7...
SSM框架实现文件上传及其分页
04-28
该资源采用标准的ssm框架实现分页与上传功能，需要的朋友可下载直接使用，欢迎大家相互交流。
ssm上传图片以及回显图片
10-27
ssm上传图片以及回显图片源代码 自己亲手写的 供参考哦
SSM简单项目实现登录与分页
06-08
SSM简单项目实现登录与分页： 1、该项目主要采用的技术主要为spring框架、springmvc框架、mybatis框架、其实主要就是个mvc框架模型； 2、页面前台显示展示是用jsp技术、前端采用JavaScript； 3、数据库使用为mysql，已经将表结构导出，可直接运行导入库； 4、项目非常简单，适合小白们（当然包括我）自己学习参考； 5、本人能力有限，不足之处，请多谅解，谢谢。
ssm简单增删改查分页事例
04-05
简单的ssm框架实现增删改查与分页，适合初学者直接看
基于SSM的项目分页
weixin_44907940的博客
07-08 325
SSM框架下项目的开发当中，对于多条记录的显示，通常会采用分页查询的方法，是页面看起来更方便。这里记录页面的分页查询方法。在IDEA环境下实现。 1.首先创建分页工具类： public class Page implements Serializable { private static final long serialVersionUID = -3198048449643774660L; pr...
SSM框架实现插入图片显示图片到JSP界面
weixin_43801300的博客
06-19 4475
话不多说看图 这是自己写的更新页面，点击更新后 在你的数据库表里会出现存储的图片位置，已经报错到数据库中，如下的pic就是，下次在查询或者更新这条数据的话，图片自然就在其中了 首先创建一个Controller 在这个Controller里 public class UploadController { //商品图片上传 @RequestMapping("itemspic") public vo...
SSM-layui分页实例
06-07
好的，这是一个基于SSM框架和layui前端框架实现的分页实例： 首先，在Maven中引入相关依赖： ```xml <!-- Spring --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>5.2.5.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jdbc</artifactId> <version>5.2.5.RELEASE</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>5.2.5.RELEASE</version> </dependency> <!-- MyBatis --> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5.4</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis-spring</artifactId> <version>2.0.4</version> </dependency> <!-- C3P0 --> <dependency> <groupId>c3p0</groupId> <artifactId>c3p0</artifactId> <version>0.9.5.5</version> </dependency> <!-- layui --> <dependency> <groupId>com.layui</groupId> <artifactId>layui</artifactId> <version>2.5.6</version> </dependency> ``` 接着，创建一个实体类`User`，对应数据库中的`user`表： ```java public class User { private Integer id; private String name; private Integer age; //省略getter/setter方法 } ``` 然后，创建DAO层接口`UserMapper`，以及对应的XML文件`UserMapper.xml`，实现分页查询： ```java public interface UserMapper { List<User> getUserList(@Param("start") Integer start, @Param("pageSize") Integer pageSize); Integer getUserCount(); } ``` ```xml <select id="getUserList" resultType="User"> select * from user limit #{start},#{pageSize} </select> <select id="getUserCount" resultType="Integer"> select count(*) from user </select> ``` 再创建Service层接口`UserService`及其实现类`UserServiceImpl`，调用DAO层方法实现业务逻辑： ```java public interface UserService { PageInfo<User> getUserList(Integer pageNum, Integer pageSize); } @Service public class UserServiceImpl implements UserService { @Autowired private UserMapper userMapper; @Override public PageInfo<User> getUserList(Integer pageNum, Integer pageSize) { PageHelper.startPage(pageNum, pageSize); List<User> userList = userMapper.getUserList((pageNum - 1) * pageSize, pageSize); PageInfo<User> pageInfo = new PageInfo<>(userList); int totalCount = userMapper.getUserCount(); pageInfo.setTotal(totalCount); return pageInfo; } } ``` 最后，创建Controller类`UserController`，处理前端请求并返回分页数据： ```java @Controller public class UserController { @Autowired private UserService userService; @RequestMapping("/user/list") @ResponseBody public TableResult<User> getUserList(@RequestParam(value = "page", defaultValue = "1") Integer pageNum, @RequestParam(value = "limit", defaultValue = "10") Integer pageSize) { PageInfo<User> pageInfo = userService.getUserList(pageNum, pageSize); TableResult<User> result = new TableResult<>(); result.setCode(0); result.setMsg(""); result.setCount(pageInfo.getTotal()); result.setData(pageInfo.getList()); return result; } } ``` 其中，`TableResult`是一个通用的分页返回结果类： ```java public class TableResult<T> { private Integer code; private String msg; private Long count; private List<T> data; //省略getter/setter方法 } ``` 最后，在前端页面中引入layui的分页组件： ```html <table id="userTable" lay-filter="userTable"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> <script> layui.use(['table', 'layer'], function () { var table = layui.table; var layer = layui.layer; table.render({ elem: '#userTable', url: '/user/list', method: 'get', page: true, cols: [[ {field: 'id', title: 'ID', width: 70}, {field: 'name', title: '姓名', width: 120}, {field: 'age', title: '年龄', width: 70}, {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150} ]] }); }); </script> ``` 这样，一个基于SSM和layui的分页实例就完成了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值