浅谈使用SSM+BootStrap实现增删改查和头像上传效果-Bootstrap教程-PHP中文网

本篇文章给大家通过示例介绍一下使用SSM+BootStrap实现增删改查和头像上传效果的方法。

浅谈使用SSM+BootStrap实现增删改查和头像上传效果

【相关推荐：《bootstrap教程》】

先看界面

点击编辑之后

具体代码请往下看

一、jsp界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<link
    href="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/css/bootstrap.css"
    rel="stylesheet"></link>
<link
    href="${pageContext.request.contextPath }/bootstrap-fileinput/css/fileinput.css"
    media="all" rel="stylesheet" type="text/css" />
<link
    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    media="all" rel="stylesheet" type="text/css" />
<link
    href="${pageContext.request.contextPath }/bootstrap-fileinput/themes/explorer-fa/theme.css"
    media="all" rel="stylesheet" type="text/css" />
<link
    href="${pageContext.request.contextPath }/bootstrap-table-develop/docs/dist/bootstrap-table.css"
    rel="stylesheet"></link>
<script
    src="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/js/jquery.js"></script>
<script
    src="${pageContext.request.contextPath }/bootstrap-fileinput/js/plugins/sortable.js"
    type="text/javascript"></script>
<script
    src="${pageContext.request.contextPath }/bootstrap-fileinput/js/fileinput.js"
    type="text/javascript"></script>
<script
    src="${pageContext.request.contextPath }/bootstrap-fileinput/js/locales/fr.js"
    type="text/javascript"></script>
<script
    src="${pageContext.request.contextPath }/bootstrap-fileinput/js/locales/es.js"
    type="text/javascript"></script>
<script
    src="${pageContext.request.contextPath }/bootstrap-fileinput/themes/explorer-fa/theme.js"
    type="text/javascript"></script>
<script
    src="${pageContext.request.contextPath }/bootstrap-fileinput/themes/fa/theme.js"
    type="text/javascript"></script>
<script
    src="${pageContext.request.contextPath }/bootstrap-fileinput/js/locales/zh.js"></script>
<script
    src="${pageContext.request.contextPath }/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script
    src="${pageContext.request.contextPath }/bootstrap-table-develop/docs/dist/bootstrap-table.js"></script>
<script
    src="${pageContext.request.contextPath }/bootstrap-table-develop/docs/dist/js/bootstrap-table-locale-all.js"></script>
<script
    src="${pageContext.request.contextPath }/bootstrap-table-develop/src/locale/bootstrap-table-zh-CN.js"></script>
<body>
    <table id="result" class="table table-hover"
        style="text-align: center;">
        <thead style="text-align: center;">
            <th data-field="stuid">学生编号</th>
            <th data-field="stuname">学生姓名</th>
            <th data-field="classes.classname">班级名称</th>
            <th data-field="userimage" data-formatter="image">头像</th>
            <th data-field="state" data-formatter="state">状态</th>
            <th data-field="caozuo" data-formatter="toolbar">操作</th>
        </thead>
    </table>
    <form action="#" id="formid" onsubmit="return false"
        enctype="multipart/form-data">
        <div class="modal fade" id="myModal" 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"
                            aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">学生信息修改</h4>
                    </div>
                    <div class="modal-body">
                        学生编号：<input type="text" name="stuid" class="form-control" value=""
                            readonly="readonly" /><br> 学生姓名：<input type="text"
                            name="stuname" class="form-control" id="stuname" value=""><br>
                        所在班级：<select id="class" name="classesid" class="form-control">
                        </select> 当前头像：
                        <div>
                            <img alt="" style="width: 40px; height: 40px" id="img">
                        </div>
                        用户头像：
                        <div class="file-loading">
                            <input id="file-fr" name="file" type="file" multiple>
                        </div>

                        <input type="hidden" id="userimage" name="userimage" value="" />
                    </div>
                    <div class="modal-footer">
                        <button type="button" onclick="update()" class="btn btn-primary"
                            data-dismiss="modal">提交更改</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
    </form>
</body>
<script>
    $(&#39;#file-fr&#39;).fileinput({
        theme : &#39;fa&#39;,
        language : &#39;zh&#39;,
        uploadAsync : true,//异步上传
        uploadUrl : &#39;upload.do&#39;,
        allowedFileExtensions : [ &#39;jpg&#39;, &#39;png&#39;, &#39;gif&#39;, &#39;mp4&#39; ],
        maxFileSize : 0,
        maxFileCount : 1
    }).on("fileuploaded", function(event, data) { //异步上传成功结果处理
        $("#userimage").val(data.response.src);
    })
