网站开发前后端交互总结
最近一个月接触了如何搭建一个简单的竞赛网站平台，可以描述为:实现简易竞赛网站平台，包括录入学生信息数据库、队员组队、登录队伍账户等功能，然后学生就可以通过这个网站提交课程设计结果文件，查看到队伍排名和历史记录等（类似于打比赛的网站）。这里我们采用的是IDEA作为java语言的开发环境，mysql作为后端数据库，前段页面包括css、html、js等，tomcat作为服务器软件，期间我掌握了许多新东西，在此记录。
1.前端如何利用js中的ajax向后端发送参数或请求等（ajax需通过事件触发）。
Var json_value={"user_id":0};
$.ajax({
type: "post",
url: "userload",//对应后端的user_load
data:JSON.stringify(json_value),//必须序列化，格式才正确，才能正确发送到后端
cache: false,
processData: false,
contentType: "application/json",//声明内容是json内容
dataType: "json",
success: function (data) {
}
});
2.Java后端(SpringBoot框架)如何接受前端传过来的json格式的对象。
@PostMapping("/userload")
@ResponseBody
public void userload(@RequestBody HashMap<String, String> map)
{
String user_id=map.get("user_id");
}
3.Java后端(SpringBoot框架)如何向前端发送json格式的对象。
@PostMapping("/user_info")
public void user_info(HttpServletRequest request, HttpServletResponse response) {
Map<String, Object> ControJsonMap = new HashMap<String, Object>();
ControJsonMap.put("dataStatus","1");
try{
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
JSONObject json = new JSONObject();
for (Map.Entry<String, Object> map :ControJsonMap.entrySet()) {
json.put(map.getKey(), map.getValue());
}
char[] buf = json.toString().toCharArray();
if (buf.length > 0) {
out.write(buf);//发送
out.flush();
out.close();
ControJsonMap.clear();
}
} catch (IOException e) {
e.printStackTrace();
}
}
4.前端利用ajax接受java后端发送过来的json格式的对象(ajax需通过事件触发)。
$.ajax({
type: "post",
url: "user_info",//对应后端的user_info
data:“1”,//这里后端没有接受语句，随便发送啥
cache: false,
processData: false,
contentType: "application/json",//声明内容是json内容
dataType: "json",
success: function (data) {//data即为后端返回值
if(data["dataStatus"]=="1")
alert("success");
}
});
5.ajax的使用需要导入相应的js文件包，且需注意js文件的导入顺序。
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/mdb.min.js"></script>
<script type="text/javascript" src="js/FileSaver.js"></script>
<script>new WOW().init();</script>
6.若想每次访问该网页，都触发一个事件来完成ajax调用，可在body标签里面使用onload事件。
<body id="top" onload="team_name(),proj2_rank()">
7.当网站项目需要放到服务器上时，可按网上教程进行修改配置等(如修改mysql连接密码，设置成使用外部tomcat，将项目打包成war包，修改@SpringBootApplication 注解下面对应的启动类等)，若出现错误，可利用F12，postman等方式调试，也可通过IDEA远程服务器tomcat来进行调试(要求本地代码要和服务器一致)。
8.这次将工程部署到服务器上时，就一直出现500的错误，代表服务器内部错误，最后明白错误类型其实通过F12就能看出来。因为浏览器会报500 的状态错误，然后就有一个语句：
Message: net.sf.json.JSONObject
这个地方就是表明，net.sf.json.JSONObject这个在服务器后端代码中有问题，然而在自己的IDEA本地工程时则没有这个错误，观察猜测是因为服务器端缺少json的jar包。SpringBoot工程配置了maven仓库，自动把 json的jar包导入进来了，然而打成war包的时候却没有把这些没有加入的工程的jar包一起打包，所以造成错误，然后我把maven仓库下面的对应jar包复制到服务器端的竞赛网站的jar包中就解决了问题。
