05-springmvc之ssm四（学生转班业务）

* 业务需求：转班

* 修改数据库学生表，添加进班时间

* 添加需要：转班需要更新学生进班时间

@Controller
public class TransferController {
    @Autowired
    private TransferService mTransferService;
    @RequestMapping("/toTransfer")
    public String toTransfer(Model model){
        model.addAttribute("tab","transfer");
        return "tab";
    }


    @RequestMapping("/transfer")
    @ResponseBody
    public BaseDataVo transfer(@RequestBody TransferDataVo dataVo){
        System.out.println(dataVo);
        return mTransferService.transfer(dataVo);
    }
}

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学生转班管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/jquery/jquery-3.3.1.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function doTransfer() {
            var sid = $("#sid").val();
            var oldCno = $("#oldCno").val();
            var newCno = $("#newCno").val();
            var date = $("#date").val();
            var sendData = {"sid": sid, "oldCno": oldCno, "newCno": newCno, "date": date};
            var jsonData=JSON.stringify(sendData);
            $.ajax({
                    url: "${pageContext.request.contextPath}/transfer.do",
                    type: "POST",
                    contentType:"application/json;charset=utf-8",
                    dataType: "json",
                    data:jsonData,
                    processData:false,//默认是true，是否转换为查询字符串
                    success: function (data, status) {
                        var content = JSON.parse(JSON.stringify(data));
                        // 好看提示框
                        if(content.code==200) {
                            alert(content.tip);
                            $("#sid").val("");
                            $("#oldCno").val("");
                            $("#newCno").val("");
                            $("#date").val("");
                        }else {
                            alert("请求转班失败");
                        }
                        $("#sid").val("");
                        $("#oldCno").val("");
                        $("#newCno").val("");
                        $("#date").val("");
                    },
                    error:function () {
                        alert("请求失败...");
                    }
                }
            );
        }
    </script>
</head>
<body>

<form class="form-horizontal" role="form" action="${pageContext.request.contextPath}/login.do" method="post">
    <div class="form-group">
        <label class="col-sm-6 control-label">原班级号</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="oldCno" name="oldCno"
                   placeholder="请输入原班级号">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-6 control-label">学生学号</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="sid" name="sid"
                   placeholder="请输入学生学号">
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-6 control-label">新班级号</label>
        <div class="col-sm-3">
            <input type="text" class="form-control" id="newCno" name="newCno"
                   placeholder="请输入新班级号">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-6 control-label">转班日期</label>
        <div class="col-sm-3">
            <input type="date" class="form-control" id="date" name="date"
                   placeholder="请输入新班级号">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="button" class="btn btn-primary" onclick="doTransfer()">提交</button>
        </div>
    </div>
</form>

</body>
</html>

* 学生列表展示

 *dao
  List<Student> queryAllStudents();
  <select id="queryAllStudents" parameterType="int" resultType="Student">
        SELECT sid,cno,sname,ssex,sage,colleage,classhour FROM student
    </select>

* service
public interface StudentService {
    BaseDataVo getAllStudents();
}
@Service
public class StudentServiceImpl implements StudentService {
    @Autowired
   private StudentMapper mStudentMapper;
    @Override
    public BaseDataVo getAllStudents() {
        StudentDataOutVo dataOutVo=new StudentDataOutVo();
        List<Student> students = mStudentMapper.queryAllStudents();
        dataOutVo.setStudents(students);
        return dataOutVo;
    }
}

@Controller
public class StudentController {
    @Autowired
    private StudentService mStudentService;
    @RequestMapping("/toStudents")
    public String toStudents(Model model){
        model.addAttribute("tab","students");
        return "tab";
    }
    @RequestMapping("/students")
    @ResponseBody
    public BaseDataVo students(){
        return mStudentService.getAllStudents();
    }


}

