其他分享
首页 > 其他分享> > 水果商城—第一阶段（用户登录，类目管理

水果商城—第一阶段（用户登录，类目管理

作者：互联网

1.创建项目，搭建环境

2.搭建mvc三层架构

3.登录及相关功能的实现

  1. 管理员登录：首先在ManageController.java中添加@Controller注解，并在@RequestMapping()中配置此类的统一访问路径

    登录访问地址：http://localhost:8080/shuiguoshop/login/login

    /*管理員登陸前*/
@RequestMapping("/login")
public String login(){
    return "/login/mLogin";}

    前端显示代码（简化版）：只有一个form表单...

    <form action="${ctx}/login/tologin" method="post">
    <div class="panel login-box">
        <div class="text-center margin-big padding-big-top"><h1>管理员登录</h1></div>
        <div class="panel-body" style="padding: 30px;padding-bottom: 10px; padding-top: 10px;">
            <div class="form-group">
                <div class="field field-icon-right">
                    <input type="text" class="input input-big" name="userName" value="admin" placeholder="登录账号" data-validate="required:请填写账号" />
                    <span class="icon icon-user margin-small"></span>
                </div>
            </div>
            <div class="form-group">
                <div class="field field-icon-right">
                    <input type="password" class="input input-big" name="passWord" value="111111" placeholder="登录密码" data-validate="required:请填写密码" />
                    <span class="icon icon-key margin-small"></span>
                </div>
            </div>
        </div>
        <div style="padding: 30px;">
            <input type="submit" class="button button-block bg-main text-big input-big" value="登录" />
        </div>
    </div>
</form>

  2. 管理员登录验证:接收从前端传来的用户名和密码，通过getByEntity进行查找。如果查询成功，跳转到管理员后台界面；失败，将查询对象置空，并重定向到“退出登录功能（/outManage）”

    /*登录验证*/
@RequestMapping("/tologin")
public String tologin(Manage manage, Model model){

    Manage byEntity = manageService.getByEntity(manage);
    if (byEntity == null){
        return "redirect:/login/outManage";
    }
    model.addAttribute("manage",byEntity);
    return "/login/mIndex";
}

  3. 退出登录

    将manage对象设置为空

4.管理员后台管理界面-类目管理功能

4.1类目管理

执行流程：

  1. 点击链接

  2. 访问：findBySql

  3. 通过sql查询出符合条件的Pager对象

    @RequestMapping("/findBySql")
public String findBySql(Model model,ItemCategory itemCategory){
    String sql = "select * from item_category where isDelete = 0 and pid is null order by id";
    Pager<ItemCategory> pagers = itemCategoryService.findBySqlRerturnEntity(sql);
    model.addAttribute("pagers",pagers);
    model.addAttribute("obj",itemCategory);
    return "itemCategory/itemCategory";
}

  4. 将查询出的对象传递给前端的显示界面（前端需要添加分页功能）

前端分页具体实现（这个分页具体怎么写还有待后续研究QwQ）

<tr>
    <td colspan="8">
        <div class="pagelist">
            <!--分页开始-->
            <pg:pager url="${ctx}/itemCategory/findBySql" maxIndexPages="5" items="${pagers.total}"
                      maxPageItems="15" export="curPage=pageNumber">
                <pg:last>
                    共${pagers.total}条记录，共${pageNumber}页
                </pg:last>
                当前第${curPage}页
                <pg:first>
                    <a href="${pageUrl}">首页</a>
                </pg:first>
                <pg:prev>
                    <a href="${pageUrl}">上一页</a>
                </pg:prev>
                <pg:pages>
                    <c:choose>
                        <c:when test="${curPage eq pageNumber}">
                            <font color="red">[${pageNumber}]</font>
                        </c:when>
                        <c:otherwise>
                            <a href="${pageUrl}">${pageNumber}</a>
                        </c:otherwise>
                    </c:choose>
                </pg:pages>
                <pg:next>
                    <a href="${pageUrl}">下一页</a>
                </pg:next>

                <pg:last>
                    <c:choose>
                        <c:when test="${curPage eq pageNumber}">
                            <font color="red">尾页</font>
                        </c:when>
                        <c:otherwise>
                            <a href="${pageUrl}">尾页</a>
                        </c:otherwise>
                    </c:choose>

                </pg:last>
            </pg:pager>

        </div>
    </td>
</tr>

4.2新增类目

执行流程：点击“新增目录” --->addItem(controller)--->add(页面)--->填好表单后提交，提交地址为：exAdd

点击新增类目跳转到类目添加页面

<div>
    <span>新增类目</span>
</div>

<form action="${ctx}/itemCategory/exAdd" method="post">
    请输入一级类目名称:<input type="text" name="name" required>
    <input type="submit">
</form>

controller：

