一、浅试axios
实现如图效果
思路分析:
数据库中的数据:
使用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 {
@Override
protected 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库
第2步:使用axios发送请求
全部代码展示:
<!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>
复制代码
1.2.2、运行效果
将项目部署到tomcat中,浏览器访问html页面 http://localhost:8080/demo01.html
作者:大坏蛋_
链接:https://juejin.cn/post/7163105486895349791
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。