Vue - ajax 综合和案例(1)

最新推荐文章于 2023-11-27 11:02:13 发布

小周同学呀!

最新推荐文章于 2023-11-27 11:02:13 发布

阅读量259

点赞数 3

文章标签： vue vue.js maven ajax

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

版权

一需求分析:

当用户访问页面上时,向服务器发送一个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>

四效果实现

小结 : 以上就是这个综合案例的所有内容了,效果也没有做过多美化,主要是想表达Vue最基本的用法,欢迎大家提出宝贵的意见

小周同学呀!

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue - ajax 综合和案例(1)

一需求分析:当用户访问页面上时,向服务器发送一个ajax请求,查询所有联系人信息,局部更新到当前页面上.二技术分析:整体还是选择使用maven搭建的项目环境,一些依赖的导入和工具类在我之前的文章中都有详细的介绍过,具体步骤也都有,前端:html + vue + axios后台:servlet + mybatis三代码实现数据库代码:CREATE TABLE `user` ( `id` INT(11) NOT NULL AUTO_INCREMENT,..
复制链接

扫一扫