[包学包会-项目步骤全程记录]SpringBoot前后端分离-房屋租赁管理系统实战项目-第二天

2024-01-13 09:02:28

一、户主管理前端页面及底层数据实现

链接：https://pan.baidu.com/s/1euQPqoZ21h80WjK0TPTogA
提取码：0wb2

这是修改部分的静态页面可以下载下来直接用

json文件修改这一段，让这个链接生效

开始后端代码

在model层创建实体类

package com.okyang.model;

import com.baomidou.mybatisplus.annotation.IdType;
import java.util.Date;
import com.baomidou.mybatisplus.annotation.TableId;
import java.io.Serializable;
import io.swagger.annotations.ApiModel;
import io.swagger.annotations.ApiModelProperty;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.experimental.Accessors;

/**
 * 房东信息表
 */
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@ApiModel(value="Owner对象", description="房东信息表")
public class Owner implements Serializable {

//    序列化时为了保持版本的兼容性，即在版本升级时反序列化仍保持对象的唯一性。
    private static final long serialVersionUID = 1L;
//    @TableId注解来实现自增序列id自动插入的功能
    @TableId(value = "id", type = IdType.AUTO)
    private Integer id;

    private String identity;

    private String custname;
//    @ApiModelProperty()注解用于方法、字段，表示对model属性的说明或者数据操作更改
    @ApiModelProperty(value = "0 代表女1 代表男")
    private String sex;

    private String address;

    private String phone;

    private String career;

    private String remarks;

    private Date createTime;

    private String djr;


}

dao层

接口

package com.okyang.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.okyang.model.Owner;
import org.springframework.stereotype.Component;

import java.util.List;

//继承BaseMapper后不需要实现，这时候就可以调用baseMapper的增删改查了
@Component("ownerDao")
public interface OwnerMapper extends BaseMapper<Owner> {
//查询所有户主信息
    List<Owner> queryOwnerAll(Owner owner);
}

实现

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.okyang.dao.OwnerMapper">
    <select id="queryOwnerAll" resultType="com.okyang.model.Owner"
            parameterType="com.okyang.model.Owner">
        select * from rent.owner
        <where>
            <!--身份证号查询-->
            <if test="identity != null and identity != ''">
                and identity like '%${identity}%'
            </if>
            <!--姓名查询-->
            <if test="custname != null and custname != ''">
                and custname like '%${custname}%'
            </if>
            <!--手机号查询-->
            <if test="phone != null and phone != ''">
                and phone like '%${phone}%'
            </if>
            <!--职业查询-->
            <if test="career != null and career != ''">
                and career like '%${career}%'
            </if>
            <!--家庭住址查询-->
            <if test="address != null and address != ''">
                and address like '%${address}%'
            </if>
        </where>
    </select>
</mapper>

Service层

接口

package com.okyang.service;

import com.github.pagehelper.PageInfo;
import com.okyang.model.Owner;

public interface OwnerService {
    //    分页查询户主信息
   PageInfo<Owner> finOwnerAll(int page,int limit,Owner owner);
}

实现

package com.okyang.service;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.okyang.dao.OwnerMapper;
import com.okyang.model.Owner;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class OwnerServiceImpl implements OwnerService {
    @Autowired
    private OwnerMapper ownerDao;
    @Override
    public PageInfo<Owner> finOwnerAll(int page, int limit, Owner owner) {
//        分页插件
        PageHelper.startPage(page, limit);
        List<Owner> list = ownerDao.queryOwnerAll(owner);
        PageInfo<Owner> pageInfo = new PageInfo<>(list);
        return pageInfo;
    }
}

Controller层

首先要写几个工具类

可以直接下载并导入到util包下

链接：https://pan.baidu.com/s/1gq_oYlV2XypyT9wkeMpVjw
提取码：0kt0

package com.okyang.controller;

import com.github.pagehelper.PageInfo;
import com.okyang.model.Owner;
import com.okyang.service.OwnerService;
import com.okyang.util.JsonObject;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

@RequestMapping("owner")
public class OwnerController {
//    按条件查询所有户主信息

    @Autowired
    private OwnerService ownerService;
    @RequestMapping("/queryOwnerAll")
    public Object queryOwnerAll(@RequestParam(defaultValue = "1") int page,
                                         @RequestParam(defaultValue = "10")  int limit, Owner owner){
        JsonObject object = new JsonObject();
        PageInfo<Owner> pageInfo = ownerService.finOwnerAll(page, limit, owner);
        object.setCode(0);
        object.setCount(pageInfo.getTotal());
        object.setData(pageInfo.getList());
        object.setMsg("ok");
        return object;
    }
}

前端

修改这两处地方第一处要跟controller层的mapper路径保持一致，第二处要与数据库的名字保持一致跟着我的代码敲没问题，然后我们执行看看效果

记得加上扫描

然后运行

点这两个地方都可以

启动后复制前面第一处改动的url：http://localhost:8888/owner/queryOwnerAll

这样就算是成功了

然后打开前端，看看是否能通过数据库的数据渲染到前端

可以看到我们的信息已经到了前端页面，注意后端服务器不要关闭。否则异常查询

二、户主信息查询

修改一下静态页面

去layui官网查看一些样式

把这一段复制过来

粘贴到这个位置，需要根据什么搜索就写什么，可以是姓名，身份证号，地址等

<div class="demoTable">
		  姓名：
		  <div class="layui-inline">
		    <input class="layui-input" name="custname" id="custname" autocomplete="off">
		  </div>
		  身份证号码：
		  <div class="layui-inline">
		    <input class="layui-input" name="identity" id="identity" autocomplete="off">
		  </div>
		  <button class="layui-btn" data-type="reload">高级查询</button>
		</div>

因为之前写过这个高级查询，模糊查询

