SSM项目--企业工单管理系统（三）

最新推荐文章于 2024-05-16 10:23:10 发布

文絮卿舀

最新推荐文章于 2024-05-16 10:23:10 发布

阅读量1k

点赞数 1

文章标签： java ajax

本文链接：https://blog.csdn.net/wuhahabanana/article/details/106550147

版权

服务器-Tomcat(写完页面以后配置)

在这里插入图片描述

Controller层(controller控制器类,jsp页面)

在这里插入图片描述
controller下创建控制器类

ProjectController 项目组表控制器

//ProjectController 项目组表控制器

@Controller
public class ProjectController {

    //注入service层业务接口
    @Autowired
    private ProjectService projectService;

    //编写业务方法
    //方法1.查询所有项目
    @RequestMapping(value = "getAllProject1")
    public String getAllProject1(Map<String,Object> map){
        List<Project> projects = projectService.getAllProjectService();
        map.put("projects",projects);
        return "selproject";
    }

    //方法2,返回ModelAndView值
    @RequestMapping(value = "getAllProject2")
    public String getAllProject2(Map<String,Object> map){
        List<Project> projects = projectService.getAllProjectService();
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.addObject("projects",projects);
        modelAndView.setViewName("selproject");
        return "modelAndView";
    }


    //项目使用下面的
    //方法3,使用Ajax的回调
    //查询所有项目组
    @RequestMapping(value = "/getAllProject")
    @ResponseBody
    public List<Project> getAllProject(){
        return projectService.getAllProjectService();
    }

    //访问页面的映射
    @RequestMapping(value = "/selProject")
    public String SelProject(){
        System.out.println("进入ProjectController控制器,SelProject方法!");
        return "selProject";  //去找逻辑视图名通过/拼接
    }
}

WorkorderController 工单表控制器

//WorkorderController 工单表控制器

@Controller
public class WorkorderController {

    //注入service层业务接口
    @Autowired
    private WorkorderService workorderService;

    //编写业务方法
    //方法3,使用Ajax的回调
    //查询所有工单
    @RequestMapping(value = "/getAllWorkorder")
    @ResponseBody
    public List<Workorder> getAllWorkorder(){
        return workorderService.getAllWorkorderService();
    }

    //访问页面的映射
    @RequestMapping(value = "/Workorder")
    public String SelWorkorder(){
        System.out.println("进入ProjectController控制器,SelWorkorder方法!");
        return "selWorkorder";
    }

    //由首页进入添加工单页面
    @RequestMapping(value = "/getaddWorkorder")
    //页面隐藏域提交名
    public String getaddWorkorder(@RequestParam(value = "projectId",required = false) String projectId, Map<String,String> map,HttpServletRequest httpServletRequest){
        System.out.println("进入ProjectController控制器,getaddWorkorder方法,首页进入添加工单页面!");
        System.out.println("项目编号:"+projectId);
        map.put("projectId",projectId);
        return "addWorkorder";
    }

    //添加工单的处理业务
    @RequestMapping(value = "/addWorkorder")
    public String addWorkorder(Workorder workorder, HttpSession session) {
        System.out.println("进入ProjectController控制器,addWorkorder方法,添加工单的处理业务!");
        //添加当前日期
        workorder.setCreateDate(new Date());
        //执行添加工单
        try {
            workorderService.addWorkorderService(workorder);
            session.setAttribute("isSave", "保存成功!");
        } catch (Exception e) {
            session.setAttribute("isSave", "保存成功!");
            e.printStackTrace();
        }
        //返回到下面输出页面方法
        return "redirect:getAllWorkorder";
    }

    //查询所有的工单信息
    @RequestMapping(value = "/getAllWorkorder")
    @ResponseBody
    public ModelAndView getAllWorkorder(){
        System.out.println("进入ProjectController控制器,getAllWorkorder方法,查询所有的工单信息!");
        //获得所有工单集合
        List<Workorder> workorders = workorderService.getAllWorkorderService();
        ModelAndView modelAndView = new ModelAndView();
        //添加model数据
        modelAndView.addObject("workorders",workorders);
        //添加逻辑视图名
        modelAndView.setViewName("showWorkorder");
        return modelAndView;
    }
}

WEB-INF下创建3个jsp页面
selProject.jsp 项目组选择页面
addWorkorder.jsp 工单添加页面
showWorkorder.jsp 工单展示页面
在这里插入图片描述
selProject.jsp 项目组选择页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>项目选择页面</title>
    <!--引入jQuery-->
    <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
</head>
<body>
<div id="contain">
    <!--提交方式,页面路径-->
    <form id="selForm" action="/getaddWorkorder" method="get">
        <!--函数事件提交,隐藏域,提交名-->
        <input type="hidden" name="projectId" id="projectId" value=""/>
        <h1>企业工单管理系统</h1>
        <div>选择项目</div>
        <div>
            <select id="selProject"></select>
            <!--通过函数事件提交-->
            <button onclick="getaddWorkorder();" id="button" name="button">确定</button>
        </div>
    </form>
</div>

<!--事件提交函数-->
<script type="text/javascript">
    function getaddWorkorder() {
        //将select下拉列表中的值传到下个页面
        //借助上面隐藏域来赋值,将select中的值放到隐藏域中
        var $strObj = $("#selProject").val();
        alert("项目Id号:" + $strObj);  //选择时,弹出隐藏域值
        $("#projectId").val($strObj);  //拿到隐藏域
        //提交表单
        $("#selForm").submit();
    }
</script>

