扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >使用SSM+BootStrap实现增删改查和头像上传效果
  • 878

0
分享到

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

2024-04-02 19:04:59 878人浏览 八月长安
摘要

这篇文章主要讲解了“使用SSM+BootStrap实现增删改查和头像上传效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“使用SSM+BootStrap实现

这篇文章主要讲解了“使用SSM+BootStrap实现增删改查和头像上传效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“使用SSM+BootStrap实现增删改查和头像上传效果”吧！

先看界面

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

点击编辑之后

使用SSM+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>
                        <h5 class="modal-title" id="myModalLabel">学生信息修改</h5>
                    </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>
    $('#file-fr').fileinput({
        theme : 'fa',
        language : 'zh',
        uploadAsync : true,//异步上传
        uploadUrl : 'upload.do',
        allowedFileExtensions : [ 'jpg', 'png', 'gif', 'mp4' ],
        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['state'] === 0) {
            return "正常";
        }
        if (row['state'] === 1) {
            return "锁定";
        }
        return value;
    }
    function image(value, row, index) {
        return "<img src='"+row['userimage']+"' style='width:30px;height:30px;'/>";
    }
    
    function toolbar(value, row, index) {
        var element = "<button type='button' onclick='edit(" + row.stuid
                + ")' class='btn btn-info'>编辑</button>"
                + "<button type='button' onclick='del(" + row.stuid
                + ")' class='btn btn-danger'>删除</button>"
                + "<button type='button' onclick='download(" + row.stuid
                + ")' class='btn btn-warning'>下载</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) {
                $('#myModal').modal('show');
                $("[name=stuid]").val(data[0].stuid);
                $("#stuname").val(data[0].stuname);
                $("#userimage").val(data[0].userimage);
                $("#img").attr('src', data[0].userimage);
                $("#class").append(
                        "<option value='"+data[0].calssesid+"'>"
                                + 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='"+data[i].classesid+"'>"
                            + 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('确定要删除吗？') == 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('确定要下载头像？')==true){
            location.href="download.do?stuid="+stuid;
            
        }
    }
</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;

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

    
    @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('.'));
        newName = r.nextInt(99999999) + d.getTime() + newName;
        return newName;
    }

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

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

    
    @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实现增删改查和头像上传效果”的内容了，经过本文的学习后，相信大家对使用SSM+BootStrap实现增删改查和头像上传效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！

--结束END--

本文标题: 使用SSM+BootStrap实现增删改查和头像上传效果

