常用开发框架以及组件工具介绍

最新推荐文章于 2024-04-18 09:51:27 发布

路遥石

最新推荐文章于 2024-04-18 09:51:27 发布

阅读量1.5k

点赞数

分类专栏：汇总总结

本文链接：https://blog.csdn.net/Stone173/article/details/106330576

版权

汇总总结专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、前端框架或组件
1.1 Bootstrap 前端框架
1.1.1介绍及用途：
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目，简单来说就是前端的布局工具使用该工具会快速开发页面并且排版布局并且大部分已经优化为自适应布局了做到了开箱即用。
1.1.2下载地址：
链接: https://pan.baidu.com/s/1Z3DXVmhE1_6qBzhgRqxH_g 提取码: 5gek
1.1.3简单示例（组件）：
首先看组件使用示例地址：https://v3.bootcss.com/css/ （css组件介绍）
其中有介绍使用方法
在这里插入图片描述
1.1.4如何使用
第一步导入css：
在head头标签中添加

然后通过上边所提“组件使用示例”网址的示例进行使用从而减少许多为布局浪费的时间极大增加前端页面添加效率。

1.2 Element UI 组件（网站快速成型工具）
1.2.1介绍及用途：
Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。
1.2.2下载以及引用地址
组件文档参考地址：
https://element.faas.ele.me/#/zh-CN/component/installation
1.2.3简单示例（组件）
在这里插入图片描述

1.2.4如何使用
第一步导入css：
在head头标签中添加

