一、浅试axios

实现如图效果

思路分析：

图片.png
数据库中的数据：

使用vue请求servlet响应的数据效果：

1.1、后台开发

1.1.1、实体层开发

package entity;public class Account {private String cardNo; //卡号private String passwd; //密码private float money; //余额public String getCardNo() {return cardNo;}public void setCardNo(String cardNo) {this.cardNo = cardNo;}public String getPasswd() {return passwd;}public void setPasswd(String passwd) {this.passwd = passwd;}public float getMoney() {return money;}public void setMoney(float money) {this.money = money;}
}

1.1.2、DAO层开发

接口：

package dao;import entity.Account;import java.util.List;public interface AccountDAO {public List<Account> selectAll();
}

实现类：

package dao.impl;import dao.AccountDAO;
import entity.Account;
import utils.BaseDAO;import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;public class AccountDAOImpl extends BaseDAO implements AccountDAO {public List<Account> selectAll() {List<Account> acs = new ArrayList<Account>();String sql = "select * from t_atm";ResultSet rs = this.executeQuery(sql);try {while(rs.next()){Account a = new Account();a.setCardNo(rs.getString("card_no"));a.setPasswd(rs.getString("passwd"));a.setMoney(rs.getFloat("money"));acs.add(a);}this.closeAll(); //释放资源} catch (SQLException throwables) {throwables.printStackTrace();}return acs;}
}

1.1.3、controller层开发

pom添加fastjson坐标

<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.79</version>
</dependency>

创建Servlet

package controller;import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONWriter;
import com.mysql.cj.xdevapi.JsonParser;
import com.mysql.cj.xdevapi.JsonString;
import dao.AccountDAO;
import dao.impl.AccountDAOImpl;
import entity.Account;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("/account_list")
public class AccountServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {//处理中文乱码问题req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");
//        resp.setContentType("text/html;charset=utf8");resp.setContentType("application/json;charset=utf8");//向页面输出内容PrintWriter writer = resp.getWriter();//将数据查出来AccountDAO dao = new AccountDAOImpl();List<Account> acs = dao.selectAll();//向页面输出内容String str = JSON.toJSONString(acs);writer.print(str);writer.close(); //释放资源}
}

1.1.4、测试

1.2、开发前端vue

1.2.1、使用axios请求Servlet

在html中借助vue使用axios请求servlet

第1步：导入axios的js库

图片.png

第2步：使用axios发送请求

图片.png

全部代码展示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="assests/vue.min-v2.5.16.js"></script><script src="assests/axios.min.js"></script>
</head>
<body><div id="app"><table border="1" cellspacing="0" cellpadding="10"><tr><th>卡号</th><th>余额</th><th>密码</th></tr><tr v-for="ac in accounts"><td>{{ac.cardNo}}</td><td>{{ac.money}}</td><td>{{ac.passwd}}</td></tr></table></div><script>new Vue({el: '#app',data: {accounts: null},//页面价值完成后执行created: function () {console.log("页面加载完成了")//发送请求，请求Sevlet获取数据axios.get("account_list").then(response => {console.log(response);this.accounts = response.data;});}});</script>
</body>
</html>