<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>学生转班管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/jquery/jquery-3.3.1.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            getAllStudnets();
        });
        function getAllStudnets() {
            $.ajax({
                url : "${pageContext.request.contextPath}/students.do",
                type:"GET",
                dataType: "json",
                success: function (data, status) {
                    var content = JSON.parse(JSON.stringify(data));
                    var tbodyElement = document.getElementById("tb");
                    if(content.code==200){
                        var students=content.students;
                        for(var i=0;i<students.length;i++){
                            var trElement= document.createElement("tr");
                            var ks=Object.keys(students[i]);
                            console.log("ks",ks);
                            for(var j=0;j<ks.length;j++){
                                var td=document.createElement("td");
                                td.innerHTML=students[i][ks[j]];
                                trElement.appendChild(td);
                            }
                            tbodyElement.appendChild(trElement);
                        }
                    }else{
                        alert("请求服务出错")
                    }
                }
            })
        }
    </script>
</head>
<body>
<table class="table table-striped">
    <thead>
    <tr>
        <th>学号</th>
        <th>班级号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>系</th>
        <th>进班时间</th>
    </tr>
    </thead>
    <tbody id="tb">

    </tbody>
</body>
</html>

* 修改滑动条

* 解决日期输出格式问题

* 全局处理

* 配置GsonHttpMessageConverter解析器

* 所有用到GsonHttpMessageConverter解析器，都会受影响

<mvc:annotation-driven>
        <mvc:message-converters>
            <bean class="org.springframework.http.converter.json.GsonHttpMessageConverter">
                <property name="gson">
                    <bean class="org.springframework.http.converter.json.GsonFactoryBean">
                        <property name="serializeNulls" value="true"></property>
                        <property name="dateFormatPattern" value="yyyy/MM/dd"></property>
                    </bean>
                </property>
            </bean>
        </mvc:message-converters>
    </mvc:annotation-driven>

* 局部处理

* 使用@JsonAdapter：指定DateTypeAdapter

* 由于默认效果就是这样，所以我们可以自定义

* copy源码，自定义自己DateAdapter

/**
 * @author xiaozhao
 */
public class DateAdapter extends TypeAdapter<Date> {
    private SimpleDateFormat sdf=new SimpleDateFormat("yyyy-MM-dd");
    @Override
    public Date read(JsonReader in) throws IOException {
        if (in.peek() == JsonToken.NULL) {
            in.nextNull();
            return null;
        }
        return deserializeToDate(in.nextString());
    }

    private synchronized Date deserializeToDate(String json) {
            try {
                return sdf.parse(json);
            } catch (ParseException ignored) {}

        try {
            return ISO8601Utils.parse(json, new ParsePosition(0));
        } catch (ParseException e) {
            throw new JsonSyntaxException(json, e);
        }
    }

    @Override
    public synchronized void write(JsonWriter out, Date value) throws IOException {
        if (value == null) {
            out.nullValue();
            return;
        }
        out.value(sdf.format(value));
    }
}

* 在单元测试的时候，事务控制有效

* 在控制层调用的时候，事务无效

Should roll back transaction but cannot - no transaction available

* 解决方案：事务定义在方法里创建

* jsp放进WEB-INF

* 方式一（后端适配法，但是增加了开发的工作量）

* 由于我们的网页要嵌在iframe，首先先要访问tab.jsp

* 通过ztree点击某个项，访问toTransfer.do

* 这样就是浏览器就导致浏览器再次访问，是不可以看到WEB-INF里面的内容，需要在Controller再转一次

* 方式二：修改前端bootstraptab框架的源码(技术攻关)

* 思路：不让bootstraptab框架去异步请求带有iframe的网页，而是在框架动态加上iframe

//update by xiaozhao
    BaseTab.prototype.addIFrame=function(id,url){
        var iframeElement=document.createElement("iframe");
        iframeElement.style.width="100%";
        iframeElement.style.height="600px";
        iframeElement.style.border="none";
        iframeElement.src=url;
        $("#" + id).append(iframeElement);
    }

* 修改Controller

* 整理工程的jsp

05-springmvc之ssm四（学生转班业务）

猜你喜欢