使用vue+zrender繪製體溫單 三測單(2)

来源:https://www.cnblogs.com/hprBlog/archive/2020/07/01/13217618.html
-Advertisement-
Play Games

預覽地址 http://106.12.212.110:8077/#/ 上期我們說瞭如何創建項目並把各個項目的文件結構創建好後這期我們來說如何畫出圖中代寫線段 首先我們在src/components/Render.vue中添加一下引用 import zrender from 'zrender' imp ...


預覽地址 http://106.12.212.110:8077/#/

上期我們說瞭如何創建項目並把各個項目的文件結構創建好後這期我們來說如何畫出圖中代寫線段

首先我們在src/components/Render.vue中添加一下引用

import zrender from 'zrender'
import {chartData,configData} from '@/mock/index' 這是mock數據
import { createLine,createCircle,addHover,createPolygon,hoverLine } from '../js/utli' 這是負責創建線段 陰影圖等 公共方法 該文件在文章底部
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex' 這是vuex負責存儲數據

然後我們在data里寫入以下屬性

//線段開始橫坐標
      lineStartX:0,
      //線段開始縱坐標
      lineStartY:0,
      //線段結束橫坐標
      lineEndX:0,
      //線段結束縱坐標
      LineEndY:0,
      //多少個y軸坐標
      xLineLen:{
        //天數 7天 
        day:0,
        //一天多少分段
        time:6
      },
      canavsWidth:0, //畫板寬度
      canavsHeight:0, //畫板高度
      zr:"", //畫板屬性
      yLineLen:{
        XRegion:13, //X軸坐標分幾個大塊
        XShare:5, //每塊份幾個小塊
        XLineArr:[3], //需要特殊處理的橫線 衝上往下算
      },
      YLineReset:[], //Y軸每一小格份幾份
      width:0,
      YCellHeight:0, //y軸大格子高度
      lastData:0,  //上一個數據
      CircleSize:8, //畫板上圓點的直徑
      hoverCircleSize:10,//畫板上圓點移入變化的直徑
      fontSize:15, //畫板上圓圈裡的字體大小

這些屬性都是以數據的形式來創建畫板的橫坐標 豎坐標 橫線 豎線  基礎屬性創建好後我們在methods里先創建一個init方法 該方法負責初始化創建一個cavans畫板 以及獲取一些頁面基礎屬性

init(){
      this.zr = zrender.init(document.getElementById("main"))
      var div = document.createElement("div")
      div.classList.add("tips")
      document.getElementById("main").append(div)
      
      this.canavsWidth = this.zr.getWidth()
      this.canavsHeight = this.zr.getHeight()
      
      if (this.httpType == 'http') {
         this.$axios({
            method:'post',
            url:`${this.configUrl}/api/PatrolInfo/ChartData`,
            data:{"PatientCode":this.urlData['cstId'],"beginDate":this.urlData['begin'],"endDate":this.urlData['end'],"PatroInfoType":this.urlData['PatroInfoType']},
          }).then(res => {
              res = res.data.Data
              this.xLineLen.time = this.TimeArr.length
              this.YLineReset = this.resetY(this.TimeArr)
              this.filterData(res)
              this.yLine() //生成Y軸坐標
              this.xLine() //生成X軸坐標
              this.getCellHeight()
          })
      }else{
        this.xLineLen.time = this.TimeArr.length
        this.xLineLen.day = 7
        this.YLineReset = this.resetY(this.TimeArr)
        this.filterData(chartData)
        this.yLine() //生成Y軸坐標
        this.xLine() //生成X軸坐標
        this.getCellHeight()
      }
      // this.hoverLine()
    },

這裡使用了一個判斷 來判斷當前是本地版本還是線上版本

這裡的httpType通過src/store/http.js來配置是本地還是線上 沒有文件請先創建

http.js  httpType是mock就是本地 http就是線上 

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

