bootstrap物流

最新推荐文章于 2023-01-29 15:15:46 发布

原创最新推荐文章于 2023-01-29 15:15:46 发布 · 1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #web前端开发 #javascript #css

Java 同时被 2 个专栏收录

13 篇文章

订阅专栏

web前端

1 篇文章

订阅专栏

本文探讨了Bootstrap作为Web前端框架在物流系统开发中的使用，包括其基本结构、CSS组件和JavaScript插件。通过Bootstrap，开发者可以提高开发效率并规范前端代码。文中还提到了在Mybatis框架基础上构建的物流入库示例，展示了如何集成Bootstrap的CSS和JS来实现菜单栏和数据操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Bootstrap是目前全球最流行、最火爆的Web前端开发框架之一。它的强大之处在于它将常见的CSS布局小组件和JavaScript插件进行了完整并完善的封装，能大大提高开发效率。此外，它还能在某种程度上规范前端团队编写CSS和JavaScript的规范。对Bootstrap架构思想的阐述、实现原理的分析、扩展和插件的二次开发能让他们自如解决开发中遇到的各种疑难问题。

基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。 CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在布局组件部分详细讲解。 JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件

基于mybatis框架的基础上模仿来了物流入库的小dome

注入相关jar包

这里写图片描述

在左侧出现一个菜单栏

//登录
    @RequestMapping("login.xhtml")
    public String login(HttpServletRequest request){
        HttpSession session = request.getSession();
        session.setMaxInactiveInterval(1000 * 60 * 60 * 12);
        String uname=request.getParameter("uname");
        String upwd=request.getParameter("upwd");
        User user=new User();
        user.setUname(uname);
        user.setUpwd(upwd);
        if(userDao.login(user)!=null){
            StringBuffer sb = new StringBuffer();
            List<Ztree> ZtreeMaxs = ztreeDao.getMaxMuenu();
            for (Ztree ztree : ZtreeMaxs) {
                sb.append("<li>");
                if(ztree.getMenu_url()==null||"".equals(ztree.getMenu_url())){
                    sb.append("<a href=\"javascript:void(0);\"><i class=\""+ztree.getMenu_css()+"\"></i>"+ztree.getMenu_name()+"<span class=\"fa arrow\"></span> </a>");
                    sb.append("<ul class=\"nav nav-second-level\">");
                        //判断父菜单是否为工作台
                        List<Ztree> MinMuenus = ztreeDao.getMinMuenu(ztree);
                        for (Ztree MinMuenu : MinMuenus) {
                                sb.append("<li>");
                                sb.append("<a href=\""+MinMuenu.getMenu_url()+"\">"+MinMuenu.getMenu_name()+"</a>");
                                sb.append("</li>");
                        }
                    sb.append("</ul>");
                    sb.append("</li>"); 
                }else{
                    sb.append("<a href='"+ztree.getMenu_url()+"'><i class=\""+ztree.getMenu_css()+"\"></i>"+ztree.getMenu_name()+"</a>");
                    sb.append("</li>");
                }
            }
            session.setAttribute("MUENU", sb.toString());
            return "index";
        }
        return "login";
    }

点击树所要出现的是bookstrap所自带的样式，导入相关css,js都是可以出来的

