!
也想出现在这里? 联系我们
广告区块

表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】

文章目录

  • 一、准备工作
  • 二、约定前后端交互接口
  • 三、实现服务器端代码
  • 四、调整前端页面代码
  • 五、数据存入文件
  • 六、数据存入数据库
  • 表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】

一、准备工作

1)
创建
maven
项目
2)
创建必要的目录
webapp, WEB-INF, web.xml;web.xml如下:
  1. /div>
  2. "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
  3. "http://java.sun.com/dtd/web-app_2_3.dtd" >
  4. Archetype Created Web Application
  5. 3) 引入依赖(Servlet、Jackson)

4) 把表白墙前端页面代码拷贝到
webapp
目录中

二、约定前后端交互接口

所谓前后端交互接口是进行 Web 开发中的关键环节。

为了完成前后端交互,要约定两个交互接口:

1.从服务器上获取到所有消息:

请求: GET/message

响应: JSON 格式

{

{from:”xxx” ,to:”xxx”, message:”xxxxxx”}

…………..

………….

}

2.往服务器上提交数据

请求: body 也为 JSON 格式

POST/message

{from:”xxx” ,to:”xxx”, message:”xxxxxx”}

响应: JSON 格式

{ok:1}

三、实现服务器端代码

  1. //这个类表示一条消息的数据格式
  2. class Message{
  3. public String from;
  4. public String to;
  5. public String message;
  6. }
  7. @WebServlet("/message")
  8. public class MessageServlet extends HttpServlet {
  9. // 用于转换 JSON 字符串
  10. private ObjectMapper objectMapper = new ObjectMapper();
  11. // 用于保存所有的留言
  12. private List messageList = new ArrayList();
  13. //doGet方法用来从服务器上获取消息
  14. @Override
  15. protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  16. resp.setContentType("application/json;charset=utf-8");
  17. //writeValue就是把messageList对象转换成json格式的字符串,并通过写入响应(resp.getWriter())返回
  18. objectMapper.writeValue(resp.getWriter(),messageList);
  19. }
  20. //doPost方法用来把客户端的数据提交到服务器
  21. @Override
  22. protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  23. //readValue第一个参数可以支持一个字符串,也可以放inputStream对象;第二个参数是用来接收读取到的结果
  24. //返回值放到Message对象中
  25. //通过这个代码就完成了读取body,并且解析成json的过程
  26. Message message = objectMapper.readValue(req.getInputStream(),Message.class);
  27. messageList.add(message);
  28. resp.setContentType("application/json;charset=utf-8");
  29. resp.getWriter().write("{\"ok\":1}");
  30. }
  31. }
表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】

四、调整前端页面代码

  1. script>
  2. //1.在页面加载的时候访问服务器,从服务器这边获取到消息列表,并展示出来
  3. function load(){
  4. $.ajax({
  5. type:'GET',
  6. url:'message',
  7. success: function(data,status){
  8. let container = document.querySelector('.container');
  9. for(let message of data){
  10. let row = document.createElement('div');
  11. row.className = 'row';
  12. row.innerHTML = message.from + '对' + message.to + '说: ' + message.message;
  13. container.appendChild(row);
  14. }
  15. }
  16. });
  17. }
  18. load();
  19. //2.点击提交按钮的时候,把当前的数据构造成一个http请求,发送给服务器
  20. let submitButon = document.querySelector('#submit');
  21. submitButon.onclick = function(){
  22. //1.先获取到编辑框中的内容
  23. let edits = document.querySelectorAll('.edit');
  24. console.log(edits);
  25. let from = edits[0].value;
  26. let to = edits[1].value;
  27. let message = edits[2].value;
  28. console.log(from+'对'+to+'说,'+message);
  29. if(from == '' || to == '' || message == ''){
  30. return;
  31. }
  32. //2.根据内容构造html元素(.row里面包含用户输入的话
  33. let row = document.createElement('div');
  34. row.className = 'row';
  35. row.innerHTML = from+'对'+to+'说,'+message;
  36. //3.把这个元素添加到DOM树上
  37. let container = document.querySelector('.container');
  38. container.appendChild(row);
  39. //4.清空原来的输入框
  40. for(let i=0; ilength; i++){
  41. edits[i].value = '';
  42. }
  43. //5.构造成一个http请求,发送给服务器
  44. $.ajax({
  45. type:'POST',
  46. url:'message',
  47. //data里面就是body数据
  48. data: JSON.stringify({from:from, to:to, message:message}),
  49. contentType: "application/json;charset=utf-8",
  50. success: function(data,status){
  51. if(data.ok == 1){
  52. console.log('提交成功');
  53. }else{
  54. console.log('提交失败');
  55. }
  56. }
  57. })
  58. }
  59. script>
