Vue+element+Nodejs學習記錄（7）

1.element中Table表格的使用

先看官網的一個示例：

<template>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      label="日期"
      width="180">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span style="margin-left: 10px">{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="180">
      <template slot-scope="scope">
        <el-popover trigger="hover" placement="top">
          <p>姓名: {{ scope.row.name }}</p>
          <p>住址: {{ scope.row.address }}</p>
          <div slot="reference" class="name-wrapper">
            <el-tag size="medium">{{ scope.row.name }}</el-tag>
          </div>
        </el-popover>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀區金沙江路 1516 弄'
        }]
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    }
  }
</script>

代碼解釋看下圖：

2.element中Table進階使用

我們想實現的功能是數據的動態加載和數據的編輯和刪除。

//通過生命週期函數created（）加載後端數據展示在網頁上
<el-table :data="tableData" style="width: 100%"> 
  <el-table-column label="日期" align="center" width="160">
    <template slot-scope="scope">
      <span>{{scope.row.createtime|moment("YYYY-MM-DD")}}</span>
    </template>
  </el-table-column>
  <el-table-column label="姓名" align="center" width="160">
    <template slot-scope="scope">
      <span>{{scope.row.author}}</span>
    </template>
  </el-table-column>
  <el-table-column label="標題" align="center" width="160">
    <template slot-scope="scope">
      <span>{{scope.row.title}}</span>
    </template>
  </el-table-column>
  <el-table-column label="內容" align="center" width="160">
    <template slot-scope="scope">
      <span>{{scope.row.content}}</span>
    </template>
  </el-table-column>
  <el-table-column label="操作" align="center">
    <template slot-scope="scope">
      <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">編輯</el-button>
      <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除</el-button>
    </template>
  </el-table-column>
</el-table>

<script>

export defalut{
	data(){
		return {
			tableData:[]
		}
	},
    created(){ //進入頁面就執行，獲取table數據 http://localhost:8000/api/blog/list
      this.getProfile();
    },
    methods:{
		getProfile(){
  			this.$axios.get("/api/blog/list")
    			.then( res =>{
      				//console.log(res.data)
      				//console.log(res.data instanceof Array)
      				this.tableData = res.data.data; //res.data返回的是{data:Array(3),errno:0}，所以使用res.data.data
      				console.log(this.tableData)
    			})
    		.catch( err => {
      			console.log(err)
    		})
		}
	}
}
</script>

我們接下來要實現編輯和刪除操作（彈出的dialog我們使用子組件來使用，要注意數據的傳遞）

//row包含着所在行的所有數據
<script>

import Dialog from '../components/DialogFound'

export default{
	name:"foundList",
    data() {
      return {
        tableData: [],
        dialog:{
          show:false,
          title:"編輯用戶信息",
          option:"edit"
        },
        formData:{
          title:"",
          content:"",
          id:""
        }
      }
    },
    created(){ //進入頁面就執行，獲取table數據 http://localhost:8000/api/blog/list
      this.getProfile();
    },
    methods:{
      getProfile(){
        this.$axios.get("/api/blog/list")
          .then( res =>{
            //console.log(res.data)
            //console.log(res.data instanceof Array)
            this.tableData = res.data.data; //res.data返回的是{data:Array(3),errno:0}，所以使用res.data.data
            console.log(this.tableData)
          })
          .catch( err => {
            console.log(err)
          })
      },
      handleEdit(index,row){
        //console.log(index,row);
        this.dialog.show = true;
        console.log(row.id,row.title,row.content)
        this.formData = {
          id:row.id,
          title:row.title,
          content:row.content
        }
      },
      handleDelete(index,row){
        console.log(index,row.id);
        this.$axios.post("api/blog/del",{
          id:row.id
        })
          .then(res =>{
            if(res.data.errno === 0){
              this.$message({
                message:'刪除成功',
                type:'success'
              })
              this.getProfile();
            }
          })
          .catch(err =>{
            console.log(err)
          })
      }
    },
    components:{
      Dialog
    }
  }
</script>

上面getProfile函數會把數據的id、title、content、createtime和author數據請求到，編輯功能的handleEdit把this.dialog.show設置爲true，讓dialog顯示，同時把點擊的那行數據row分別賦值給formData，不僅是顯示數據，而且也獲取我們點擊是在哪一個ID，方便後面axios請求參數的確定。刪除功能的handleDelete主要的參數是row.id刪除對應的數據。

下面我們書寫子組件DialogFound.vue

<template>
	
<div class="logFound">

	<el-dialog 
	:title="dialog.title" 
	:visible.sync="dialog.show"
	:close-on-click-modal="false"
    :close-on-press-escape="false"
    :modal-append-to-body="false" >
		
		<div class="form">
			
			<el-form
				ref="formData"
				:model="formData"
				:rules="form_rules"
				label-width="120px"
				style="margin-left:-10px;width:auto">
				
				<el-form-item prop="title" label="標題:">
            		<el-input type="title" v-model="formData.title"></el-input>
          		</el-form-item>

          		<el-form-item prop="content" label="內容:">
            		<el-input type="content" v-model="formData.content"></el-input>
          		</el-form-item>

          		<el-form-item class="text_right">
          			<el-button @click="dialog.show = false">取消</el-button>
          			<el-button type="primary" @click='onSubmit("formData")'>提 交</el-button>
          		</el-form-item>


			</el-form>


		</div>
		

	</el-dialog>
	
