Vue自定義alertTip組件，Go發郵件email的簡單使用

時間  2020-02-29
標籤 vue 自定義 alerttip 組件 郵件 email 簡單 使用 简体版
原文   原文鏈接

要快樂啊

Vue自定義alertTip組件，Go的email簡單使用

再來扒一扒自定義組件（沒想到吧，竟然仍是個連續劇！）。咱們來定義一個彈窗組件alertTig，而後再把最近學習的Go中發送郵件email的使用分享一下~vue

首先Vue自定義alertTip組件

效果初覽

先來粗暴的看個效果好了。 node

alertTip
點擊「提示退出」後：

alertTip
倫家雖然沒什麼樣式，可是好歹五臟仍是全的（絕對不是懶得寫樣式）。來瞅瞅怎麼實現的吧！

組件開發

在vue項目的components目錄下，新建一個common目錄,在這裏建一個alertTip.vue,如今來設計一個通用組件。git

<template>
  <div class="alert_container">
    alertTip //先隨便寫一個象徵通用組件的，先讓他在頁面中展現出來
  </div>
</template>
複製代碼

再放一個props(從外部接收值的)。github

<script>
export default {
    props:[] //在這裏定義外界會給他什麼的參數
}
</script>
複製代碼
  1. 一個數據驅動界面，數據屬性，不僅有data,還有props、computed（計算屬性）等。props中的值，是父組件傳給子組件的值。由於有了props,咱們的通用組件就能實現他的通用性。只要把那些須要變化的數據傳進來，咱們就能根據通用的結構，把須要改變的數據顯示出去。因此能夠說，props中的數據是由於須要，裏面的參數纔會出現。
  2. data在這種通用組件中，最好是過多的有數據，爲何？由於，做爲一個子組件（或者做爲一個通用組件來講），它作的是一些通用的業務能力，它其中變化的地方由外界來傳遞。data這個數據項，其實不是設計給子組件用的，data這個數據項他更傾向因而一個私有的數據。頁面級別組件用data會比較多，由於私有數據比較多。簡單說，props中的數據是外界傳過來的，data中的數據是私有的數據。
    這裏我接着個人vue寫走這裏有前面的代碼。

App.vue中

  1. 咱們須要一個alert的通用功能，先準備引入將要編寫的組件
import AlertTip from './components/common/alertTip'; //通用組件放components下面,業務組件放外面。
複製代碼
  1. 在components中註冊組件：
components: { //組件聲明
    // 組件註冊過的才能用，要先註冊 這是外界導入的AlertTip
    'alert-tip': AlertTip 
  }  
複製代碼

'alert-tip'就是咱們自定義的要寫在頁面上的標籤的名字。編譯時，就會從這裏找要解析的組件。此時會顯示咱們以前在alertTip.vue中寫的簡單的alertTip。引入成功，接着來App.vue,在寫一點：golang

  1. 完成了引入以後，要考慮，咱們的alert是隻有在好比單擊按鈕觸發時，他纔會出現的，平時是看不見的。用到v-if
<template>
  <div id="app">
    <alert-tip v-if="showAlert"/>
