maven 项目引进bootstrap
2018-05-28 11:16:37 dxm809 阅读数 314

至少在项目中添加以下三个文件

1 添加css文件  <link href="~/Bootstrap3.3.7/css/bootstrap.min.css" rel="stylesheet" />

2 添加jquery.js  <script src="~/Scripts/jquery-1.7.1.min.js"></script>

3 添加bootstrap.js  <script src="~/Bootstrap3.3.7/js/bootstrap.min.js"></script>

2018-05-13 15:37:33 PZHU_CG_CSDN 阅读数 701

  基于 SpringMVC、Spring、MyBatis 的增删改查案例。

一、功能及涉及到的技术

功能点:

  1. 分页
  2. 数据校验
    • jquery前端校验+JSR303后端校验
  3. ajax
  4. Rest风格的URI;使用HTTP协议请求方式的动词,来表示对资 源的操作(GET(查询),POST(新增),PUT(修改),DELETE (删除))

技术点:

  1. 基础框架 - ssm(SpringMVC+Spring+MyBatis)
  2. 数据库 - MySQL
  3. 前端框架 - bootstrap快速搭建简洁美观的界面
  4. 项目的依赖管理 - Maven
  5. 分页 - pagehelper
  6. 逆向工程 - MyBatis Generator

二、环境搭建:

  1. 创建一个maven工程
  2. 引入项目依赖的jar包
    • spring
    • springmvc
    • mybatis
    • 数据库连接池,驱动包
    • 其他(jstl,servlet-api,junit)
  3. 引入bootstrap前端框架
  4. 编写ssm整合的关键配置文件 • web.xml,spring,springmvc,mybatis,使用mybatis的逆向工程生成对应的bean以 及mapper
  5. 测试mapper

三、操作流程及部分代码分析:

需要在 JSP 页面中导入 bootstrap 的 css 文件,以及 Jquery 文件。

1.加载页面查询所有员工信息:

效果:

步骤

  1. index.jsp页面直接发送ajax请求进行员工分页数据的查询
  2. 服务器将查出的数据,以json字符串的形式返回给浏览器
  3. 浏览器收到js字符串。可以使用js对json进行解析,使用js通过 dom增删改改变页面。
  4. 返回json。实现客户端的无关性

构建表格数据:


    //构建表格数据
    var buildEempsTtable = function(data){
        //在绑定数据前先清除之前的数据。
        $("#emps_table tbody").empty();

        $.each(data.map.pageInfo.list,function(index,item){
            //alert(item.empName);
            var checkBoxTd = $("<td></td>").append($('<input type="checkbox" class="checkItem"/>'));
            var empIdTd = $("<td></td>").append(item.empId);
            var empNameTd = $("<td></td>").append(item.empName);
            var genderTd = $("<td></td>").append(item.gender=='M'?"男":"女");
            var emailTd = $("<td></td>").append(item.email);
            var telTd = $("<td></td>").append(item.tel);
            var deptNameTd = $("<td></td>").append(item.dept.deptName);        
            //把当前员工的 ID 添加在编辑和删除按钮上,方便后面使用
            var editBnt = $("<button></button>").addClass("btn btn-info btn-sm edit-bnt")
                            .append($("<span></span>").addClass("glyphicon glyphicon-pencil"))
                            .append("编辑").attr("empId",item.empId);
            var deleBnt = $("<button></button>").addClass("btn btn-danger btn-sm delete-bnt")
                            .append($("<span></span>").addClass("glyphicon glyphicon-trash"))
                            .append("删除").attr("empId",item.empId);
            var bntTd = $("<td></td>").append(editBnt).append(" ").append(deleBnt);
            $("<tr></tr>").append(checkBoxTd)
                        .append(empIdTd)
                        .append(empNameTd)
                        .append(genderTd)
                        .append(emailTd)
                        .append(telTd)
                        .append(deptNameTd)
                        .append(bntTd)
                        .appendTo($("#emps_table tbody"));
        });
    }

