1.还是以Vue实现学院官网为例

文章地址：http://t.csdnimg.cn/jrJhE
Vue 实现学院官网“菜单”当时是使用静态数据，也就是在页面上写死了的。
今天我们需要将“菜单”数据在数据库中进行维护，我们使用的是Mysql数据库

2.数据库的设计

我们的菜单分为一级菜单和二级菜单，一个一级菜单对应多个二级菜单，一对多的关系，这个时候，很多学者认为需要两张表来维护菜单之间的关系，其实不然，一张表就可以。

我们从菜单静态数据可以看到，无论是一级菜单还是二级菜单，核心字段都是一样的。
故而，可以使用一张表保存菜单数据，那么一张表如何维护一级菜单和二级菜单的关系呢，
使用自关联。添加一个父id字段（fid）。

设计后的表格数据应如下
fid为0的为一级菜单，二级菜单的fid 对应一级菜单的id(自关联)

3.数据库实现

-- 创建数据库并指定字符集
create database wenyuan character set =utf8;

-- 选择数据库
use wenyuan;

-- 创建菜单表
create table caidan(
    id int primary key auto_increment,
    name varchar(32) not null,
    url varchar(100),
    fid int);
    
-- 向表中添加一级菜单数据
insert into caidan values(default,"首页","#",0);
insert into caidan values(default,"学校概况","#",0);
insert into caidan values(default,"机构设置","#",0);
insert into caidan values(default,"招生就业","#",0);
insert into caidan values(default,"专业建设","#",0);
insert into caidan values(default,"校园文化","#",0);
insert into caidan values(default,"信息公开","#",0);
insert into caidan values(default,"数字校园","#",0);

-- 向表中添加对应的二级菜单数据
insert into caidan values(default,"学校简介","#",2);
insert into caidan values(default,"现任领导","#",2);
insert into caidan values(default,"历史沿革","#",2);
insert into caidan values(default,"党群机构","#",3);
insert into caidan values(default,"行政机构","#",3);
insert into caidan values(default,"招生网","#",4);
insert into caidan values(default,"就业网","#",4);
......

4.查询数据库

4.1 查询所有的菜单

 select * from caidan;

4.2 查询所有的一级菜单

select * from caidan where fid = 0;

4.3查询“学校概况”下的二级菜单

select * from caidan where fid = (select id from caidan where name = "学校概况");