上一篇文章中，我们已经将基本的SSM环境搭配好了，今天我们进行Web前端界面的搭建

基于SpringFramework + MyBatis + SpringMVC三大框架下的Maven项目-CSDN博客

目录

前言

一、我们需要清楚自己需要搭建的界面

二、进行页面的搭建

三、将搭建好的HTML导入IDEA项目中

总结

前言

工具选择：

        HBuilder X

        HTML框架：ZUI，LayUI，easyUI等，各位可以自行选择

以下是官网链接，各位可以自行查阅文档进行使用

官方连接：

        HBuilderX：Windows - HBuilderX 文档 (dcloud.net.cn)

        ZUI：ZUI - 开源HTML5跨屏框架 (openzui.com)

        LayUI：开始使用 - Layui 文档

        EasyUI：EasyUI中文站 - EasyUI中文网-EasyUI开发文档 (jeasyui.cn)

        jQueryUI：jQuery UI

工具选择完成后我们就可以进行前端的界面搭建了

我们首先进行管理端界面的开发：

一、我们需要清楚自己需要搭建的界面

        既然是管理端，就是管理员使用，那么我们就只需要一个登录界面与一个主页面

        登录界面用于管理员的登录

        主页面用于管理员去实现各项业务

二、进行页面的搭建

        1、打开HBuilder，选择新建一个基本的HTML项目

        2、进行框架导入，我这里选择使用ZUI进行快捷开发，打开官网可以查看使用方式

                1）可以选择使用cdn方式导入

<code><!-- ZUI cdn方式 -->

<!-- ZUI 标准版压缩后的 CSS 文件 -->

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/zui/1.10.0/css/zui.min.css">code>

<!-- ZUI cdn方式 -->

<!-- ZUI Javascript 依赖 jQuery -->

<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.10.0/lib/jquery/jquery.js"></script>code>

<!-- ZUI 标准版压缩后的 JavaScript 文件 -->

<script src="//cdnjs.cloudflare.com/ajax/libs/zui/1.10.0/js/zui.min.js"></script>code>

                2）也可以选择下载到本地后导入使用

        3、进行登录界面的搭建，ZUI的输入框组件中选择自己喜欢的样式直接复制

        4、复制完成后我们选择菜单栏运行-运行到浏览器查看效果

        5、后续根据组件去设计自己想要的样子，这里我添加一点点细节

<code><!-- 登录界面 -->

<div class="panel" id="loginPanel">code>

<div class="panel-body">code>

<!-- 输入框面板 -->

<div class="panel" id="inputPanel">code>

<div class="panel-heading" style="background-color: skyblue;">code>

管理员登录

</div>

<div class="panel-body">code>

<!-- 用户名 -->

<div class="input-control has-label-left">code>

<input id="inputAccountExample2" type="text" class="form-control" placeholder="">code>

<label for="inputAccountExample2" class="input-control-label-left">用户名:</label>code>

</div>

<!-- 密码 -->

<div class="input-control has-label-left" style="margin-top: 30px;">code>

<input id="inputPasswordExample2" type="password" class="form-control" placeholder="">code>

<label for="inputPasswordExample2" class="input-control-label-left">密码:</label>code>

</div>

</div>

</div>

<!-- END 输入框面板 -->

<!-- 登录按钮面板 -->

<div class="panel" id="buttonPanel">code>

<div class="panel-body">code>

<button class="btn btn-primary" type="button" id="loginBtn">登录</button>code>

</div>

</div>

<!-- END 登录按钮面板 -->

</div>

</div>

<!-- END 登录界面 -->

*{

font-family: '楷体';

}

body {

margin: 0 auto;

background-color: wheat;

}

/* 所有面板设置 */

.panel {

background-color: antiquewhite;

padding: 30px;

}

/* 登录面板设置 */

#loginPanel {

border-radius: 20px; /* 圆角 */

width: 50%;

height: 60%;

margin-top: 7%;

margin-left: 25%;

}

/* 面板头部 */

.panel-heading {

display: flex; /* flex布局 */

justify-content: center; /* 水平居中 */

align-items: center; /* 垂直居中 */

height: 60px;

font-size: 30px;

font-weight: bold;

}

/* 输入框面板 */

#inputPanel {

height: 80%;

}

/* 输入框设置 */

.input-control-label-left {

display: flex;

justify-content: center;

padding: 5px;

font-size: 15px;

}

#inputAccountExample2, #inputPasswordExample2 {

height: 40px;

background-color: whitesmoke;

font-size: 20px;

}

/* 按钮面板 */

#buttonPanel {

height: 20%;

}

#loginBtn {

width: 100%;

background-color: skyblue;

font-size: 20px;

}

         效果图：

        6、接着进行主界面的搭建，这个就由大家自行发挥，这里我放置一下我的样式

至此，我们的页面搭建就告一段落了，之后就可以去之前搭建的基于SSM框架的Maven项目中去进行业务的实现

三、将搭建好的HTML导入IDEA项目中