2020-12-09

记录下我接触的第一个小项目(或许算不上…)

---

前言

目前在某学校学习javaee 差不多快3个月了,刚刚接触到第一个小型的分组合作的项目课程,听说写这些博客有可能对面试有点帮助,再不济也能复习一下课程的内容,就在这里记录一下,作为准备入门的小白,可能做这些简单东西的想法会有点好笑

一、我在小组中接到需要完成的需求

如上图,这个项目初始有八个模块老师在课上带我们简单过了一遍,课后我们自己都把那些也做了个差不多出来,黄色部分是老师补充的功能不止一个,小组会分工,这里是我需要完成的功能的一个模块,后面模块也就大同小异,而且是在学校里,我自己也没有很严格的去给每个模块复制粘贴,一是感觉没啥意义,二是觉得后面可能会有别的技术来简化这种体力活

二、拿到任务后

1.想法,遇到的问题及解决

刚开始拿到任务后我第一个想到的是前不久学的ajax,但是课程内容过多而且当时也是一天过,也只能记得这个功能能做到类似百度的搜索联想,具体怎么做就只能去翻出之前课堂上做过的搜索联想功能,课程中使用的是html格式文件引入jquery以及别的一些插件jar包等完成,项目的环境使用的是maven,插件都是使用的定位,前端的文件也都是jsp,怀疑过这样的环境会不会影响,就新建了个目录使用jsp文件做了类似的功能发现可以完成,于是在对应前端页面下添加对应的JavaScript代码,做完后发现并不能正常显示,在各种折腾下发现了响应回页面的数据格式似乎并不是想要的json格式,按理说之前在另外文件夹尝试过的,但是情况就是这么个情况,道理也不太懂,猜想可能是maven的tomcat版本问题也或许是别的问题,于是手动使用json.parse解析响应回的数据,完善后完成了简单联想功能
午饭时经同组提醒仅仅是联想功能并没有什么用户体验,能看到提示内容却不能看到详细列表,于是下午时开始了输入后显示结果列表的功能,起初也是想到的ajax,绑定keyup事件监视,但是完成后发现无法收到响应,一系列尝试后发现请求甚至无法到达数据库层,与组成员讨论后没有什么我感觉靠谱的结果,但是受到了启发,每次按键盘都会有请求发出,这不应该是关系型数据库应该承受的,于是我尝试了更换绑定事件为click,可是还是得不到想要的结果,纠结挺久无果,参考了别的组的同学,发现他们把搜索那个input标签上加了个form表单标签,按enter能提交表单,且能成功得到希望的状态,自己查看了页面文件发现似乎并没有绑定事件,但是在class属性中有个空格后面跟着类似事件的部分属性值,猜想可能老师提供的前端资料中有绑定事件,自己也是在学后端,前端的也就没去仔细研究抱着能用就行的态度,之前为啥出现那些问题也没有准确答案只有些模糊猜想或许是绑定事件有了冲突,用提交表单的方式在后台获取了值,完成了搜索列表展示的功能

2.相关代码

页面部分：

<form action="${ctx}/system/dept?operation=searchList" method="post" id="searchList">
                        <div class="box-tools pull-right">
                            <div class="has-feedback">
                                <input id="username" type="text" class="form-control input-sm" placeholder="搜索"
                                       name="searchStr">
                                <%--显示联想数据--%>
                                <div id="show" class="show"></div>
                                <span class="glyphicon glyphicon-search form-control-feedback"></span>
                            </div>
                        </div

<script>
    $("#username").keyup(function () {
        let username = $("#username").val();
        if (!username) {
            $("#show").empty().hide();
            return;
        } else {
            $.ajax({
                url: "${ctx}/system/dept?operation=search",
                data: {username: username},
                type: "post",
                datatype: "json",
                success: function (data) {
                    let divs = "";
                    let parse = JSON.parse(data);
                    if (data != null && parse.length > 0) {
                        for (let i = 0; i < parse.length; i++) {
                            divs += "<div>" + parse[i] + "</div>";
                        }
                        $("#show").html(divs).show();
                    } else {
                        $("#show").empty().hide();
                    }
                }
            })
        }
    })
</script>

---

resources xml文件部分：

<mapper namespace="dao.system.DeptDao">
    <!--配置实体类属性和数据库表中列的对应关系-->
    <resultMap id="BaseResultMap" type="com.itheima.domain.system.Dept">
        <id column="dept_id" jdbcType="VARCHAR" property="id"/>
        <result column="dept_name" jdbcType="VARCHAR" property="deptName"/>
        <result column="parent_id" jdbcType="VARCHAR" property="parentId"/>
        <result column="state" jdbcType="DECIMAL" property="state"/>
        <association property="parent"
                     column="parent_id"
                     javaType="domain.system.Dept"
                     select="dao.system.DeptDao.findById"/>
    </resultMap>


    <!--配置查询的列名公共SQL语句-->
    <sql id="Base_Column_List">
        dept_id, dept_name, parent_id, state
    </sql>

    <select id="selectLike" parameterType="java.lang.String" resultMap="BaseResultMap">
        select <include refid="Base_Column_List"/> from ss_dept where dept_name like concat('%',#{username},'%')
    </select>

</mapper>

---

dao层部分：

List<Dept> selectLike(String searchStr);

service层部分：

List<Dept> search(String username);

PageInfo searchList(String searchStr, int page, int size);

@Override
    public List<Dept> search(String username) {
        SqlSession sqlSession=null;
        try {
            sqlSession = MapperFactory.getSqlSession();
            DeptDao mapper = MapperFactory.getMapper(sqlSession, DeptDao.class);
            List<Dept> deptList = mapper.selectLike(username);
            return deptList;
        } catch (Exception e) {
            TransactionUtil.rollback(sqlSession);
            throw new RuntimeException(e);
        } finally {
            TransactionUtil.close(sqlSession);
        }
    }

    @Override
    public PageInfo searchList(String searchStr,int page, int size) {
            PageHelper.startPage(page,size);
            List<Dept> deptList = search(searchStr);
            PageInfo<Dept> pageInfo = new PageInfo<>(deptList);
            return pageInfo;
    }

web层部分：

@WebServlet("/system/dept")
public class DeptServlet extends BaseServlet {
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        String operation = req.getParameter("operation");
        Class<? extends DeptServlet> aClass = this.getClass();
        try {
            Method method = aClass.getDeclaredMethod(operation, HttpServletRequest.class,
                    HttpServletResponse.class);
            method.invoke(this,req,resp);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }
private void search(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException {
        String username = req.getParameter("username");
        List<Dept> deptList = deptService.search(username);
        List<String> strings = new ArrayList<>();
        for (Dept dept : deptList) {
            strings.add(dept.getDeptName());
        }
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(strings);
        resp.getWriter().write(json);
    }

    private void searchList(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String searchStr = req.getParameter("searchStr");
        System.out.println(searchStr);
        int page = 1;
        int size = 5;
        PageInfo all = deptService.searchList(searchStr,page, size);
        req.getSession().setAttribute("page", all);
        req.getRequestDispatcher("/WEB-INF/pages/system/dept/list.jsp").forward(req, resp);
    }

搜索功能展示：

总结

刚刚拿到任务的时候,就想到了之前上课有做过类似功能想着可能挺简单要不了多久,但是做了之后发现了各种问题,解决起来没有头绪的时候会感觉很烦,甚至想着自己来学这个会不会白学了,自己是不是这块料,好在有同组一起思考,感觉会多挺多信心,其实问题也多是自己解决的.逐渐有了些信心,也有了怎么找这种功能多些,分层细些的小项目的bug经验…就好好努力吧…