文章目录
一、准备工作
创建
maven
项目
创建必要的目录
webapp, WEB-INF, web.xml;web.xml如下:
- /div>
- "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
- "http://java.sun.com/dtd/web-app_2_3.dtd" >
-
Archetype Created Web Application
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}
三、实现服务器端代码
- //这个类表示一条消息的数据格式
- class Message{
- public String from;
- public String to;
- public String message;
- }
- @WebServlet("/message")
- public class MessageServlet extends HttpServlet {
- // 用于转换 JSON 字符串
- private ObjectMapper objectMapper = new ObjectMapper();
- // 用于保存所有的留言
- private List
messageList = new ArrayList(); -
- //doGet方法用来从服务器上获取消息
- @Override
- protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
- resp.setContentType("application/json;charset=utf-8");
- //writeValue就是把messageList对象转换成json格式的字符串,并通过写入响应(resp.getWriter())返回
- objectMapper.writeValue(resp.getWriter(),messageList);
- }
-
- //doPost方法用来把客户端的数据提交到服务器
- @Override
- protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
- //readValue第一个参数可以支持一个字符串,也可以放inputStream对象;第二个参数是用来接收读取到的结果
- //返回值放到Message对象中
- //通过这个代码就完成了读取body,并且解析成json的过程
- Message message = objectMapper.readValue(req.getInputStream(),Message.class);
- messageList.add(message);
- resp.setContentType("application/json;charset=utf-8");
- resp.getWriter().write("{\"ok\":1}");
- }
- }

四、调整前端页面代码
-
- script>
- //1.在页面加载的时候访问服务器,从服务器这边获取到消息列表,并展示出来
- function load(){
- $.ajax({
- type:'GET',
- url:'message',
- success: function(data,status){
- let container = document.querySelector('.container');
- for(let message of data){
- let row = document.createElement('div');
- row.className = 'row';
- row.innerHTML = message.from + '对' + message.to + '说: ' + message.message;
- container.appendChild(row);
- }
- }
- });
- }
- load();
- //2.点击提交按钮的时候,把当前的数据构造成一个http请求,发送给服务器
- let submitButon = document.querySelector('#submit');
- submitButon.onclick = function(){
- //1.先获取到编辑框中的内容
- let edits = document.querySelectorAll('.edit');
- console.log(edits);
- let from = edits[0].value;
- let to = edits[1].value;
- let message = edits[2].value;
- console.log(from+'对'+to+'说,'+message);
- if(from == '' || to == '' || message == ''){
- return;
- }
- //2.根据内容构造html元素(.row里面包含用户输入的话
- let row = document.createElement('div');
- row.className = 'row';
- row.innerHTML = from+'对'+to+'说,'+message;
- //3.把这个元素添加到DOM树上
- let container = document.querySelector('.container');
- container.appendChild(row);
- //4.清空原来的输入框
- for(let i=0; i
length; i++){ - edits[i].value = '';
- }
- //5.构造成一个http请求,发送给服务器
- $.ajax({
- type:'POST',
- url:'message',
- //data里面就是body数据
- data: JSON.stringify({from:from, to:to, message:message}),
- contentType: "application/json;charset=utf-8",
- success: function(data,status){
- if(data.ok == 1){
- console.log('提交成功');
- }else{
- console.log('提交失败');
- }
- }
- })
- }
- script>

到 。
数据此时是存储在服务器的内存中 ( private List messages = new ArrayList(); ), 一旦服务器重启, 数据仍然会丢失。
五、数据存入文件
在上面的代码中,我们是把数据保存在messageList这个变量里面的,如果我们要把数据放在文件中,进行持久化存储,就不需要这变量了。
FileWriter fileWriter = new FileWriter(filePath,true)
java打开文件主要由三种方式:
1.读方式打开(使用输入流对象的时候)
2.写方式打开(使用输出流对象的时候)这种方式会清空原有内容
3.追加写方式打开(使用输出流对象的时候) ,这种方式不会清空原有内容,而是直接在文件内容后面拼接。后面加上true就是追加写状态。
数据存入文件完整代码如下:
- class Message{
- public String from;
- public String to;
- public String message;
- }
- @WebServlet("/message")
- public class MessageServlet extends HttpServlet {
- // 用于转换 JSON 字符串
- private ObjectMapper objectMapper = new ObjectMapper();
- // 用于保存所有的留言
- // private List
messageList = new ArrayList(); -
- //保存文件的路径
- private String filePath = "d:code/java/messageWall924/messages924.txt";
- //doGet方法用来从服务器上获取消息
- @Override
- protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
- resp.setContentType("application/json;charset=utf-8");
- //writeValue就是把messageList对象转换成json格式的字符串,并通过写入响应(resp.getWriter())返回
- List
messageList = load(); - objectMapper.writeValue(resp.getWriter(),messageList);
- }
- private List
load(){ - //把读到的数据放到List
中 - List
messageList = new ArrayList(); - System.out.println("开始从文件加载数据!");
- //此处需要按行读取,FileReader不支持,需要套上一层BufferedReader
- try(BufferedReader bufferedReader = new BufferedReader(new FileReader(filePath))){
- while (true){
- String line = bufferedReader.readLine();
- if (line == null){
- break;
- }
- //读取到的内容,就解析成Message对象
- String[] tokens = line.split("\t");
- Message message = new Message();
- message.from = tokens[0];
- message.to = tokens[1];
- message.message = tokens[2];
- messageList.add(message);
- }
- }catch (IOException e){
- e.printStackTrace();
- }
- return messageList;
- }
-
- //doPost方法用来把客户端的数据提交到服务器
- @Override
- protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
- //readValue第一个参数可以支持一个字符串,也可以放inputStream对象;第二个参数是用来接收读取到的结果
- //返回值放到Message对象中
- //通过这个代码就完成了读取body,并且解析成json的过程
- Message message = objectMapper.readValue(req.getInputStream(),Message.class);
- //这里进行一个写文件操作
- save(message);
-
-
- resp.setContentType("application/json;charset=utf-8");
- resp.getWriter().write("{\"ok\":1}");
- }
- private void save(Message message){
- System.out.println("数据开始写入文件");
- try(FileWriter fileWriter = new FileWriter(filePath,true)){
- fileWriter.write(message.from + '\t' + message.to +
- '\t' + message.message + '\n');
- }catch (IOException e){
- e.printStackTrace();
- }
- }
- }