</div>
</template>
<script>
export default {
  data() {
    return {
      showAlert :false
    }
  },
  components: { //組件聲明
    // 組件註冊過的才能用，要先註冊 這是外界導入的AlertTip
    'alert-tip': AlertTip 
  }  
</script>
複製代碼

此時，咱們頁面上alertTip就不見了。那如何讓它點擊後彈出來呢？經過一個<button>來模擬一下bash

<template>
  <div id="app">
    <alert-tip v-if="showAlert"/>
    <!-- 怎麼讓他出現？ -->
    <button @click="showCancelAlert">提示退出</button>
</div>
</template>
<script>
export default {
  data() {
    return {
      showAlert :false
    }
  },
  components: { //組件聲明
    // 組件註冊過的才能用，要先註冊 這是外界導入的AlertTip
    'alert-tip': AlertTip 
  }  
</script>
複製代碼

將點擊事件添加到methods中：服務器

methods:{
    showCancelAlert(){
      this.showAlert = true
    }
}
複製代碼

此時，點擊了按鈕，alertTip纔會出現。接着，要讓彈出來的信息究竟是登陸的彈框仍是退出的彈框要有一個區別，有外界決定，彈出的是什麼信息。這就是一個props的使用。把alertText傳進去，其含義是彈出的提示信息。app

<alert-tip v-if="showAlert" :alertText="alertText"/>//用冒號，表示裏面是一個js的運行區域
<button @click="showCancelAlert">提示退出</button>
<button @click="showLoginAlert">提示登陸</button>
複製代碼
data() {
    return {
      showAlert :false,
      alertText: '' //就是當前頁面的數據。傳給組件，賦值組件
    }
  },
  methods:{
    showLoginAlert(){
      this.alertText = "你真的要登陸嗎？"
      this.showAlert = true
    },
    showCancelAlert(){
      this.alertText = "你真的退出嗎？"
      this.showAlert = true
    }
}
複製代碼

alertText就能在組件中傳入了，alterTip.vue中：less

export default {
    props:[
        'alertText'
    ] //外界給他什麼，咱們的alertTip就是外界傳數據的 
}
複製代碼
<template>
  <div class="alert_container">
    {{alertText}} //綁定傳進來的數據
  </div>
</template>
複製代碼

能夠實現點擊按鈕後彈出彈窗了，按照慣常思惟，咱們還須要一個點擊事件，就像彈窗的確認按鈕，使彈窗消失：mvvm

<p class="tip_text">{{alertText}}</p>
<!-- 肯定，點完後關閉它，怎麼作？通知父組件，叫父組件把showAlert->false mvvm(子組件通知父組件)-->
<div class="confirm" @click="closeTip">確認</div>
複製代碼
methods:{
        closeTip(){
            // showTip如今這裏是改不了的，由於組件在父組件那邊，那就要去通知父親
            // $emit能夠觸發一個通知父親,能夠出發通知 
            this.$emit('closeTip') //申請的名字叫closeTip，App.vue怎麼接收呢？
        }
    },
複製代碼

App.vue這裏怎麼接受到呢？

<alert-tip v-if="showAlert" :alertText="alertText" @closeTip="closeAlert"/>
複製代碼

其中@closeTip="closeAlert"表示自定義一個事件，意思就是，當咱們的子組件發出一個叫closeTip的事情以後，（就是咱們前面的this.$emit('closeTip')),那麼咱們的父組件就來執行相應的方法（closeAlert（））。

closeAlert(){
      this.showAlert = false
    }
複製代碼

就能實現了，在來添加一下樣式，讓它實現彈窗的效果： alertTip.vue中

<style lang='stylus' scoped>
// scoped是不影響外面的，而後用命名系統，儘可能不受外面影響
// 要是別人想修改樣式？stylus是能夠編譯的，能夠經過變量，生成不一樣風格 好比TabPane
@import '../../style/mixin';
.alert_container
  position fixed
  top 0
  left 0
  right 0
  bottom 0
  z-index 200
  background-color rgba(0,0,0,.3)
  .tip_text_container
    position absolute
    top 50%
    left 50%
    margin-top -6rem
    margin-left -6rem
    width 12rem
    animation tipMove .4s
    background-color rgba(255, 255, 255, 1)
    border 1px
    padding-top 0.6rem
    display flex
    justify-content center
    align-items center
    flex-direction column
    border-radius 0.25rem
    .tip_icon //作出一個驚歎號加圓圈的圖形出來
      wh(3rem, 3rem)
      border 0.15rem solid #f8cb86
      border-radius 50%
      display flex
      justify-content center
      align-items center
      flex-direction column
      span:nth-of-type(1) //驚歎號的上半部
        wh(.12rem, 1.5rem)
        background-color #f8cb86
      span:nth-of-type(2) //驚歎號的下面的原點
        wh(.2rem, .2rem)
        border 1px
        border-radius 50%
        margin-top 0.2rem
        background-color #f8cb8b
    .confirm
        border 1px solid #cbcbbc
        border-radius 0.2em
</style>

複製代碼

引入的mixin樣式文件mixin.styl。

再來看Go的email

配置Go環境

沒有Go環境的能夠先安裝一下Go安裝包 我用的使vs code運行的Go，我的經驗：以管理員身份運行VS code後執行：

go env -w GO111MODULE=on
go env -w GOPROXY=https://mirrors.aliyun.com/goproxy/,direct
go get -u github.com/gin-gonic/gin //全局安裝gin，不用gin的能夠先不裝
複製代碼

開始吧，email

寫Go，先導入main包,Go中每一個文件必定得屬於有一個模塊，它是強模塊類型的。寫好入口函數main(),每一個項目都有惟一一個main函數。

package main
func main(){ 
}
複製代碼

安裝第三方庫，在項目終端輸入：

go get github.com/jordan-wright/email 按照發郵件流程：

func main() { //入口函數
	e := email.NewEmail() 
	e.From = "linana <1111111111@qq.com>" //發件人 ，記得後面要用<>括起來 //這裏的qq號是我隨便編的，爲使代碼有更好的效果感覺，建議實驗時用真實的
	//給多個用戶發郵件 { }集合
	e.To = []string{"2222222222@qq.com", "3333333333@qq.com"}
	e.Subject = "你今天洗澡嗎？" //標題
	e.Text = []byte("洗不洗呢？洗不洗呢？洗不洗呢？") //內容
	//使用QQ的郵件代理服務器smtp
	err := e.Send("smtp.qq.com:25", smtp.PlainAuth("", "1111111111@qq.com", "fdfsfsdfsdfsdfsaf", "smtp.qq.com"))
	// 經過帳號和密碼，登陸到郵件服務器而後把郵件對象交給它發送出去。
	if err != nil {
		log.Fatal(err)
	}
}
複製代碼
  1. Go中 := 是定義而且附值,NewEmail()方法會返回對象，由今生成email實例，NewEmail就會具備如下能力：好比後面寫的e.From,e.To等等。
  2. 關於[]string{"2222222222@qq.com", "3333333333@qq.com"}，郵箱的類型是字符串類型，string,Go語言中，使用花括號做爲集合的容器。
  3. 關於e.Text = []byte("洗不洗呢？洗不洗呢？洗不洗呢？")，字節型的，用（）盛放內容。
  4. 關於：
err := e.Send("smtp.qq.com:25", smtp.PlainAuth("", "111111111111@qq.com", "fdfsfsdfsdfsdfsaf", "smtp.qq.com"))`
複製代碼

使用QQ的郵件代理服務器smtp，25是smtp服務器默認的端口號。 進行一個郵箱驗證：smtp.PlainAuth（），由郵件傳輸模塊提供該功能。

import (
	"log"
	"net/smtp"
	"github.com/jordan-wright/email"
)
複製代碼

本地並無搭建郵件服務器，因此發送到QQ,由騰訊服務器代理轉發，同時要擁有權限，即後面的QQ郵箱及驗證碼（注意，這裏的密碼不是QQ密碼，是QQ郵箱設置中email帳戶 POP中的受權碼）：

受權碼
而smtp.qq.com是域名。

此時，就是實現了郵件的發送了! 能夠再試試發送附件和連接：

// 連接  多行字符
	e.HTML = []byte(`
	<ul>
		<li><a href="https://juejin.im/user/5e1f1ac1e51d451c58017fe0">掘金1</a></li>
		<li><a href="https://juejin.im/post/5e54ae98f265da57563253e5">掘金2</a></li>
	</ul>
	`)
	// 再發一個附件吧
	e.AttachFile("yb.jpeg") // 附件
複製代碼

其中的附件的路徑要注意根據本身的路徑來寫啊！另外，上面的傳輸信息都要放在e.Send前面！！！
最後貼上完整代碼：

package main //包
//安裝node中的 node_mail go中是email（不是內置的，要另外安裝）
import (
	"log"
	"net/smtp"
	"github.com/jordan-wright/email"
)

func main() { //入口函數
	e := email.NewEmail() 
	e.From = "huhuilin <1111111111@qq.com>"
	// [] ? Array? 多個用戶發郵件 { }集合
	e.To = []string{"2222222222@qq.com", "3333333333@qq.com"}
	e.Subject = "你今天洗澡嗎？"              //標題
	e.Text = []byte("洗不洗呢？洗不洗呢？洗不洗呢？") //內容，字節型的，用（

	// 連接  多行字符
	e.HTML = []byte(`
	<ul>
		<li><a href="https://juejin.im/user/5e1f1ac1e51d451c58017fe0">掘金1</a></li>
		<li><a href="https://juejin.im/user/5e1f1ac1e51d451c58017fe0">掘金2</a></li>
	</ul>
	`)
	// 再發一個附件吧
	e.AttachFile("yb.jpeg") // 附件
	err := e.Send("smtp.qq.com:25", smtp.PlainAuth("", "11111111111@qq.com", "fdfsfsdfsdfsdfsaf", "smtp.qq.com"))

	if err != nil {
		log.Fatal(err)
		// 要添加log模塊
		// 想到於js的console.log()
		// console.error()
		//有錯誤就打印錯誤 並且信息的類型是Fatal致命的
	}
}

複製代碼

這裏是結尾

一個簡單的分享，還有很對不足，歡迎給出建議和補充！
附上github , 拜拜~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程