实战-数据从数据库到前端 javaweb数据交互流程解析

目录

git地址

用到的技术及组件

一、创建maven项目

 二、导入相关依赖

     三、设置数据库及对象

1、数据库建表

2、创建实体类User

3、编写mybatis配置文件 mybatis-config.xml 放入资源文件夹

4、配置Mapper代理

5、Mapper自动映射

四、新建service层自动执行查询

        1、首先将获取数据库SqlSessionFactory封装为工具类以供重复调用，功能看注释

        2、封装查询sevice功能

五、后端发送数据到前端

         1、后端代码

                2、前端通过使用AXIOS通过AJAX方式获取数据

3、演示：

六、后端解析前端发送的数据

         1、前端数据

        2、后端

        3、演示效果

---

git地址

javagit/jsondemo at master · 930614591/javagit (github.com)

用到的技术及组件

        java：Java 教程 Java 是由 Sun Microsystems 公司于 1995 年 5 月推出的高级程序设计语言。 Java 可运行于多个平台

        maven：Apache Maven，是一个软件（特别是Java软件）项目管理及自动构建工具，由Apache软件基金会所提供。Maven也可被用于构建和管理各种项目，例如C#，Ruby，Scala和其他语言编写的项目。Maven曾是Jakarta项目的子项目，现为由Apache软件基金会主持的独立Apache项目。

        tomcat服务器：Tomcat是Apache 软件基金会（Apache Software Foundation）的Jakarta 项目中的一个核心项目，由Apache、Sun 和其他一些公司及个人共同开发而成。由于有了Sun 的参与和支持，最新的Servlet 和JSP 规范总是能在Tomcat 中得到体现，Tomcat 5支持最新的Servlet 2.4 和JSP 2.0 规范

        axios：Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js Axios 使用简单, 包尺寸小且提供了易于扩展的接口

        mybatis：MyBatis是一个Java持久化框架，它通过XML描述符或注解把对象与存储过程或SQL语句关联起来，映射成資料庫內對應的紀錄。

        mysql：MySQL（官方發音為/maɪ ˌɛskjuːˈɛl/“My S-Q-L” ，但也经常被读作/maɪ ˈsiːkwəl/“My Sequel”）原本是一個開放源碼的關聯式資料庫管理系統，原開發者為瑞典的MySQL AB公司，该公司于2008年被昇陽微系統（Sun Microsystems）收购。2009年，甲骨文公司（Oracle）收购昇陽微系統公司，MySQL成为Oracle旗下产品。

        fastjson：fastjson是阿里巴巴的开源JSON解析库，它可以解析JSON格式的字符串，支持将Java Bean序列化为JSON字符串，也可以从JSON字符串反序列化到JavaBean。 Fastjson是一个Java语言编写的高性能功能完善的JSON库。它采用一种“假定有序快速匹配”的算法，把JSON Parse的性能提升到极致，是目前Java语言中最快的JSON库。

        Maven Repository/存储库:顾名思义是一个存储JAR文件的仓库，Maven根据项目中pom.xml文件中提供的jar包依赖信息，从存储库中查找并获取需要的jar包。

一、创建maven项目

项目结构：

 

 

 二、导入相关依赖

依赖都可以从存储库中找到，以下是项目依赖以及插件

    
    
      com.alibaba
      fastjson
      2.0.11
    

    
    
      javax.servlet
      javax.servlet-api
      4.0.1
      provided
    

    
    
      javax.servlet
      jsp-api
      2.0
      provided
    

    
    
      javax.servlet
      jstl
      1.2
    

    
    
      taglibs
      standard
      1.1.2
    

    
    
      mysql
      mysql-connector-java
      8.0.30
    

    
    
      org.mybatis
      mybatis
      3.5.10
    

    
      junit
      junit
      4.11
      test
    
    
      javax.annotation
      javax.annotation-api
      1.2
    
  

  
    
      
        org.apache.tomcat.maven
        tomcat7-maven-plugin
        2.2
      
    
  

     三、设置数据库及对象

   数据库这里我们使用mybatis框架进行连接

1、数据库建表

int id;

String username;

String password;

 

2、创建实体类User

用于存储用户对象。

package com.pojo;