const store = new Vuex.Store({
    state:{
        configUrl:'', //先自己的請求地址
        httpType:"mock",
        data:JSON.parse(localStorage.getItem('patientData')), //此方法可用可不用  用於基礎普通html項目是使用
    },
    mutations:{
      
    },
    actions:{
        getUrlData(context){
            context.commit('setUrlData',data)
        }
    }
})

export default store

init方法創建好後裡面有4個方法分別是

this.filterData(res) 過濾數據 this.yLine() //生成Y軸坐標 this.xLine() //生成X軸坐標 this.getCellHeight() 獲取格子的總高度 
yLine() {
      //橫坐標 最底部橫坐標
      let Xline = new zrender.Line({
        shape:{
          x1:0,
          y1:this.canavsHeight,
          x2:this.canavsWidth,
          y2:this.canavsHeight
        }
      })
      this.zr.add(Xline)
      const yWidth = this.canavsWidth/this.xLineLen.day
      
      //迴圈顯示豎線格子 紅色豎線
      for (let i = 0; i < this.xLineLen.day; i++) {
         //縱坐標
        let Yline = new zrender.Line({
          shape:{
            x1:yWidth*i,
            y1:0,
            x2:yWidth*i,
            y2:this.canavsHeight
          },
          style:{
            opacity:1,
            lineWidth:1,
            stroke:"#ff0000"
          }
        })
        this.zr.add(Yline)
      }

      let yLinAll = this.xLineLen.day*this.xLineLen.time
      for (let i = 0; i < yLinAll; i++) {
         let Yline = new zrender.Line({
          shape:{
            x1:yWidth/this.xLineLen.time*i,
            y1:0,
            x2:yWidth/this.xLineLen.time*i,
            y2:this.canavsHeight
          },
          style:{
            opacity:1,
            lineWidth:0.5,
            stroke:"#000"
          }
        })
   
        this.zr.add(Yline)
      }
    },
    xLine(){
      let xHeight = this.canavsHeight/this.yLineLen.XRegion
      let XShareAll = this.yLineLen.XRegion*this.yLineLen.XShare
      for (let i = 0; i < this.yLineLen.XRegion; i++) {
        let color = "#000"
        this.yLineLen.XLineArr.forEach(el => {
          if (el == i) {
            color = "#ff0000"
          }
        });
        //橫坐標 加粗
        let Xline = new zrender.Line({
          shape:{
            x1:0,
            y1:xHeight*i,
            x2:this.canavsWidth,
            y2:xHeight*i
          },
          style:{
            opacity:1,
            lineWidth:2,
            stroke:color
          }
        })
        this.zr.add(Xline)

        for (let a = 0; a < XShareAll; a++) {
          //橫坐標
          let Xline = new zrender.Line({
            shape:{
              x1:0,
              y1:xHeight/this.yLineLen.XShare*a,
              x2:this.canavsWidth,
              y2:xHeight/this.yLineLen.XShare*a
            },
            style:{
              opacity:1,
              lineWidth:0.4,
              stroke:"#000"
            }
          })
          this.zr.add(Xline)
        }
      }
    },
    filterData(data){
      //重置信息 避免重覆出現的bug
      this.lastData = 0
      data.forEach((el,i) => {
        switch (el.type) {
          case "text":
            this.zrText(el)
            break;
          case "line":
            this.zrLine(el)
            break;
          case "area":
            this.zrPolyline(el)
            break;
          case "tag":
            this.zrTag(el)
            break;
        
          default:
            break;
        }
        });
    },

橫縱坐標創建好後我們就開始創建折線 陰影等圖

