100.后台系统-公众号菜单管理前端和测试原创

各位同学大家好，咱们继续来完成公众号菜单管理功能的开发，刚才呢，咱们完成了相关的接口，这些接口呢，我们应该是都做到了，其实接口中呢，有一个接口我们其实可以不需要写，就是这个接口获取ton，这个接口呢，在这个微信提供到工具中给咱们都做到了，比如说大家看啊，我们调这个方法，这次点微信service get me service这里边已经实现了，先得到，然后再进行单同步，所以在这接口其实这个可以不消我这么写，各位更清楚它的底层过程，他在里边把这过程给我们应该都封装好了，咱们直接调就可以了。那这接口完成之后，下面呢，咱们开始整个前端，把前端最终做个测试，那再来写一下啊，首先第一部分在咱们的管理员系统中，我们先建一个路由，那这路由我从里边咱们就直接复制一下。

咱们找一下啊，在前端里边找到路由的部分，在这里边的S的子里，我们在这位置加上咱们这个路由，然后这个路由就是菜单管理啊，咱更明确点，我就叫公众号菜单管理，在里边加上咱们的页面，我把页面在这位置做创建。就这位置啊，咱们创建一下。然后页面呢，我们看一下啊，我的页面叫WeChat，那我在里边建个文件夹，咱们叫这个。Wecht，然后在CHT里边再建一个叫menu，我在里边做过创建。这个文件夹叫menu，然后menu里边建个页面list.vouee我来在里边创建出来。List点。所以大家看啊，现在这个页面就完成创建这路由和页面部分我们就完成了，完成之后我们继续往下来做大，看下面部分，那我们来看到课件中啊，下面呢，咱怎么做。

在API中。把咱的接口在里边定义出来，因为咱要要用接口进行实现，那我在API中呢，先建个文件夹，就要这个VCHT在VAR里边建一个文件叫menu.js。菜单的这次文件把接口部分在里边咱们定义出来，我直接复制一下，因为接口的路径我应该都是从课件中复制的，跟那路径应该是基本上都是一致的，那就直接复制一下，如果不一致，后面档案袋慢慢进行修改，应该是都一样的。所以现在啊，这部分也完成了咱们的接口定义，然后第义之后呢，下面我们就是在页面中写咱们的具体内容，那咱找到页面啊，Views里边的we chart menu里边的list.voe也就是咱们里边的这个页面。

页面中加上我们的具体内容，我把内容复制过来，然后咱们看一下内容啊，首先把路径咱先改一下，然后完成里边的具体实现，咱们找一下啊，在这路径中呢，这里边有一个叫live，应该是在咱课程部分，这个功能目前还没有写到，在这部分我先给它注掉，后面写到再再打开，因为里边有一些就是其他的部分啊，在这部分我们先给它注掉，后面咱再打开。然后给桃先注意一下啊，这部分。先注掉，然后咱们再往下来看啊，我们看里边这个具体内容或者具体代码，首先引入JS文件，有这个menu部分，还有这个分类部分，下面有它的基本的一些值，包括得到数据等等啊，这里边有些部分后面会用到。

然后在里边就是调用我们的接口，实现它的具体功能。包括啊，这部分没有用到的，我先暂时住掉，后面用到咱再说，这到底是什么含义，先拿掉啊。包括里边这些内容，然后这是同步的部分，所以目前这个页面部分我们就完成了复制，然后复制之后下面呢，咱把这个代码包括项目都启用起来，咱们做个测试，看一下目前效果怎么样。然后测试我说明啊，咱们需要两个地方，第一个在咱们这个就是后台管理系统中，我们做个测试，然后第二个你需要在你的本地或者在你手机上。手机上用公众号这些测试，如果在电脑中你需要装一个这个电脑的PC端，然后在里边之前让各位关注过我这个公众号的测试号，就是这个我应该关注过了，各位应该按照我之前说到关注一下，然后在里边这个位置我们可以进行测试，所以咱们要么用手机测试，要么用这个PC端测试，都可以做到，我一会儿通过PC端测试，因为这样的话各位更容易看到效果，那下面啊，咱来试一下这个效果。

我们看一下啊，现在接口部分都启动了，目前一共启动这么多接口，1234566个接口，就六个微服啊都启动起来了，然后前端也启动了，那咱们看一下最终结果，我先刷新，咱们试一下啊，你看这里啊，公众号菜单管理，我把这个点开，第一个功能就是它的列表功能，这是我数据库中之前的数据，目前有列表。这个功能是有了，然后在里边我们看一下啊，比如现在你看啊，里边有个添加，当我点添加，你可以加内容，包括你可以加异义菜单，然后名称包括等等这个内容啊，这个我们可以进行实现，就是你选择你是那个异义菜单，然后这里边加上它的其他的名字啊，这里边我之前加过了，咱用它里边测试可以了，包括你看里边这个数据。

然后这些呢，你可以进行修改啊，比如咱们点一个我可以改里面内容，包括这次选择个人的，然后你可以改他的名字等等这个内容，另外可以删除，就是最基本的增删改功能，然后这个之后呢，我们看啊，在里边我们可以点一个叫同步菜单，包括删除菜单，当你点同步之后，这个菜单内容在咱们的公众号上是可以看到的，那我现在我点个同步，然后在公众号中我们看一下这个菜单，现在我点一下同步。然后点确定。我们看啊，这里边提示我们成功，咱们来到公众号中看一下，我把公众号打开，点击发消息，大家看下面这个位置啊，你看啊直播课程个人。对照这看一下，一菜单是直播课程个人，然后在里边有他的二级菜单，包括咱们看啊，我把这个再点开你看啊，直播里边这么多课程里边这两个个人里边有这么多，这样的话就完成了菜单这个同步，所以现在这功能我们就初步完成了。

当然这里边呢，可能会有这么一个问题，比如说现在我们在里边啊，咱随便改一个值，比如说改这一个值，改成什么什么一，或者改成别的值，那你再点确定，这个时候呢，我们这里边做了修改，然后我们进行同步，同步之后呢，你可能在公众号中呢，看到的不是你马上改的内容，它可能需要点时间，如果你想快速看到，你可以这么来做，你把公众号先给他先怎么做，取消关注，然后再关注，再重新打开，能看到他可能不是实时看到你改的内容，他可能会等一会儿，或者说你把公众号先取消，观众在关注，然后才能看到，可能会有这么一个问题，但是总之功能是这样的，所以咱们现在就完成了公众号菜单的管理功能，包括管理员里边能添加、修改、删除，最终同步在微信公众号中能看到我们最终的菜单的信息，现在这个部分我们就完成了。