public class User {
    private Integer id;
    private String username;
    private String password;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", username='" + username + '\'' +
                ", password='" + password + '\'' +
                '}';
    }
}

 

3、编写mybatis配置文件 mybatis-config.xml 放入资源文件夹

        在

中配置自己的数据库连接，并在下方修改账号密码数据库

则是用来加载sql映射文件，使用包导入的方式，接下来我们创建mapper包，并新建映射文件。

4、配置Mapper代理

        创建mapper包，新建UserMapper接口；

        建立 SelectAllUser();接口，返回值为user集合，通过@注解方式写查询语句，mybatis框架会自定映射和封装类与数据库同名属性。

package com.mapper;

import com.pojo.User;
import org.apache.ibatis.annotations.Select;

import java.util.List;

public interface UserMapper {
    @Select("select * from tb_user")
    public List  SelectAllUser();
}

5、Mapper自动映射

        在资源文件夹里新建相同结构的文件夹以及同名xml映射文件UserMapper.xml，用于mybatis框架自动映射

        这里的mapper标签用于确定具体接口。

 

四、新建service层自动执行查询

        1、首先将获取数据库SqlSessionFactory封装为工具类以供重复调用，功能看注释

package com.Utilql;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

import java.io.IOException;
import java.io.InputStream;

public class sqlsessionFactoryUtils {
    private static SqlSessionFactory sqlSessionFactory;

    static {
        //静态代码块会随着类的加载自动执行，并且只会执行一次
        try {
        String resource = "mybatis-config.xml";
        InputStream inputStream = null;

        inputStream = Resources.getResourceAsStream(resource);

        sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public static SqlSessionFactory getSqlsessionFactory(){
        return sqlSessionFactory;
    }
}

        2、封装查询sevice功能

​
package com.service;

import com.Utilql.sqlsessionFactoryUtils;
import com.mapper.UserMapper;
import com.pojo.User;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import java.util.List;

public class SelectAllService {
    //封装方法，以供查询，返回user结果列表给调用者

    public List selectall() {
        //调用MyBatis完成查询
        //1.加载核心配置，获取SqlSessionFactory
        SqlSessionFactory sqlSessionFactory= sqlsessionFactoryUtils.getSqlsessionFactory();
        //2.获取sqlsiooin
        SqlSession sqlSession=sqlSessionFactory.openSession();
//        2.3获取Mapper
        UserMapper usermapper =sqlSession.getMapper(UserMapper.class);
//        2.4调用方法
        List users = usermapper.SelectAllUser();
        sqlSession.close();
        return users;
    }
}

​

五、后端发送数据到前端

         1、后端代码

        将查询到的用户对象转换成json写入到响应里，并在控制台输出

package com.web;

import com.alibaba.fastjson.JSON;
import com.pojo.User;
import com.service.SelectAllService;
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.util.List;

@WebServlet("/selectAll")
public class SelectAllServlet extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //调用service获取user集合
        SelectAllService selectall = new SelectAllService();
        List users = selectall.selectall();

        //将查询到的对象转换成json 序列化
        String usersJson = JSON.toJSONString(users);
        //将数据写入响应
        resp.setContentType("text/json;charset=utf-8");//设置响应格式以及中文处理
        resp.getWriter().write(usersJson);
        System.out.println(usersJson);

    }
}

                2、前端通过使用AXIOS通过AJAX方式获取数据

        将获取到的数据通过控制台日志的方式进行输出

Hello World!

3、演示：

        运行tomcet7：run

 进入链接：

 

 经对比，和数据库相符合。

六、后端解析前端发送的数据

         1、前端数据

        这里模拟一个点击就发送到后端json数据的html页面，并接受响应值。

        2、后端

接受前端的json数据，并把数据装换成User对象打印出来，再次将json数据写回响应值。

package com.web;

import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;
import com.pojo.User;

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.BufferedReader;
import java.io.IOException;
@WebServlet("/add")
public class add extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req,resp);
    }

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //前端发过来的post数据需要从请求体里拿出来
        BufferedReader reader = req.getReader();
        //从缓冲区读取一行，post只有一行
        String s = reader.readLine();

        //将json转换成对象
        User user = JSON.parseObject(s, User.class);
        System.out.println(user.toString());
        resp.getWriter().write(s);

    }
}

        3、演示效果

前端：

 后端：