摘要：常用的框架之前在寫(xiě)自己的個(gè)人網(wǎng)站的時(shí)候，由于自己前端不是特別好，于是就去找相關(guān)的框架來(lái)搭建頁(yè)面了。找到以下這么一篇文章列出了很多常用的框架本篇主要是記錄我用過(guò)的框架，并把之前寫(xiě)過(guò)的筆記進(jìn)行整合一下。

之前在寫(xiě)自己的個(gè)人網(wǎng)站的時(shí)候，由于自己Web前端不是特別好，于是就去找相關(guān)的CSS框架來(lái)搭建頁(yè)面了。

找到以下這么一篇文章(列出了很多常用的CSS框架)：

http://w3schools.wang/report/top-UI-open-source-framework-summary.html

Bootstrap

Semantic-ui

Foundation

Materialize

Material-ui

Phantomjs

Pure

Flat-ui

Jquery-ui

React-bootstrap

Uikit

Metro-ui-css

Iview

Layui

Mui

Frozenui

AlloyUI

W3.CSS

本篇主要是記錄我用過(guò)的CSS框架，并把之前寫(xiě)過(guò)的筆記進(jìn)行整合一下。當(dāng)然是不能面面俱到的...

其實(shí)這個(gè)已經(jīng)是比較早的了，只是之前學(xué)過(guò)了一點(diǎn)，做過(guò)筆記才拿到這里來(lái)。畢竟可能以后還是會(huì)用到的?

我們可以看官方對(duì)easyUI的介紹：

easyUI就是一個(gè)在Jquery的基礎(chǔ)上封裝了一些組件....我們?cè)诰帉?xiě)頁(yè)面的時(shí)候，就可以直接使用這些組件...非常方便...easyUI多用于在后臺(tái)的頁(yè)面上...

在學(xué)習(xí)easyUI之前，我已經(jīng)學(xué)過(guò)了bootstrap這么一個(gè)前端的框架了...因此學(xué)習(xí)easyUI并不困難....大多情況下，我們只要查詢文檔就可以找到對(duì)應(yīng)的答案了。

首先我們得去下載easyUI的資料...

然后在我們把對(duì)應(yīng)的文件導(dǎo)入進(jìn)去項(xiàng)目中，如下圖：

在html文件的body標(biāo)簽內(nèi)，寫(xiě)上如下的代碼：

    
    
    
    

    
        這是我的第一個(gè)EasyUI程序
        
    

效果：

關(guān)于樣式的屬性我們都會(huì)在data-options這個(gè)屬性上設(shè)置的。

除了指定 class="easyui-panel"這樣的方式來(lái)使用easyUI的組件，我們還可以使用javascript的方式來(lái)動(dòng)態(tài)生成...代碼如下所示：

    
panel content.

在使用easyUI的組件的時(shí)候，默認(rèn)的是英文格式的。如果我們想要變成是中文格式，可以到以下的目錄找到對(duì)應(yīng)的JS，在項(xiàng)目中導(dǎo)入進(jìn)去就行了！

layout能夠幫助我們布局..

當(dāng)然了，我們的頁(yè)面不可能只有5個(gè)模塊，可能還有很多子模塊。我們是可以嵌套的。如以下的代碼：

    
    
   
        
        
        
   
               北京  
        
   
        
   
            上海    
        
   
        
   
            廣州    
        
 
        
   
            深圳    
        
 
         
    
 
    
    
    

    增加部門(mén)
 
    查詢部門(mén)
 
    修改部門(mén)
 
    刪除部門(mén)

    
    
    
    
    
    

    
    
    
   
        
        
        
   
            tab1

        
   
        
   
            tab2    
        
   
        
   
            tab3    
        
   
    
  
    

    
    姓名：

    
    
    
    
    郵箱：


    

    密碼：


    
    
    

    
    
    
    
    城市：
      
    
    
    
    

我們的json需要的格式也可以在文檔中找到，我們只要對(duì)照著來(lái)寫(xiě)就行了。

[
  {    
    "id":1,    
    "name":"北京"   
  },
  {    
    "id":2,    
    "name":"上海"   
  },
  {    
    "id":3,    
    "name":"廣州"   
  },
  {    
    "id":4,    
    "name":"深圳"
  },
  {    
    "id":5,    
    "name":"武漢"   
  }
]  

    
    入職時(shí)間：
    
    
    
    

    商品數(shù)量:
     
    
    

    你一共購(gòu)買(mǎi)了1個(gè)商品
        
        
    
    
    
    

    

        身高：
        

        

    
    
        
    