构建导航栏:


    //构建导航栏
    var buildNavi = function(data){
        //清空
        $("#pageData").empty();
        var curPage = data.map.pageInfo.pageNum;
        var pageTotal = data.map.pageInfo.pages;
        var total = data.map.pageInfo.total;
        $("#pageData").append("当前<kbd>"+curPage+"</kbd>页,共有<kbd>"+pageTotal+"</kbd>页,一共有<kbd>"+total+"</kbd>条数据。");

        totalResult = total;
        //清空
        $("#navi").empty();
        var ul = $("<ul></ul>").addClass("pagination");
        var firstPage = $("<li></li>").append($("<a></a>").append("首页").attr("herf","#"));
        var endPage = $("<li></li>").append($("<a></a>").append("末页").attr("herf","#"));
        var lastPage = $("<li></li>").append($("<a></a>").attr("href","#")
                        .append($("<span></span>").append("&laquo;")));
        var nextPage = $("<li></li>").append($("<a></a>").attr("href","#")
                        .append($("<span></span>").append("&raquo;")));

        currentPage = curPage;

        if(curPage <= 1){
            lastPage.addClass("disabled");
        }
        if(curPage >= pageTotal){
            nextPage.addClass("disabled");
        }

        //为上一页、下一页、首页、末页添加点击事件。
        lastPage.click(function(){
            getEmpData(curPage-1);
        });
        nextPage.click(function(){
            getEmpData(curPage+1);
        });
        firstPage.click(function(){
            getEmpData(1);
        });
        endPage.click(function(){
            getEmpData(pageTotal);
        });


        //添加首页和上一页
        ul.append(firstPage).append(lastPage);
        //添加当前显示的导航页
        $.each(data.map.pageInfo.navigatepageNums,function(index,item){
            //var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href","emps?pagenum="+item+""));
            var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href","#"));
            if(item == curPage){
                numLi.addClass("active");
            }
            //添加点击事件
            numLi.click(function(){
                getEmpData(item);
            });
            ul.append(numLi);
        });
        //添加下一页和末页
        ul.append(nextPage).append(endPage);

        $("<nav></nav>").append(ul).appendTo($("#navi"));

    }

2.新增员工:

效果:

步骤:

  1. 在index.jsp页面点击”新增”
  2. 弹出新增对话框
  3. 去数据库查询部门列表,显示在对话框中
  4. 用户输入数据,并进行校验
    • jquery前端校验,ajax用户名重复校验,重要数据(后端校验(JSR303),唯一约束);
  5. 完成保存

    • URI:
    • /emp/{id} GET 查询员工
    • /emp POST 保存员工
    • /emp/{id} PUT 修改员工
    • /emp/{id} DELETE 删除员工

3.修改员工信息:

效果:

步骤:

  1. 点击编辑
  2. 弹出用户修改的模态框(显示用户信息)
  3. 点击更新,完成用户修改

4.删除员工信息:

效果:

步骤:

  1. 批量删除:将要删除员工的 ID 拼凑成字符串传到后台去解析,再进行删除。
  2. 单个删除:直接传 ID 删除。

全选、全不选、复选框的单击事件:


    //全选/全部选
    $(document).on("click","#checkAll",function(){
        /**
            var flag = $(this).attr("checked");
            在这里获取的是 undefined,最好使用 prop 去获取控件原生的属性值;
            而 使用  attr 去获取自定义的属性值。 
        */
        var flag = $(this).prop("checked");
        $(".checkItem").prop("checked",flag);
    });
    //为员工复选框添加单击事件,当全部选中时触发全选
    $(document).on("click",".checkItem",function(){
        //1.获取被选中的复选框个数
        var checkedItem = $(".checkItem:checked").length;
        //2.获取所有的员工复选框个数
        var allCheckItem = $(".checkItem").length;

        //3.如何相等就触发全选事件
        var flag = checkedItem == allCheckItem;

        $("#checkAll").prop("checked",flag);
    });

四、总结:



由于代码太多就不粘贴了,可以到这里下载项目源代码https://github.com/BZ-CG/ssm-crud

2016-06-17 18:10:00 cff302959274 阅读数 142
http://120.27.116.235:8080/login
2018-06-07 09:21:35 qq_35588633 阅读数 1218

bootstrap 很好的框架,左右结构项目模板


点击打开链接

2016-07-10 20:04:37 u011121046 阅读数 8968

这几天在做项目,前端页面用bootstrap搭建,简直快到无与伦比。动态页面用php显示,简单来说就是从数据库动态的读取,再以列表的形式显示部分数据,点进去能看到这个数据的详细信息。类似于从百度搜索问题->浏览搜索结果->点进去查看详情,这样一种套路。

数据是大神用爬虫爬好的,20多万条,由于百度有了防爬小组,知乎弄了验证码,很多借口不能用了,所以不能在线爬了,就先爬好放在数据库里,从数据库中读取。

数据库用的mysql,用navicat这个工具进行使用。

服务器用的apache,搭建在本地,把php项目部署在apache上,通过浏览器进行访问。

前台:




点击GO按钮,左边是百度的结果,右边是知乎的结果。





遇到的问题:

1.把连接数据库的函数封装起来时,先这样定义一些固定字段:

在使用时,应该这样写才能用:


而我却把它们都加上了引号来使用,如$con = mysql_connect(“DB_HOST”,“DB_USER”,“DB_PASSWORD”);导致报了连接失败2002的错误,错误原因是对php语言不熟悉。


2.因为列表显示结果部分内容时(如图二),是从数据库读出来,然后一个while里动态生成div,所以要达到点击标题->显示完整问题和答案的效果,要把这一条的信息传递给展示页面(如图三)。刚开始用的session传整条数据库记录,然而在_SESSION['row']=row在while里,所以一个while结束后,只把最后一条记录传了过去。_SESSION['row']这里面的字符串又不能改变,就算用字符串链接的方法改变了,在下一个页面也不好获取,因为在下一个页面时,已经不知道应该展示哪条记录。然后每一条点击进去都会显示最后一条的详情。所以改变策略,用url传。url会在点击它所在的链接时,才把数据传过去。所以点击了哪条,就传哪条的数据信息。但是url只能传单个值,比如?id=$row[0],当然也可以把这条记录的所有字段都这样传过去(这个解决办法在敲这篇文章时想到的)。所以我只把一条记录的id传到了result.html里,在result.html再通过id,进行数据库查询,然后展示结果。这样做增大了数据库的开销。



我学会的内容:

1.用php动态生成网页标签:

ehco '<div>啦啦啦</div>';

2.session和url进行数据传递。

Node启动bootstrap项目

阅读数 300

前端整体架构预览1.搭建nodeJs环境安装nodejs:  1、进入 nodeJs官网 根据你的机器型号(32/64)下载node4.4.4版本目前本人用的4.4.4(推荐msi)  2、一路下一步即可(别忘记安装在自己喜欢的磁盘内)   3、验证是否安装成功:在cmd控制台输入node-v,如果出现版版本号那么表示你安装成功了   npm安装: 由于...

博文 来自: majunzhu

react项目使用bootstrap

阅读数 185

曾经对于react项目怎么使用bootstrap纠结了很久,网上也查了好多的资料,有的用react-bootstrap,只要npminstall以后,import就可以使用里面的css了。但是这个样式跟我想要的bootstrap还是有点不一样的。我希望用http://www.bootcss.com/里的,最近才发现,自己真的有的时候瞎想太多了,就跟之前一样,把bootstrap的css以及js...

博文 来自: weixin_34356138

日期选择器小项目bootstrap

阅读数 295

项目 此项目是bootstrap-datetimepicker项目 的一个分支,原项目不支持 Time 选择。其它部分也进行了改进、增强,例如load 过程增加了对ISO-8601日期格式的支持。文档是拷贝/粘贴字原项目的文档,并且加入了更多细节说明。 别犹豫了,下载下来试试吧!下载ZIP包此地址可以克隆或fork本项目git

博文 来自: qq_33377330

vue项目引入Bootstrap

阅读数 144

参考网址:http://www.jianshu.com/p/83ae402dda5b&lt;ulclass="navnav-tabs"&gt;&lt;lirole="presentation"class="active"&gt;&lt;ahref="#"&gt;Home&lt;/a&gt;&

博文 来自: weixin_34255793

Springmvc Bootstrap Ajax项目

阅读数 859

本篇文章,我们会教你通过maven和springmvc+bootstrap创建一个Javaweb项目的欢迎页,并通过Ajax方式提交一个表单,并实现前台与后台的连接。

博文 来自: gisboygogogo
没有更多推荐了,返回首页