页面demo

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<#include "/WEB-INF/ckfw/head_ckfw.ftl"/>

        <div class="row" style="margin:5px;">
           <div class="col-md-4" >
              <span > 核查用途：</span>
              <input class="form-control" style="width: 60%;display: inline-block" id="checkUse" name="dto.checkUse"   value="${dto.checkUse!('')}"  maxlength='50'/>
           </div>
           <!--                  <div class="col-md-2 col-sm-3" style="width: 130px;">-->
           <!--                     -->
           <!--                  </div>-->

           <div class="col-md-4">
              <span > 查询单位：</span>
              <input  class="form-control" style="width: 60%;display: inline-block" id="requiredept" name="dto.requiredept"   value="${dto.requiredept!('')}"  maxlength='50'/>
           </div>
           <!--                  <div class="col-md-2 col-sm-3" style="width: 130px;">-->
           <!--                     -->
           <!--                  </div>-->

           <div class="col-md-4"  >
              <span >查询时间：</span>
              <input type="text" class="form-control" name="dto.stime" id="stime" readonly="readonly" class="Wdate"
                    onclick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,skin:'whyGreen',minDate:'#F{$dp.$D(\'stime\')}',maxDate:'%y-%M-%d'})"
                    style="width:100px;display: inline-block " value="${dto.stime!('')}"/>
              <span >至：</span>
              <input type="text" class="form-control" name="dto.etime" id="etime" readonly="readonly" class="Wdate"
                    onclick="WdatePicker({dateFmt:'yyyy-MM-dd',readOnly:true,skin:'whyGreen',minDate:'#F{$dp.$D(\'stime\')}',maxDate:'%y-%M-%d'})"
                    style="width:100px;display: inline-block " value="${dto.etime!('')}"/>
           </div>





        </div>
        <div class="row" style="margin:5px;">
           <div class="col-md-4" >
              <span> 使用单位：</span>
              <input  class="form-control" style="width: 60%;display: inline-block" id="useDept" name="dto.useDept"   value="${dto.useDept!('')}"  maxlength='50'/>
           </div>

           <div class="col-md-1" >
              <button style="margin-left:50px" type="button" onclick="query();"   class="btn btn-primary">查询</button>
           </div>
        </div>

     <DIV  id="jvFormDIV">
        <table  class="table table-bordered" >
           <thead>
           <tr  >
              <td align="center" bgcolor="#E8E8E8" nowrap="nowrap">查询单位</td>
              <!-- <TD>查询需求名称</TD> -->
              <td align="center" bgcolor="#E8E8E8" nowrap="nowrap">核查用途</td>
              <td align="center" bgcolor="#E8E8E8" nowrap="nowrap">查询时间</td>
              <td align="center" bgcolor="#E8E8E8" nowrap="nowrap">审查状态</td>
              <td align="center" bgcolor="#E8E8E8" nowrap="nowrap">操作</td>
           </tr>
           </thead>
                          <!-- 有数据 开始 -->
                          <#if singleSearchpagination.list?? && singleSearchpagination.list?size gt 0>
                             <!-- 列表内容 开始 -->
                             <#list singleSearchpagination.list as entCheck >
                                <tr>
                                   <td  align="center"  style="font-size: 13px">
                                      &nbsp;
                                      <#assign tdContent=entCheck.requiredept?default('')>
                                         <a class="a_tip" onmouseover="Tip('${tdContent}',SHADOW,true,TITLE, '', PADDING,6)" onmouseout="UnTip()">
                                            <@cms.limit tdContent!('') 9/>
                                         </a>

                                   </td>
                                   <td  align="center"  style="font-size: 13px">
                                      &nbsp;
                                      <#assign tdContent=entCheck.checkUse?default('')>
                                         <a class="a_tip" onmouseover="Tip('${tdContent}',SHADOW,true,TITLE, '', PADDING,6)" onmouseout="UnTip()">
                                            <@cms.limit tdContent!('') 9/>
                                         </a>

                                   </td>
                                   <td align="center"  style="font-size: 13px">
                                      ${entCheck.createtime?string('yyyy-MM-dd')}
                                   </td>
                                   <td align="center"  style="font-size: 13px">
                                      <#if entCheck.GENERATESTATE=="0">
                                         正在审查
                                      <#elseif entCheck.GENERATESTATE=="1">
                                         <#if entCheck.AUDIT_STATE=="e">
                                            待审核
                                         <#elseif entCheck.AUDIT_STATE == 'Y'>
                                            审核通过
                                         <#else>
                                            审核未通过
                                         </#if>
                                      <#elseif entCheck.GENERATESTATE=="2">
                                         数量超出
                                      <#else>
                                         生成出错
                                      </#if>
                                   </td>
                                   <td align="center"  style="font-size: 13px">
                                         <#if entCheck.GENERATESTATE=="1">
                                            <a target="_self" style="margin-left:0"  href="javascript:commitForm('viewConciseEntCheck','${entCheck.cretno!('')}',false,false);">查看</a>
                                            <a target="_self" style="margin-left:0"  href="javascript:download('${entCheck.cretno!('')}')">下载</a>
                                         <#else>
                                            <#if entCheck.GENERATESTATE=="2">
                                               数量超出
                                            <#else>
                                               生成出错
                                            </#if>
                                         </#if>
                                   </td>
                                </tr>
                             </#list>
                             <!-- 列表内容 结束 -->
                             <#else>
                                <tr>
                                   <td align="center" colspan="5"><font color="red">无相关数据！</font></td>
                                </tr>
                          </#if>

                       </TBODY>
                    </TABLE>
                    <@cms.page_ckfw  singleSearchpagination 'tableForm'/>
     </DIV>
  </FORM>

1.2.5页面显示效果

在这里插入图片描述

二、后端框架或工具介绍
2.1 Hutool工具
2.1.1 介绍及用途
Hutool是一个Java工具包，也只是一个工具包，它帮助我们简化每一行代码，减少每一个方法，让Java语言也可以“甜甜的”。Hutool最初是我项目中“util”包的一个整理，后来慢慢积累并加入更多非业务相关功能，并广泛学习其它开源项目精髓，经过自己整理修改，最终形成丰富的开源工具集。
Web开发
与其它框架无耦合
高度可替换
2.1.2下载或安装地址
https://www.hutool.cn/docs/#/
2.1.3简单示例
在这里插入图片描述

2.1.4 如何使用
可参考所给地址指导使用方法

路遥石

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
常用开发框架以及组件工具介绍

一、前端框架或组件1.1 Bootstrap 前端框架1.1.1介绍及用途：Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目，简单来说就是前端的布局工具使用该工具会快速开发页面并且排版布局并且大部分已经优化为自适应布局了做到了开箱即用。1.1.2下载地址：链接: https://pan.baidu.com/s/1Z3DXVmhE1_6qBzhgRqxH_g 提取码: 5gek1.1.3简单示例（组件）：首先看组件使用示例地址：
复制链接

扫一扫