前后端交互项目总结

最新推荐文章于 2021-08-17 16:49:26 发布

对吃没兴趣

最新推荐文章于 2021-08-17 16:49:26 发布

阅读量1.1k

点赞数 1

分类专栏：项目总结文章标签： spring mvc html javascript css

本文链接：https://blog.csdn.net/cui929434/article/details/75329344

版权

项目总结专栏收录该内容

3 篇文章 0 订阅

订阅专栏

新建
前台jsp+javascript+html+css
后台 springMVC

后台

    @RequestMapping(value = "/add_show", produces = "application/json;charset=UTF-8")
    public ModelAndView add_show(Page page,String id) throws Exception {
        ModelAndView mv = this.getModelAndView();
        PageData pd = this.getPageData();
        pd.put("id", id);
        logBefore(logger, "保存save");
        if (null!=id&&id!="") {
            PageData pd_Path =service.findRow(pd);
            mv.addObject("version", pd_Path);
        } 
        mv.setViewName("mnt/message/Add_Version");
        return mv;
    }

前台

<!--新建 -->
                    <form action="appVersion/update_msg.do" method="post" name="addForm" id="addForm" onsubmit="return CheckPost();" enctype="multipart/form-data">
                        <input id ="id" type="hidden" name="id" value="${version.id }">
                        <div>
                            app的版本码<input type="text" name="version_code" value="${version.versioncode }" />
                        </div>
                        <div>
                            获取app名<input type="text" name="app_name" value="${version.appname }" />
                        </div>
                        <div>
                            app版本号<input type="text" name="version_number" value="${version.versionnum }"  />
                        </div>
                        <div>
                        请选择app类型
                            <select name="platform" id="platform">
                                <option value="android" <c:if test="${version.platform == 'android' }">selected="selected"</c:if>>平台Android</option>
                                <option value="ios" <c:if test="${version.platform != 'android' }">selected="selected"</c:if>>平台IOS</option>
                            </select>
                        </div>
                        <div>
                            是否强制更新
                            <select name="isforce" id="isforce">
                            <option value="1" <c:if test="${version.isforce == '1' }">selected="selected"</c:if>>是</option>
                            <option value="2" <c:if test="${version.isforce != '1' }">selected="selected"</c:if>>否</option>
                            </select>
                        </div>
                        <div>
                            apk的文件名<input type="text" size="10" name="apk_filename" maxlength="20" value="${version.apkname }"  />
                        </div>
                        <!-- <div>
                            文件所在的位置<input type="text" size="10" name="app_path"
                                maxlength="20" />
                        </div> -->
                        <div>
                            更新内容<input type="text"  name="content" value="${version.content }"  />
                        </div>
                        <div>
                            文件<input type="file" name="appFile"/>
                        </div>
                        <!--                        <div>内容:<textarea name="content" rows="8" cols="30"></textarea></div> -->
                        <div>
                            <input autocomplete="off" id="nav-search-input1" type="button" value="提交" onclick="add_update();" />
                        </div>
                    </form>

function add_update(){
            var id=$("#id").val();
            if(id!=null&&""!=id){
                $("#addForm").attr("action","appVersion/update_msg.do");//替换action属性
            }else{
                $("#addForm").attr("action","appVersion/save.do");
            }
                $("#addForm").submit();
        }

