1.AJAX

使用jquery中的ajax来发送get，post，和ajax请求。
get请求

$.get('/getInfo',{name:'张三'} ,function (res) {
                console.log(res);
            })
复制代码

post请求

      $.post('/postIofo', function (res) {
                console.log(res);
            })
复制代码

post请求和get请求基本一致，参数也是和get写发一样

ajax请求

 $.ajax({
                url: '/ajax',
                method: 'psot',
                success(res) {
                    console.log(res);
                },
                data: {
                    name: '张三'
                },
                fail(err) {
                    console.log(err);
                }
            })
复制代码

url接口地址，method方法,默认不写为get请求，data传递的参数，success成功的回调
fail失败的回调。

2.邮件激活

首先写注册页面，账号密码注册，账号注册使用给正则表达式进行邮箱格式的规范，判断之后，使用AJAX向后端发送一个post请求,请求参数包含账号和密码。后端首先判断保存用户信息的文件夹是否存在，如果不存在，创建一个文件夹，若是存在，将文件夹里的内容读出来，写到保存用户的数组中。后端post接口首先遍历保存用户的数组，判断账号是否注册，如果已经注册，返回给前端账号已经注册的信息，若果没有注册，将未注册的账号信息推到保存账户信息的数组之中，然后再将数组写到文件夹之中。

发送邮件首先引入nodemailer模块，之后进行邮件的配置，主要有主机，端口号和授权信息，然后进行发送邮件的配置有：from从哪里发, to发送到哪里，subject邮件主题，html文件内容。

最后进行邮件的激活，我们要找到当前需要被激活的账户，以及所有已经注册的账户当中的索引值。然后点击链接激活成功，跳转到登录页面，进行登录，在登录时候首先判断账号是否正确，若不正确返回账号未注册信息，若是账号正确，进行密码判断，正确在进行账号激活判断，若不正确，返回错误信息。

前端代码：

 <h1>注册页面</h1>
    <label for=""></label><input type="text" id="account"><br>
    <label for=""></label><input type="psd" id="psd"><br>
    <button onclick="registInfo()">注册</button>
    <script src="https://juejin.cn/post/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>

复制代码

后端代码块
配置邮箱

let config = {
    host: 'smtp.qq.com',
    port: 25,
    auth: {
        user: '你的邮箱账号@qq.com',
        pass: '你的邮箱授权码'
    }
}
let psotMail = nodemailer.createTransport(config)
复制代码

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)
        })
    }
})
复制代码

post请求

    let account = req.body.account
    for (let i = 0; i < allUser.length; i++) {
        let user = allUser[i]
        if (user.account == account) {
            res.send('账号已注册')
            return
        }
    }
    allUser.push(req.body)
    fs.writeFileSync('user.txt', JSON.stringify(allUser))
    //配置发送邮件
    psotMail.sendMail({
        from: '你的邮箱账号@qq.com',
        to: req.body.account,
        subject: '账户激活通知',
        html:`尊敬的XXX用户，请点击<a href='http://localhost:8080/active?account=${account}'>以下链接，进行账户激活</a>`
        // html: `点击下面链接<a href='http://localhost:8080/active'>来激活账号</a>`
    })
    res.send('注册成功')
})
复制代码

激活邮箱操作

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(`
  <script>
  location.href='https://juejin.cn/post/login.html'
  </script>
 `)
})
复制代码

3.模板引擎

使用artremplate模板引擎
使用模板引擎先创建一个模板类型为text/html，id可以自己命名

<script type="text/html" id="films">
    </script>
复制代码

再将模板和后端返回的数据绑定在一起，这样就可以在模板中使用后端返回的数据，这里使用ajax来接收后端发送回来的数据。

$.ajax({
            url: '/getInfo',
            success(res) {
                console.log(res);
                //参数1 模板id
                //参数2 数据
                let html = template('recommand', res)
                $('main').html(html)
            }
        })
复制代码

这是就可以在模板引擎中渲染后端传来的数据

   <script type="text/html" id="films">
            <h1>{{title}}</h1>
              <!-- each 每一个 as 作为 -->
               {{each  filmList as item}}
                <h2>{{item.name}}--->>{{item.score}}</h2>
               {{/each}}
    </script>
复制代码

我们要渲染的数据要写在{{ }}中，循环{{each}} {{/each}}要有结束标签。

如果后端返回来的数据类型不一样，我们可以这样做

    <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> 价格：{{item.price |changePrice}}</div>
             </div>
           {{else}}
           <div>
               <a href="{{item.url}}" target="_blank">{{item.url}}</a><br>
         <div> 访问量：{{item.visit |changeVisit}}</div>
           </div>
           {{/if}}
          {{/each}}

    </script>
复制代码

遍历后端返回来的数据，进行if语句的判断，这里的if同样也有结束标签。
这里附上后端的数据

    var films = {
        title: "热映电影",
        filmList: [
            {
                name: "扫黑决战",
                score: 6.3,
            }, {
                name: "你好世界",
                score: 9.0
            }, {
                name: "速9",
                score: "3"
            }, {
                name: "超越",
                score: 5
            }
        ]
    }
    var recommandList = {
        title:"推荐列表" , 
        list:[
            {
                type:"book" , 
                name:"《月亮与六便士》" , 
                pic:"https://img2.baidu.com/it/u=2770096609,2226154745&fm=26&fmt=auto&gp=0.jpg",
                price:9.999
            },{
                type:"website" , 
                name:"《花瓣网》" ,
                url:"http://www.huaban.com" , 
                visit:1000
            },{
                type:"book",
                name:"《小王子》",
                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)
})
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端