既然我們用到了JSON，那么我們可以在手冊(cè)看它需要的格式是什么：

[
  {    
    "id":1,    
    "text":"廣東",
    "state":"closed",
    "children":[
    {
       "id":11,
       "text":"廣州"    ,
           "state":"closed",
           "children":[
          {
         "id":111,    
                 "text":"天河"
          },    
          {
         "id":112,    
                 "text":"越秀"
          }    
       ]
    },
    {
       "id":12,
       "text":"深圳"        
    }
    ]
  },    
  {    
    "id":2,    
    "text":"湖南"
  } 
] 

<%@ page language="java" pageEncoding="UTF-8"%>


  
    
    
    
    
    
  
      
    
    
    
    
  
  
    
        
        

            
            
            

                jQuery-EasyUI組件            
            
   
            
            
            

                XX公司版權(quán)所有            
            
   
            
            
            
   
            
            
            

                
                
   
                    
   
                           
                        增加部門(mén)
 
                        查詢部門(mén)
 
                        修改部門(mén)
 
                        刪除部門(mén)
  
                    
   
                    
   
                                        
                           
   
                           

                                增加人事
                           
                           

                                   查詢?nèi)耸?/span>
                                   

                                       

                                           分頁(yè)查詢?nèi)耸?/span>
                                           

                                               

                                                   模糊分頁(yè)查詢?nèi)耸?/span>
                                               
                                               

                                                   精確分頁(yè)查詢?nèi)耸?/span>
                                               
                                           
                                       
                                       

                                           查詢所有人事
                                       
                                   
                           
                        
                    
   
                    
   
                        客戶管理    
                    
 
                    
   
                        權(quán)限管理    
                    
                    
   
                        報(bào)表管理    
                    
 
                    
   
                        幫助    
                    
  
                
            
   

            
            

                
                
   
                
            
   
            
        

        
        
        

  

效果：

相信我們的分頁(yè)已經(jīng)做得不少了，這次我們使用easyUI+Oracle+jdbc來(lái)做一個(gè)分頁(yè)...【之前大都都用Mysql，這次用Oracle】

DateGrid會(huì)異步以POST方式向服務(wù)器傳入二個(gè)參數(shù)：page和rows二個(gè)參數(shù)，服務(wù)端需要哪個(gè)，就接收哪個(gè)參數(shù)

page：需要顯示的頁(yè)號(hào)

rows：需要獲取多少條記錄

package zhongfucheng.entity;

import java.io.Serializable;
import java.util.Date;

/**
 * Created by ozc on 2017/7/17.
 */
public class Emp implements Serializable {

    private Integer empno;
    private String ename;
    private String job;
    private Integer mgr;
    private Date hiredate;
    private Integer sal;
    private Integer comm;
    private Integer deptno;

    public Emp() {
    }

    public Emp(Integer empno, String ename, String job, Integer mgr, Date hiredate, Integer sal, Integer comm, Integer deptno) {
        this.empno = empno;
        this.ename = ename;
        this.job = job;
        this.mgr = mgr;
        this.hiredate = hiredate;
        this.sal = sal;
        this.comm = comm;
        this.deptno = deptno;
    }

    public Integer getEmpno() {
        return empno;
    }

    public void setEmpno(Integer empno) {
        this.empno = empno;
    }

    public String getEname() {
        return ename;
    }

    public void setEname(String ename) {
        this.ename = ename;
    }

    public String getJob() {
        return job;
    }

    public void setJob(String job) {
        this.job = job;
    }

    public Integer getMgr() {
        return mgr;
    }

    public void setMgr(Integer mgr) {
        this.mgr = mgr;
    }

    public Date getHiredate() {
        return hiredate;
    }

    public void setHiredate(Date hiredate) {
        this.hiredate = hiredate;
    }

    public Integer getSal() {
        return sal;
    }

    public void setSal(Integer sal) {
        this.sal = sal;
    }

    public Integer getComm() {
        return comm;
    }

    public void setComm(Integer comm) {
        this.comm = comm;
    }

    public Integer getDeptno() {
        return deptno;
    }

    public void setDeptno(Integer deptno) {
        this.deptno = deptno;
    }
}

使用Oracle的語(yǔ)法來(lái)實(shí)現(xiàn)分頁(yè)...!