<div id="wrapper">
        <!-- Navigation -->
        <jsp:include page="/WEB-INF/jsp/base/sidebar_base.jsp"></jsp:include>
        <!-- /Navigation -->
        <!-- content -->
        <div id="page-wrapper">
            <!--我的视图-->
            <div class="row">
                <div class="col-lg-12 page-header  form-group">
                    <label class="inline text-primary">
                        <h4>入库</h4>
                    </label>
                </div> 
            </div>

            <!-- 监控显示面板开始 -->
            <div class="row">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <a data-toggle="modal" data-target="#add" class=" btn-new">新增入库</a>
                    </div>
                    <div class="panel-body">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>入库人</th>
                                    <th>开发票时间</th>
                                    <th>开发票人</th>
                                    <th>物品名称</th>
                                    <th>发往地</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="tables">
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="add" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">新增</h4>
                </div>
                <div class="modal-body">
                    <form class="form">
                        <div class=" col-md-12 form-item">
                            <lable class="col-md-3" style="text-align:right;">入库人：</lable>
                            <input class="col-md-5" type="text" id="putinstoragename" />
                        </div>
                        <div class=" col-md-12  form-item">
                            <lable class="col-md-3" style="text-align:right;">开发票人：</lable>
                            <input class="col-md-5" type="text" id="billname" />
                        </div>
                        <div class=" col-md-12  form-item">
                            <lable class="col-md-3" style="text-align:right;">物品名称：</lable>
                            <input class="col-md-5" type="text" id="valuablesname" /> <input
                                id="upserverid" type="hidden">
                        </div>
                        <div class=" col-md-12  form-item">
                            <lable class="col-md-3" style="text-align:right;">发往地：</lable>
                            <input class="col-md-5" type="text" id="sentto" /> <input
                                id="upserverid" type="hidden">
                        </div>
                        <div class="clearfix"></div>
                        <div class=" modal-footer form-item">
                            <button type="button" id="upsubmit" class="btn btn-primary"
                                data-dismiss="modal" onclick="addInventory()">保存</button>
                            <button type="button" class="btn btn-default"
                                data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="edit" tabindex="-1" role="dialog"
        aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">修改</h4>
                </div>
                <div class="modal-body">
                    <form class="form">
                        <div class=" col-md-12 form-item">
                            <lable class="col-md-3" style="text-align:right;">入库人：</lable>
                            <input class="col-md-5" type="text" id="upputinstoragename" />
                            <input id="upinventoryid" type="hidden">
                        </div>
                        <div class=" col-md-12  form-item">
                            <lable class="col-md-3" style="text-align:right;">开发票人：</lable>
                            <input class="col-md-5" type="text" id="upbillname" />
                        </div>
                        <div class=" col-md-12  form-item">
                            <lable class="col-md-3" style="text-align:right;">物品名称：</lable>
                            <input class="col-md-5" type="text" id="upvaluablesname" /> <input
                                id="upserverid" type="hidden">
                        </div>
                        <div class=" col-md-12  form-item">
                            <lable class="col-md-3" style="text-align:right;">发往地：</lable>
                            <input class="col-md-5" type="text" id="upsentto" /> <input
                                id="upserverid" type="hidden">
                        </div>
                        <div class="clearfix"></div>
                        <div class=" modal-footer form-item">
                            <button type="button" id="upsubmit" class="btn btn-primary"
                                data-dismiss="modal" onclick="upInventoryById()">保存</button>
                            <button type="button" class="btn btn-default"
                                data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

增删改查数据，实体类就不贴了

@Controller
@RequestMapping("/Inventory/*")
public class InventoryController {

    @Autowired
    InventoryDao inventoryDao;

    @RequestMapping("getAllInventory.xhtml")
    public @ResponseBody  List<Inventory> getAllInventory() {
    return inventoryDao.getAllInventory();
    }

    @RequestMapping("addInventory.xhtml")
    public @ResponseBody  JSONObject addInventory(String putinstoragename,String billname,String valuablesname,String sentto ) {
         Inventory inventory = new Inventory();
         inventory.setInventory_id(IdUtil.createId());
         SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyyMMddHHssmm");
         inventory.setInventory_no(simpleDateFormat.format(new Date()));
         inventory.setPut_in_storage_name(putinstoragename);
         inventory.setInventory_billname(billname);
         SimpleDateFormat simpleDateFormat2 = new SimpleDateFormat("yyyy-MM-dd HH:ss:mm");
         inventory.setInventory_billtime(Timestamp.valueOf(simpleDateFormat2.format(new Date())));
         inventory.setValuables_name(valuablesname);
         inventory.setSent_to(sentto);
         int a = inventoryDao.addInventory(inventory);
           JSONObject obj = new JSONObject();
            if(a>0){
                obj.put("msg", "入库成功！");
                 return obj;
             }else{
                 obj.put("msg", "入库失败！");
                 return obj;
             }
    }

    @RequestMapping("outStorage.xhtml")
    public @ResponseBody JSONObject outStorage(String id) {
        int a = inventoryDao.outStorage(id);
        JSONObject obj = new JSONObject();
        if(a>0){
            obj.put("msg", "出库成功！");
             return obj;
         }else{
             obj.put("msg", "出库失败！");
             return obj;
         }
    }

    @RequestMapping("getInventoryById.xhtml")
    public @ResponseBody  Inventory getInventoryById(String id) {
        return inventoryDao.getInventoryById(id);
    }

    @RequestMapping("upInventoryById.xhtml")
    public @ResponseBody  JSONObject upInventoryById(String inventoryid,String putinstoragename,String billname,String valuablesname,String sentto) {
        Inventory inventory = new Inventory();
        inventory.setInventory_id(inventoryid);
        inventory.setInventory_billname(billname);
        inventory.setValuables_name(valuablesname);
        inventory.setPut_in_storage_name(putinstoragename);
        inventory.setSent_to(sentto);
        System.out.println(inventory.toString());
        int a = inventoryDao.upInventoryById(inventory);
        JSONObject obj = new JSONObject();
        if(a>0){
            obj.put("msg", "修改成功！");
             return obj;
         }else{
             obj.put("msg", "修改失败！");
             return obj;
         }
    }