利用ModelAndView方法跳转页面，通过接收参数id是否有值来判断（如果没有值代表新建，如果有值i，代表修改）是否有值，来进行判断跳转页面是否需要进行值的返回（新建不需要，修改则需要值），如果为修改，则需要根据前台选中记录的id，传给后台进行查询数据，将数据返回给前台，并在前台属性value上通过 ${对象.属性名}的方式进行调用。后台返回给前台结果的方式 1.通过request.setattribute()的方法来向前台传值 2.利用ModelAndView这个方法中的mv.addObject(“version”, pd_Path);这种方式来进行返回。获取前台属性值是通过前台控件的name属性值来取得的。通过获取form的name属性值来进行重新跳转action（即跳向后台controller的方法）例如$ (“#addForm”).attr(“action”,”appVersion/update_msg.do”);//替换action跳转方法
之后就通过submit（）方法进行post方式提交，例如：$(“#addForm”).submit();
前台可通过c：if标签进行判断显示，如下拉列表框的显示选择处理

<div>
                            是否强制更新
                            <select name="isforce" id="isforce">
                            <option value="1" <c:if test="${version.isforce == '1' }">selected="selected"</c:if>>是</option>
                            <option value="2" <c:if test="${version.isforce != '1' }">selected="selected"</c:if>>否</option>
                            </select>
                        </div>

注意：前台jsp页面用==代表相等，！=代表不等于，没有equals方法

如果有新建文件时，或得项目所在路径使用

HttpSession session = req.getSession();
        String strDirPath = session.getServletContext().getRealPath("/");

strDirPath 代表项目路径，这里的req是HttpServletRequest所属的变量
上传文件所需步骤：a.上面的取得所要上传的路径
b.创建目录，如果目录不存在，则创建

File dir = new File(strDirPath + "uploadFiles/app/" + platform + "/" + version_code);
        if(!dir.exists()){
            dir.mkdirs();
        }

c.创建输入流，创建输出流，创建字节数组，定义一个int len=-1的变量

InputStream in = appFile.getInputStream();
FileOutputStream out = new FileOutputStream(strDirPath + app_path);
        byte[] data = new byte[2048];
        int len = -1;
        while((len=in.read(data))!=-1){
            out.write(data, 0, len);
        }

解释：创建输入流将选中的类型文件读取到字节数组中，条件是读到等于-1为止，代表全部读取到字节数组中了，接着在while循环中利用输出流将字节数组的内容全部写到FileOutputStream out = new FileOutputStream(strDirPath + app_path);这个方法所在参数的目录中，之后就可以看见文件成功上传到指定目录了。
之后关闭输出流，输入流，顺序不能颠倒。

controller跳转指定的controller使用

return "redirect:/appVersion/fetchList.do";

这个方式

2.删除

具体逻辑：或得选中的记录行id；传入后台，调用数据库进行删除，
删除带有文件的需要麻烦一点，需要或得文件的路径进行删除

后台代码

@RequestMapping(value = "/delete", produces = "application/json;charset=UTF-8")
    @ResponseBody
    public Object delete(HttpServletRequest req) throws Exception {
        Map<String, Object> map = new HashMap<String, Object>();

        PageData pd = this.getPageData();
        if (pd == null) {
            map.put("code", "-1");
            map.put("msg", "删除失败！");
            return map;
        }
        HttpSession session = req.getSession();
        String strDirPath = session.getServletContext().getRealPath("/");
        PageData pd_Path =service.findPath(pd);
        File file1=new File(strDirPath+pd_Path.getString("app_path"));
        String path_a=pd_Path.getString("app_path");
        path_a=path_a.substring(0, path_a.lastIndexOf("/"));
        File file=new File(strDirPath+path_a);

        if(file1.delete()){
            file.delete();
            service.delete(pd);
            map.put("code", "0");
            map.put("msg", "OK");
        }else{
            map.put("code", "0");
            map.put("msg", "fail");
        }

        return map;
    }

前台代码

 //删除delete_apk
          function delete_apk(){
              var id=$("input[name='id']:checked").val();
                if(id==null||id==""){
                    alert("请选中要删除的记录!")
                }else{
                    if(confirm("是否删除?")){
                        $.ajax({
                            url :"appVersion/delete",
                            type : "post",
                            dataType : "json",
                            data : {
                                id:id
                            },
                            success : function(data){
                                console.info(data);
                                if(data.msg === "OK"){
                                    alert("删除成功！！");
                                    location.href='appVersion/fetchList.do';
                                }else{
                                    alert("删除失败！！");
                                }
                            },
                            error : function(xhr) {
                                alert("删除失败！！");
                            }
                        });
                    }
                }
          }


<c:forEach items="${varList}" var="var" varStatus="vs">
                                                <tr>
                                                    <td><input type="radio" name="id" value="${var.id}" style="opacity:1" /></td>
                                                    <td class='center' style="width: 30px;">${vs.index+1}</td>
                                                    <td>${var.versioncode}</td>
                                                    <td>${var.appname}</td>
                                                    <td>${var.versionnum}</td>
                                                    <td>${var.platform}</td>
                                                    <td>${var.apkname}</td>
                                                    <td>${var.apppath}</td>
                                                    <td>${var.update_time}</td>
                                                    <td>${var.create_time}</td>
                                                </tr>

                                            </c:forEach>

a.需要var id=$(“input[name=’id’]:checked”).val();这种方式获得name=”id”,并且是被选中的id，获取id的值，传入后台
b.通过confirm(“是否删除?”)方式弹出提示，来进行是否确认删除，之后，通过异步请求ajax的方式进行调用响应的controller进行删除操作，，后台通过where条件进行对id对应的记录进行删除
例如：

    $.ajax({
                            url :"appVersion/delete",
                            type : "post",
                            dataType : "json",
                            data : {
                                id:id
                            },
                            success : function(data){
                                console.info(data);
                                if(data.msg === "OK"){
                                    alert("删除成功！！");
                                    location.href='appVersion/fetchList.do';
                                }else{
                                    alert("删除失败！！");
                                }
                            },
                            error : function(xhr) {
                                alert("删除失败！！");
                            }
                        });

url:代表跳转的controller地址
data：是你要向后台传送的数据，这里我们删除传递一个参数id

删除文件，需要先进行查询文件所对应的路径，如果查的不是最后一层文件，则需要进行判断删除处理
例如：

HttpSession session = req.getSession();
        String strDirPath = session.getServletContext().getRealPath("/");
        PageData pd_Path =service.findPath(pd);
        File file1=new File(strDirPath+pd_Path.getString("app_path"));
        String path_a=pd_Path.getString("app_path");
        path_a=path_a.substring(0, path_a.lastIndexOf("/"));
        File file=new File(strDirPath+path_a);

        if(file1.delete()){
            file.delete();
            service.delete(pd);
            map.put("code", "0");
            map.put("msg", "OK");
        }else{
            map.put("code", "0");
            map.put("msg", "fail");
        }

mybatis中注意一个技巧<if test="null != pd.op_person and '' != pd.op_person and 'null' != pd.op_person"> and u.name LIKE CONCAT(CONCAT('%', #{pd.op_person}),'%') </if>
这是if判断，true则进行拼接语句，concat方法表示将两个里面的参数进行拼接这样做就可以拼接成%属性值%的方式进行like模糊查询。

还有一个注意，前台查询时输入的数据进行保存处理操作
先将值获取到后台再将值传给前台，使用value属性进行调用
例如：
前台

<td><span class="input-icon"> <input
                                        autocomplete="off" id="op_person" type="text"
                                        name="op_person" value="${pd.op_person}"
                                        placeholder="这里输入创建人关键词" />
                                </span></td>

后台

String op_person = pd.getString("op_person");

            if (null != op_person && !"".equals(op_person)) {
                op_person = op_person.trim();
                pd.put("key_name", op_person);
            }
mv.addObject("pd", pd);

这里使用modelAndview方式变量mv.addObject()方法返回给前台，前台调用即可。

对吃没兴趣

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
前后端交互项目总结

新建前台jsp+javascript+html+css 后台 springMVC后台 @RequestMapping(value = "/add_show", produces = "application/json;charset=UTF-8") public ModelAndView add_show(Page page,String id) throws Excepti
复制链接

扫一扫