11-ElementUI

来源:https://www.cnblogs.com/OnlyOnYourself-lzw/archive/2022/08/03/16548171.html
-Advertisement-
Play Games

1、Element簡介 Element是餓了麽公司前端開發團隊提供的一套基於Vue的網站組件庫,用於快速構建網頁 Element提供了很多組件(組成網頁的部件)供我們使用。 官方網站 https://element.eleme.cn/#/zh-CN 2、快速入門 2.1、將相關的element-ui ...


1、Element簡介

  • Element是餓了麽公司前端開發團隊提供的一套基於Vue的網站組件庫,用於快速構建網頁
  • Element提供了很多組件(組成網頁的部件)供我們使用。
  • 官方網站
    • https://element.eleme.cn/#/zh-CN

2、快速入門

2.1、將相關的element-uijs文件拷貝至個人項目的webapp下

2.2、創建頁面,併在頁面引入Element的css、js文件和Vue的js文件

  • <script src="vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    

2.3、創建Vue核心對象

  • Element是基於Vue開發的,所以使用Element時必須要創建Vue對象

  • <script>
      new Vue({
        el:"#id值"
      })
    </script>
    

2.4、在官網中複製Element組件代碼

  • 在左邊菜單欄找到Button按鈕選項,然後找到自己喜歡的按鈕樣式,點擊顯示代碼,在下麵就會展示出對應的代碼,將這些代碼拷貝到我們自己的頁面即可

2.5、整體代碼如下

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
        <el-row>
       	<el-button>預設按鈕</el-button>
          <el-button type="primary">主要按鈕</el-button>
          <el-button type="success">成功按鈕</el-button>
          <el-button type="info">信息按鈕</el-button>
          <el-button type="warning">警告按鈕</el-button>
          <el-button type="danger">刪除</el-button>
      </el-row>
      <el-row>
          <el-button plain>朴素按鈕</el-button>
          <el-button type="primary" plain>主要按鈕</el-button>
          <el-button type="success" plain>成功按鈕</el-button>
          <el-button type="info" plain>信息按鈕</el-button>
          <el-button type="warning" plain>警告按鈕</el-button>
          <el-button type="danger" plain>危險按鈕</el-button>
      </el-row>
    
      <el-row>
          <el-button round>圓角按鈕</el-button>
          <el-button type="primary" round>主要按鈕</el-button>
          <el-button type="success" round>成功按鈕</el-button>
          <el-button type="info" round>信息按鈕</el-button>
          <el-button type="warning" round>警告按鈕</el-button>
          <el-button type="danger" round>危險按鈕</el-button>
      </el-row>
    
      <el-row>
          <el-button icon="el-icon-search" circle></el-button>
          <el-button type="primary" icon="el-icon-edit" circle></el-button>
          <el-button type="success" icon="el-icon-check" circle></el-button>
          <el-button type="info" icon="el-icon-message" circle></el-button>
          <el-button type="warning" icon="el-icon-star-off" circle></el-button>
          <el-button type="danger" icon="el-icon-delete" circle></el-button>
      </el-row>
       </div>
    
      <script src="js/vue.js"></script>
    
      <script src="element-ui/lib/index.js"></script>
    
      <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    
      <script>
      new Vue({
          el:"#app"
      })
          </script>
    
      </body>
    
      </html>
    
    

3、Element佈局

  • Element提供了兩種佈局方式,分別是
    • Layout佈局
    • Container佈局容器