六、数据存入数据库
1)
在
pom.xml
中引入
mysql
的依赖
-
-
mysql -
mysql-connector-java -
5.1.47 -
2)
创建数据库
,
创建
messages
表
3) 创建 DBUtil 类
DBUtil
类主要实现以下功能
:
创建
MysqlDataSource
实例
,
设置
URL, username, password
等属性。
提供
getConnection
方法
,
和
MySQL
服务器建立连接。
提供
close
方法
,
用来释放必要的资源。
- public class DBUtil {
- private static final String URL = "jdbc:mysql://127.0.0.1:3306/messageWall924?characterEncoding=utf8&useSSL=false";
- private static final String USERNAME = "root";
- private static final String PASSWORD = "1234";
-
- private static volatile DataSource dataSource = null;
-
- public static DataSource getDataSource(){
- if (dataSource == null){
- synchronized (DBUtil.class){
- if (dataSource == null){
- dataSource = new MysqlDataSource();
- ((MysqlDataSource)dataSource).setURL(URL);
- ((MysqlDataSource)dataSource).setUser(USERNAME);
- ((MysqlDataSource)dataSource).setPassword(PASSWORD);
- }
- }
- }
- return dataSource;
- }
-
- public static Connection getConnection() throws SQLException {
- return getDataSource().getConnection();
- }
-
- public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet){
- if (resultSet != null){
- try {
- resultSet.close();
- } catch (SQLException e) {
- e.printStackTrace();
- }
- }
- if (statement != null){
- try {
- statement.close();
- } catch (SQLException e) {
- e.printStackTrace();
- }
- }
- if (connection != null){
- try {
- connection.close();
- } catch (SQLException e) {
- e.printStackTrace();
- }
- }
- }
- }

4) 修改 load 和 save 方法, 改成操作数据库
-
- @Override
- protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
- //readValue第一个参数可以支持一个字符串,也可以放inputStream对象;第二个参数是用来接收读取到的结果
- //返回值放到Message对象中
- //通过这个代码就完成了读取body,并且解析成json的过程
- Message message = objectMapper.readValue(req.getInputStream(),Message.class);
- //这里进行一个写数据操作
- save(message);
- resp.setContentType("application/json;charset=utf-8");
- resp.getWriter().write("{\"ok\":1}");
- }
- private void save(Message message){
- System.out.println("向数据库写入数据!");
-
- //1.先和数据库建立连接
- Connection connection = null;
- PreparedStatement statement = null;
- try {
- //1.先和数据库建立连接
- connection = DBUtil.getConnection();
- //2.拼装sql
- String sql = "insert into message values(?,?,?)";
- statement = connection.prepareStatement(sql);
- statement.setString(1,message.from);
- statement.setString(2,message.to);
- statement.setString(3,message.message);
- //执行sql
- int ret = statement.executeUpdate();
- if (ret == 1){
- System.out.println("插入数据库成功");
- }else {
- System.out.println("插入数据库失败");
- }
- } catch (SQLException e) {
- e.printStackTrace();
- }finally {
- DBUtil.close(connection,statement,null);
- }
- }

- //doGet方法用来从服务器上获取消息
- @Override
- protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
- resp.setContentType("application/json;charset=utf-8");
- //writeValue就是把messageList对象转换成json格式的字符串,并通过写入响应(resp.getWriter())返回
- List
messageList = load(); - objectMapper.writeValue(resp.getWriter(),messageList);
- }
- private List
load(){ - //把读到的数据放到List
中 - List
messageList = new ArrayList(); - System.out.println("从数据库开始读取数据!");
- Connection connection = null;
- PreparedStatement statement = null;
- ResultSet resultSet = null;
- try {
- connection = DBUtil.getConnection();
- String sql = "select * from message";
- statement = connection.prepareStatement(sql);
- resultSet = statement.executeQuery();
- while (resultSet.next()){
- Message message = new Message();
- message.from = resultSet.getString("from");
- message.to = resultSet.getString("to");
- message.message = resultSet.getString("message");
- messageList.add(message);
- }
- } catch (SQLException e) {
- e.printStackTrace();
- }finally {
- DBUtil.close(connection,statement,resultSet);
- }
- return messageList;
- }

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。