表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】
此时在浏览器通过
URL
http://127.0.0.1:8080/messageWall924/表白墙.html
访问服务器
,
即可看

数据此时是存储在服务器的内存中 ( private List messages = new ArrayList(); ), 一旦服务器重启, 数据仍然会丢失。

五、数据存入文件

在上面的代码中,我们是把数据保存在messageList这个变量里面的,如果我们要把数据放在文件中,进行持久化存储,就不需要这变量了。

FileWriter fileWriter = new FileWriter(filePath,true)

java打开文件主要由三种方式:

1.读方式打开(使用输入流对象的时候)

2.写方式打开(使用输出流对象的时候)这种方式会清空原有内容

3.追加写方式打开(使用输出流对象的时候) ,这种方式不会清空原有内容,而是直接在文件内容后面拼接。后面加上true就是追加写状态。

数据存入文件完整代码如下:

  1. class Message{
  2. public String from;
  3. public String to;
  4. public String message;
  5. }
  6. @WebServlet("/message")
  7. public class MessageServlet extends HttpServlet {
  8. // 用于转换 JSON 字符串
  9. private ObjectMapper objectMapper = new ObjectMapper();
  10. // 用于保存所有的留言
  11. // private List messageList = new ArrayList();
  12. //保存文件的路径
  13. private String filePath = "d:code/java/messageWall924/messages924.txt";
  14. //doGet方法用来从服务器上获取消息
  15. @Override
  16. protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  17. resp.setContentType("application/json;charset=utf-8");
  18. //writeValue就是把messageList对象转换成json格式的字符串,并通过写入响应(resp.getWriter())返回
  19. List messageList = load();
  20. objectMapper.writeValue(resp.getWriter(),messageList);
  21. }
  22. private List load(){
  23. //把读到的数据放到List
  24. List messageList = new ArrayList();
  25. System.out.println("开始从文件加载数据!");
  26. //此处需要按行读取,FileReader不支持,需要套上一层BufferedReader
  27. try(BufferedReader bufferedReader = new BufferedReader(new FileReader(filePath))){
  28. while (true){
  29. String line = bufferedReader.readLine();
  30. if (line == null){
  31. break;
  32. }
  33. //读取到的内容,就解析成Message对象
  34. String[] tokens = line.split("\t");
  35. Message message = new Message();
  36. message.from = tokens[0];
  37. message.to = tokens[1];
  38. message.message = tokens[2];
  39. messageList.add(message);
  40. }
  41. }catch (IOException e){
  42. e.printStackTrace();
  43. }
  44. return messageList;
  45. }
  46. //doPost方法用来把客户端的数据提交到服务器
  47. @Override
  48. protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  49. //readValue第一个参数可以支持一个字符串,也可以放inputStream对象;第二个参数是用来接收读取到的结果
  50. //返回值放到Message对象中
  51. //通过这个代码就完成了读取body,并且解析成json的过程
  52. Message message = objectMapper.readValue(req.getInputStream(),Message.class);
  53. //这里进行一个写文件操作
  54. save(message);
  55. resp.setContentType("application/json;charset=utf-8");
  56. resp.getWriter().write("{\"ok\":1}");
  57. }
  58. private void save(Message message){
  59. System.out.println("数据开始写入文件");
  60. try(FileWriter fileWriter = new FileWriter(filePath,true)){
  61. fileWriter.write(message.from + '\t' + message.to +
  62. '\t' + message.message + '\n');
  63. }catch (IOException e){
  64. e.printStackTrace();
  65. }
  66. }
  67. }
表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】

六、数据存入数据库

1)

pom.xml
中引入
mysql
的依赖
  1. mysql
  2. mysql-connector-java
  3. 5.1.47
2)
创建数据库
,
创建
messages
表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】

3) 创建 DBUtil

DBUtil
类主要实现以下功能
:
创建
MysqlDataSource
实例
,
设置
URL, username, password
等属性。
提供
getConnection
方法
,