//繪製文本內容
    zrText(data){
      if (this.xLineLen.day*24 >= data.time) {
        //最小值
        const cellMin = data.cellMin
        //坐標軸每格代表值
        const cellSplit = data.cellSplit
        var textWidthHeight = 15 //一個字的原始寬度高度
        var textHeight = 0 //字體總高度
        var textWidth = textWidthHeight //字體總寬度
        var moveRange = textWidthHeight/2 //需要移動的距離 用於移動字體下麵的矩形背景框
        //計算文本高度
        if (data.text) {
          let dataLen = data.text.split("\n").length
          //需要換行的字體 移動距離是字體的一半 每個字寬度，高度為12
          if (dataLen > 1) {
            textHeight = dataLen * textWidthHeight
            textWidth = textWidthHeight
          } else {
            let textLen = data.text.length
            textHeight = textWidthHeight
            textWidth = textWidthHeight * textLen
            moveRange = textWidthHeight
          }
        }
        let xWidth = this.XShareOne(data.time)
        
        //如果和上一個時間相同就往後移動
        if ( this.lastData != 0 || data.time <= 1 ) {
          if (this.lastData == data.time) {
            xWidth = xWidth + textWidth + 5
          }
        }
        this.lastData = data.time  //存入當前時間 用於重合區分
        let YHeight = this.YShareOne().height
        let y = this.transformY(data.position,cellSplit,cellMin)
        let state = new zrender.Group();
        state.add(
          new zrender.Rect({
            shape:{
              x:xWidth-(textWidth/2),
              y:y,
              width:textWidth,
              height:textHeight
            },
            style:{
              fill:"#FFF"
            },
            zlevel:4
          })
        )
        state.add(
          new zrender.Text({
            style:{
              text:data.text,
              textShadowColor:"#fff",
              textStroke:"#fff",
              textFill:data.color,
              textAlign:"center",
              fontSize:13
            },
            position:[xWidth,y],
            zlevel:4
          })
        );
        this.zr.add(state)
      }
    },