3.1、Layout佈局

  • 通過基礎的24分欄,迅速簡便地創建佈局。也就是預設將一行分為24欄,根據頁面要求給每一列設置所占的欄數

    • 在左邊菜單找到layout佈局按鈕,然後找到自己喜歡的按鈕樣式,點擊顯示代碼,在下麵就會展示出對應的代碼,顯示出的代碼中又樣式,有html標簽。將樣式拷貝到個人頁面的head標簽內,將html標簽拷貝到<div id="app"></div>標簽內
  • 整體頁面代碼如下

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      
          <style>
              .el-row {
                  margin-bottom: 20px;
              }
              .el-col {
                  border-radius: 4px;
              }
              .bg-purple-dark {
                  background: #99a9bf;
              }
              .bg-purple {
                  background: #d3dce6;
              }
              .bg-purple-light {
                  background: #e5e9f2;
              }
              .grid-content {
                  border-radius: 4px;
                  min-height: 36px;
              }
              .row-bg {
                  padding: 10px 0;
                  background-color: #f9fafc;
              }
          </style>
      </head>
      <body>
      <div id="app">
          <el-row>
              <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
          </el-row>
          <el-row>
              <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
          </el-row>
          <el-row>
              <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
              <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
          </el-row>
          <el-row>
              <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
          </el-row>
          <el-row>
              <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
              <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
          </el-row>
      </div>
      <script src="js/vue.js"></script>
      <script src="element-ui/lib/index.js"></script>
      <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
      
      <script>
          new Vue({
              el:"#app"
          })
      </script>
      </body>
      </html>
      
  • 現在需要添加一行,要求該行顯示8個格子,通過計算每個各自占3欄,具體的html代碼如下所示

    • <!--
      添加一行,8個格子  24/8 = 3
      -->
      <el-row>
          <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
          <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
          <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
          <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
          <el-col :span="3"><div class="grid-content bg-purple-light"></div></el-col>
      </el-row>
      

3.2、Container佈局容器

  • 概念

    • 用於佈局的容器組件,方便快速搭建頁面的基本結構,如下圖就是佈局容器效果
  • 如下圖是官網提供的Container佈局容器實例

    • 該效果代碼中包含了樣式、頁面標簽、模型數據。將裡面的樣式<style>拷貝到個人頁面的head標簽中;將html標簽拷貝到<div id="app"></div>標簽中,再將數據模型拷貝到vue對象的data()
  • 整體頁面代碼如下

    • <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      
          <style>
              .el-header {
                  background-color: #B3C0D1;
                  color: #333;
                  line-height: 60px;
              }
      
              .el-aside {
                  color: #333;
              }
          </style>
      </head>
      <body>
      <div id="app">
          <el-container style="height: 500px; border: 1px solid #eee">
              <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                  <el-menu :default-openeds="['1', '3']">
                      <el-submenu index="1">
                          <template slot="title"><i class="el-icon-message"></i>導航一</template>
                          <el-menu-item-group>
                              <template slot="title">分組一</template>
                              <el-menu-item index="1-1">選項1</el-menu-item>
                              <el-menu-item index="1-2">選項2</el-menu-item>
                          </el-menu-item-group>
                          <el-menu-item-group title="分組2">
                              <el-menu-item index="1-3">選項3</el-menu-item>
                          </el-menu-item-group>
                          <el-submenu index="1-4">
                              <template slot="title">選項4</template>
                              <el-menu-item index="1-4-1">選項4-1</el-menu-item>
                          </el-submenu>
                      </el-submenu>
                      <el-submenu index="2">
                          <template slot="title"><i class="el-icon-menu"></i>導航二</template>
                          <el-submenu index="2-1">
                              <template slot="title">選項1</template>
                              <el-menu-item index="2-1-1">選項1-1</el-menu-item>
                          </el-submenu>
                      </el-submenu>
                      <el-submenu index="3">
                          <template slot="title"><i class="el-icon-setting"></i>導航三</template>
                          <el-menu-item-group>
                              <template slot="title">分組一</template>
                              <el-menu-item index="3-1">選項1</el-menu-item>
                              <el-menu-item index="3-2">選項2</el-menu-item>
                          </el-menu-item-group>
                          <el-menu-item-group title="分組2">
                              <el-menu-item index="3-3">選項3</el-menu-item>
                          </el-menu-item-group>
                          <el-submenu index="3-4">
                              <template slot="title">選項4</template>
                              <el-menu-item index="3-4-1">選項4-1</el-menu-item>
                          </el-submenu>
                      </el-submenu>
                  </el-menu>
              </el-aside>
      
              <el-container>
                  <el-header style="text-align: right; font-size: 12px">
                      <el-dropdown>
                          <i class="el-icon-setting" style="margin-right: 15px"></i>
                          <el-dropdown-menu slot="dropdown">
                              <el-dropdown-item>查看</el-dropdown-item>
                              <el-dropdown-item>新增</el-dropdown-item>
                              <el-dropdown-item>刪除</el-dropdown-item>
                          </el-dropdown-menu>
                      </el-dropdown>
                      <span>王小虎</span>
                  </el-header>
      
                  <el-main>
                      <el-table :data="tableData">
                          <el-table-column prop="date" label="日期" width="140">
                          </el-table-column>
                          <el-table-column prop="name" label="姓名" width="120">
                          </el-table-column>
                          <el-table-column prop="address" label="地址">
                          </el-table-column>
                      </el-table>
                  </el-main>
              </el-container>
          </el-container>
      </div>
      <script src="js/vue.js"></script>
      <script src="element-ui/lib/index.js"></script>
      <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
      
      <script>
          new Vue({
              el:"#app",
              data() {
                  const item = {
                      date: '2016-05-02',
                      name: '王小虎',
                      address: '上海市普陀區金沙江路 1518 弄'
                  };
                  return {
                      tableData: Array(20).fill(item)
                  }
              }
          })
      </script>
      </body>
      </html>
      