本文链接: https://lsjlt.com/news/68873.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 使用SSM+BootStrap实现增删改查和头像上传效果
    这篇文章主要讲解了“使用SSM+BootStrap实现增删改查和头像上传效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“使用SSM+BootStrap实现...
    99+
    2024-04-02
  • Springboot+Vue-Cropper实现头像剪切上传效果
    使用Vue-Cropper这一组件实现头像上传，供大家参考，具体内容如下 效果展示 先看一下效果吧，如果效果不能满足你的需求，就不必再浪费时间往下看了 点击选择图片之后 然后再点...
    99+
    2024-04-02
  • 实现数据库增删改查+界面效果-----jsp
    任务 通过连接数据库完成用户登录模块。 2.登录成功后查询出一张数据库表中的内容；登录不成功返回登录页面。 3.页面面端要有空值和非法字符验证。 4.登录成功后对一张表中数据进行增加、删除、修改和查询...
    99+
    2023-10-26
    数据库 java mysql jsp jsp实现数据库增删改查
  • Entity Framework使用DBContext实现增删改查
    有一段时间没有更新博客了，赶上今天外面下雨，而且没人约球，打算把最近对Entity Framework DBContext使用的心得梳理一下，早些时候在网上简单查过，对于最新版本的E...
    99+
    2022-11-13
    Entity Framework DBContext 增删改查
  • PHP连接数据库实现页面增删改查效果
    目录效果图实现代码sqlcyg.phpdelete.phpupdate.phpcreate.php效果图 实现代码 sql -- phpMyAdmin SQL Dump ...
    99+
    2024-04-02
  • 如何使用Node.js和Redis实现增删改查操作
    这篇文章主要介绍“如何使用Node.js和Redis实现增删改查操作”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“如何使用Node.js和Redis实现增删改查操作”文章能帮助大家解决问题。什么是N...
    99+
    2023-07-05
  • PyMySQL实现增删查改的简单使用
    我们在使用MySQL的时候，可以在MySQL的客户终端来操作数据库中的表，同时，也可以使用navicat等可视化的工具来操作数据表。但是，这只是操作个别数据，如果我们想要插入10万条...
    99+
    2024-04-02
  • JavaWeb如何使用DBUtils实现增删改查
    这篇文章主要讲解了“JavaWeb如何使用DBUtils实现增删改查”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaWeb如何使用DBUtils实现增删改查”吧！JavaWeb 使用D...
    99+
    2023-06-21
  • JavaWeb 使用DBUtils实现增删改查方式
    目录JavaWeb 使用DBUtils实现增删改查1、创建C3p0Utils类2、创建DBUtilsDao类3、创建测试类4、执行测试类Java DBUtils技术访问数据库DBUt...
    99+
    2024-04-02
  • 怎么使用PHP实现用户头像上传功能
    这篇文章将为大家详细讲解有关怎么使用PHP实现用户头像上传功能，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。补充：什么是switch语句，以及它适用于哪些地方？简单的说switch语句也是属于判断语句，i...
    99+
    2023-06-15
  • 使用PyMySQL怎么实现增删查改操作
    使用PyMySQL怎么实现增删查改操作？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。1、PyMySQL的使用步骤：2、案例：1 查询数据库中的表的信息： #&nb...
    99+
    2023-06-15
  • HTML5中canvas如何实现移动端上传头像拖拽裁剪效果
    这篇文章将为大家详细讲解有关HTML5中canvas如何实现移动端上传头像拖拽裁剪效果，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 html部分： <!DOC...
    99+
    2024-04-02
  • Vue vant-ui使用van-uploader实现头像上传功能
    效果图： 项目中是使用有赞vant-ui框架实现的头像上传替换功能 代码布局结构：  <van-row class="sendInfo"> ...
    99+
    2024-04-02
  • .NET使用Hisql实现菜单管理(增删改查)
    一、引言 上一篇.NET集成ORM框架HiSql 已经完成了Hisql的引入，本节就把 项目中的菜单管理改成hisql的方式实现。菜单管理界面如图： 二、修改增删改查相关代码 1、...
    99+
    2024-04-02
  • HTML5中canvas实现移动端上传头像拖拽裁剪效果的方法
    这篇文章主要介绍HTML5中canvas实现移动端上传头像拖拽裁剪效果的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！本示例使用HTML5 canvas，简单的编写了上传头像的裁剪效果，移动端支持拖拽后裁剪， 虽...
    99+
    2023-06-09
  • node+vue实现用户注册和头像上传的实例代码
    最近正好空闲，写了个实用注册代码，分享给大家，有需要的朋友可以了解一下 数据库我使用的是MongoDB。 首先做文件上传，要保证协议里面的'Content-Type'为'multipa...
    99+
    2022-06-04
    用户注册 头像 实例
  • Go使用Gin+mysql实现增删改查的详细实例
    目录0.前置知识1.架构2.功能模块3.实现流程4.代码5.结果总结 0.前置知识 Go中的struct。mysql、Gin框架。Web基础。 1.架构 使用mysql作为数据库，Gin作为Web框架。 2.功...
    99+
    2022-12-02
    go gin mysql gin操作mysql gin mysql增删改查
  • 使用Spring+SpringMVC+Mybatis实现留言板的增删改查
    目的 1）掌握使用maven来创建SSM项目 2）掌握web.xml和pom.xml的使用 3）掌握Spring、SpringMVC和Mybatis，学会整合SSM 4)掌握的controller层注解@Autowired,@Requ...
    99+
    2023-09-01
    mysql tomcat idea
  • Vue vant-ui怎么使用van-uploader实现头像上传功能
    本篇内容主要讲解“Vue vant-ui怎么使用van-uploader实现头像上传功能”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue vant-ui怎么使用van-u...
    99+
    2023-06-30
  • 怎么用cropper.js和exif.js实现头像上传缩放裁剪旋转
    本篇内容主要讲解“怎么用cropper.js和exif.js实现头像上传缩放裁剪旋转”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用cropper.js和exif.js实现头像上传缩放裁剪旋...
    99+
    2023-06-29
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作