前端开发指南

ver 0.2

概述：

本指南用于介绍前端开发基本方法及MDUI的使用。

基本方法：

一、前端类型介绍：

本项目类型为Javaweb，通过JSP文件实现动态的网页展示。

JSP（全称Java Server Pages）是由 Sun Microsystems 公司倡导和许多公司参与共同创建的一种使软件开发者可以响应客户端请求，而动态生成 HTML、XML 或其他格式文档的Web网页的技术标准。

JSP 技术是以 Java 语言作为脚本语言的，JSP 网页为整个服务器端的 Java 库单元提供了一个接口来服务于HTTP的应用程序。

JSP文件后缀名为 *.jsp 。

以上即为JSP介绍，简单来说，JSP可以理解为HTML+JAVA语言的混合体。在JSP文件内你既可以使用HTML语法，也可以使用JAVA语句。这使得原本静态的网页通过JAVA语句变成动态页面。

二、简单的JSP应用(下面我们来创建一个Demo示例)：

以下教程在前期你不需要掌握，因为需要搭建基础运行环境，如果想了解的同学也可以私聊我，可以单独跟你说。

该示例你需要使用Eclipse JAVA-EE企业版进行编写（你可能下载的是SE标准版）

  1. 新建JAVAWeb 项目，并配置好运行环境
    image-20201204211336529
    image-20201204211832480
  2. 新建JSP文件
    image-20201204212308374
    image-20201204212047720

  3. 在JSP文件内编写内容

    <%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>




网页标题


在JSP文件内你可以编写HTML内容
<%
out.println("在JSP文件内你可以使用JAVA语句");
int a = 1;
int b = 2;
out.print("甚至你可以像JAVA那样计算"+a+"+"+b+"的值为"+(a+b));
%>

COPY
  4. 运行到Server中，会自动打开浏览器
    image-20201204213520062

至此，你的第一个JSP实例就完成了！

三、作为本项目前端开发的你，需要做什么：

  1. 设计程序的UI界面
    （团队没有专门的UI设计岗位，故你可以发挥想象或
    参照其他程序设计属于你自己的UI界面）
  2. 引用MDUI样式编写HTML内容
  3. 与后端开发的同学及时沟通需要提供的接口
    （如正在编写学生列表页面，你需要告知后端开发同学
    你需要一个方法，提交数据表名返回数据表内容的方法）

四、作为本项目前端开发的你，需要会什么：

  1. 熟练应用HTML语言
    （当前课程进度已基本使你获得该技能）
  2. 会引入本项目使用的设计语言MDUI提供的CSS文件及JS脚本
    （MDUI开发文档：https://www.mdui.org/docs
    你不需要熟记里面的内容仅需了解MDUI能做什么）
  3. 掌握CSS基础内容
    （因项目内已引用MDUI，故你不需要特别钻研）
  4. 掌握JavaScript基础内容
    （该项在前期UI搭建方面暂不要求，但需要随时准备着）
  5. 掌握JAVA基础内容
    （该项在前期UI搭建方面暂不要求，但需要随时准备着）

以上内容均在《项目说明ver0.1.pdf》中有说明及教程链接。
做到以上几点，你将会在本项目的前端开发中开发自如。

五、在实际开发中的方法：

因部分同学不完全掌握大型项目的基本构架和不会搭建运行环境，故在前期的前端开发中，我们将使用HTML为文件格式进行开发，不会加入JSP语句。当你的某个HTML文件编写完成后请将文件发在小组群内，由会操作的同学将你的HTML文件合并到实际项目当中。

MDUI的使用说明：

以下教程将教你如何搭建一个符合本项目开发规范的基础HTML模板。

一、HTML文件的基本格式：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>页面标题</title>
    </head>
    <body>
        你的内容
    </body>
</html>COPY

二、MDUI的导入：

CSS 文件

将以下 <link> 标签添加到 <head> 标签中，并放置在所有其他样式文件之前。

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
/>COPY

JS 文件

将以下 <script> 标签添加到页面尾部，且在 </body> 标签之前。

<script
  src="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/js/mdui.min.js"
></script>COPY

MDUI 不依赖任何第三方库，引入了上述两个文件后，便能正常工作了。

所以，导入MDUI后，你将得到以下代码：

image-20201204221754543

