day59_layuimini_crud

最新推荐文章于 2024-05-19 18:51:10 发布

沐沐霸

最新推荐文章于 2024-05-19 18:51:10 发布

阅读量630

点赞数

分类专栏： # Java2307 文章标签： java servlet 开发语言

本文链接：https://blog.csdn.net/weixin_39641494/article/details/131355189

版权

Java2307 专栏收录该内容

69 篇文章 7 订阅

订阅专栏

今日内容

一、Layui Mini

零、复习昨日

写在前面的前面

项目开发模式
前端后端数据怎么传输?
前端发数据到后台
from,a,ajax,

后端发数据到前端
以前是使用servlet技术,将数据存入请求域/会话域,后台跳转页面到前端,前端jsp页面展现数据
现在使用前后分离技术,后端将数据封装成一个对象,响应成json格式交给前端

前后端分离开发模式具体是怎么开发
前端可以独立开发
后端也可以独立开发
前后独立开发,如何交互? 使用json

写在前面

现在是使用前端框架layuimini和后端ssm框架,前后端使用json交互

所以先搭建一个ssm房屋管理系统的后台代码,定义统一的交互数据对象

package com.taotie.util;

/**
 * --- 天道酬勤 ---
 *
 * @author QiuShiju
 * @desc 封装的结果数据
 * --> 符合layui默认模板格式
 * {
 *   "code": 0,
 *   "msg": "",
 *   "count": 1000,
 *   "data": [{}, {}]
 * }
 */
public class ResultData {

    private int code; // 0是成功,其他都是不成功
    private String msg;
    private int count;
    private Object data;

    public ResultData() {
    }

    public static ResultData ok() {
        ResultData resultData = new ResultData( );
        resultData.setCode(0);
        resultData.setMsg("成功");
        return resultData;
    }

    public static ResultData ok(Object data) {
        ResultData resultData = new ResultData( );
        resultData.setCode(0);
        resultData.setMsg("成功");
        resultData.setData(data);

        return resultData;
    }

    public static ResultData ok(Object data,int count) {
        ResultData resultData = new ResultData( );
        resultData.setCode(0);
        resultData.setMsg("成功");
        resultData.setData(data);
        resultData.setCount(count);
        return resultData;
    }

    public static ResultData fail() {
        ResultData resultData = new ResultData( );
        resultData.setCode(-1);
        resultData.setMsg("失败");
        return resultData;
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

然后再使用layuimini完成整个功能开发

一、Layui Mini

LayuiMini（Layui Mini）是一个基于Layui框架的简化版前端UI库，旨在提供方便实用的前端组件和样式，帮助开发者快速构建现代化的Web应用程序。以下是关于LayuiMini的一些介绍：

基于Layui框架：LayuiMini是在知名的Layui前端框架基础上进行的二次开发。它保留了Layui的简洁易用和优雅的设计理念，但去除了一些复杂的组件和功能，使其更加轻量级和精简。
简化版前端UI库：LayuiMini专注于提供一些常用的前端组件和样式，如按钮、表格、表单、弹窗、导航等，使开发者能够快速构建基本的页面布局和交互元素，减少开发的工作量和时间成本。
响应式设计：LayuiMini支持响应式设计，可以自适应不同屏幕大小和设备类型，使应用程序在不同终端上有良好的显示效果，提供优秀的用户体验。
模块化开发：与Layui一样，LayuiMini也采用了模块化开发的理念。通过使用JavaScript模块化的规范，可以方便地引入和使用需要的组件和功能，并提高代码的可维护性和复用性。
定制化扩展：尽管LayuiMini已经精简了一些组件和功能，但你仍然可以根据需要进行个性化的定制和扩展。你可以选择性地引入LayuiMini提供的组件，也可以根据项目需求自定义样式和功能。

总的来说，LayuiMini是一个基于Layui框架简化而来的前端UI库，提供了一些基本的前端组件和样式，同时保持了Layui的易用性和灵活性。它适用于快速构建轻量级的Web应用程序，特别适合那些对于前端开发要求不高或者希望使用简洁的UI框架的开发者。

1.1 入门使用

官网: layuimini - 基于Layui的后台管理系统前端模板 (99php.cn)

layuimini提供两种不同开发方式的源码

iframe版本
单页版

二者区别详见今日课件[资料]

下载源码

我们今天采用单页版本,源码下载地址:layui-mini单页版

解压,项目结构

layuimini-v2-onepage
|-api
|----init.json # 整个初始文件比较重要,定义了导航菜单
|-css
|-images
|-js
|-lib  # 里面有jquery,layui的js文件
|-page # 各种组件,图标,表格,页面,开发时就是cv改这里的东西
|-index

复制全部内容到项目webapp下
启动测试

1.2 登录

在page页面找一个合适的登录页面,粘贴到webapp下,然后web.xml定义项目启动欢迎页为登录页

ps: 记得修改页面中css,js的引入路径为绝对路径,tomcat中部署项目的路径为/

前端代码

后端代码

Controller+Service+Dao

// Controller.java

// Servicel.java

// Mapper.java

<!--Mapper.xml -->

1.3 主页

主页是index.html,左侧导航和上方导航内容可以通过改变/api/init.json文件来改变

1.4 展现全部

展现全部数据使用/page/table.html最合适

cv,按照自己需求修改表格字段和查询数据的请求路径

在/api/init.json文件中homeInfo内href定义的就是主页默认路径

1.5 模糊搜索

1.6 添加

基本信息的添加外,还要有图片上传

1.7 更新

1.7.1 回显数据

1.7.2 执行更新

1.8 删除

1.9 批量删除

cv,按照自己需求修改表格字段和查询数据的请求路径

在/api/init.json文件中homeInfo内href定义的就是主页默认路径