1.AJAX

Send GET, POST, and Ajax requests using Ajax in jquery. A get request

$.get('/getInfo', {name:'Joe'},function (res) {
                console.log(res);
            })
Copy the code

A post request

      $.post('/postIofo'.function (res) {
                console.log(res);
            })
Copy the code

The PARAMETERS of a POST request are the same as those of a GET request

An ajax request

 $.ajax({
                url: '/ajax'.method: 'psot'.success(res) {
                    console.log(res);
                },
                data: {
                    name: 'Joe'
                },
                fail(err) {
                    console.log(err); }})Copy the code

Url Interface address, method method, default not written as get request, parameters passed by data, success callback fail callback.

2. Email activation

First write the registration page, account password registration, account registration using regular expression to standardize the mailbox format, after judging, use AJAX to send a POST request back end, request parameters include account and password. If not, create a folder. If it does, read out the contents of the folder and write them to the array that holds the user. The back-end POST interface firstly traverses the array of the saved user to determine whether the account is registered. If it is registered, it returns the registered information of the front-end account. If it is not registered, the unregistered account information is pushed to the array of the saved account information, and then the array is written to the folder.

Nodemailer module is first introduced to send emails, and then the email configuration includes the host, port number, and authorization information. Then the email configuration includes: From where to send emails, to where to send emails, Subject Mail subject, and HTML file content.

Finally, to activate the mail, we need to find the current account to be activated, as well as the index value of all registered accounts. Then click the link to activate successfully, jump to the login page, login, login, login, first judge whether the account is correct, if not return the account is not registered information, if the account is correct, judge the password, the account activation judgment, if not, return error information.

Front-end code:

<h1> Registration page </h1><label for=""></label><input type="text" id="account"><br> <label for=""></label><input type="psd" id="psd"><br> <button </button> <script SRC ="./jquery.js"></script> <script> function registInfo() {let account = document.getElementById('account').value let psd = document.getElementById('psd').value $.post('/regist',{account,psd} ,res => { console.log(res); }) } </script>Copy the code

Back-end code blocks configure mailboxes

let config = {
    host: 'smtp.qq.com'.port: 25.auth: {
        user: 'Your email account @qq.com'.pass: 'Your Email Authorization Code'}}let psotMail = nodemailer.createTransport(config)
Copy the code

fs.access('user.txt', function (noExists) {
    if (noExists) {
        fs.writeFileSync('user.txt', '[]')
    } else {
        fs.readFile('user.txt', 'utf-8', (err, data) => {
            allUser = JSON.parse(data)
        })
    }
})
Copy the code

A post request

let account = req.body.account for (let i = 0; i < allUser.length; I ++) {let user = allUser[I] if (user.account == account) {res.send(' account is registered ') return}} alluser.push (req.body) Fs.writefilesync ('user.txt', json.stringify (allUser)) // configure to sendMail psotmail. sendMail({from: 'your email account @qq.com', to: req.body.account, subject: 'account activate notice, HTML: ` respect of XXX user, please click on the < a href = "http://localhost:8080/active?account=${account}" > the following link, for account activation < / a > ` / / HTML: ` click on the link below < a href = "http://localhost:8080/active" > < / a > to activate the account `}) res. Send (' registration ')})Copy the code

Activating a Mailbox

app.get('/active'.(req, res) = > {
    let index = allUser.findIndex(function (el) {
        return el.account == req.query.account
    })
    let user = allUser[index]
    user.isActive = true
    res.send(`  `)})Copy the code

3. Template engines

Use the template engine to create a template of type TEXT/HTML with a self-naming ID

<script type="text/html" id="films">
    </script>
Copy the code

Bind the template to the data returned from the back end so that you can use the data returned from the back end in the template, and use Ajax to receive the data sent back from the back end.

$.ajax({
            url: '/getInfo'.success(res) {
                console.log(res);
                // Parameter 1 Indicates the id of the template
                // Parameter 2 data
                let html = template('recommand', res)
                $('main').html(html)
            }
        })
Copy the code

This is where the back-end data can be rendered in the template engine

   <script type="text/html" id="films">
            <h1>{{title}}</h1><! -- Each oneasAs --> {{each filmListas item}}
                <h2>{{item.name}}--->>{{item.score}}</h2>
               {{/each}}
    </script>
Copy the code

The data we want to render is written in {{}}, and the loop {{each}} {{/each}} has an end tag.

We can do this if the data type returned from the back end is different

    <script type="text/html" id="recommand">
          <h1>{{title}}</h1>
          {{each list as item}}
          <div>{{item.name}}</div>
           {{if item.type=='book'}}
             <div>
              <img src="{{item.pic}}" alt=""><br>
            <div>Price: {{item. Price | changePrice}}</div>
             </div>
           {{else}}
           <div>
               <a href="{{item.url}}" target="_blank">{{item.url}}</a><br>
         <div>Traffic: {{item. Visit | changeVisit}}</div>
           </div>
           {{/if}}
          {{/each}}

    </script>
Copy the code

Iterate over the data returned from the back end and evaluate the if statement, which also has an end tag. The data on the back end is attached here

Var films = {title: "filmList ", score: 6.3,}, {name:" Hello world ", score: 9.0}, {name: "Hello world ", score: 9.0}, {name: }, {name: "exceed ", score:" exceed ", score: 5}]} var recommandList = {title:" list ", list:[{type:"book", name:" moon and sixpenny ", PIC: "https://img2.baidu.com/it/u=2770096609, 2226154745 & FM = 26 & FMT = auto&gp = 0. JPG", price: 9.999}, {type: "website", Name :" Petal net ", URL :"http://www.huaban.com", visit:1000},{type:"book", name:" The Little Prince ", PIC: "https://img1.baidu.com/it/u=3701993196, 2858621135 & FM = 26 & FMT = auto&gp = 0. JPG", price: 19.99}, {type: "website", name:"github" , url:"http://github.com" , visit:99999 } ] } res.send(recommandList) })Copy the code