Vue custom alertTip component, easy to use Go email

Take a look at custom components (surprise, it’s a soap opera!) . Let’s define a pop-up component called alertTig, and then share a recent study of the use of email in Go

First, Vue defines the alertTip component

Effect of early and look

Let’s take a rough look at it first.

Component development

Under the Components directory of the Vue project, create a new common directory and create an Alerttip. vue. Now design a common component.

<template>
  <div class="alert_container"</div> </template>Copy the code

Put another props(for receiving values from outside).

<script>
exportDefault {props:[] // here to define what the outside world will give him} </script>Copy the code

A data-driven interface, data attributes, not just thatdata, as well asprops,computed(Calculate attributes), etc.propsIs the value passed from the parent to the child. Because of theprops, our universal components can achieve its universal. By passing in the data that needs to be changed, we can display the data that needs to be changed according to a common structure. So you can say,propsThe parameters are only present because they are needed.
dataIn this generic component, it’s better to have too much data. Why? Because, as a child component (or as a generic component), it does some generic business capability where changes are passed on from the outside.dataThe data item, which is not designed for child components, is more of a private data item. Page level componentsdataMore, because there’s more private data. In a nutshell,propsData from the outside world,dataData in is private data.

So I’m going to continue my vue hereLet’s go. Here’s the previous code.

App. Vue

We need a generic feature for Alert, ready to introduce the components we’ll be writing

import AlertTip from './components/common/alertTip'; // Put generic components under components, business components outside.Copy the code

Components: {// component declaration // components registered to use, to register this is the external import of AlertTip'alert-tip': AlertTip 
  }  
Copy the code

‘alert-tip’ is the name of our custom tag to write on the page. At compile time, this is where you look for the component to parse. The simple alertTip we wrote earlier in Alerttip.vue is displayed. Successful introduction, then app. vue, write a bit:

After the introduction is complete, consider that our alert only appears when, for example, a button is clicked, it is invisible. usev-if

<template>
  <div id="app">
    <alert-tip v-if="showAlert"/>
</div>
</template>
<script>
export default {
  data() {
    return {
      showAlert :false}}, components: {// component declaration // components registered to use, to register this is the external import AlertTip'alert-tip': AlertTip 
  }  
</script>
Copy the code

At this point, the alertTip is gone from our page. So how do you make it pop up when you click on it? Simulate this with a <button>

<template>
  <div id="app">
    <alert-tip v-if="showAlert"/ > <! -- How to make him appear? --> <button @click="showCancelAlert"</button> </div> </template> <script>export default {
  data() {
    return {
      showAlert :false}}, components: {// component declaration // components registered to use, to register this is the external import AlertTip'alert-tip': AlertTip 
  }  
</script>
Copy the code

Add click events to methods:

methods:{
    showCancelAlert(){
      this.showAlert = true}}Copy the code

When the button is clicked, an alertTip will appear. And then you have to make a difference in whether the information that pops up is a login or an exit, and it’s up to the outside world to decide what kind of information pops up. This is a use of props. Pass in an alertText, meaning a pop-up message.

<alert-tip v-if="showAlert" :alertText="alertText"< button@click = /> < button@click ="showCancelAlert"</button> < button@click ="showLoginAlert"</button>Copy the code

data() {
    return {
      showAlert :false,
      alertText: ' '// Is the current page data. }}, methods:{showLoginAlert(){
      this.alertText = "Do you really want to log in?"
      this.showAlert = true
    },
    showCancelAlert(){
      this.alertText = "Are you really quitting?"
      this.showAlert = true}}Copy the code

An alertText can then be passed into the component in Altertip.vue:

export default {
    props:[
        'alertText'[// What does the outside world give him, our alertTip is the outside world to send data}Copy the code

<template>
  <div class="alert_container"> {{alertText}} // bind incoming data </div> </template>Copy the code

We can realize the popover after clicking the button, according to the usual thinking, we also need a click event, just like the confirm button of the popover, so that the popover disappears:

<p class="tip_text">{{alertText}}</p> <! -- Yes, close it when finished. How do I do that? Tell the parent to send showAlert->falseMVVM (child notifies parent)--> <div class="confirm" @click="closeTip"> confirm < / div >Copy the code

methods:{
        closeTip(){// showTip cannot be changed, because the component is in the parent component, so we need to notify the parent$emitCan trigger a notification father, can start notification this.$emit('closeTip') // The application name is closeTip, how can app.vue receive it? }},Copy the code

How do I get it here in app.vue?

<alert-tip v-if="showAlert" :alertText="alertText" @closeTip="closeAlert"/>
Copy the code

Where @closetip =”closeAlert” indicates a custom event, which means that when our child component issues a closeTip, (this.$emit(‘closeTip’)), then our parent component executes the corresponding method (closeAlert ()).

closeAlert(){
      this.showAlert = false
    }
Copy the code

Let’s add a style to make it pop over: alertTip. Vue

<style lang='stylus'Scoped > // scoped is not affected by the outside, then use the naming system, try not to be affected by the outside. Stylus is compiled and can generate different styles like Tabpane@import through variables'.. /.. /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.6 REM display flex justify-content center align-items center flex-direction column Border -radius 0.25rem. Tip_icon // Make an exclamation point and circle figure out wh(3rem, 3rem) border 0.15rem solid#f8cb86border-radius 50% display flex justify-content center align-items center flex-direction column span:nth-of-type(1) Wh (.12rem, 1.5rem) background-color#f8cb86Span :nth-of-type(2) // Wh (.2rem,.2rem) border 1px border-radius 50% margin-top 0.2rem background-color#f8cb8b
    .confirm
        border 1px solid #cbcbbcBorder - the radius 0.2 em < / style >Copy the code

The introduced mixin style file mixin.styl.

Let’s look at Go’s email

Configuring the Go Environment

If you don’t have the Go environment, you can install the Go installation package first. I used Go to run VS Code. Personal experience: Run VS Code as an administrator and then execute:

go env -w GO111MODULE=on go env -w GOPROXY=https://mirrors.aliyun.com/goproxy/,direct go get -u github.com/gin-gonic/gin // Install gin globally. If gin is not used, don't install gin firstCopy the code

Here we go, email

Write Go and import the main package. Each file in Go must belong to a module, which is of strong module type. Write the entry function main(). Each project has a unique main function.

package main
func main(){ 
}
Copy the code

To install the third-party library, enter:

Go get github.com/jordan-wright/email Follow the email process:

func main() {// entry function e := email.newemail () e.rom ="linana <[email protected]>"{} set e.too = []string{// Send email to multiple users {} set e.too = []string{"[email protected]"."[email protected]"}
	e.Subject = "Are you taking a bath today?"// title e.ext = []byte("Will you wash them or not? Wash it or not? Will you wash it or not?"Err := e.end ()"smtp.qq.com:25", smtp.PlainAuth(""."[email protected]"."fdfsfsdfsdfsdfsaf"."smtp.qq.com") // Log in to the mail server using your account and password and hand it the mail object to send out.iferr ! = nil { log.Fatal(err) } }Copy the code

In Go := is defined and attached, the NewEmail() method returns an object from which an email instance is generated, and NewEmail has the following capabilitiese.From,e.ToAnd so on.
about[]string{"[email protected]", "[email protected]"}The type of the mailbox is string, string,Go language uses curly braces as a container for collections.
aboutE.ext = []byte(" Wash it or not? Will you wash it or not?" )Byte, with () to hold content.
About:

err := e.Send("smtp.qq.com:25", smtp.PlainAuth(""."[email protected]"."fdfsfsdfsdfsdfsaf"."smtp.qq.com")) `Copy the code

Use THE QQ mail proxy server SMTP. 25 is the default port number of the SMTP server. Performs a mailbox authentication: smtp.plainauth (), provided by the mail transfer module.

import (
	"log"
	"net/smtp"
	"github.com/jordan-wright/email"
)
Copy the code

There is no local mail server, so send it to QQ, which will be forwarded by Tencent server proxy. At the same time, you need to have the permission, namely the QQ mailbox and verification code (note that the password here is not the QQ password, but the authorization code in the EMAIL account POP set in QQ mailbox) :

At this point, is the realization of the mail sent! Try sending attachments and links again:

HTML = []byte(' <ul> <li><a href="https://juejin.cn/user/4265760848623528"</a></li> <li><a href="https://juejin.cn/post/6844904073322315789"></ a></li> </ul> ')"yb.jpeg") / / accessoriesCopy the code

The path of the attachment should be noted according to their own path to write ah! In addition, the above transmission information should be placed before e. end!! Finally, paste the full code:

Package main // package // install node_mail in node_mail go"log"
	"net/smtp"
	"github.com/jordan-wright/email"
)

func main() {// entry function e := email.newemail () e.rom ="huhuilin <[email protected]>"/ / []? Array? Multiple users send mail {} set e.too = []string{"[email protected]"."[email protected]"}
	e.Subject = "Are you taking a bath today?"// title e.ext = []byte("Will you wash them or not? Wash it or not? Will you wash it or not?"HTML = []byte(' <ul> <li><a href="https://juejin.cn/user/4265760848623528"</a></li> <li><a href="https://juejin.cn/user/4265760848623528"></ a></li> </ul> ')"yb.jpeg"Err := e.end ()"smtp.qq.com:25", smtp.PlainAuth(""."[email protected]"."fdfsfsdfsdfsdfsaf"."smtp.qq.com"))

	iferr ! = nil {log.fatal (err) // to addlogModule // think of js console.log() // console.error() // Prints errors if there are errors and the message type is Fatal}}Copy the code

Here’s the end

A simple share, there is a lot of deficiencies, welcome to give advice and supplement! Attached to Github, bye ~

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

Vue custom alertTip component, Go simple use of email

Vue custom alertTip component, easy to use Go email

First, Vue defines the alertTip component

Effect of early and look

Component development

App. Vue

Let’s look at Go’s email

Configuring the Go Environment

Here we go, email

Here’s the end

Vue custom alertTip component, Go simple use of email

Vue custom alertTip component, easy to use Go email

First, Vue defines the alertTip component

Effect of early and look

Component development

App. Vue

Let’s look at Go’s email

Configuring the Go Environment

Here we go, email

Here’s the end

Related Posts

Use SoftetherVPN and Bind9 to penetrate the Intranet and share Intranet resources

SpringCloud Distributed Microservices Cloud Architecture Part 8: SpringCloud Bus (Finchley Version)

Java multithreading basics and how threads can be safely interrupted