<!--jQuery代码-->
<script type="text/javascript">
    //使用jQuery发送Ajax请求,获取项目信息
    //页面加载时就执行以下方法代码
    $(document).ready(function () {
/*        $.ajax(
            url:/do
        methond:get,
            success:function x() {

        }
        )*/
        //同上,get请求发送给Controller/getAllProject,Service,结果返回data参数
        $.get("/getAllProject", function (data) {
            //检查data信息,看里面有没有东西
            alert("data:" + data);  //弹出集合
            alert("data" + data[0].projectName);  //弹出集合0下标值

            //jQuery遍历集合的方法each(),i--索引(0开始)  item--每次遍历的对象
            var str = "";  //var通用类型
            //$(参数)工厂函数,自动变为JQuery对象,进行遍历
            $(data).each(function (i, item) {
                //拼接(从1开始,集合的.projectName拿出来)
                str += '<option value=' + (i + 1) + '>' + item.projectName + '</option>'
            });
            //替换select标签
            $("#selProject").html(str);
        });
    });

</script>
</body>
</html>

addWorkorder.jsp 工单添加页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <title>工单添加页面</title>
    <!--引入jQuery-->
    <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
</head>
<body>
<!--Controller,getaddWorkorder的map值名-->
项目编号:${projectId}
<div class="wrap" style="width: 1000px;margin: 20px auto;">
    <!--提交到Controller的/addWorkorder方法-->
    <form action="/addWorkorder" method="get" id="addForm">
        <!--利用隐藏域存储项目编号-->
        <input type="hidden" name="projectId" value="${projectId}">
        <table border="1px">
            <tr>
                <td colspan="2" align="center">添加工单</td>
            </tr>
            <tr>
                <td><span>执行人</span></td>
                <td><input type="text" name="executor" id="executor"></td>
            </tr>
            <tr style="height: 50px;">
            <tr>
                <td><span>任务描述</span></td>
                <td><textarea id="description" name="description" rows="3" cols="30"></textarea></td>
            </tr>
            <tr>
                <td><span>级别</span></td>
                <td>
                    <select id="orderLevel" name="orderLevel">
                        <option value="1">1级</option>
                        <option value="2">2级</option>
                        <option value="3">3级</option>
                    </select>
                </td>
            </tr>
            </tr>
            <tr><td colspan="2" style="text-align: center;"><input type="submit" value="提交"></td></tr>
        </table>
    </form>
</div>

<!--表单验证 JQuery-->
<script type="text/javascript">

    //页面加载事件
    $(document).ready(function() {
        //表单验证
        var flag = true;  //标记:false不提交,true提交
        if(!checkExecutor()) {
            //执行人为空不提交
            flag = false;
            if (!checkDesc()) {
                //描述为空,不提交
                flag = false;
            }
            return flag;
        }
    });

    //执行人不能为空
    function checkExecutor() {
        var $exeOjb = $("#executor").val();
        if ($exeOjb == "") {
            alert("执行人不能为空!");
            return false;
        } else {
            return true;
        }
    }
    <!--描述不能为空-->
    function checkDesc() {
        var $exeObj = $("#executor").val();
        if ($exeObj == "") {
            alert("描述不能为空!");
            return false;
        } else {
            return true;
        }
    }
</script>

</body>
</html>

showWorkorder.jsp 工单展示页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>

<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>工单展示页面</title>
    <!--引入jQuery-->
    <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>
    <!--隔行变色-->
    <style type="text/css">
        .titleClass{
            background: slategray;
        }
        .oddClass{
            background: deeppink;}
        .evenClass{
            background: floralwhite;
        }
        .tr_hover{
            background: #5bc0de;
        }
    </style>
</head>
<body>
<div id="contain">
    <h1>企业工单列表</h1>
    <table border="1px">
        <tr id="title">
            <td>工单编号</td>
            <td>项目名称</td>
            <td>执行人</td>
            <td>任务描述</td>
            <td>级别</td>
            <td>创建时间</td>
        </tr>
        <c:forEach items="${workorders}" var="w">
            <tr>
                <td>${w.id}</td>
                <td>${w.project.projectName}</td>
                <td>${w.executor}</td>
                <td>${w.description}</td>
                <td>${w.orderLevel}级</td>
                <td><fmt:formatDate value="${w.createDate}" pattern="yyyy-MM-dd"/></td>
            </tr>
        </c:forEach>
        <!--接收添加成功-->
        <tr><td colspan="6" style="text-align: center;color: red;">
            ${isSave}
        </td></tr>
    </table>
</div>

<!--隔行换色jQuery-->
<script type="text/javascript">
    $(document).ready(function () {
        //首行色
        $("#title").addClass("titleClass");
        //实现隔行换色
        $("tr:odd").addClass("oddClass");
        //忽略对首行的颜色
        $("tr:even:gt(0)").addClass("evenClass");
        //鼠标悬停变色
        $('tr:gt(0)').mouseover(function () {
            $(this).addClass('tr_hover');
        }).mouseout(function () {
            $(this).removeClass("tr_hover");
        });
    });
</script>

</body>
</html>

在这里插入图片描述

表单提交验证

添加当前日期

文絮卿舀

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
SSM项目--企业工单管理系统（三）

服务器-Tomcat(写完页面以后配置)Controller层(controller控制器类,jsp页面)controller下创建控制器类ProjectController 项目组表控制器//ProjectController 项目组表控制器@Controllerpublic class ProjectController { //注入service层业务接口 @Autowired private ProjectService projectServ
复制链接

扫一扫