zrLine(data){
      
      var style = {}
      //最小值
      const cellMin = data.cellMin
      //坐標軸每格代表值
      const cellSplit = data.cellSplit
            
      data.array.forEach((el,i) =>{
        //過濾shape 個別需特殊處理 後期需優化
        switch (el.shape) {
          case "x-circle":
            style = {
              stroke:data.color,
              fill:"#fff",
              text:"x",
              fontSize:this.fontSize
            }
            break;
          case "empty-circle":
            style = {
              stroke:data.color,
              fill:"#fff",
              text:"",
            }
            break;
          case 'x':
            style = {
              stroke:data.color,
              fill:"#fff",
              text:"x",
              fontSize:this.fontSize
            }
            break;
          case 'o-circle':
            style = {
              stroke:data.color,
              fill:"#fff",
              text:"●",
              fontSize:this.fontSize
            }
            break;
          case '':
            style = {
              stroke:data.color,
              fill:data.color,
              text:"",
            }
            break;
          default:
            break;
        }
        //疼痛單獨處理
        if (el.type == "pain") {
           style = {
              stroke:data.color,
              fill:"#fff",
              text:"",
            }
        }
        
        if (i > 0) {
          let firstX = this.getX(data.array[i-1].time)  
          let firstY = this.transformY(data.array[i-1].value,cellSplit,cellMin)

          let x = this.getX(data.array[i].time)
          let y = this.transformY(data.array[i].value,cellSplit,cellMin)
          
          if (data.array[i-1].Break == "false") {
            let line = createLine(firstX,firstY,x,y,{
                stroke:data.color,
                lineWidth:2,
            })
            this.zr.add(line)
          }
        }
        
        if (el.extraArr && el.extraArr.length > 0) {
            el.extraArr.forEach((item,a) => {
              console.log(item);
              
              let x = this.getX(el.time)
              let y = this.transformY(el.value,cellSplit,cellMin)

              let lastY =  this.transformY(item.extra,cellSplit,cellMin)
              let dottedLine = createLine(x,y,x,lastY,{
                  stroke:data.color,
                  lineWidth:3,
                  lineDash:[2,2]
              })
              this.zr.add(dottedLine)

              el.extraArr.forEach((item,a) => {
                let getY = this.transformY(item.extra,cellSplit,cellMin)
                
                let Circle = createCircle(x,getY,this.CircleSize,{
                  stroke:item.extraColor,
                  fill:"#fff",
                })
                this.zr.add(Circle)
                addHover(Circle,{
                    tips:item.extraTips,
                },x,getY,{
                    r:this.hoverCircleSize,
                  },{
                    r:this.CircleSize,
                })
              })
            })
         }
        let getX = this.getX(el.time)
        let getY = this.transformY(el.value,cellSplit,cellMin)

        let Circle = createCircle(getX,getY,this.CircleSize,style)
        this.zr.add(Circle)
        addHover(Circle,el,getX,getY,{
            r:this.hoverCircleSize,
          },{
             r:this.CircleSize,
        })
      })
    },
    //多邊形
    zrPolyline(data){
      console.log(data);
      
      //最小值
      const cellMin = data.cellMin
      //坐標軸每格代表值
      const cellSplit = data.cellSplit
      var points = []
      data.array.forEach((el,i) => {
        //生成圓點
        let cx = this.getX(el.time)
        let cy1 = this.transformY(el.v1,cellSplit,cellMin)
        let Circle1 = createCircle(cx,cy1,this.CircleSize,{
            stroke:data.color,
            fill:"#fff",
            text:"",
          })
        this.zr.add(Circle1)
        addHover(Circle1,{tips:el.v1Tips},cx,cy1,{
          r:this.hoverCircleSize,
        },{
            r:this.CircleSize,
        })

        let cy2 = this.transformY(el.v2,cellSplit,cellMin)
        let Circle2 = createCircle(cx,cy2,this.CircleSize,{
            stroke:data.color,
            fill:data.color,
            text:"",
          })
        this.zr.add(Circle2)
        
        addHover(Circle2,{tips:el.v2Tips},cx,cy2,{
          r:this.hoverCircleSize,
        },{
            r:this.CircleSize,
        })

        if (i > 0) {
          if (data.array[i-1].Break == "false") {
            points = []
            let pox1 = this.getX(data.array[i-1].time)
            let poy1 = this.transformY(data.array[i-1].v1,cellSplit,cellMin)
            let poy2 = this.transformY(data.array[i-1].v2,cellSplit,cellMin)
            
            let pox3 = this.getX(el.time)
            let poy3 = this.transformY(el.v1,cellSplit,cellMin)
            let poy4 = this.transformY(el.v2,cellSplit,cellMin)
            
            points.push([pox1,poy1],[pox1,poy2],[pox3,poy4],[pox3,poy3],[pox1,poy1])
            
            let area = createPolygon(points,{
              fill:data.bgColor,
              opacity:0.8,
              stroke:data.color
            })

            this.zr.add(area)
          }
        }
      })
      
    },
    zrTag(data){
      //最小值
      const cellMin = data.cellMin
      //坐標軸每格代表值
      const cellSplit = data.cellSplit
      if (data.text == "R") {
        data.array.forEach((el,i) => {
          let x = this.getX(el.time)
          let y = this.transformY(el.value,cellSplit,cellMin)

          let Circle = createCircle(x,y,this.CircleSize,{
            text:data.text,
            fill:"#fff",
            stroke:data.color,
            textVerticalAlign:"middle",
            textAlign:"center",
          })
          this.zr.add(Circle)
          addHover(Circle,{tips:""},0,0,{
            r:this.hoverCircleSize,
          },{
            r:this.CircleSize,
          })
        })
      }
      if(data.text == "H"){
        data.array.forEach((el,i) => {
          let x = this.getX(el.time)
          let y = this.transformY(el.y,cellSplit,cellMin)

          let Circle = createCircle(x,y,this.CircleSize,{
            text:data.text,
            fill:"#fff",
            stroke:data.color,
            textVerticalAlign:"middle",
            textAlign:"center"
          })
          this.zr.add(Circle)
          addHover(Circle,{tips:""},0,0,{
            r:this.hoverCircleSize,
          },{
            r:this.CircleSize,
          })
        })
      }
    },