</div>


</template>

<script type="text/javascript">
	
	export default{
		name:'logfound',
		props:{
			dialog:Object,
			formData:Object
		},
		data() {
	      return {
	        form_rules: {
		        title: [
		          { required: true, message: "標題不能爲空！", trigger: "blur" }
		        ],
		        content: [
		          { required: true, message: "內容不能爲空！", trigger: "blur" }
		        ]
      		}
		  };
	    },
	    methods:{
	    	onSubmit(formData){
	    		this.$refs[formData].validate(valid =>{
	    			if(valid){
	    				this.$axios.post("api/blog/update",{
	    					id:this.formData.id,
	    					title:this.formData.title,
	    					content:this.formData.content
	    				})
	    					.then(res =>{
	    						if(res.data.errno === 0){
	    							//操作成功
	    							this.$message({
	    								message:"保存成功！",
	    								type:"success"
	    							});
	    							this.dialog.show = false;
	    							this.$emit("update")
	    						}
	    					})
	    					//console.log(this.formData.id)/* */
	    			}
	    		})
	    	}
	    }
    }
    	

</script>

<style scoped type="text/css">
	

</style>

我們要注意使用props接收父組件傳遞過來的dialog和formData，在el-form中建議ref和：model使用同一個值，因爲使用不同值時候，報錯，:model=“formData”就是接收傳遞過來的值，我們要填充在el-form-item中，v-model中使用formData.title和formData.content賦值，我們注意@click="dialog.show = false"的寫法，簡單了很多，提交時候，就是把我們表單中提交的數據update數據庫，然後刷新當前頁面進行顯示，onSubmit()函數的參數就是我們的數據formData，在函數把我們填寫的title和content數據和傳遞過來的id數據作爲參數調用api/blog/update接口，進行更新數據，更新數據後，我們還要關閉窗口和頁面刷新顯示，所以設置this.dialog.show=false和this.$emit(“update”)，父組件進行接收，然後重新調用getProfile（）函數進行獲取數據和顯示。

<Dialog :dialog='dialog' :formData='formData' @update="getProfile" ></Dialog>

3.Vue中使用moment

1.安裝
npm install vue-moment

main.js添加：Vue.use(require('vue-moment'));

2..vue文件使用
<span>{{ someDate | moment("dddd, MMMM Do YYYY") }}</span>

參考文章：
https://www.npmjs.com/package/vue-moment
https://blog.csdn.net/qq_26422747/article/details/78697936
https://blog.csdn.net/Bright2017/article/details/74231668
https://blog.csdn.net/fu983531588/article/details/89330929

4.Vue中使用百度地圖

1.在index.html中引入script

<script src='http://api.map.baidu.com/api?v=2.0&ak=你的密鑰&callback=init'></script>

2.給定容器，調用API繪圖

<template>

	  <!--引入地圖文件-->
      <div id="allmap" style="width: 500px;height: 390px;margin-top: 60px;margin-left: 120px">

        <!--復興公園：121.475063,31.223459-->
        <!--世紀公園：121.558426,31.223459-->
        <!--海棠公園：121.394,31.256064-->

      </div>

</template>

<script>

	export default{
		methods:{
			drawMap(){
				// 百度地圖API功能
				var map = new BMap.Map("allmap");    // 創建Map實例
				map.centerAndZoom(new BMap.Point(121.474488, 31.224942), 12);  // 初始化地圖,設置中心點座標和地圖級別

			    //三個監測點的信息
			    var data_info = [
			        [121.475063,31.223459,"地址：上海市復興公園"],
			        [121.558426,31.223459,"地址：上海市世紀公園"],
			        [121.394,31.256064,"地址：上海市海棠公園"]
			    ];

			    //彈出框設置
			    var opts = {
							width : 100,     // 信息窗口寬度
							height: 80,     // 信息窗口高度
							title : "監測點" , // 信息窗口標題
							enableMessage:true//設置允許信息窗發送短息
			    };

			    for(var i=0;i<data_info.length;i++){
					var marker = new BMap.Marker(new BMap.Point(data_info[i][0],data_info[i][1]));  // 創建標註
					var content = data_info[i][2]+ "<div><a href='/manage-content'>水質詳情</a></div>";
					map.addOverlay(marker);               // 將標註添加到地圖中
					addClickHandler(content,marker);
				}

				function addClickHandler(content,marker){
					marker.addEventListener("click",function(e){
						openInfo(content,e)}
					);
				}

				function openInfo(content,e){
					var p = e.target;
					var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
					//InfoWindow(content: String | HTMLElement, opts: InfoWindowOptions)
			        //創建一個信息窗實例，其中content支持HTML內容。1.2版本開始content參數支持傳入DOM結點
					var infoWindow = new BMap.InfoWindow(content,opts);  // 創建信息窗口對象
					map.openInfoWindow(infoWindow,point); //開啓信息窗口
				}

			    //添加地圖類型控件
				map.addControl(new BMap.MapTypeControl({
					mapTypes:[
			            BMAP_NORMAL_MAP,
			            BMAP_HYBRID_MAP
			        ]}));
				map.setCurrentCity("上海");          // 設置地圖顯示的城市 此項是必須設置的
				map.enableScrollWheelZoom(true);     //開啓鼠標滾輪縮放
			}
		},
		mounted(){
			this.drawMap()
		}
	} 

