axios获取后台数据库中的数据

目录axios获取后台数据库数据一、axios库二、步骤1.前端代码2.servlet代码3.查询数据库代码4.member类的定义总结axios获取后台数据库数据用jsp页面的话，只要在jsp页嵌入java代码，用上while循环和迭代器。就能很容易的循环输出数据库的内容了。但是jsp的前后端耦合度太高，不利于开发，因此现在使用html较为常见。而html页面难以嵌入后端代码，因此需要用到axi

丸子家的银河龙

7890人浏览 · 2021-01-18 03:53:58

丸子家的银河龙 · 2021-01-18 03:53:58 发布

axios获取后台数据库数据

用jsp页面的话，只要在jsp页嵌入java代码，用上while循环和迭代器。就能很容易的循环输出数据库的内容了。但是jsp的前后端耦合度太高，不利于开发，因此现在使用html较为常见。而html页面难以嵌入后端代码，因此需要用到axios库来实现。本篇简单介绍如何在html页面循环输出数据库的内容。

前端框架：vue 2.x axios
后端语言:Java
后端框架:无
所用的包:数据库连接包，JSONObject包

jar包的网盘下载链接：[https://pan.baidu.com/s/1SogRGHJrZEW-ow08S2deMw](https://pan.baidu.com/s/1SogRGHJrZEW-ow08S2deMw) 提取码：8au6 复制这段内容后打开百度网盘手机App，操作更方便哦

一、axios库

axios库是一个基于Promise，同时支持浏览器端和Node.js的HTTP库，常用语Ajax请求。

二、步骤

1.前端代码

使用cdn引入axios库，使用js文件引入vue框架

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="JS/vue.js"></script>


<div id="item">
	<ul>
		<li v-for="n in names">{{n}}</li>
		<li v-for="i in ids">{{i}}</li>
	</ul>
</div>

<script>
	var item = new Vue({
		el:'#item',
		data:{
			names:'nai',
			ids:'none'
		},
		mounted () {
			axios({
				url:'http://localhost:8080/AjaxTry/TextServlet'
			}).then(res=>{
				item.names=res.data.name;
				item.ids=res.data.id;
				console.log(res.data);
			})
		  }
	})
</script>
</body>
</html>

2.servlet代码

代码如下（示例）：

package servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.Iterator;

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 classes.member;
import net.sf.json.JSONObject;
import sql.Operate;

/**
 * Servlet implementation class TextServlet
 */
@WebServlet("/TextServlet")
public class TextServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

    /**
     * Default constructor. 
     */
    public TextServlet() {
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		Operate op = new Operate();
		ArrayList mbs = op.FindAll();
		JSONObject jsonObject = new JSONObject();  //创建Json对象
		if(mbs!=null) {
			Iterator iter = mbs.iterator();
			while(iter.hasNext()) {
				member mb = (member)iter.next();
				jsonObject.put("name",mb.getname());
				jsonObject.put("id",mb.getid());
			}
		}
		response.getWriter().print(jsonObject.toString());
		
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

该处使用的url网络请求的数据。

3.查询数据库代码

连接数据库代码，这里的密码和数据库名要换成自己的

package sql;
import java.sql.*;

public class DBConn {
	public static Connection Conn;
	public static Connection getConn() {
		try {
			Class.forName("com.mysql.cj.jdbc.Driver");
		}
		catch(Exception e){
			e.printStackTrace();
			System.out.println("数据库驱动加载失败");
		}
		try {
			Conn=DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/web_test?serverTimezone=UTC","root","HYC123456");
		}
		catch(Exception e) {
			e.printStackTrace();
			System.out.println("数据库连接失败");
		}
		return Conn;
	}
	public static void main(String[] args) {
		DBConn Conn = new DBConn();
		Conn.getConn();
	}
}

查询数据库类，会在servlet中被调用

package sql;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import classes.member;;

public class Operate {
	Connection conn=DBConn.getConn();
	PreparedStatement pstmt = null;
	
	public ArrayList<member> FindAll(){
		try {
			ArrayList<member> al = new ArrayList<member>();
			pstmt = conn.prepareStatement("select * from members;");
			ResultSet rs=pstmt.executeQuery();
			while(rs.next()) {
				member mb = new member();
				mb.setname(rs.getString("name"));
				mb.setid(rs.getString("id"));
				al.add(mb);
			}
			return al;
		}
		catch(Exception e) {
			e.printStackTrace();
			System.out.println("异常!");
			return null;
		}
	}
}

4.member类的定义

这个无关紧要，换成String类的也无所谓

package classes;

public class member {
	public String name;
	public String id;
	
	public void setname(String name) {
		this.name=name;
	}
	public void setid(String id) {
		this.id=id;
	}
	
	public String getname() {
		return name;
	}
	public String getid() {
		return id;
	}
}

总结

1.前端axios发送请求，请求的的url填后端的操作方法 2.后端操作方法调用数据库操作类，数据库操作类读取数据库数据 3.然后后端将读取的结果封装成Json格式再response.getWriter().print()到前端 4.然后在前端处理Json数据，本篇用的是vue框架的v-for来循环输出