創建圖形是還需要寫幾個方法

用於獲取x軸小格子的寬度

y軸小格子寬度

以及每日時間變化後每個坐標點的定位

 //每個x軸小格子寬度是多少
    XShareOne(data){
      let widthArr = [] //每格寬度 全部存入數組
      var width = 0
      let YLineResetAll = []  //7天所有份數
      
      for (let i = 0; i < 7; i++) {
        YLineResetAll.push(...this.YLineReset)
      }
      
      for (let i = 0; i < parseInt(data); i++) {
          width = YLineResetAll[i].width + width
      }
        
      return width
    },
    //每個Y軸小格子寬度是多少
    YShareOne(){
      //計算大格子里的每格小格子高度
      let childerHeight = this.canavsHeight/this.yLineLen.XRegion/this.yLineLen.XShare
      //計算大格高度
      let height = this.canavsHeight/this.yLineLen.XRegion
      return {height:height,childerHeight:childerHeight}
    },
    //轉換y軸坐標點為正確坐標點 因為y軸坐標是頂點為0遞增的 所有用總高度減去原來坐標的高度剩下的高度就是正確坐標點
    //i代表一個格子代表幾個高度
    transformY(data,i,cellMin){
      let YHeight = this.YShareOne().height
      let YHeightChilder = this.YShareOne().childerHeight
      let xAll = this.yLineLen.XRegion  //一共多少個橫坐標 大的
      let surplusHeight
      var cellAll = this.yLineLen.XRegion*this.yLineLen.XShare //一共多少個橫坐標
      let index = cellMin
      var aIndex = 0
      let lastNumber = 0
      //總共占幾格
      for (let a = 0; a < cellAll; a++) {
        //每格代表的值小於0的時候 需要特殊處理
        if (parseInt(i) == 0) {
          let floatNumber = this.getFloat(index,1)
          if (floatNumber <= this.getFloat(data,1)) {
            lastNumber = floatNumber
            aIndex = a
            surplusHeight = this.canavsHeight -this.getFloat(YHeightChilder,1)*a
          }
        }else{
          if (index <= data) {
            lastNumber = index
            aIndex = a
            surplusHeight = this.canavsHeight - YHeightChilder*a
          }
        }
        index = index+i
      }
      
      if (lastNumber-data < 0) {
        surplusHeight = surplusHeight -YHeightChilder/2
      }

      return surplusHeight
    },
transformY(data,i,cellMin)這個方法里的邏輯比較複雜 後面我們在單獨講
下麵是幾個基礎方法
resetY方法也是一個重點後面再講
 
    //獲取X坐標 data當前時間點
    getX(data){
      let XShareOne = this.XShareOne(data)
      return XShareOne
    },
    //重置y軸坐標間隔條數 傳入日期數組 格式["1","3","4","5","6","18","21","24"]
    resetY(data){
      let oneYLinWidth = this.canavsWidth/this.xLineLen.day/this.xLineLen.time //每個時間點格子寬度
      let resetArr = [] //得到的新數組
      
      data.forEach((item,i) => {
        if (i == 0) {
          for (let index = 0; index < item; index++) {
            resetArr.push({
              width:oneYLinWidth/2/item
            })
          }
        }else{
            let indexItem = item - data[i-1]
            for (let index = 0; index < indexItem; index++) {
              resetArr.push({
                width:oneYLinWidth/indexItem
              })
            }
           if (i+1 == data.length) {
             let indexItem = 24 - item
             for (let index = 0; index < indexItem; index++) {
                resetArr.push({
                width:oneYLinWidth/2/indexItem
              })
             }
           }
        }
      })
      return resetArr
    },
    getFloat(num,n){
      n = n ? parseInt(n) : 0;
      if(n <= 0) {
          return Math.round(num);
      }
      num = Math.round(num * Math.pow(10, n)) / Math.pow(10, n); //四捨五入
      num = Number(num).toFixed(n); //補足位數
      return num;
    },
    getCellHeight(){
      //yHeight Y軸每個小格子高度 xHeight X軸每個小格子寬度
      let xWidth = this.canavsWidth / this.xLineLen.day / this.xLineLen.time
      this.$emit('yHeight',this.YShareOne().height)
      this.$emit('xHeight',xWidth)
    },
    hoverLine(){
      var timer = null;
      let line = new zrender.Line({
          shape:{
              x1:0,
              y1:0,
              x2:0,
              y2:this.canavsHeight
          },
      })
      this.zr.add(line)
      
      hoverLine(this.zr,line,this.canavsHeight)
    }
