Vue - ajax 综合和案例(1)_vue的ajax实例-CSDN博客

本文链接：https://blog.csdn.net/a090300/article/details/119809856

本文通过一个综合案例展示了如何使用Vue.js结合Ajax（axios）从后端（Servlet+MyBatis）获取数据，实现在前端页面上动态查询并显示所有联系人信息。项目采用Maven构建，前端利用vue和axios进行异步请求，后端通过UserMapper接口查询数据库，最终在index.html页面局部更新展示数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一需求分析:

当用户访问页面上时,向服务器发送一个ajax请求,查询所有联系人信息,局部更新到当前页面上.

二技术分析:

整体还是选择使用maven搭建的项目环境,一些依赖的导入和工具类在我之前的文章中都有详细的介绍过,具体步骤也都有,

前端:html + vue + axios

后台: servlet + mybatis

三代码实现

数据库代码:

CREATE TABLE `user` (
  `id` INT(11) NOT NULL AUTO_INCREMENT,
  `name` VARCHAR(32) DEFAULT NULL,
  `password` VARCHAR(32) DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=21 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('1', '张三', '123');
INSERT INTO `user` VALUES ('2', '李四', '123');
INSERT INTO `user` VALUES ('3', '王五', '123');
INSERT INTO `user` VALUES ('4', '赵六', '123');
INSERT INTO `user` VALUES ('5', '田七', '123');
INSERT INTO `user` VALUES ('6', '孙八', '123');
INSERT INTO `user` VALUES ('7', '张三丰', '123');
INSERT INTO `user` VALUES ('8', '张无忌', '123');
INSERT INTO `user` VALUES ('9', '李寻欢', '123');
INSERT INTO `user` VALUES ('10', '王维', '123');
INSERT INTO `user` VALUES ('11', '李白', '123');
INSERT INTO `user` VALUES ('12', '杜甫', '123');
INSERT INTO `user` VALUES ('13', '李贺', '123');
INSERT INTO `user` VALUES ('14', '李逵', '123');
INSERT INTO `user` VALUES ('15', '宋江', '123');
INSERT INTO `user` VALUES ('16', '王英', '123');
INSERT INTO `user` VALUES ('17', '鲁智深', '123');
INSERT INTO `user` VALUES ('18', '武松', '123');
INSERT INTO `user` VALUES ('19', '张薇', '123');
INSERT INTO `user` VALUES ('20', '张浩', '123');

dao层

package com.itheima.dao;

import com.itheima.pojo.User;
import org.apache.ibatis.annotations.Select;

import java.util.List;
/*
     接口
*/
public interface UserMapper {
    //定义查询方法
    @Select("select * from user")
    List<User> findAllUsers();
}

pojo层

package com.itheima.pojo;

import lombok.Data;

/*
    User实体类
 */
@Data
public class User {
    private Integer id;
    private String name;
    private String password;
}

service层

package com.itheima.service;

import com.itheima.dao.UserMapper;
import com.itheima.pojo.User;
import com.itheima.utils.SessionFactoryUtils;
import org.apache.ibatis.session.SqlSession;

import java.util.List;

public class UserService {
    public List<User> findAllUsers(){
        //获取会话对象
        SqlSession session = SessionFactoryUtils.getSession();
        //获取接口代理对象
        UserMapper mapper = session.getMapper(UserMapper.class);
        //使用接口调用查询方法
        List<User> list = mapper.findAllUsers();
        session.close();
        return list;
    }
}

web层

package com.itheima.web;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.itheima.pojo.User;
import com.itheima.service.UserService;
import com.sun.org.apache.regexp.internal.RE;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;

@WebServlet("/findAllUsersServlet")
public class FindAllUsersServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //创建业务层对象
        UserService userService = new UserService();
        //使用业务层对象调用查询方法
        List<User> list = userService.findAllUsers();
        //将list转换成json对象
        String listJson = new ObjectMapper().writeValueAsString(list);
        response.getWriter().println(listJson);
    }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue查询所有用户</title>


</head>
<body>
<div id="app">
    <table border="1px" width="80%" align="center">
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>密码</th>
        </tr>
        <tr v-for="user in users">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.password}}</td>
        </tr>

    </table>
</div>
</body>
</html>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            users: []
        },
        methods: {
            findAll(){
                axios.get("/findAllUsersServlet")
                    .then(resp=>{
                    this.users= resp.data;
                        console.log(resp.data);
                    })
            }
        },
        created() {
            this.findAll();
        }
    });
</script>