三、网络布局的导入：

  1. 布局容器

    MDUI 需要为页面内容和网格布局系统包裹一个 .mdui-container 容器。MDUI提供了两个此作用的类。

    .mdui-container 类占据 92% – 96% 的屏幕宽度，且最大宽度 1280px。



   ...

COPY

.mdui-container-fluid 类将始终占据 100% 的屏幕宽度。



   ...

COPY

在本项目中，因程序需求，请使用.mdui-container-fluid 类

  1. 响应式网格

    （本项目PC/移动用户均包含，故使用响应式网络框架，不提供基础网络的内容。）

  • .mdui-col-xs-[1-12] 所有屏幕设备上都会生效，如手机、电脑等。
  • .mdui-col-sm-[1-12] 在小屏幕及以上的设备上生效，如平板电脑。
  • .mdui-col-md-[1-12] 在中等屏幕及以上的设备上生效，如笔记本电脑。
  • .mdui-col-lg-[1-12] 在大屏幕及以上的设备上生效，如台式电脑。
  • .mdui-col-xl-[1-12] 在特大屏幕设备上生效，如电视。

混用这些类，可以达到响应式的效果。
响应式断点如下：

| class | 区间 | 槽宽 |
| ----------------------- | ---------- | -------------------------- |
| .mdui-col-xs-[1-12] | > 0 | 16px（每列左右均有 8px） |
| .mdui-col-sm-[1-12] | > 600px | 16px（每列左右均有 8px） |
| .mdui-col-md-[1-12] | > 1024px | 16px（每列左右均有 8px） |
| .mdui-col-lg-[1-12] | > 1440px | 16px（每列左右均有 8px） |
| .mdui-col-xl-[1-12] | > 1920px | 16px（每列左右均有 8px） |

以上为MDUI中响应式网络的介绍。每个界面可能需要不同的设计以达成程序功能需求。完成以上设置，你将会获得很多个“盒子”，后续你可以在这些盒子内添加你的内容。类似这样：
image-20201204222741414

  1. （可选内容）

    定义行

    使用.mdui-row定义行，然后在行内定义列（参见2.）


  列
  COPY

## 列间距

默认在列之间会有 16px 的间距，只需在 .mdui-row 上添加类 .mdui-row-gapless 即可消除列间距。

## 列偏移

使用 .mdui-col-offset-xs-[1-12]、.mdui-col-offset-sm-[1-12] 、 .mdui-col-offset-md-[1-12] 、 .mdui-col-offset-lg-[1-12] 和 .mdui-col-offset-xl-[1-12] 可以将列向右偏移，类名中的数字表示向右偏移多少列。

## 嵌套列

通过在已有的列中再添加新的 .mdui-row 和 .mdui-col-[*] 元素实现列的嵌套。被嵌套的行所包含的列不能超过 12 个。

## 等分列

在 .mdui-row-xs-[1-12] 中包含若干个含 .mdui-col 类的元素，这些元素会被等分。例如：.mdui-row-xs-5 中的每一个 .mdui-col 元素均占据 20% 的宽度。

  1. 更多内容请参见官方文档：网格布局 – MDUI 开发文档, Material Design 前端框架
  2. 完成以上你将会得到一个页面的基本框架！就像这样：
    image-20201204223939333
    在电脑模式下：
    image-20201204224030356
    在手机模式下：
    image-20201204224557724
    响应式网络的GIF的演示（PDF版不支持动图，请跳转至网页版）：
    4

四、添加主题色：

目前项目的主题为class="mdui-theme-primary-indigo mdui-theme-accent-pink"
请在标签内加入，就像这样：

<body class="mdui-theme-primary-indigo mdui-theme-accent-pink">
</body>COPY

五、在你刚刚创建的“盒子”内添加你的内容

你的内容可以是HTML支持的所有内容。用于对用户的输出。至关重要，请务必精心开发~

本项目开发规范需要注意的是：强烈建议你将内容分块写入“卡片”中。详见MDUI卡片样式的介绍：卡片 – MDUI 开发文档, Material Design 前端框架

内容的MDUI样式(如按钮、输入框等)在官方文档内有详细说明请查看：按钮 – MDUI 开发文档, Material Design 前端框架

六、其他：

本项目采用模块化开发，应用栏与抽屉菜单已经编写完毕，请勿重复编写。需要添加或修改内容请在群内联系项目负责人。

最后祝前端开发的同学们生活愉快、开发顺利~

Last modification：August 26, 2021
© Allow specification reprint
如果觉得我的文章对你有用，请随意赞赏