/*添加一级类目执行*/
@RequestMapping("/exAdd")
public String exAdd(ItemCategory itemCategory){
    System.err.println(itemCategory.getName());
    itemCategory.setIsDelete(0);
    itemCategoryService.insert(itemCategory);
    return "redirect:/itemCategory/findBySql";
}

4.3一级类目修改

执行流程:

  1. 点击按钮，跳转到itemCategory/updete,并且将该对象的id传回后端

  2. 后端的：“/update” 接收到id，并且根据id查询出该对象（load(Integer id)）

    @RequestMapping("/update")
public String update(Model model,Integer id){
    ItemCategory obj = itemCategoryService.load(id);
    model.addAttribute("obj",obj);
    return "itemCategory/update";
}

  3. 将该对象传回前端页面

  4. 前端页面接收对象名和id（隐藏域中）

    <form action="${ctx}/itemCategory/exUpdate" method="post">
    <input type="hidden" name="id" value="${obj.id}">
    一级类目名称:<input type="text" name="name" value="${obj.name}" required>
    <input type="submit" value="修改">
</form>

  5. 对象名显示在文本框中，id放在隐藏域中（给下一步，根据id修改对象提供参数id）

  6. 提交表单后，“exUpdate”接收到前端数据：id 和 修改后的类目名

  7. 执行修改操作，之后重定向回findBySql。（之前findBySql一直写成fingBySql，所以导致重定向失败）

    /*修改一级分类功能*/
@RequestMapping("/exUpdate")
public String exUpdate(ItemCategory itemCategory){
    itemCategoryService.updateById(itemCategory);
    return "redirect:/itemCategory/findBySql";
}

4.4一级类目删除

执行流程：

  1. 点击删除，跳转到“/delete”，并将要删除的对象的id传向后端

  2. 在/delete中，首先，通过id搜索到该对象（load），并将isDelete属性置为1。

  3. 通过sql，将该类目下的所有二级类目isDelete属性都置为1

  4. 重定向回findBySql

    @RequestMapping("/delete")
public String delete(Integer id){
    ItemCategory load = itemCategoryService.load(id);
    load.setIsDelete(1);
    //删除本身
    itemCategoryService.updateById(load);
    //将下级也删除
    String sql = "update item_category set isDelete = 1 where pid =" + id;
    itemCategoryService.updateBysql(sql);
    return "redirect:/itemCategory/findBySql";
}

4.5查看二级类目：

执行流程：

  1. 点击查看二级目录，将该类的id作为pid传向后端

  2. 通过查询，得到pager对象

  3. 将pager对象传递回前端页面进行分页显示

    /*
     * 分页查询类目列表2
     * */
@RequestMapping("/findBySql2")
public String findBySql2(Model model,ItemCategory itemCategory){
    String sql = "select * from item_category where isDelete = 0 and pid = " + itemCategory.getPid() + " order by id";
    Pager<ItemCategory> pagers = itemCategoryService.findBySqlRerturnEntity(sql);
    model.addAttribute("pagers",pagers);
    model.addAttribute("obj",itemCategory);
    return "itemCategory/itemCategory2";
}

4.6新增二级类目功能

执行流程:

  1. 点击新增二级目录，将该二级目录的pid传回后端，并跳转到新增界面

    <div>
    <a href="${ctx}/itemCategory/add2?pid=${obj.pid}" style="padding-left: 10px">新增二级类目</a>
</div>

    /**
     * 转向到新增二级目录
     */
@RequestMapping("/add2")
public String add2(Integer pid, Model model){
    model.addAttribute("pid",pid);
    return "itemCategory/add2";
}

  2. add2.jsp接收pid，储存在隐藏域中

    <form action="${ctx}/itemCategory/exAdd2?pid=${pid}" method="post">
    <input type="hidden" name="pid" value="${obj.pid}">
    请输入二级类目名称:<input type="text" name="name" required>
    <input type="submit" value="添加">
</form>

  3. 填好二级类目名称后，将名称与pid作为对象一同传递回”exAdd2“.

    1. 将该对象isDelete有null置为0
    2. 将该对象插入表中
    3. 重定向回”itemCategory/findBySql2?pid=“
    /**
     * 新增二级类目执行
     */
@RequestMapping("/exAdd2")
public String exAdd2(ItemCategory itemCategory){
    itemCategory.setIsDelete(0);
    itemCategoryService.insert(itemCategory);
    System.err.println(itemCategory.toString());
    return "redirect:/itemCategory/findBySql2?pid=" + itemCategory.getPid();
}

4.78二级类目修改，删除

与之前一级类目修改删除相似，再次不再过多赘述。

标签：String,commons,itemCategory,类目,org,id,商城,第一阶段
来源： https://www.cnblogs.com/jiabowenn/p/15415657.html