03 - Servlet 综合案例（登录，注册）

Servlet 综合案例（用户登录，注册）

前台页面代码菜单

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>菜单</title>
    <link rel="stylesheet" href="static/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header">
        <div class="layui-logo">layui 后台布局</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->
        <ul class="layui-nav layui-layout-left">
          <li class="layui-nav-item"><a href="">控制台</a></li>
          <li class="layui-nav-item"><a href="">商品管理</a></li>
          <li class="layui-nav-item"><a href="">用户</a></li>
          <li class="layui-nav-item">
            <a href="javascript:;">其它系统</a>
            <dl class="layui-nav-child">
              <dd><a href="">邮件管理</a></dd>
              <dd><a href="">消息管理</a></dd>
              <dd><a href="">授权管理</a></dd>
            </dl>
          </li>
        </ul>
        <ul class="layui-nav layui-layout-right">
          <li class="layui-nav-item">
            <a href="javascript:;">
              <img src="<http://t.cn/RCzsdCq>" class="layui-nav-img" />
              贤心
            </a>
            <dl class="layui-nav-child">
              <dd><a href="">基本资料</a></dd>
              <dd><a href="">安全设置</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item"><a href="">退了</a></li>
        </ul>
      </div>

      <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
          <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
          <ul class="layui-nav layui-nav-tree" lay-filter="test">
            <li class="layui-nav-item layui-nav-itemed">
              <a class="" href="javascript:;">所有商品</a>
              <dl class="layui-nav-child">
                <dd><a href="item.html">商品管理</a></dd>
                <dd><a href="javascript:;">列表二</a></dd>
                <dd><a href="javascript:;">列表三</a></dd>
                <dd><a href="">超链接</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;">解决方案</a>
              <dl class="layui-nav-child">
                <dd><a href="javascript:;">列表一</a></dd>
                <dd><a href="javascript:;">列表二</a></dd>
                <dd><a href="">超链接</a></dd>
              </dl>
            </li>
            <li class="layui-nav-item"><a href="">云市场</a></li>
            <li class="layui-nav-item"><a href="">发布商品</a></li>
          </ul>
        </div>
      </div>

      <div class="layui-body">
        <!-- 内容主体区域 -->
        <iframe src="" frameborder="0" id="menu" style="width: 100%; height: 1080px;"></iframe>
      </div>

      <div class="layui-footer">
        <!-- 底部固定区域 -->
        © layui.com - 底部固定区域
      </div>
    </div>
    <script src="static/layui/layui.js"></script>
    <script>
      //JavaScript代码区域
      layui.use(['element', 'jquery'], function () {
        var element = layui.element
        var $ = layui.jquery
        /**
         * 页面加载时，运行
         */
        $(function () {
          //获取所有的a标签
          $('dd a').click(function (e) {
            e.preventDefault() //取消所有a标签的默认行为
            //获取iframe对象，给它的src赋值 ，赋值内容是点击的每一个a标签的href属性
            $('menu').attr('src', $(this).attr('href'))
          })
        })
      })
    </script>
  </body>
</html>

[](data:image/svg+xml;base64,PHN2ZyBkYXRhLXYtNWRjMzE1NjggeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdib3g9IjAgMCAyNCAyNCIgY2xhc3M9ImhvdmVyIiBzdHlsZT0iYm90dG9tOiA3LjVweDsiPjxwYXRoIGRhdGEtdi01ZGMzMTU2OCBmaWxsPSJub25lIiBkPSJNMCAwaDI0djI0SDB6IiAvPjxwYXRoIGRhdGEtdi01ZGMzMTU2OCBmaWxsPSIjMjdiMWZmIiBkPSJNMTYgMUg0Yy0xLjEgMC0yIC45LTIgMnYxNGgyVjNoMTJWMXptLTEgNGw2IDZ2MTBjMCAxLjEtLjkgMi0yIDJINy45OUM2Ljg5IDIzIDYgMjIuMSA2IDIxbC4wMS0xNGMwLTEuMS44OS0yIDEuOTktMmg3em0tMSA3aDUuNUwxNCA2LjVWMTJ6IiAvPjwvc3ZnPg==)