public class EmpDao {
    public  int getPageRecord() throws SQLException {
        QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());
        String sql = "SELECT COUNT(EMPNO) FROM EMP";
        String count = queryRunner.query(sql, new ScalarHandler()).toString();
        return Integer.parseInt(count);
    }
    public  List getList(int start, int end) throws SQLException {
        QueryRunner queryRunner = new QueryRunner(JDBCUtils.getDataSource());

        String sql = "SELECT *FROM (SELECT rownum rownumid,emp.* FROM emp WHERE rownum <= ?) xx WHERE xx.rownumid> ?";

        List list = (List) queryRunner.query(sql, new Object[]{end, start}, new BeanListHandler(Emp.class));
        return list;
    }
}

得到對(duì)應(yīng)的分頁(yè)數(shù)據(jù)，封裝到分頁(yè)對(duì)象中！

public class EmpService {


    private EmpDao empDao = new EmpDao();
    public Page getPageResult(int currentPage) throws Exception {

        Page page = new Page(currentPage, empDao.getPageRecord());
        List empList = empDao.getList(page.getStartIndex(), page.getLinesize() * currentPage);
        page.setList(empList);
        return page;
    }

}

接收page參數(shù)，如果為空，就設(shè)置為1

把得到的分頁(yè)數(shù)據(jù)封裝成datagrid要的格式，返回給瀏覽器！

    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        try {
            //調(diào)用service
            EmpService empService = new EmpService();

            //設(shè)置編號(hào)方式
            request.setCharacterEncoding("UTF-8");

        /*獲取客戶端傳遞進(jìn)來(lái)的參數(shù)，easyUI使用的是page參數(shù)*/
            String pageStart = request.getParameter("page");

            if (pageStart == null || pageStart.length() == 0) {
                pageStart = "1";
            }
            int currentPage = Integer.parseInt(pageStart);
            Page pageResult = empService.getPageResult(currentPage);

            Map map = new HashMap();

            map.put("total", pageResult.getTotalRecord());
            map.put("rows", pageResult.getList());


            //使用第三方工具將map轉(zhuǎn)成json文本
            JSONArray jsonArray = JSONArray.fromObject(map);
            String jsonJAVA = jsonArray.toString();

            //去掉二邊的空格
            jsonJAVA = jsonJAVA.substring(1,jsonJAVA.length()-1);
            System.out.println("jsonJAVA=" + jsonJAVA);

            //以字符流的方式，將json字符串輸出到客戶端
            response.setContentType("text/html;charset=UTF-8");
            PrintWriter pw = response.getWriter();
            pw.write(jsonJAVA);
            pw.flush();
            pw.close();
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

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

  

    
    
    
    
    
    
  
  

  
  

  

BootStrap這個(gè)CSS框架是非?；鸬模F(xiàn)在已經(jīng)更新到了BootStrap4了，我在個(gè)人網(wǎng)站中也有用到它。

它還有其他的組件的，比如：BootStrap-Validation等，用到相關(guān)的組件時(shí)不妨查查有沒(méi)有該對(duì)應(yīng)的。

中文教程：http://w3schools.wang/bootstrap/bootstrap_tutorial.html

下面我就截取以慕課網(wǎng)的案例的代碼了：

最近在學(xué)bootStrap，在慕課網(wǎng)中有這么一個(gè)例子....感覺(jué)以后會(huì)用到這些代碼。保存起來(lái)。

    
    
    
    
    

    

    










    

        

        

        

        

        

    
    

        

            
            

                

                    
Chrome

                    
Google Chrome，又稱Google瀏覽器，是一個(gè)由Google（谷歌）公司開(kāi)發(fā)的網(wǎng)頁(yè)瀏覽器。

                    
點(diǎn)我下載
                
            
        
        

            

            

                

                    
Firefox

                    
Mozilla Firefox，中文名通常稱為“火狐”或“火狐瀏覽器”，是一個(gè)開(kāi)源網(wǎng)頁(yè)瀏覽器。

                    
點(diǎn)我下載
                
            
        
        

            

            

                

                    
Safari

                    
Safari，是蘋(píng)果計(jì)算機(jī)的最新操作系統(tǒng)Mac OS X中的瀏覽器。

                    
點(diǎn)我下載
                
            
        
        

            

            

                

                    
Opera

                    
Opera瀏覽器，是一款挪威Opera Software ASA公司制作的支持多頁(yè)面標(biāo)簽式瀏覽的網(wǎng)絡(luò)瀏覽器。

                    
點(diǎn)我下載
                
            
        
        

            

            

                

                    
IE

                    
Internet Explorer，簡(jiǎn)稱 IE，是微軟公司推出的一款網(wǎng)頁(yè)瀏覽器。

                    
點(diǎn)我下載
                
            
        
    
    
    






    
    

        

            

            
Chrome

            
Google Chrome，又稱Google瀏覽器，是一個(gè)由Google（谷歌）公司開(kāi)發(fā)的網(wǎng)頁(yè)瀏覽器。

            
點(diǎn)我下載
        
        

            

            
Firefox

            
Mozilla Firefox，中文名通常稱為“火狐”或“火狐瀏覽器”，是一個(gè)開(kāi)源網(wǎng)頁(yè)瀏覽器。

            
點(diǎn)我下載
        
        

            

            
Safari

            
Safari，是蘋(píng)果計(jì)算機(jī)的最新操作系統(tǒng)Mac OS X中的瀏覽器。

            
點(diǎn)我下載
        
    

    

    

    

        
Chrome
        
Firefox
        
Safari
        
Opera
        
IE
    

    

        

            

                


                    
Google Chrome 使用最廣的瀏覽器

                    
Google Chrome，又稱Google瀏覽器，是一個(gè)由Google（谷歌）公司開(kāi)發(fā)的網(wǎng)頁(yè)瀏覽器。
                        該瀏覽器是基于其他開(kāi)源軟件所撰寫(xiě)，包括WebKit，目標(biāo)是提升穩(wěn)定性、速度和安全性，并創(chuàng)造出簡(jiǎn)單且有效率的使用者界面。
                
                

                    
                
            
        
        

            

                

                    
                
                


                    
Mozilla Firefox 美麗的狐貍
                    

                    
Mozilla Firefox，中文名通常稱為“火狐”或“火狐瀏覽器”，是一個(gè)開(kāi)源網(wǎng)頁(yè)瀏覽器，
                        使用Gecko引擎（非ie內(nèi)核），支持多種操作系統(tǒng)如Windows、Mac和linux。
                
            
        
        

            

                


                    
Safari Mac用戶首選

                    
Safari，是蘋(píng)果計(jì)算機(jī)的最新操作系統(tǒng)Mac OS X中的瀏覽器，使用了KDE的KHTML作為瀏覽器的運(yùn)算核心。
                        Safari在2003年1月7日首度發(fā)行測(cè)試版，并成為Mac OS X v10.3與之后的默認(rèn)瀏覽器，也是iPhone與IPAD和iPod touch的指定瀏覽器。
                
                

                    
                
            
        
        

            

                

                    
                
                


                    
Opera 小眾但易用
                    

                    
Opera瀏覽器，是一款挪威Opera Software ASA公司制作的支持多頁(yè)面標(biāo)簽式瀏覽的網(wǎng)絡(luò)瀏覽器。
                        是跨平臺(tái)瀏覽器可以在Windows、Mac和Linux三個(gè)操作系統(tǒng)平臺(tái)上運(yùn)行。.
                
            
        
        

            

                


                    
IE 你懂的

                    
Internet Explorer，原稱Microsoft Internet Explorer(6版本以前)和Windows Internet
                        Explorer(7，8，9，10版本)，
                        簡(jiǎn)稱IE，是美國(guó)微軟公司推出的一款網(wǎng)頁(yè)瀏覽器。它采用的排版引擎(俗稱內(nèi)核)為T(mén)rident。
                
                

                    
                
            
        
    

    
    

        

            

                

                    ×關(guān)閉
                    
關(guān)于
                
                

                    
慕課網(wǎng)隸屬于北京慕課科技中心(有限合伙)，是一家從事互聯(lián)網(wǎng)免費(fèi)教學(xué)的網(wǎng)絡(luò)教育公司。秉承“開(kāi)拓、創(chuàng)新、公平、分享”的精神，
                        將互聯(lián)網(wǎng)特性全面的應(yīng)用在教育領(lǐng)域，致力于為教育機(jī)構(gòu)及求學(xué)者打造一站式互動(dòng)在線教育品牌。
                
                

                    了解了
                
            
        
    


    
    









            
                     

                 

                                                                                                                    
                         GPU云服務(wù)器
                                             
                         云服務(wù)器
                                                                                                                                                 
                                      
                     
                    
                                                                                               css框架
                                                                                                           android常用框架
                                                                                                           javascript常用框架
                                                                                                           前端css框架
                                                         
                 
               
              
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/115745.html
               
                      
               

                 
                                  
上一篇：JsChart組件使用
  
                                                
                                       
下一篇：假設(shè)高度已知，請(qǐng)寫(xiě)出三欄布局，其中左欄、右欄各為300px，中間自適應(yīng)的五種方法