</script>

參考文章：https://blog.csdn.net/DOCALLEN/article/details/70877925

5.Vue中使用echarts

1.安裝echarts項目依賴

npm install echarts --save

2.在main.js中全局引入echarts

import echarts from “echarts”;
Vue.prototype.$echarts = echarts;

3.創建圖表

<template>
  <div id="app">
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>
export default {
  name: "app",
  methods: {
    drawChart() {
      // 基於準備好的dom，初始化echarts實例
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定圖表的配置項和數據
      let option = {
        title: {
          text: "ECharts 入門示例"
        },
        tooltip: {},
        legend: {
          data: ["銷量"]
        },
        xAxis: {
          data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"]
        },
        yAxis: {},
        series: [
          {
            name: "銷量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };
      // 使用剛指定的配置項和數據顯示圖表。
      myChart.setOption(option);
    }
  },
  mounted() {
    this.drawChart();
  }
};
</script>

參考文章：https://juejin.im/post/5c0f6c6ae51d451ac27c4532

還可以參考：
https://juejin.im/post/5bfe4968f265da61407e9c12
https://blog.csdn.net/mr_wuch/article/details/70225364
https://segmentfault.com/a/1190000015453413

6.點擊按鈕動態切換

我們先看一個原生JS操作DOM的方法：

//思路就是，點擊函數傳遞每個折線圖的ID，通過判斷ID，設置style.display
<el-row>
	<el-button @click="handleDis('pressure')" type="primary" plain>氣壓</el-button>
	<el-button @click="handleDis('temperature')" type="primary" plain>溫度</el-button>
	<el-button @click="handleDis('tds')" type="primary" plain>濁度</el-button>
</el-row>

<div id="pressure"  style="float: left;width: 500px;height:300px;display: block"></div>
<div id="temperature" style="float: left;width: 500px;height:300px;display: none"></div>
<div id="tds" style="float: left;width: 500px;height:300px;display: none"></div>

handleDis(index){

	console.log(index=='pressure') //變量可以不加引號，但是常量要注意加引號

	let pre = document.getElementById("pressure");
	let tem = document.getElementById("temperature");
	let tds1 = document.getElementById("tds");

	if(index=='pressure'){

		pre.style.display = "block";
		tem.style.display = "none";
		tds.style.display = "none";

	}else if(index=='temperature'){

		pre.style.display = "none";
		tem.style.display = "block";
		tds.style.display = "none";

	}else{

		pre.style.display = "none";
		tem.style.display = "none";
		tds1.style.display = "block";

	}

}

接下來使用vue的v-show實現：

v-if顯示隱藏是將dom元素整個添加或刪除，而v-show隱藏則是爲該元素添加css–display:none，dom元素還在。

參考文章：https://www.cnblogs.com/echolun/p/7803943.html

//Vue提倡數據驅動，所以建議使用v-show或者v-if（注意v-show和v-if的值都是""括起來，不是{{}})
<el-row>
	<el-button @click="handleDis('pressure')" type="primary" plain>氣壓</el-button>
	<el-button @click="handleDis('temperature')" type="primary" plain>溫度</el-button>
	<el-button @click="handleDis('tds')" type="primary" plain>濁度</el-button>
</el-row>

<div id="pressure" v-show="preVal" style="float: left;width: 500px;height:300px;"></div>
<div id="temperature" v-show="temVal" style="float: left;width: 500px;height:300px;"></div>
<div id="tds" v-show="tdsVal" style="float: left;width: 500px;height:300px;"></div>


handleDis(index){

	console.log(index=='pressure') //變量可以不加引號，但是常量要注意加引號


	if(index=='pressure'){

		this.preVal = true
		this.temVal = false
		this.tdsVal = false

	}else if(index=='temperature'){

		this.preVal	= false
		this.temVal	= true
		this.tdsVal	= false

	}else{

		this.preVal	= false
		this.temVal	= false
		this.tdsVal	= true

	}

}

Vue+element+Nodejs學習記錄（7）

win11關閉自動檢測病毒刪文件

千兆寬帶實際網速能到達多少？

Vue中ref和:ref

Anaconda基礎使用

Vue+element+Nodejs學習記錄（7）

Vue+element+Nodejs學習記錄（6)

Vue+element+Nodejs學習記錄（8）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結