水果商城—第一階段(用戶登錄,類目管理


1.創建項目,搭建環境

  • 引入所需依賴

    <dependencies>
        <!--Junit-->
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.12</version>
        </dependency>
        <!--數據庫驅動-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>
        <!-- 數據庫連接池 -->
        <dependency>
            <groupId>com.mchange</groupId>
            <artifactId>c3p0</artifactId>
            <version>0.9.5.2</version>
        </dependency>
    
        <!--Servlet - JSP -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
    
        <!--Mybatis-->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.2</version>
        </dependency>
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>2.0.2</version>
        </dependency>
    
        <!--Spring-->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.1.9.RELEASE</version>
        </dependency>
    
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.16</version>
        </dependency>
    
        <!-- 上傳組件包 -->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.3.1</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.4</version>
        </dependency>
    
        <dependency>
            <groupId>commons-logging</groupId>
            <artifactId>commons-logging</artifactId>
            <version>1.1.1</version>
        </dependency>
    
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.1.2</version>
        </dependency>
    
        <dependency>
            <groupId>jsptags</groupId>
            <artifactId>pager-taglib</artifactId>
            <version>2.0</version>
        </dependency>
        <dependency>
            <groupId>redis.clients</groupId>
            <artifactId>jedis</artifactId>
            <version>2.9.0</version>
        </dependency>
    
        <dependency>
            <groupId>com.alipay.sdk</groupId>
            <artifactId>alipay-sdk-java</artifactId>
            <version>3.4.49.ALL</version>
        </dependency>
    
        <dependency>
            <groupId>org.apache.solr</groupId>
            <artifactId>solr-core</artifactId>
            <version>3.5.0</version>
        </dependency>
    
        <dependency>
            <groupId>org.apache.solr</groupId>
            <artifactId>solr-solrj</artifactId>
            <version>3.5.0</version>
        </dependency>
    
        <dependency>
            <groupId>commons-codec</groupId>
            <artifactId>commons-codec</artifactId>
            <version>1.9</version>
        </dependency>
    
        <dependency>
            <groupId>commons-httpclient</groupId>
            <artifactId>commons-httpclient</artifactId>
            <version>3.1</version>
        </dependency>
    
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpclient</artifactId>
            <version>4.2.5</version>
        </dependency>
    
        <dependency>
            <groupId>org.apache.httpcomponents</groupId>
            <artifactId>httpcore</artifactId>
            <version>4.2.4</version>
        </dependency>
    
        <dependency>
            <groupId>org.slf4j</groupId>
            <artifactId>jcl-over-slf4j</artifactId>
            <version>1.6.1</version>
        </dependency>
    
    
        <dependency>
            <groupId>log4j</groupId>
            <artifactId>log4j</artifactId>
            <version>1.2.17</version>
        </dependency>
    
        <dependency>
            <groupId>com.gitee.qdbp.thirdparty</groupId>
            <artifactId>ueditor</artifactId>
            <version>1.4.3.3</version>
        </dependency>
    
        <!-- 導入dbcp的jar包,用來在applicationContext.xml中配置數據庫 -->
        <dependency>
            <groupId>commons-dbcp</groupId>
            <artifactId>commons-dbcp</artifactId>
            <version>1.2.2</version>
        </dependency>
    
        <!-- JSTL標簽類 -->
        <dependency>
            <groupId>jstl</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>
    
    
        <!-- mybatis物理分頁插件 -->
        <dependency>
            <groupId>com.github.miemiedev</groupId>
            <artifactId>mybatis-paginator</artifactId>
            <version>1.2.15</version>
        </dependency>
    
        <!-- 引入JSON -->
    
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.9.5</version>
    
        </dependency>
    
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-annotations</artifactId>
            <version>2.9.5</version>
        </dependency>
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.9.5</version>
        </dependency>
    
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-core-asl</artifactId>
            <version>1.9.13</version>
        </dependency>
        <dependency>
            <groupId>org.codehaus.jackson</groupId>
            <artifactId>jackson-mapper-asl</artifactId>
            <version>1.9.13</version>
        </dependency>
    
        <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjweaver</artifactId>
            <version>1.8.5</version>
        </dependency>
    
        <dependency>
            <groupId>cglib</groupId>
            <artifactId>cglib</artifactId>
            <version>3.1</version>
        </dependency>
    
        <!-- mybatis物理分頁插件 -->
        <dependency>
            <groupId>com.github.miemiedev</groupId>
            <artifactId>mybatis-paginator</artifactId>
            <version>1.2.15</version>
        </dependency>
    </dependencies>
    
  • 搭建ssm框架

    具體細節見:ssm框架整合。

    注!:spring-mybatis中的數據庫連接池中的url中添加:&allowMultiQueries=true。

    具體見:https://www.cnblogs.com/jiabowenn/articles/15391419.html

2.搭建mvc三層架構

  • pojo(Manage,ItemCategory)

    • 使用lombok,根據數據庫字段創建對象屬性
  • dao

    • ManageMapper:
      • interface ManageMapper extends BaseDao
      • .xml
        • 創建通用sql片段,方便后期復用
        • 實現ManageMapper interface
  • service

    • service接口,繼承BaseService;serviceImpl實現service接口,並且繼承BaseSeriviceImpl類
    • 在serviceImpl類中創建屬性ManageMapper和get方法,並且注入到spring中
  • service層和dao層測試

  • 我是在寫mapper.xml的時候,邊寫邊測試。完成mapper測試后發現,這個可以在寫完service層之后一起測,一次就可以搞定。

  • 測試代碼示例1:mapper測試

    /*測試批量修改*/
    @Test
    public void test10(){
        ApplicationContext context = new ClassPathXmlApplicationContext("spring-dao.xml");
        ManageMapper managerMapper = context.getBean("manageMapper", ManageMapper.class);
    
        ArrayList<Manage> manages = new ArrayList<Manage>();
    
        for (int i = 10; i <= 19; i++) {
            manages.add(new Manage(i,"admin_" + i + i,"00000" + i + i,"realName_" + i + i));
        }
        managerMapper.updateBatch(manages);
        for (Manage manage : manages) {
            System.out.println(manage);
        }
    }
    
  • 測試代碼示例2:service測試

    @Test
    public void test1(){
        ApplicationContext context = new ClassPathXmlApplicationContext("applicationContext.xml");
        ManageService manageService = context.getBean("manageServiceImpl", ManageService.class);
        List<Manage> manages = manageService.listAll();
        for (Manage manage : manages) {
            System.out.println(manage);
        }
    }
    
  • controller:

    • 在進行下面步驟的時候,一定要確保環境沒有問題。

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二級類目修改,刪除

與之前一級類目修改刪除相似,再次不再過多贅述。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM