一 需求分析:
当用户访问页面上时,向服务器发送一个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>
四 效果实现
![](https://i-blog.csdnimg.cn/blog_migrate/fb46013431be51e2abe930a2aab8466c.png)
小结 : 以上就是这个综合案例的所有内容了,效果也没有做过多美化,主要是想表达Vue最基本的用法,欢迎大家提出宝贵的意见