4、綜合案例

  • 需求
    • 完成如下頁面效果
    • 要完成該頁面,需要先對這個頁面進行分析,看頁面由哪幾個部分組成,然後到官網進行拷貝並修改,頁面總共有如下組成部分
    • 還有一個是當點擊新增按鈕的時候,會在頁面正中間彈出一個對話框,如下所示

4.1、準備基本頁面

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <div id="app">
    	
    </div>
    
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    
    <script>
        new Vue({
            el: "#app"
        })
    </script>
    </body>
    </html>
    

4.2、完成搜索表單展示

  • 在Element光網找到橫排的表單效果,然後拷貝代碼併進行修改
    • 點擊上面的顯示代碼後,就會展示出對應的代碼,下麵是對這部分代碼進行分析的圖解
    • 分析結束後就可以根據需求效果修改代碼

4.3、完成批量刪除和新增按鈕展示

  • 從Element官網找到具有著色效果的按鈕,並將代碼拷貝到我們自己的頁面上

4.4、完成對話框的展示

  • 在Element官網找到對話框的效果如下圖所示:
    • 對代碼進行分析的圖解如下圖所示
    • 上圖分析出來的模型數據需要在Vue對象中進行定義
  • 表單代碼如下所示

4.5、完成表格界面展示

  • 在左邊菜單欄找到Table表格按鈕,找到需要的表格效果,並複製代碼,將html標簽拷貝到<div id="app"></div>中,如下所示
  • 將相關css樣式拷貝到head標簽中,如下所示
  • 將方法和模型數據拷貝到Vue對象指定的位置
  • 拷貝完成後通過瀏覽器打開可以看到表格的效果
  • 雖然表格效果出來了,但是顯示的表頭和數據並不是我們想要的,所以還需要對頁面代碼進行修改
    • 1.修改表頭和數據
      • 下麵是對錶格代碼進行分析的圖解。根據下圖書名修改自己的列數和列名
      • 修改完頁面後,還需要對綁定的模型數據進行修改,下圖是對模型數據進行分析的圖解
    • 2.給表格添加操作列
      • 從官網上找到有按鈕的表格,複製過來進行修改
    • 3.給表格添加覆選框和標號列
      • 預期效果如下
      • 此效果也是從Element官網進行拷貝,找到對應的表格效果,然後將其對應代碼拷貝至個人代碼中,如下是覆選框列官網效果圖和代碼
      • 這裡需要註意在<el-table>標簽上有一個事件@selection-change="handleSelectionChange",這裡綁定的函數也需要從官網拷貝到我們自己的頁面代碼中,函數代碼如下所示:
      • 從函數中又發現一個模型數據multipleSelection,所以還需要定義出該模型數據。標號列也用同樣的方式進行拷貝並修改
    • 4.給表格處理禁用和啟用

