大三东软暑期实训-SSM实战篇

Posted 2021-07-11 Fire king

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了大三东软暑期实训-SSM实战篇相关的知识，希望对你有一定的参考价值。

jqery页面加载完成后的写法

$(function () {

    });

或者

$(document).ready(function () {
        $.getJSON();
    });

springmvc.xml中<context:component-scan base-package="com.store"/>，可以不用写，自动扫
jsp乱码<meta charset="UTF-8">
get请求从服务器获取请求，pot请求将数据提交到服务器
html页面转jsp页面
项目配置无缘无故出错
${pageContext.request.contextPath}获取webapp根目录
Ajax异步请求，前端JQuery框架已经对Ajax进行了封装。所以使用ajax的时候需要引用JQurey:<script src="${pageContext.request.contextPath}/resources/bootstrap3/jquery-1.9.1.min.js"></script>
alert("注册名必填!");不好看用layui的框
JQuery的元素取值和赋值
取输入框的值元素.val()
给输入框赋值元素.val(值)
除了输入框之外的元素取值和赋值
取值：元素.html;
赋值：元素.html(值);
type=button不能提交数据，除非有js函数，type=submit就会提交表单数据
表单action,submmit,name
===

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

 <div class="form-group">
                    <label  class="col-md-2 control-label">性别：</label>
                    <div class="col-md-8">
                        <label class="radio-inline">
                            <input type="radio" name="sex"  value="0" <c:if test="${user.sex==0}"> checked</c:if>>男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="sex"  value="1" <c:if test="${user.sex==1}"> checked</c:if>>女
                        </label>
                    </div>
                </div>

//给修改按钮添加点击事件
$("#updateInfo").click(function () {
  //获取表单数据 表单序列化 将数据封装成对象
  //保证输入框的name的属性值与对象属性保持一致
  var data = $("#update-form").serialize();
  //发起ajax post 请求
  var url = "/user/doUpdateUserInfo";//要不要问好无所谓
  $.post(url,data,function (obj) {
    
  },"jason");
});

表单上传
必要条件：

method=“post”
enctype=“multipart/form-data”
type=“file”

<form action="/toUpload" method="post" enctype="multipart/form-data">
<h1>上传图片</h1>
    <input type="file" name="fileData">
    <br>
    <input type="submit" value="上传">
</form>

上传图片

 <div class="panel-body">
            <!--上传头像表单开始-->
            <form class="form-horizontal" id="file-upload" role="form">
                <div class="form-group">
                    <label  class="col-md-2 control-label">选择头像:</label>
                    <div class="col-md-8">
                        <img src="${pageContext.request.contextPath}/resources/images/index/user.jpg" width="70" />
                        <input id="fileUpload" type="file" name="file">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                        <input type="button" id="upload" class="btn btn-primary" value="上传" />
                    </div>
                </div>
            </form>
        </div>

$("#upload").click(function () {
        //数据来源哪里？表单，$("#file-upload")获取到的数组，$("#file-upload")[0]获取到对象
        var data = new FormData($("#file-upload")[0]);

       $.ajax({
           url:"/user/upload",//url的双引号可要可不要
           data:data,//传给服务端的数据
           type:"post",
           contentType:false,//提交给服务端的数据类型 要不要当成字符串来处理
           processData:false,//要不要处理提交的数据
           dataType:"json",
           success:function (data) {
                if(data.state==200){
                    layer.msg(data.msg);
                    //http://localhost:8067/upload/,${pageContext.request.contextPath}/upload/
                    $("#img").attr("src","http://localhost:8067/upload/"+data.path);
                }else {
                    layer.msg(data.msg);
                }
           }
       })
    })

springmvc.xml:

 <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
        <!--设置上传最大尺寸为50MB-->
        <property name="maxUploadSizePerFile" value="52428800"/>
        <property name="defaultEncoding" value="UTF-8"/>
        <property name="resolveLazily" value="true"/>
    </bean>

持久层需要的参数，controller能提供什么参数，承上启下：业务层提供给持久层不能解决的来自于controller能提供参数，不足由session获取；至于返回值，返回到前端的页面需要什么，controller就需要返回什么，业务层就需要返回什么。
前端获取webapp下的任何资源：${pageContext.request.contextPath}/webapp下的目录/....../目标资源或者绝对路径http://localhost:项目端口/}/webapp下的目录/....../目标资源，但无法访问WEB-INF下的任何资源，只因前端属于浏览器端（客户端），后端可以通过配置视图解析器以请求转发方式访问WEB-INF下的任何资源。
前端重定向发送请求到controller:
标签类型<a href="/user/toUploadPage">
ajax:window.location.href="/user/toIndex"或者location.href="/user/toIndex"
后端跳转重定向由某个到某个方法跳转到另一个方法，也就是不走视图解析器，返回"redirect:/user/toUserInfoPage"。
后端内部请求转发跳转到WEB-INF下的任何资源，配置视图解析器，return "index";
cookie的使用：
其中${avartar}来自后端全局session的绑定，"${avartar}"加双引号是为了不让jquery将el表达式的$误认为是jquery定义的$。
1.设置cookie

