因为不想学swing,所以准备用 前端 + 后端 来写Java大作业
交互实现过程:
前端触发->请求被后端抓取->后根据get或post请求进行处理->返回数据或者进行页面跳转
什么都会的队长给我配置了Tomcat,然后替我写了基本的后端处理ajax请求的代码,我照着葫芦画瓢,画的歪歪扭扭。
因为我没有搞懂全部的流程(因为Tomcat根本就没学),所以这里只是一个笔记,不会写完整的过程。
- 前端请求:
// 预加载数据
window.onload = function() {
var getData = function () {
$.ajax({
// 请求地址
url: '/getData',
// 请求方法
method: 'get',
// 传参的格式
contentType: "application/json;charset=utf-8",
dataType:"json",
// 处理返回数据的方法
success: function (data) {
// 函数的内容不要看了 这是具体的作业代码,单独拿出来没有意义
// 进行一次筛选
items = data.filter(e => e.number > 0);
// 数据一旦获取就直接加载到页面
// 先获取数据 再挂载 vue
var app = new Vue({
el: '#app',
data: {
items: items,
searchResult: searchResult,
id: '',
},
methods: {
// 搜索
search: function(id) {
this.searchResult = items.filter(e => e.id.toString() === id)
},
// 租赁
rent: function(id, number) {
rentCar(id, number)
}
}
});
}
})
};
// 在window.onload里面 直接执行 获取数据库数据(实际上是由后台代码先进行获取的)
getData();
}
- 后端处理:
完整的代码很复杂,这里只记录几个比较重要的点
// 这里表示我处理的是地址为 /getData 的请求
// 和上方的 ajax 的 url 属性相对应
@WebServlet("/getData")
// JDBC 驱动
static final String JDBC_DRIVER = "com.mysql.cj.jdbc.Driver";
// 数据库 url
static final String DB_URL = "jdbc:mysql://localhost:3306/CARRENT?useSSL=false&allowPublicKeyRetrieval=true&serverTimezone=UTC";
// 数据库的用户名与密码,需要根据自己的设置
static final String USER = "root";
static final String PASS = "root";
// 连接数据库用的玩意儿
Connection conn = null;
Statement stmt = null;
// 注册 JDBC 驱动
Class.forName(JDBC_DRIVER);
// 打开链接
System.out.println("连接数据库...");
conn = DriverManager.getConnection(DB_URL,USER,PASS);
// 执行查询
System.out.println(" 实例化Statement对象...");
stmt = conn.createStatement();
String sql;
sql = "SELECT * FROM CARS";
// 接受数据库返回值
ResultSet rs = stmt.executeQuery(sql);
//创建一个 json数组 用于返回数据
JSONArray json = new JSONArray();
// 展开结果集数据库
while(rs.next()){
JSONObject j = new JSONObject();
// json 对象添加键值对
j.put("id", rs.getInt("id"));
j.put("name", rs.getString("name"));
j.put("type", rs.getString("type"));
j.put("dayPrice", rs.getInt("dayPrice"));
j.put("number", rs.getInt("number"));
json.add(j);
}
// 完成后关闭
rs.close();
stmt.close();
conn.close();
// 设置接收数据的编码
req.setCharacterEncoding("utf-8");
// 设置返回数据的编码
resp.setCharacterEncoding("utf-8");
resp.setContentType("application/json;charset=UTF-8");
// 返回值 这里我不会
ServletOutputStream os = resp.getOutputStream();
// 对返回值进行编码的规范 并 返回
os.write(String.valueOf(json).getBytes("utf-8"));