4.6、完成分頁條的展示

  • 在Element官網找到Pagination分頁,在頁面主體部分找到需要的效果,如下所示

    • 點擊顯示代碼,找到完整功能對應的代碼,接下來對該代碼進行分析

    • 上述代碼屬性說明

      • page-size:每頁顯示的條目數
      • page-sizes:每頁顯示個數選擇器的選項設置
      • :page-sizes="[100, 200, 300, 400]"對應的頁面效果如下:
      • currentPage:當前頁碼。我們點擊哪個頁面,此屬性值就是幾
      • total:總記錄數。用來設置總的數據目錄條數,該屬性設置後,Element會自動計算出需要分多少也給我們展示對應的代碼
    • 事件說明

      • size-change:pageSize改變的時候會觸發。也就是當我們改變了每頁顯示的條目數後,該事件會觸發

      • current-change:currentPage改變的時候會觸發。也就是當我們點擊了其他的頁碼後,該事件會複發

4.7、完整案例代碼

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <!--elementui的css-->
        <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
        <!--先導入vue的js-->
        <script src="js/vue.js"></script>
        <!--再導入element的js-->
        <script src="element-ui/lib/index.js"></script>
    
        <style>
            .el-table .warning-row {
                background: oldlace;
            }
    
            .el-table .success-row {
                background: #f0f9eb;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <!--搜索表單-->
            <el-form :inline="true" :model="brand" class="demo-form-inline">
                <el-form-item label="當前狀態">
                    <el-select v-model="brand.status" placeholder="當前狀態">
                        <el-option label="啟用" value="1"></el-option>
                        <el-option label="禁用" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="企業名稱">
                    <el-input v-model="brand.companyName" placeholder="企業名稱"></el-input>
                </el-form-item>
                <el-form-item label="品牌名稱">
                    <el-input v-model="brand.brandName" placeholder="品牌名稱"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查詢</el-button>
                </el-form-item>
            </el-form>
    
            <!--倆按鈕-->
            <el-row>
                <el-button type="danger" plain>批量刪除</el-button>
                <el-button type="primary" plain @click="dialogFormVisible = true">新增</el-button>
            </el-row>
    
            <!--添加表單的對話框-->
            <el-dialog title="編輯品牌" :visible.sync="dialogFormVisible" width="30%">
                <el-form ref="form" :model="brand" label-width="80px">
                    <el-form-item label="品牌名稱">
                        <el-input v-model="brand.brandName"></el-input>
                    </el-form-item>
                    <el-form-item label="企業名稱">
                        <el-input v-model="brand.companyName"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="brand.ordered"></el-input>
                    </el-form-item>
                    <el-form-item label="備註">
                        <el-input type="textarea" v-model="brand.desc"></el-input>
                    </el-form-item>
                    <el-form-item label="狀態">
                        <el-switch v-model="brand.status" active-value="1" inactive-value="0"></el-switch>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="saveBrand">提交</el-button>
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
    
            <!--
            表格
                @selection-change:多選框發生選擇變化的時候觸發的事件
    
            -->
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    :row-class-name="tableRowClassName"
                    @selection-change="handleSelectionChange">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        type="index"
                        width="50">
                </el-table-column>
                <el-table-column
                        prop="brandName"
                        label="品牌名稱"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="companyName"
                        label="企業名稱"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="ordered"
                        label="排序"
                        align="center">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="當前狀態"
                        align="center">
                    <!--獲取到status值,然後進行判斷-->
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.status=='1'?'啟用':'禁用'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        align="center">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
                        <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
                    </template>
                </el-table-column>
            </el-table>
    
            <!--
             分頁條:
                 @size-change:每頁條數變化的時候
                 @current-change:頁碼變化的時候
                 :current-page:展示的頁碼
                 :page-sizes:每頁顯示的條數可選列表
                 :page-size:每頁顯示的條數
                 :total:總條數
            -->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 15, 20]"
                    :page-size="10"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="400">
            </el-pagination>
        </div>
    </body>
    <script>
        new Vue({
            el:"#app",
            data() {
                return {
                    brand: {
                        status: '',
                        companyName: '',
                        brandName: ''
                    },
                    dialogFormVisible: false,
                    tableData: [{
                        brandName: '紅米',
                        companyName: '小米科技',
                        ordered: '1',
                        status:'0'
                    },{
                        brandName: '紅米',
                        companyName: '小米科技',
                        ordered: '1',
                        status:'1'
                    },{
                        brandName: '紅米',
                        companyName: '小米科技',
                        ordered: '1',
                        status:'0'
                    },{
                        brandName: '紅米',
                        companyName: '小米科技',
                        ordered: '1',
                        status:'1'
                    },{
                        brandName: '紅米',
                        companyName: '小米科技',
                        ordered: '1',
                        status:'0'
                    },{
                        brandName: '紅米',
                        companyName: '小米科技',
                        ordered: '1',
                        status:'0'
                    }],
                    currentPage: 2
                }
            },
            methods: {
                onSubmit() {
                    console.log(this.brand);
                },
                saveBrand() {
                    console.log(this.brand);
                },
                //切換表格行的樣式
                tableRowClassName({row, rowIndex}) {
                    if (rowIndex%2 === 0) {
                        return 'success-row';
                    }
                    return '';
                },
    
                //處理選擇框變化的事件方法
                handleSelectionChange(val) {
                    console.log(val);
                    this.multipleSelection = val;
                },
                //處理編輯操作
                handleEdit(index, row) {
                    console.log(index, row);
                },
    
                //處理刪除操作
                handleDelete(index, row) {
                    console.log(index, row);
                },
    
                //獲取每條顯示的條數
                handleSizeChange(val) {
                    console.log(`每頁 ${val} 條`);
                },
    
                //獲取當前頁碼
                handleCurrentChange(val) {
                    console.log(`當前頁: ${val}`);
                }
            }
        });
    </script>
    </html>
    

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ##前置知識 ###當前讀與快照讀 當前讀 什麼是當前讀:讀取的是最新的數據,不會讀到老數據。 何時觸發:update、insert、delete、select lock in share mode、select for update時,總是當前讀。 快照讀 什麼是快照讀:讀取的是歷史版本,不是最新 ...
  • likeshop回收租賃系統適用於物品回收、物品租賃、二手買賣交易等三大場景。 系統支持智能評估回收價格,後臺調整最終回收價,用戶同意回收後系統即刻放款,用戶微信零錢提現。支持線上生成租賃合同,交付租賃押金,生成分期付款合約,逾期自動計算滯納金。 功能強大,流程嚴謹,無論運營還是二開都是性價比極高的 ...
  • 1 屏幕共用功能介紹 屏幕共用是指在視頻通話或互動直播過程中將屏幕內容以視頻的方式分享給其他的觀眾,以增強互動體驗,提高溝通效率。屏幕共用解決方案提升了用戶實時視頻通話的溝通效率。 屏幕共用在如下場景中應用廣泛: 視頻會議場景中,屏幕共用可以將講話者本地的文件、數據、網頁、PPT 等畫面分享給其他與 ...
  • 一.WXML模板語法 1.1 數據綁定 綁定內容 跟vue差不多,在頁面的js文件定義到data裡面 然後通過插值語法用在wxml中即可 綁定屬性 直接寫上插值語法,沒有: 三元運算 生成一個十以內的隨機數 算數運算 1.2 事件綁定 小程式常用事件 小程式事件對象常用屬性 target和curre ...
  • 七夕情人節到了,各種App都要忙著上新,抓住互聯網產品的節日熱點,結合應用的類別進行活動營銷。比如購物類App會在節日進行大促;旅游類App會推出各種優惠活動;短視頻和拍照App會推出各種節日限定特效、專屬貼紙等。 尤其是游戲類App,具有較強的社交屬性,在節日熱點一般都會進行版本更新,上線新皮膚新 ...
  • 接上一篇 V8 中的快慢屬性,本篇分析V8 中的快慢數組,瞭解數組全填充還是帶孔、快慢數組、快慢轉化、動態擴縮容等等。 ...
  • BOM的概述: bom 稱為瀏覽器對象模型(bowser object model),也就意味他可以獲取瀏覽器上的所有內容以及相關的操作。BOM缺乏規範的,存在共有對象來解決這個問題,但是共有對象也存在相容問題(ie10以後) window 概述: window是頂層對象 屬於golbal對象。他是 ...
  • 對象及日期定時器 Date日期 日期對象的定義(使用new關鍵詞) 1.獲取當前的時間(本地的時間)!!! var date = new Date() //不傳參就是獲取當前時間 2.獲取指定的時間 var date = new Date(123456) //一個參數毫秒值 將這個毫秒值去加上對應的 ...
一周排行
    -Advertisement-
    Play Games
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...