<template>
  <div id="main">
  </div>
</template>

這是創建初始cavans需要用的

<style scoped>
  #main{
    height: 1250px;
    width: 100%;
    position: relative;
  }
  html,body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  canvas{
    width: 100%;
    height: 700px;
  }
</style>

 

然後是src/js/utli.js里的各個方法

import zrender from "zrender"
import moment from 'moment';

//線段
export const createLine = (x1,y1,x2,y2,style)=>{
    return new zrender.Line({
        shape:{
            x1:x1,
            y1:y1,
            x2:x2,
            y2:y2
        },
        style:style,
    });
};
// cx 橫坐標 cy縱坐標 r半徑 空心圓
export const createCircle = (cx,cy,r,style)=>{
    return new zrender.Circle({
        shape:{
            cx:cx,
            cy:cy,
            r:r
        },
        style:style,
        zlevel:4
    })
}
//添加horver事件 el 元素對象 config 一些配置項 x x軸坐標 y y軸坐標 shapeOn滑鼠移入一些屬性配置 shapeOn滑鼠移出一些屬性配置 shape配置項看官網  
export const addHover = (el,config,x,y,shapeOn,shapeOut) => {
    const domTips = document.getElementsByClassName("tips")
    el.on('mouseover',function(){
        domTips[0].innerHTML = config.tips
        
        let textWidth = config.tips.length*15
        domTips[0].setAttribute("style",`position:absolute;top:${y-30}px;left:${x-textWidth/2}px;display:block;font-size:10px;background-color:rgba(0,0,0,.7);padding:3px 2px;border-radius:2px;color:#fff;width:${textWidth}px;text-align:center`)
        el.animateTo({
            shape:shapeOn
        },100,0)
    }).on('mouseout',function () {
        domTips[0].setAttribute("style",`display:none`)
        el.animateTo({
            shape:shapeOut
          },100,0)
    })
}
//多邊形
export const createPolygon = (points,style) => {
    return new zrender.Polyline({
        shape:{
            points:points,
        },
        style:style
    })
}

export const hoverLine = (el,line,y2) => {
    window.onmousemove = function (e) {
        line.animateTo({
            shape:{
                x1:e.offsetX,
                y1:0,
                x2:e.offsetX,
                y2:y2
            }
        },50,0)
    }
}
//時間格式化
export const getFullTime = (i) => {
    return moment(i).format("YYYY-MM-DD HH:mm:ss");
}
//貝塞爾曲線
export const BezierCurve = (x1,y1,x2,y2,cpx1,cpy1,style) => {
    return new zrender.BezierCurve({
        shape:{
            x1:x1,
            y1:y1,
            x2:x2,
            y2:y2,
            cpx1:cpx1,
            cpy1:cpy1
        },
        style:style,
    });
}

這裡創建完成後畫板區域基本完成加上數據就能看見效果了

關註公眾號回覆 體溫單 獲取源代碼

 

 

 

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