//页面加载完成后
$(function () {
    //将用户头像保存在cookie中
    $.cookie("image","${avartar}",{expires:7});

})

或者

//页面加载完成后
$(function () {
    //将用户头像保存在cookie中
    $.cookie("image","${avartar}",7);

})

2.获取cookie
其中$("#img")是img标签的id

//页面加载完成后
    $(function () {
        var avartar = $.cookie("image");
        //给image赋值
        $("#img").attr("src","${pageContext.request.contextPath}/upload/"+avartar);
    });

<img id="img" src="${pageContext.request.contextPath}/resources/images/index/user.jpg" width="70" />

$.ajax({
           url:"/user/upload",//url的双引号可要可不要
           data:data,//传给服务端的数据
           type:"post",
           contentType:false,//提交给服务端的数据类型 要不要当成字符串来处理
           processData:false,//要不要处理提交的数据
           dataType:"json",
           success:function (data) {
                if(data.state==200){
                    alert(data.msg);
                    layer.msg(data.msg);
                    //http://localhost:8067/upload/,${pageContext.request.contextPath}/upload/
                    $("#img").attr("src","http://localhost:8067/upload/"+data.path);
                    $.cookie("image",data.path,{expires:7});
                }else {
                    alert(data.msg);
                    layer.msg(data.msg);
                }
           }
       })
    })

不同返回视图的方式不可混合使用,否则就无法跳转页面，出现空白，只生效较前的那个：

public ModelAndView addAddress(Address address, HttpSession session, ModelAndView modelAndView,HttpServletResponse response) throws IOException {
        String username = (String)session.getAttribute("username");
        if(username==null&&username.equals("")){
            response.setContentType("text/html;charset=utf-8");
            PrintWriter writer = response.getWriter();
            writer.println("<script>alert('未登录，请先登录');</script>");
            writer.close();
            modelAndView.setViewName("redirect:/address/addAddress");
            return modelAndView;
        }

cookie的使用：

  processData:false,//要不要处理提交的数据
           dataType:"json",
           success:function (data) {
                if(data.state==200){
                    alert(data.msg);
                    layer.msg(data.msg);
                    //http://localhost:8067/upload/,${pageContext.request.contextPath}/upload/
                    $("#img").attr("src","http://localhost:8067/upload/"+data.path);
                    //1.存key为image，值为data.path，有效期7天的cookie
                    $.cookie("image",data.path,{expires:7});
                }else {
                    alert(data.msg);
                    layer.msg(data.msg);
                }
           }
       })
    })

    //页面加载完成后
    $(function () {
    //2.获取存key为image的值
        var avartar = $.cookie("image");
        //给image赋值
        $("#img").attr("src","${pageContext.request.contextPath}/upload/"+avartar);
    });

select选择器的赋值：
其中data.areaNameList中的areaNameList是返回的map（data）集合中的key，是一个ArrayList；

var dataList = data.areaNameList;
                            for (var i = 0; i < dataList.length; i++) {
                                //先创建好select里面的option元素
                                var option = document.createElement("option");
                                //转换DOM对象为JQ对象,好用JQ里面提供的方法 给option的value赋值
                                $(option).val(dataList[i]);
                                //给option的text赋值,这就是你点开下拉框能够看到的东西
                                $(option).text(dataList[i]);
                                //获取select 下拉框对象,并将option添加进select
                                $('#area').append(option);
                            }

<label class="col-md-2 control-label"><span style="color: red;">*</span>省/直辖市：</label>
    <div class="col-md-3">
        <select class="form-control" data-province="---- 选择省 ----" id="provinceSelect" name="province" onchange="loadCity()">
        </select>

select标签取值： var parentName = $("#provinceSelect").val();这个不行就用 var parentName = $("#provinceSelect").html();因为除了标签其他都用$("#provinceSelect").html();

完整案例：id="provinceSelect"、id="city"、id="area"都是为了获取选中的值， $("#city").empty();为清空select选择器的值， contentType:"application/x-www-form-urlencoded; charset=UTF-8",是为了解决ajax传到后台的值出现乱码。

 <label class="col-md-2 control-label"><span style="color: red;">*</span>省/直辖市：</label>
    <div class="col-md-3">
        <select class="form-control" data-province="---- 选择省 ----" id="provinceSelect" name="province" onchange="loadCity()">
        </select>
        </div>
        <label class="col-md-2 control-label"><span style="color: red;">*</span>城市：</label>
    <div class="col-md-3">
        <select class="form-control" data-city="---- 选择市 ----" id="city" name="city" onchange="loadArea()"></select>
        </div>
        </div>
        <div class="form-group ">
        <label class="col-md-2 control-label"><span style="color: red;">*</span>区县：</label>
    <div class="col-md-3">
        大三东软暑期实训-spring篇2
 大三东软暑期实训-springboot整合篇
 大三东软暑期实训-spring篇1
 大三东软暑期实训-springmvc篇
 大三东软暑期实训-mybatis篇
 大三后端暑期实习面经总结——SSM&微服务框架篇