JqueryAJAX与VueAxios实战：Web前端登录验证与接口测试

本实验项目是关于Web前端应用开发的实践，主要围绕Jquery AJAX技术和Vue/Axios库在前后端数据交互中的应用。课程背景是计算机科学与技术专业的Web前端课程，由指导教师杨云负责，适用于2021级的某个班级，学生张海燕的学号为202131061304，实验日期为2023年4月2日。 实验的核心目标是让学生深入理解并掌握使用Jquery的get和post方式实现AJAX请求，以及如何通过Vue框架结合Axios库来调用API并与服务器进行交互。实验的重点在于实战操作，包括以下几个关键部分： 1. **Jquery AJAX的get和post请求**：学生需要通过Jquery的这两个方法，模拟HTTP请求到指定的服务器接口（如：http://114.67.241.121:8088/swagger-ui.html），其中以用户登录为例，通过post方式传递`username`和`password`参数，并观察返回结果，特别是身份令牌（token）。 2. **Vue/Axios的前后端交互**：使用Vue框架，配合Axios库，创建一个登录界面，用户输入管理员账号（admin）和密码（123456），然后调用`http://114.67.241.121:8088/user/login` API进行身份验证。登录成功的案例会记录返回的身份令牌，失败时则显示相应的错误信息。 3. **实战操作步骤**： - 输入参数并执行接口测试，首先在Swagger UI中，尝试使用提供的用户名和密码进行登录。 - 复制返回的token，将其添加到页面的Authorization头中，授权后进行后续操作。 - 测试其他接口，通过类似的方法，输入接口所需的参数并验证请求响应。 4. **代码实现**：实验涉及到HTML、CSS和JavaScript的基础知识，展示了HTML文档结构，引入了jQuery库，以及基本的CSS样式。关键部分是使用jQuery的AJAX请求代码和Vue组件中调用API的逻辑。 通过这个实验，学生不仅能够提升对AJAX和前端框架的实战技能，还能强化对HTTP协议的理解，以及前后端数据同步的处理能力。同时，实验报告中还会包含实际的运行截图和代码片段，用于展示实验的完整过程和结果。