-Advertisement-
Play Games
更多相關文章
  • 開發人員都應該瞭解的 7 種 JavaScript 設計模式
    開發人員將 JavaScript 設計模式作為解決問題的模板是很合適的，但並不是說這些模式可以代替開發人員的工作。 通過設計模式，我們可以將許多開發人員的經驗結合起來，以優化過的方式來構造代碼，從而解決我們所面對的問題。設計模式還提供了用於描述問題解決方案的通用辭彙表，而不是去枯燥地描述代碼的語法和 ...
  • web前端開發入門全套學習方法路徑，兼職在家做網站也能月入上萬！
    前端學習路徑 1.WEB前端快速入門 在本階段，我們需要掌握 HTML 與 CSS 基礎，當然，也包含 H5 和 C3 的新特性。這個部分內容非常簡單，而且非常容易掌握。相信你也更願意學習這個部分，畢竟他可以讓你最直觀的感受到前端的魅力。為了鍛煉大家寫代碼，可以根據你喜歡的站點去實現效果。這一階段是 ...
  • 我對前端技術更新的看法以及未來發展趨勢預測
    前端開發如何看待“別更新了，學不動了”？Deno、TypeScript 等新輪子層出不窮，未來前端重點方向在哪？前端開發在大前端浪潮下如何持續學習、成長？ SpriteJS 3.0 的特性和規劃 SpriteJS 是由 360 奇舞團開源的跨平臺高性能圖形系統，它能夠支持 web、node、桌面應用 ...
  • vue解決跨域問題
    當下流行的前後端分離項目，常遇跨域問題，現從兩點，解決跨域問題 1.跨域本質：由於瀏覽器的同源策略 同源策略本是瀏覽器最基本的安全功能，是為了防止從一個域上載入另一個域上的信息，舉個例子：A有一個百寶箱，B有一個百寶箱，各自的百寶箱隨便取，但A要是取B的，或者B要是取A的，就會被拒絕 當協議，功能變數名稱， ...
  • 安裝react-redux後編譯報錯
    安裝了react-redux後，npm start報下麵錯誤 Failed to compile. ./node_modules/[email protected]@react-redux/es/connect/mapDispatchToProps.js Module not found: Can ...
  • Web前端工程師就業薪資有多少？新人能月入過萬嗎？
    據統計，國外的前端開發人員和後端開發人員比例約為1:1，但是國內比例卻在1:3以下，web前端開發職位的人才缺口巨大。 根據網上統計數據,上海Web前端開發工程師這一職位的月平均收入為1.5萬元，工作經驗達到3年的web前端工程師甚至達到3萬元。 而且Web前端工程師一般工作1年左右,年薪一般就都能 ...
  • Taro 3 正式版發佈：開放式跨端跨框架解決方案
    作者：凹凸曼 - yuche 從 Taro 第一個版本發佈到現在，Taro 已經接受了來自於開源社區兩年多的考驗。今天我們很高興地在黨的生日發佈 Taro 3（Taro Next）正式版，希望 Taro 未來的更多兩年能像一名共產主義戰士一樣經受住更多的考驗。以下是 Taro 3 的一些新增特性： ...
  • CSS 三大特性 層疊 繼承 優先順序
    css三大特性 層疊性: 如果一個屬性通過兩個相同選擇器設置到同一個元素上，相同的屬性就會出現衝突,那麼這個時候一個屬性就會將另一個屬性層疊掉,採用的是就近原則 繼承性: 子標簽會繼承父標簽的某些樣式 一般以font­,line­,color,text­,list­,都能繼承 備註 : a標簽不能繼 ...
