【開源項目筆記:platform-wechat-mall】新建菜單&數據管理

本文是學習開源項目的過程中積累的筆記，供也在學習和使用這個項目的朋友們參考。
開源項目：微信小程序商城，前後端開源，項目地址：platform-wechat-mall。
項目本地運行和服務器部署都已成功。這篇文章記錄在本地項目中新增一個後臺數據管理頁面的方法，對應項目文檔中 第三章 項目實戰 的內容。

本開源項目在雲服務器上部署的過程請看這裏：Centos Tomcat 下部署Web項目 platform-framework

前提：

1）platform-framework本地成功運行。

2）數據庫管理工具使用Mysql自帶的Workbench。

3）瀏覽器使用Microsoft Edge

1、按照項目文檔指導生成菜單和管理頁面

項目文檔中提供了新增菜單和管理頁面的方法，我們先按照這個來，表格自己新建一個：

1）在數據庫platform-shop中新增表格 nideshop_fitness

CREATE TABLE `nideshop_fitness` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主鍵',
`type_id` tinyint(3) unsigned NOT NULL DEFAULT '0' COMMENT '類型',
`title` varchar(500) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '標題',
`content` varchar(1000) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '描述',
`status` tinyint(3) unsigned DEFAULT '0' COMMENT '是否上架', 
PRIMARY KEY (`id`)
) ENGINE=InnoDB CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

2）按照項目文檔內的指導自動生成代碼，包含目錄main 和fitness_menu.sql

注意：fitness_menu.sql中 菜單名稱是空的，需要自己填上去，這裏填寫鍛鍊動作：

INSERT INTO `sys_menu` (`parent_id`, `name`, `url`, `perms`, `type`, `icon`, `order_num`)
    VALUES ('1', '鍛鍊動作', 'nideshop/fitness.html', NULL, '1', 'fa fa-file-code-o', '6');

3）按照項目文檔內的指導運行fitness_menu.sql 並用main文件夾覆蓋 platform-shop下的main文件夾。

然後重新啓動項目就可以找到“鍛鍊動作”菜單並愉快的操作數據了……嗎？並不是，Orz。接下來我們將依次解決問題。

2、菜單及頁面顯示

完成上一步操作並重新啓動項目後，我們首先想要找到“鍛鍊動作”這個菜單。

1）顯示菜單項

根據fitness_menu.sql 中parent_id的定義，“鍛鍊動作”菜單應該位於 “系統管理”目錄下，現在沒有顯示，可能是配置還沒有完成。
進入 系統管理->菜單管理 ，在名稱這一欄找到 “系統管理” 並展開，可以看到“鍛鍊動作”已經存在。選中“鍛鍊動作”->修改，進入修改頁面，菜單狀態 選中“有效”，然後提交。
刷新一下管理平臺界面，“鍛鍊動作”這個菜單就出現在 “系統管理”目錄下了。
然後我們很高興的點擊“鍛鍊動作”，發現展開的頁面是一片空白，orz。

2）顯示頁面

我們期望點擊“鍛鍊動作”後展開的頁面類似於菜單管理這樣，操作按鈕和數據表格都已經定義好了。

查看 fitness.html ，發現引用jscript的語句如下：

<script src="${rc.contextPath}/js/shop/fitness.js?_${date.systemTime}"></script>

而前面自動生成的代碼中fitness.js文件所在位置是main\webapp\js\nideshop\fitness.js。於是把 fitness.html中的js路徑改正確：

  <script src="${rc.contextPath}/js/nideshop/fitness.js?_${date.systemTime}"></script>

重新啓動項目，再次點擊“鍛鍊動作”菜單，頁面顯示正常了。：）

3、新增數據

頁面上顯示“鍛鍊動作”表格還是空的，我們點擊“新增”按鈕，進入新增頁面來隨便增加一條數據。點擊提交後提示如下：

打開瀏覽器上的開發者工具（設置及其他->更多工具->開發人員工具），發現錯誤：

HTTP404: 找不到 - 服務器尚未找到與請求的 URI (統一資源標識符)匹配的任何內容。
(XHR)GET - http://localhost:8080/platform_framework/fitness/list?_search=false&nd=15693556655832&limit=10&page=1&sidx=&order=asc&_=156931728457845

查看對應的請求處理文件 FitnessController.java