</script>
<script type="text/javascript">
    $(function() {
        $("#result").bootstrapTable({
            url : "selectAll.do",
            method : "post",
            cache : false,
            dataType : "json",
            contentType : "application/x-www-form-urlencoded",//post的方式提交的话需要写
            toolbar : "#toolbar",
            toolbarAlign : "left",
            striped : true,
            pagination : true,
            sidePagination : "server",
            pageNumber : 1,
            pageSize : 5,
            pageList : [ 5, 10, 15 ],
            locale : "zh-CN",
            queryParamsType : "limit",
            queryParams : queryParams
        });
    });

    function queryParams(params) {
        var params = {
            pageSize : params.limit,
            pageCode : params.offset / params.limit + 1
        };
        return params;
    };
    function state(value, row, index) {
        if (row[&#39;state&#39;] === 0) {
            return "正常";
        }
        if (row[&#39;state&#39;] === 1) {
            return "锁定";
        }
        return value;
    }
    function image(value, row, index) {
        return "<img src=&#39;"+row[&#39;userimage&#39;]+"&#39; style=&#39;width:30px;height:30px;&#39;/>";
    }
    /*操作按钮*/
    function toolbar(value, row, index) {
        var element = "<button type=&#39;button&#39; onclick=&#39;edit(" + row.stuid
                + ")&#39; class=&#39;btn btn-info&#39;>编辑</button>"
                + "<button type=&#39;button&#39; onclick=&#39;del(" + row.stuid
                + ")&#39; class=&#39;btn btn-danger&#39;>删除</button>"
                + "<button type=&#39;button&#39; onclick=&#39;download(" + row.stuid
                + ")&#39; class=&#39;btn btn-warning&#39;>下载</button>";
        return element;
    }
    /*编辑按钮，弹出模态框*/
    function edit(stuid) {
        $("#class option").remove();
        $("#formid")[0].reset();
        $.ajax({
            url : "editBystuid.do?stuid=" + stuid,
            type : "post",
            dataType : "json",
            success : function(data) {
                $(&#39;#myModal&#39;).modal(&#39;show&#39;);
                $("[name=stuid]").val(data[0].stuid);
                $("#stuname").val(data[0].stuname);
                $("#userimage").val(data[0].userimage);
                $("#img").attr(&#39;src&#39;, data[0].userimage);
                $("#class").append(
                        "<option value=&#39;"+data[0].calssesid+"&#39;>"
                                + data[0].classes.classname + "</option>");
            }
        });
        $.ajax({
            url : "selectAllClass.do",
            type : "post",
            dataType : "json",
            success : function(data) {
                var obj = $("#class");
                for (var i = 0; i < data.length; i++) {
                    var op = "<option value=&#39;"+data[i].classesid+"&#39;>"
                            + data[i].classname + "</option>";
                    obj.append(op);
                }
            }
        })
    };
    /*修改操作*/
    function update() {
        $.ajax({
            url : "updateBystuid.do",
            type : "get",
            dataType : "text",
            data : $("#formid").serialize(),
            success : function(data) {
                if (data == "ok") {
                    $("#result").bootstrapTable("refresh", {
                        url : "selectAll.do"
                    });
                } else if (data == "error") {
                    alert("修改失败！");
                }
            }
        });

    }
    /*删除操作*/
    function del(stuid) {
        if (confirm(&#39;确定要删除吗？&#39;) == true) {
            $.ajax({
                url : "delBystuid.do?stuid=" + stuid,
                type : "post",
                dataType : "text",
                success : function(data) {
                    if (data == "ok") {
                        $("#result").bootstrapTable("refresh", {
                            url : "selectAll.do"
                        });
                    } else if (data == "error") {
                        alert("删除失败");
                    }
                }
            })
            return false;
        }
    }
    /*下载*/
    function download(stuid){
        if(confirm(&#39;确定要下载头像？&#39;)==true){
            location.href="download.do?stuid="+stuid;
            /* $.ajax({
                url:"download.do?stuid="+stuid,
                type:"post",
                dataType:"json",
                success:function(data){

                }
            }); */
        }
    }
</script>
</html>

登录后复制

二、Controller层代码

package com.llh.controller;

import java.io.File;
import java.io.IOException;
import java.util.Date;
import java.util.List;
import java.util.Random;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

import org.apache.commons.io.FileUtils;
import org.springframework.context.annotation.Scope;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;

import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.llh.entity.Student;
import com.llh.service.StudentService;

import net.sf.json.JSONArray;

@Controller
@Scope("prototype")
public class StudentController {

    @Resource
    private StudentService studentService;

    /**
     * 分页查询所有
     *
     * @param pageCode
     * @param pageSize
     * @return
     */
    @RequestMapping(value = "selectAll", produces = "text/html;charset=utf-8")
    public @ResponseBody String selectAll(int pageCode, int pageSize) {
        PageHelper.startPage(pageCode, pageSize);
        List<Student> slist = studentService.selectAll();
        PageInfo<Student> spi = new PageInfo<Student>(slist);
        int count = (int) spi.getTotal();
        JSONArray json = JSONArray.fromObject(slist);
        String str = "{\"total\":" + count + ",\"rows\":" + json.toString() + "}";
        return str;
    }

    /**
     * 上传
     *
     * @param request
     * @param file
     * @return
     * @throws IllegalStateException
     * @throws IOException
     */
    @RequestMapping(value = "upload")
    public @ResponseBody String upload(HttpServletRequest request, MultipartFile file)
            throws IllegalStateException, IOException {
        String name = file.getOriginalFilename();
        String path = request.getServletContext().getRealPath("/upload/");// 上传保存的路径
        String fileName = changeName(name);
        String rappendix = "upload/" + fileName;
        fileName = path + "\\" + fileName;
        File file1 = new File(fileName);
        file.transferTo(file1);
        String str = "{\"src\":\"" + rappendix + "\"}";
        return str;
    }

    public static String changeName(String oldName) {
        Random r = new Random();
        Date d = new Date();
        String newName = oldName.substring(oldName.indexOf(&#39;.&#39;));
        newName = r.nextInt(99999999) + d.getTime() + newName;
        return newName;
    }

    /**
     * 编辑
     *
     * @param stuid
     * @param session
     * @return
     */
    @RequestMapping(value = "editBystuid", produces = "text/html;charset=utf-8")
    public @ResponseBody String editBystuid(Integer stuid) {
        System.out.println("编辑");
        Student s = studentService.selectByPrimaryKey(stuid);
        JSONArray json = JSONArray.fromObject(s);
        String js = json.toString();
        System.out.println(js);
        return js;
    }

    /**
     * 修改
     *
     * @param stuid
     * @param stuname
     * @return
     */
    @RequestMapping(value = "updateBystuid", produces = "text/html;charset=utf-8")
    public @ResponseBody String updateBystuid(@ModelAttribute Student s) {
        System.out.println("修改中");
        System.out.println(s.getStuname() + s.getStuid()+s.getUserimage());
        int a = studentService.updateByPrimaryKey(s);
        if (a != 0) {
            return "ok";
        }
        return "error";
    }

    /**
     * 下载
     *
     * @param stuid
     * @return
     * @throws IOException
     */
    @RequestMapping(value = "download", produces = "text/html;charset=utf-8")
    public ResponseEntity<byte[]> download(Integer stuid,HttpServletRequest request) throws IOException {
        Student s = studentService.selectByPrimaryKey(stuid);
        String path=request.getServletContext().getRealPath("\\");
        String downpath = path+s.getUserimage();
        File file1=new File(downpath);
        //String downloadFileName=new String(downpath.getBytes("UTF-8"),"iso-8859-1");
        HttpHeaders heads=new HttpHeaders();
        heads.setContentDispositionFormData("attachment", downpath);
        heads.setContentType(MediaType.APPLICATION_OCTET_STREAM);
        return new ResponseEntity<byte[]>(FileUtils.readFileToByteArray(file1), heads,HttpStatus.CREATED);
    }



}

登录后复制

三、dao层和service层实体类就掠过了

这里使用到的有自动生成实体类，Maven的分页

具体操作请看首页

更多编程相关知识，请访问：编程视频！！

以上是浅谈使用SSM+BootStrap实现增删改查和头像上传效果的详细内容。更多信息请关注PHP中文网其他相关文章！