【开源项目笔记:platform-wechat-mall】新建菜单&数据管理

最新推荐文章于 2024-05-31 13:53:10 发布

漫天撒花

最新推荐文章于 2024-05-31 13:53:10 发布

阅读量1.1k

点赞数

分类专栏：入门开源项目笔记:platform-wechat-mall 文章标签：开源项目 spring java platform-wechat-mall

本文链接：https://blog.csdn.net/qq_41377419/article/details/101280219

版权

入门同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

开源项目笔记:platform-wechat-mall

8 篇文章 2 订阅

订阅专栏

本文是学习开源项目的过程中积累的笔记，供也在学习和使用这个项目的朋友们参考。
开源项目：微信小程序商城，前后端开源，项目地址：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!

漫天撒花

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【开源项目笔记:platform-wechat-mall】新建菜单&数据管理

本文是学习一个开源项目的过程中积累的笔记，供也在学习和使用这个项目的朋友们参考。开源项目：微信小程序商城，前后端开源，项目地址：platform-wechat-mall。项目本地运行和服务器部署都已成功。这篇文章记录在本地项目中新增一个后台数据管理页面的方法，对应项目文档中第三章项目实战的内容。前提：platform-framework本地成功运行。数据库管理工具使用Mysql自带...
复制链接

扫一扫