@RestController
@RequestMapping("nideshop/fitness")
public class FitnessController extends AbstractController {
    @Autowired
    private FitnessService fitnessService;
    ……
    }

注意 @RequestMapping(“nideshop/fitness”)中的內容，說明這裏處理的Url應該是 http://localhost:8080/platform_framework/nideshop/fitness/……
而上面報錯的Url是 http://localhost:8080/platform_framework/fitness/……

到這裏差不多已經明確了，
再覈對一下其他頁面：在管理平臺界面上點擊編輯商品->所有商品，請求列表的URL爲: http://localhost:8080/platform_framework/goods/list?search=false&nd=1569323334455&limit=10&page=1&sidx=&order=asc&name=&=1569323533344

對應的GoodsController.java

@RestController
@RequestMapping("goods")
public class GoodsController {
    @Autowired
    private GoodsService goodsService;
    ……
        }

修改代碼：把FitnessController.java中
@RequestMapping(“nideshop/fitness”)修改爲
@RequestMapping(“fitness”)

重新啓動項目，再次點擊“鍛鍊動作”->新增->提交，提示如下：

再次回到FitnessController.java檢查權限，把所有@RequiresPermissions中所有"nideshop: "刪除，結果如下：

@RequiresPermissions(“fitness:list”)
@RequiresPermissions(“fitness:info”)
@RequiresPermissions(“fitness:save”)
@RequiresPermissions(“fitness:update”)
@RequiresPermissions(“fitness:delete”)

重新啓動項目，再次點擊“鍛鍊動作”->新增->提交，提示如下：
去Workbench中查看 nideshop_fitness 表，看到了剛纔新增的記錄。說明新增數據成功了，快樂：），但是網頁上刷新時仍然提示“無數據顯示”，：（ 。

4、頁面顯示數據

是時候好好看看第一步自動生成的代碼了。鑑於前面改了好幾處，代碼裏有可能還存在其他錯誤。

1）DAO目錄

自動生成的代碼中，FitnessDao.java 與 FitnessDao.xml都放在main\java\com\platform\dao 目錄下；但在項目代碼中，xxxDao.xml 實際都在main\resources\com\platform\dao目錄中。

把FitnessDao.xml改放到main\resources\com\platform\dao目錄下。

2）FitnessDao.xml

查看FitnessDao.xml 中的查詢語句

<sql id="selectSql">
    SELECT
    T.id,
    T.type_id,
    T.title,
    T.content,
    T.status
    FROM nideshop_fitness T
    WHERE 1=1
    <if test="params.name != null and params.name.trim() != ''">
        AND T.NAME LIKE '%${params.name}%'
    </if>
</sql>

nideshop_fitness表中沒有"name"這個字段，相對應的是"title"，把name都改成title
修改後如下：

<sql id="selectSql">
    SELECT
    T.id,
    T.type_id,
    T.title,
    T.content,
    T.status
    FROM nideshop_fitness T
    WHERE 1=1
    <if test="params.title!= null and params.title.trim() != ''">
        AND T.TITLE LIKE '%${params.title}%'
    </if>
</sql>

3) fitness.js

reload函數：

reload: function (event) {
   vm.showList = true;
          let page = $("#jqGrid").jqGrid('getGridParam', 'page');
   $("#jqGrid").jqGrid('setGridParam', {
              postData: {'name': vm.q.name},
              page: page
          }).trigger("reloadGrid");
          vm.handleReset('formValidate');
},

同FitnessDao.xml中的查詢語句，這裏的’name’應改爲’title’。修改後的代碼如下：

reload: function (event) {
   vm.showList = true;
          let page = $("#jqGrid").jqGrid('getGridParam', 'page');
   $("#jqGrid").jqGrid('setGridParam', {
              postData: {'title': vm.q.name},
              page: page
          }).trigger("reloadGrid");
          vm.handleReset('formValidate');
},

參數校驗：

