学校信息维护信息的前期准备（一）-CSDN博客

本文链接：https://blog.csdn.net/baidu_39378193/article/details/117700957

学校信息维护信息的前期准备（一）

前言：本次开发采用Layui和bootstrap4.5两套框架结合开发，学校信息管理系统是一个属于后端管理的基本模板，包含【新增】【修改】【删除】【模糊搜索】【条件筛选】【导入文件】【导出文件】等内容，结合了常用的开发功能

开发工具：VS2019、SQL Sever、PD设计、思维导图、Typora做笔记、Snipaste截图工具

默认已有一定的开发经验

数据库设计请查看另外一篇【学校信息管理系统数据库模型设计】
一、创建项目
1.1、新建项目
1.2、创建存放框架的文件【Content】
1.3、将框架文件复制到【Content】文件夹中（如果文件不显示，找到项目顶部右上角，显示所有文件，在选中框架文件，右键包含在项目中，点击关闭显示所有）
二、框架模板的搭建
1.1、在Controllers右键添加Main控制器
1.2、添加控制器中的index视图（不使用布局模板）
1.3、复制Layui的【管理系统界面布局】代码到视图中
注意要引入放在Content中的框架文件夹，不然不会有样式效果

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <!--先设置图标-->
    <link href="#" rel="icon" />
    <!--Layui框架样式-->
    <link href="~/Content/layui-v2.6.4/layui/css/layui.css" rel="stylesheet" />
    <!--bootstrap4框架样式-->
    <link href="~/Content/bootstrap4.5/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">School</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                </li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">学校信息维护</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">专业信息维护</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">年级信息维护</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="javascript:;">班级信息维护</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">数据新增</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;">导入数据</a></dd>
                        <dd><a href="javascript:;">导出数据</a></dd>
                        <dd><a href="javascript:;">menu 33</a></dd>
                    </dl>
                </li>
            </ul>
            <!--右侧登录模块-->
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:;">
                        <img src="" class="layui-nav-img">
                        登陆/注册
                    </a>
                </li>
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>
        <!--左侧导航模块-->
        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="test">
                    <!--学校信息系统维护-->
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">学校信息系统维护</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">专业信息维护</a></dd>
                            <dd><a href="javascript:;">年级信息维护</a></dd>
                            <dd><a href="javascript:;">班级信息维护</a></dd>
                            <dd><a href="javascript:;">学生信息维护</a></dd>
                        </dl>
                    </li>
                    <!--专业信息系统维护-->
                    <li class="layui-nav-item">
                        <a href="javascript:;">专业信息系统维护</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">专业一</a></dd>
                            <dd><a href="javascript:;">专业二</a></dd>
                            <dd><a href="javascript:;">专业三</a></dd>
                        </dl>
                    </li>
                    <!--年级信息维护-->
                    <li class="layui-nav-item">
                        <a href="javascript:;">年级信息系统维护</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">年级一</a></dd>
                            <dd><a href="javascript:;">年级二</a></dd>
                            <dd><a href="javascript:;">年级三</a></dd>
                        </dl>
                    </li>
                    <!--班级信息维护信息维护-->
                    <li class="layui-nav-item">
                        <a href="javascript:;">班级信息系统维护</a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">班级一</a></dd>
                            <dd><a href="javascript:;">班级二</a></dd>
                            <dd><a href="javascript:;">班级三</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>
        <!--内嵌套网页内容-->
        <iframe class="layui-body" src="" style="width: 89%;height: 100%;">
        </iframe>
        <div class="layui-footer">
            <!-- 底部固定区域 -->
            底部固定区域
        </div>
    </div>
    <!--JQuery文件必须放在前面，有依赖关系-->
    <script src="~/Content/bootstrap4.5/js/jquery-3.2.1.min.js"></script>
    <!--Layui的js-->
    <script src="~/Content/layui-v2.6.4/layui/layui.js"></script>
    <!--layer有依赖jq关系-->
    <script src="~/Content/layer-v3.3.0/layer/layer.js"></script>
    <!--bootstrap4模态框插件，有依赖jq关系-->
    <script src="~/Content/bootstrap4.5/js/bootstrap.min.js"></script>
</body>
</html>

1.4、修改的管理模板效果如下
在这里插入图片描述
三、学校管理系统数据库导入
1.1、PD创建表，请查看《PowerDesigner快速的创建出数据库》
数据库设计，请查看《学校信息管理系统数据库模型设计》
1.2、新增数据库
1.3、PD表的导入
选择刚创建的数据库，顶部菜单打开文件
在这里插入图片描述
打开PD保存的表
上面两个是数据库的文件
选择第三个

页面会出现很多的代码，不必理会