一周排行
    -Advertisement-
    Play Games
  • GoF之工廠模式
    GoF之工廠模式 @目錄GoF之工廠模式每博一文案1. 簡單說明“23種設計模式”1.2 介紹工廠模式的三種形態1.3 簡單工廠模式（靜態工廠模式）1.3.1 簡單工廠模式的優缺點:1.4 工廠方法模式1.4.1 工廠方法模式的優缺點:1.5 抽象工廠模式1.6 抽象工廠模式的優缺點：2. 總結:3 ...
  • dotnet C# 簡單的追加文件夾到 ZipArchive 壓縮文件的方法
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • Elasticsearch 系列（六）- ES數據同步和ES集群
    本章將和大家分享ES的數據同步方案和ES集群相關知識。廢話不多說，下麵我們直接進入主題。 一、ES數據同步 1、數據同步問題 Elasticsearch中的酒店數據來自於mysql資料庫，因此mysql數據發生改變時，Elasticsearch也必須跟著改變，這個就是Elasticsearch與my ...
  • 自動化測試數據生成：Asp.Net Core單元測試利器AutoFixture詳解
    引言 在我們之前的文章中介紹過使用Bogus生成模擬測試數據，今天來講解一下功能更加強大自動生成測試數據的工具的庫"AutoFixture"。 什麼是AutoFixture? AutoFixture 是一個針對 .NET 的開源庫，旨在最大程度地減少單元測試中的“安排（Arrange）”階段，以提高 ...
  • .NET Emit 入門教程：第七部分：實戰項目1：將 DbDataReader 轉實體
    經過前面幾個部分學習，相信學過的同學已經能夠掌握 .NET Emit 這種中間語言，並能使得它來編寫一些應用，以提高程式的性能。隨著 IL 指令篇的結束，本系列也已經接近尾聲，在這接近結束的最後，會提供幾個可供直接使用的示例，以供大伙分析或使用在項目中。 ...
  • Windows下綁定線程到指定的CPU核心
    當從不同來源導入Excel數據時，可能存在重覆的記錄。為了確保數據的準確性，通常需要刪除這些重覆的行。手動查找並刪除可能會非常耗費時間，而通過編程腳本則可以實現在短時間內處理大量數據。本文將提供一個使用C# 快速查找並刪除Excel重覆項的免費解決方案。 以下是實現步驟： 1. 首先安裝免費.NET ...
  • mORMot 1.18 第07章 簡單的讀寫操作
    C++ 異常處理 C++ 異常處理機制允許程式在運行時處理錯誤或意外情況。它提供了捕獲和處理錯誤的一種結構化方式，使程式更加健壯和可靠。 異常處理的基本概念： 異常: 程式在運行時發生的錯誤或意外情況。 拋出異常: 使用 throw 關鍵字將異常傳遞給調用堆棧。 捕獲異常: 使用 try-catch ...
  • mORMot 1.18 第06章 概念
    優秀且經驗豐富的Java開發人員的特征之一是對API的廣泛瞭解，包括JDK和第三方庫。 我花了很多時間來學習API，尤其是在閱讀了Effective Java 3rd Edition之後 ，Joshua Bloch建議在Java 3rd Edition中使用現有的API進行開發，而不是為常見的東西編 ...
  • php 開發規範
    框架 · 使用laravel框架，原因：tp的框架路由和orm沒有laravel好用 · 使用強制路由，方便介面多時，分多版本，分文件夾等操作 介面 · 介面開發註意欄位類型，欄位是int，查詢成功失敗都要返回int（對接java等強類型語言方便） · 查詢介面用GET、其他用POST 代碼 · 所 ...
  • 2024 年 4 月 28 日 周日 晴 熱（1253 字）
    正文 下午找企業的人去鎮上做貸後。 車上聽同事跟那個司機對罵，火星子都快出來了。司機跟那同事更熟一些，連我在內一共就三個人，同事那一手指桑罵槐給我都聽愣了。司機也是老社會人了，馬上聽出來了，為那個無辜的企業經辦人辯護，實際上是為自己辯護。 “這個事情你不能怪企業。”“但他們總不能讓銀行的人全權負責， ...
所有分類