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教程