let vm = new Vue({
   el: '#rrapp',
   data: {
        showList: true,
        title: null,
      fitness: {},
      ruleValidate: {
         name : [
            {required: true, message: '名稱不能爲空', trigger: 'blur'}
         ]
      },
      q: {
          name: ''
      }
   },

ruleValidate 下的name也要修改爲title，修改後代碼如下

let vm = new Vue({
   el: '#rrapp',
   data: {
        showList: true,
        title: null,
      fitness: {},
      ruleValidate: {
         title: [
            {required: true, message: '名稱不能爲空', trigger: 'blur'}
         ]
      },
      q: {
          name: ''
      }
   },

現在代碼看起來沒什麼問題了，：）。
再次重啓項目，點擊"鍛鍊動作"菜單。仍然沒有顯示任何數據，：（。

4）覈對響應的報文格式

打開瀏覽器上的開發者工具（設置及其他->更多工具->開發人員工具），頁面查詢框中輸入 1，點擊查詢，跟蹤一次查詢消息。發現服務器返回的報文中已經包含了查詢結果：

{"code":0,
"page":{"records":
[{"id":1,"typeId":1,"title":"1","content":"1","status":1}],
"total":1,"size":10,"current":1,"searchCount":true,"pages":1}}

看起來不錯啊，爲什麼不顯示呢？

跟蹤一條其他頁面的查詢消息，點擊推廣管理->廣告列表，查詢框中輸入 “新”，點擊查詢，返回的報文格式如下。

{"code":0,
"page":{"totalCount":2,"pageSize":10,"totalPage":1,"currPage":1,"list":
[{"id":4,"adPositionId":1,"mediaType":1,"name":"一個新的測試廣告","link":"/pages/auth/newuser/newuser","imageUrl":"https://platform-wxmall.oss-cn-beijing.aliyuncs.com/upload/20180727/xinhuiyuan.jpg","content":"廣告測試","endTime":1569272400000,"enabled":1,"adPositionName":"移動端首頁輪播廣告"},
{"id":3,"adPositionId":1,"mediaType":1,"name":"新用戶註冊","link":"/pages/auth/newuser/newuser","imageUrl":"https://platform-wxmall.oss-cn-beijing.aliyuncs.com/upload/20180727/xinhuiyuan.jpg","content":"新用戶註冊","endTime":1504820914000,"enabled":1,"adPositionName":"移動端首頁輪播廣告"}
]}}

兩者在格式和字段名稱上都有不同，看來問題就在此了。

5）矯正報文格式

在代碼中查找“totalCount”，發現一個類：PageUtilsPlus，貌似響應報文的組裝應該用它。
找一個使用它的類作對比：SysLogController.java

@ResponseBody
@RequestMapping("/list")
@RequiresPermissions("sys:log:list")
public R list(@RequestParam Map<String, Object> params) {
    //查詢列表數據
    PageUtilsPlus pageUtil = sysLogService.queryPage(params);
    return R.ok().put("page", pageUtil);
}

對比一下我們的FitnessController.java

@GetMapping("/list")
@RequiresPermissions("fitness:list")
public R list(@RequestParam Map<String, Object> params) {
    Page page = fitnessService.queryPage(params);

    return R.ok().put("page", page);
}

看起來只要把page從Page類替換爲PageUtilsPlus就行了。
需要修改fitnessService.queryPage和FitnessServiceImpl.queryPage

需要修改的代碼如下：
FitnessServiceImpl.java

/*@Override
public Page queryPage(Map<String, Object> params) {
    //排序
    params.put("sidx", "T.id");
    params.put("asc", false);
    Page<FitnessEntity> page = new QueryPlus<FitnessEntity>(params).getPage();
    return page.setRecords(baseMapper.selectFitnessPage(page, params));
}*/
@Override
public PageUtilsPlus queryPage(Map<String, Object> params) {
    //排序
    params.put("sidx", "T.id");
    params.put("asc", false);
    Page<FitnessEntity> page = new QueryPlus<FitnessEntity>(params).getPage();
    return new PageUtilsPlus(page.setRecords(baseMapper.selectFitnessPage(page, params)));
}

fitnessService.java

/**
 * 分頁查詢
 *
 * @param params 查詢參數
 * @return Page
 */
//Page queryPage(Map<String, Object> params);
PageUtilsPlus queryPage(Map<String, Object> params);

FitnessController.java

/**
 * 分頁查詢
 *
 * @param params 查詢參數
 * @return R
 */
@GetMapping("/list")
@RequiresPermissions("fitness:list")
public R list(@RequestParam Map<String, Object> params) {
    //Page page = fitnessService.queryPage(params);
    PageUtilsPlus page = fitnessService.queryPage(params);
    return R.ok().put("page", page);
}

修改完畢後保存，再次運行項目。點擊"鍛鍊動作"，頁面終於正常顯示了。
現在可以愉快的操作頁面，增刪改數據了：）

That’s all.Thank you!