保存后刷新，前端页面就会发现

是不是很nice

继续去layui偷代码

粘贴过来以后进行一些更改

limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
			id:'testReload',
            skin: 'line'
        });

          var $ = layui.$, active = {
            reload: function(){
              var custname = $('#custname');
			  var identity = $('#identity');
              
              //执行重载
              table.reload('testReload', {
                page: {
                  curr: 1 //重新从第 1 页开始
                }
                ,where: {
                  identity:identity.val(),
				  custname:custname.val()
                }
              });
            }
          };

前端页面打开然后右键空白处打开审核元素，或者检查或者f12

觉得界面丑？？可以调一下嘛，长度自己定，可以打开前端页面，然后调整代码，代码ctrl+s只要一保存，界面自动会刷新的，非常方便！！！

三、户主添加功能

创建add.html并添加事件中

add.html

<div class="layuimini-main">

    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">身份证号码</label>
            <div class="layui-input-block">
                <input type="text" name="identity" lay-verify="required" lay-reqtext="身份证号不能为空" placeholder="请输入身份证号" value="" class="layui-input">
                <tip>填写自己管理账号的名称。</tip>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked="">
                <input type="radio" name="sex" value="女" title="女">
            </div>
        </div>
		<div class="layui-form-item">
		    <label class="layui-form-label required">姓名</label>
		    <div class="layui-input-block">
		        <input type="text" name="custname" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名" value="" class="layui-input">
		    </div>
		</div>
        <div class="layui-form-item">
            <label class="layui-form-label required">手机</label>
            <div class="layui-input-block">
                <input type="number" name="phone" lay-verify="required" lay-reqtext="手机不能为空" placeholder="请输入手机" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">家庭住址</label>
            <div class="layui-input-block">
                <input type="text" name="custname" lay-verify="required" lay-reqtext="家庭住址不能为空" placeholder="请输入家庭住址" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">职业</label>
            <div class="layui-input-block">
                <input type="text" name="career" placeholder="请输入职业" value="" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注信息</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息"></textarea>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        // 当前弹出层，防止ID被覆盖
        var parentIndex = layer.index;

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var index = layer.alert(JSON.stringify(data.field), {
                title: '最终的提交信息'
            }, function () {

                // 关闭弹出层
                layer.close(index);
                layer.close(parentIndex);

            });


            return false;
        });

    });
</script>

在service层加一些功能

因为用的是mybatisPlus所以就不用dao写一些东西了直接继承ServiceImpl

package com.okyang.service;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.okyang.dao.OwnerMapper;
import com.okyang.model.Owner;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service("ownerService")
//mybatisPlus的功能，继承ServiceImpl
public class OwnerServiceImpl extends ServiceImpl<OwnerMapper,Owner> implements OwnerService {
    @Autowired
    private OwnerMapper ownerDao;
    @Override
    public PageInfo<Owner> finOwnerAll(int page, int limit, Owner owner) {
//        分页插件
        PageHelper.startPage(page, limit);
        List<Owner> list = ownerDao.queryOwnerAll(owner);
        PageInfo<Owner> pageInfo = new PageInfo<>(list);
        return pageInfo;
    }

    @Override
    public int add(Owner owner) {
        return baseMapper.insert(owner);
    }

    @Override
    public int delete(Long id) {
        return baseMapper.deleteById(id);
    }

    @Override
    public int updateData(Owner owner) {
        return baseMapper.updateById(owner);
    }
}

controller层

package com.okyang.controller;

import com.github.pagehelper.PageInfo;
import com.okyang.model.Owner;
import com.okyang.service.OwnerService;
import com.okyang.util.JsonObject;
import com.okyang.util.R;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
@RequestMapping("owner")
public class OwnerController {
//    按条件查询所有户主信息

    @Autowired
    private OwnerService ownerService;

    @RequestMapping("/queryOwnerAll")
    @ResponseBody
    public Object queryOwnerAll(@RequestParam(defaultValue = "1") int page,
                                         @RequestParam(defaultValue = "10")  int limit, Owner owner){
        JsonObject object = new JsonObject();
        PageInfo<Owner> pageInfo = ownerService.finOwnerAll(page, limit, owner);
        object.setCode(0);
        object.setCount(pageInfo.getTotal());
        object.setData(pageInfo.getList());
        object.setMsg("ok");
        return object;
    }
    /**
     * 添加房主信息
     *
     */
    @RequestMapping("/addOwner")
    @ResponseBody
    public R add(@RequestBody Owner owner){
        int add = ownerService.add(owner);
        if (add > 0){
            return R.ok();
        }
        return R.fail(400, "添加失败");
    }
}

前端代码

add.html

<script>
    layui.use(['form', 'table'], function () {
        var form = layui.form,
            layer = layui.layer,
            table = layui.table,
            $ = layui.$;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

form.on('submit(saveBtn)', function (data) { 
            console.log(data.field); 
            //向后台发送数据并进行添加操作 
            $.ajax({ 
                url:"http://localhost:8888/owner/addOwner", 
                type:"POST", 
                contentType:"application/json", 
                data:JSON.stringify(data.field), 
                success:function(result){ 
                    //把json对象转string 
                    // result=JSON.parse(result); 
                    console.log(result) 
                    if(result.code==200){ 
                        layer.msg("添加成功",{ 
                            icon:6, 
                            time:500 
                        },function(){ 
                            parent.window.location.reload();//重新页面 
                            var iframeIndex = 
parent.layer.getFrameIndex(window.name); 
                            parent.layer.close(iframeIndex); 
                        }); 

                    }else{ 
                        layer.msg("添加失败"); 
                    } 
                } 
            }) 
            return false; 
        });

    });
</script>

然后启动服务器，前端页面打开测试，发现成功了添加数据！！！nice

码农公寓