数据表格

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <link rel="stylesheet" href="static/layui/css/layui.css" />
  </head>
  <body>
    <!--搜索开始-->
    <!--搜索功能可以自己私下做一下-->
    <!--搜索结束-->

    <!--表格开始-->
    <table class="layui-hide" id="test" lay-filter="test"></table>
    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
      </div>
    </script>
    <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>
    <!--表格结束-->
    <!--弹出层开始-->
    <div id="saveOrUpdate" style="display: none">
      <form class="layui-form" lay-filter="dataForm" id="dataForm">
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">商品id</label>
            <div class="layui-input-inline">
              <input type="tel" name="id" lay-verify="required" autocomplete="off" class="layui-input" />
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">商品名称</label>
            <div class="layui-input-inline">
              <input type="text" name="name" lay-verify="required" autocomplete="off" class="layui-input" />
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">商品单价</label>
            <div class="layui-input-inline">
              <input type="tel" name="price" lay-verify="required" autocomplete="off" class="layui-input" />
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">商品库存</label>
            <div class="layui-input-inline">
              <input type="text" name="count" lay-verify="required" autocomplete="off" class="layui-input" />
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">商品状态</label>
            <div class="layui-input-inline">
              <input type="tel" name="status" lay-verify="required" autocomplete="off" class="layui-input" />
            </div>
          </div>
          <div class="layui-inline">
            <label class="layui-form-label">商品分类</label>
            <div class="layui-input-inline">
              <input type="text" name="type" lay-verify="required" autocomplete="off" class="layui-input" />
            </div>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-inline">
            <label class="layui-form-label">上架时间</label>
            <div class="layui-input-inline">
              <input type="tel" name="date" lay-verify="required" autocomplete="off" class="layui-input" />
            </div>
          </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
          <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-normal" lay-submit="" lay-filter="dataForm">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-warm">重置</button>
          </div>
        </div>
      </form>
    </div>
    <!--弹出层结束-->
    <script src="static/layui/layui.js"></script>
    <script>
      layui.use(['jquery', 'table', 'layer', 'form'], function () {
        var table = layui.table
        var $ = layui.jquery
        var layer = layui.layer
        var form = layui.form
        //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
        //详见：<https://www.layui.com/doc/modules/table.htmltotalRow>
        var myTable = table.render({
          elem: 'test',
          //请求的地址
          url: 'itemServlet?method=queryList',
          toolbar: 'toolbarDemo',
          title: '商品数据表',
          cols: [
            [
              { type: 'checkbox', fixed: 'left' },
              { field: 'id', title: '商品ID', fixed: 'left', unresize: true, sort: true, totalRowText: '合计' },
              { field: 'name', title: '商品名称', edit: 'text' },
              { field: 'price', title: '商品价格', edit: 'text' },
              { field: 'count', title: '商品库存', sort: true, totalRow: true },
              { field: 'type', title: '商品分类', edit: 'text', sort: true },
              {
                field: 'status',
                title: '商品状态',
                sort: true,
                totalRow: true,
                templet: function (res) {
                  return res.status == 1 ? '上架' : '已下架'
                }
              },
              { field: 'date', title: '上架时间', sort: true, totalRow: true },
              { fixed: 'right', title: '操作', toolbar: 'barDemo' }
            ]
          ],
          page: true
        })

        //工具栏事件
        table.on('toolbar(test)', function (obj) {
          var checkStatus = table.checkStatus(obj.config.id)
          switch (obj.event) {
            case 'add':
              openAddItem()
              break
          }
        })
        var url
        //定义个返回值代表弹出层
        var indexForm
        //添加商品
        function openAddItem() {
          indexForm = layer.open({
            type: 1,
            title: '添加商品',
            content: $('saveOrUpdate'),
            area: ['800px'],
            //打开弹出层成功时的回调函数
            success: function (index) {
              //清空表格
              $('dataForm')[0].reset()
              url = 'itemServlet?method=insert'
            }
          })
        }
        //修改商品
        function openUpdateItem(data) {
          indexForm = layer.open({
            type: 1,
            title: '修改商品',
            content: $('saveOrUpdate'),
            area: ['800px'],
            //打开弹出层成功时的回调函数
            success: function (index) {
              //回显数据
              form.val('dataForm', data)
              url = 'itemServlet?method=modify'
            }
          })
        }

        //表单提交
        form.on('submit(dataForm)', function () {
          //序列化表单
          var params = $('dataForm').serialize()
          //发送ajax请求
          $.get(
            url,
            params,
            function (data) {
              //给出提示信息
              if (data.code == 1) {
                layer.msg(data.msg)
              } else {
                layer.msg(data.msg)
              }
              //关闭弹出层
              layer.close(indexForm)
              //刷新表格
              myTable.reload()
            },
            'json'
          )
        })

        //监听行工具事件
        table.on('tool(test)', function (obj) {
          var data = obj.data //date就是每一行的数据
          console.log(data)
          if (obj.event === 'del') {
            layer.confirm('真的删除行么', function (index) {
              $.get('itemServlet?method=delete&id=' + data.id, function (data) {})
              obj.del() //这就是删除具体的一行 表面删除
              layer.close(index)
            })
          } else if (obj.event === 'edit') {
            openUpdateItem(data)
          }
        })
      })
    </script>
  </body>
</html>

模型代码也就是返回给页面的数据格式

package com.softeem.dto;

public class Model {

    private int code;
    private String msg;
    private int count;
    private Object data;

    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;
    }
}

dao 实现类

package com.softeem.dao.impl;

import com.softeem.dao.ItemDao;
import com.softeem.entity.Item;
import com.softeem.utils.DBUtils3;

import java.util.List;

public class ItemDaoImpl implements ItemDao {

    @Override
    public List<Item> selectList() {
        String sql = "select * from item";
        return DBUtils3.queryList(Item.class,sql);
    }

    @Override
    public boolean insert(Item item) {
        String sql = "insert into item values(?,?,?,?,?,?,?)";
        return DBUtils3.exeUPdate(sql,item.getId(),item.getName(),item.getPrice(),
                item.getCount(),item.getStatus(),item.getType(),item.getDate());
    }
}

dao 接口

package com.softeem.dao;

import com.softeem.entity.Item;

import java.util.List;

public interface ItemDao {

    List<Item> selectList();

    boolean insert(Item item);
}