# 1、登录功能 # 登录功能 1.为登录按钮添加**点击事件** 2.获取用户在文本框中**输入**的**用户名和密码** 3.**验证用户**是否输入了用户名和密码，如果没有输入，**阻止程序向下执行**，提示用户输入用户名和密码 4.调用实现登**录功能的接口**，登录成功，**跳转到数据管理的首页**，登录**失败**，**提示用户名或密码错误** ~~~ 登录页内 书写的js 引入jq <script src=". ./assets/vendors/ jquery/ jquery.min.js"></script> <script type="text/ javascript"> //选择登录按钮并为其添加点击事件 $(' #loginBtn' ).on('click', function () { //获取用户输入的邮箱地址 var email = $('#email' ).val(); //获取用户输入的密码 var password = $( ' #password') .val(); //判断用户是否输入了邮箱地址 if (email.trim().length == 0) { alert('请输入邮箱') return ; //判断用户是否输入了密码 if (password. trim().length == 0) { alert('请输入密码'); return ; } //对应下面图片接口 验证登录 $ .ajax({ type:'post', url :' /login', data: { email: email, password: password }, success: function (response) { //console .log(response) //登录成功跳转到数据管理的首页面 location.href ='index.html' ; }, error: function () { //console. log( '登录失败') //登录失败 alert('用户名或者密码错误') } }) ~~~ 接口  # 登录拦截 1.使用script标签加载服务器端提供的接口地址 2.判断isLogin变量的值，如果值为false, 跳转到登录页面  # 退出登录 返回登录界面 退出登录接口   最后把下面代码单独创建一个js文件 其他页面直接引用即可`<script src=". . /assets/ js/common. js"></script>` ~~~ <script type="text/ javascript"> $( ' #logout' ).on('click', function () { var isConfirm = confirm( '您真的要退出吗?'); if (isConfirm) { // alert('用户点击了确认按钮') $.ajax({ type :'post' url:' / logout'， success: function () { location.href = ' login.html' ; }, error: function () { alert('退出失败') } }) }); ~~~