第2阶段12-vue+axios实现CRM系统用户列表显示

一、前端HTML

1.1、通过axios发送请求到Servlet获取用户列表数据

1.2、将Servlet响应的数据通过v-for指令显示到tale上

二、后端Servlet

2.1、DAO中添加查询全部用户的方法

public List<User> selectAll() {
    List<User> list = new ArrayList<User>();
​
    String sql = "select * from t_user";
    ResultSet rs = this.executeQuery(sql);
    try {
        while(rs.next()){
            User user = new User();
            user.setId(rs.getInt("id"));
            user.setUserName(rs.getString("user_name"));
            user.setPasswd(rs.getString("passwd"));
            user.setNickName(rs.getString("nick_name"));
            user.setSex(rs.getInt("sex"));
            user.setPhone(rs.getString("phone"));
            user.setImg(rs.getString("img"));
            user.setBirth(rs.getString("birth"));
            list.add(user);
        }
        this.closeAll(); //释放资源
    } catch (SQLException throwables) {
        throwables.printStackTrace();
    }
​
    return list;
}
复制代码

2.2、创建UserListServlet查询全部用户

package controller;
​
import com.alibaba.fastjson.JSON;
import dao.UserDAO;
import dao.impl.UserDAOImpl;
import entity.User;
​
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.io.PrintWriter;
import java.util.List;
​
/**
 * 获取用户列表
 */
@WebServlet("/user_list")
public class UserListServlet extends HttpServlet {
​
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //转码
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("application/json;charset=utf8");
​
        //获取PrintWriter
        PrintWriter writer = resp.getWriter();
​
        //查询数据库
        UserDAO dao = new UserDAOImpl();
        List<User> list = dao.selectAll();
​
        String json = JSON.toJSONString(list);
​
        writer.print(json);
​
        //释放资源
        writer.close();
    }
}

作者：大坏蛋_
链接：https://juejin.cn/post/7163908015970582565
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。