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 stubOperate 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 stubdoGet(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来循环输出

axios获取后台数据库中的数据相关推荐

微信小程序 - 无法获取云端数据库中的数据的问题（修改云端数据库权限）
小程序中从云端数据库获取不到数据从云端数据库中取数据 // 使用云数据库 const db = wx.cloud.database(); export default{data(){return { ...
Qt工作笔记-以配置文件的方式动态获取Mysql数据库中的数据
场景修改配置文件,获取表头,再遍历数据库! 实时监控文件,一旦修改马上重新遍历数据库! 程序运行截图如下: 静态运行图如下: 技术原理及源码使用QFileSystemWatcher对文件进行监控 ...
不用sqlDataSet如何从后台数据库中读取数据
注意:要引用System.Data.SqlClient -----------引用部份如下------------------------ uses System.Collections, Sys ...
axios获取html页面,axios 获取后台数据
什么是axios axios是一个获取后台数据的插件使用前提得安装node.js 页面直接引用下载选中文件夹 shift+右键调出命令窗口输入 npm i axios -g axios的特 ...
Case Study: 利用PHP获取关系型数据库中多张数据表的数据
一.目标该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个多数据表关联的网页.在上一个案例(Case Study: 利用JS实现数据库网 ...
html网页如何获取后台数据库的数据(html + ajax + php + mysql)
目录 html代码 php文件代码还得在vscode上的php配置以及php环境搭建基于PhpStudy完成web配置登录数据库 mysql的table准备将html文件和php文件项目放入W ...
获取SQLServer数据库中所有表
对于获取SQLSERVER数据库中所有表,首先第一步引有SQLDMO.dll 找到文件路径: C:\Program Files\Microsoft SQL Server\80\Tools\ ...
jsp在mysql中删除数据_如何在jsp页面中删除数据库中的数据
如何在jsp页面中删除数据库中的数据各位大虾! 我想在jsp页面上写一个按钮功能,从而动态的删除数据库中的一行数据. 不知道怎么实现这是我写的一段代码数据库是MySql UserBean p3= ...
基于JDBC从数据库中读取数据，在百度地图批量标注地点
基于JDBC从数据库中读取数据,在百度地图批量标注地点一.相关技术 JSP,JDBC,JSON,JS,百度地图API 二.基于JDBC从数据库读取数据见"JSP基于JDBC操作MSSQL ...

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

目录