MySQL
服务器建立连接。
提供
close
方法
,
用来释放必要的资源。
  1. public class DBUtil {
  2. private static final String URL = "jdbc:mysql://127.0.0.1:3306/messageWall924?characterEncoding=utf8&useSSL=false";
  3. private static final String USERNAME = "root";
  4. private static final String PASSWORD = "1234";
  5. private static volatile DataSource dataSource = null;
  6. public static DataSource getDataSource(){
  7. if (dataSource == null){
  8. synchronized (DBUtil.class){
  9. if (dataSource == null){
  10. dataSource = new MysqlDataSource();
  11. ((MysqlDataSource)dataSource).setURL(URL);
  12. ((MysqlDataSource)dataSource).setUser(USERNAME);
  13. ((MysqlDataSource)dataSource).setPassword(PASSWORD);
  14. }
  15. }
  16. }
  17. return dataSource;
  18. }
  19. public static Connection getConnection() throws SQLException {
  20. return getDataSource().getConnection();
  21. }
  22. public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet){
  23. if (resultSet != null){
  24. try {
  25. resultSet.close();
  26. } catch (SQLException e) {
  27. e.printStackTrace();
  28. }
  29. }
  30. if (statement != null){
  31. try {
  32. statement.close();
  33. } catch (SQLException e) {
  34. e.printStackTrace();
  35. }
  36. }
  37. if (connection != null){
  38. try {
  39. connection.close();
  40. } catch (SQLException e) {
  41. e.printStackTrace();
  42. }
  43. }
  44. }
  45. }
表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】
4) 修改 load 和 save 方法, 改成操作数据库
  1. @Override
  2. protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  3. //readValue第一个参数可以支持一个字符串,也可以放inputStream对象;第二个参数是用来接收读取到的结果
  4. //返回值放到Message对象中
  5. //通过这个代码就完成了读取body,并且解析成json的过程
  6. Message message = objectMapper.readValue(req.getInputStream(),Message.class);
  7. //这里进行一个写数据操作
  8. save(message);
  9. resp.setContentType("application/json;charset=utf-8");
  10. resp.getWriter().write("{\"ok\":1}");
  11. }
  12. private void save(Message message){
  13. System.out.println("向数据库写入数据!");
  14. //1.先和数据库建立连接
  15. Connection connection = null;
  16. PreparedStatement statement = null;
  17. try {
  18. //1.先和数据库建立连接
  19. connection = DBUtil.getConnection();
  20. //2.拼装sql
  21. String sql = "insert into message values(?,?,?)";
  22. statement = connection.prepareStatement(sql);
  23. statement.setString(1,message.from);
  24. statement.setString(2,message.to);
  25. statement.setString(3,message.message);
  26. //执行sql
  27. int ret = statement.executeUpdate();
  28. if (ret == 1){
  29. System.out.println("插入数据库成功");
  30. }else {
  31. System.out.println("插入数据库失败");
  32. }
  33. } catch (SQLException e) {
  34. e.printStackTrace();
  35. }finally {
  36. DBUtil.close(connection,statement,null);
  37. }
  38. }
表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】
  1. //doGet方法用来从服务器上获取消息
  2. @Override
  3. protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
  4. resp.setContentType("application/json;charset=utf-8");
  5. //writeValue就是把messageList对象转换成json格式的字符串,并通过写入响应(resp.getWriter())返回
  6. List messageList = load();
  7. objectMapper.writeValue(resp.getWriter(),messageList);
  8. }
  9. private List load(){
  10. //把读到的数据放到List
  11. List messageList = new ArrayList();
  12. System.out.println("从数据库开始读取数据!");
  13. Connection connection = null;
  14. PreparedStatement statement = null;
  15. ResultSet resultSet = null;
  16. try {
  17. connection = DBUtil.getConnection();
  18. String sql = "select * from message";
  19. statement = connection.prepareStatement(sql);
  20. resultSet = statement.executeQuery();
  21. while (resultSet.next()){
  22. Message message = new Message();
  23. message.from = resultSet.getString("from");
  24. message.to = resultSet.getString("to");
  25. message.message = resultSet.getString("message");
  26. messageList.add(message);
  27. }
  28. } catch (SQLException e) {
  29. e.printStackTrace();
  30. }finally {
  31. DBUtil.close(connection,statement,resultSet);
  32. }
  33. return messageList;
  34. }
表白墙服务器版【交互接口、服务器端代码、前端代码、数据存入文件/数据库】

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/crazy_xieyi/article/details/127035000
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
有新私信 私信列表
搜索