小杰笔记：

如何用axios ：

第一步：编写数据库实体类

@Data

@AllArgsConstructor

@NoArgsConstructor

public class User {

    private Integer id;

    private String name;

    private Integer tid;

}

2：编写接口方法：

//表示是mybatis的注解类

@Mapper

@Component

public interface UserMapper {

     //查找全部元素方法

     List<User> queryList();

}

3：编写server层：

public interface UserMapperImp {

    List<User> queryList();

}

实现类：

@Service

public class Server implements UserMapperImp{

    @Autowired

    UserMapper userMapper;

    @Override

    public List<User> queryList() {

        return userMapper.queryList();

    }

}

安装axios：npm install axios

安装完成编写html文件：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

</head>

<body>

<div id="app">

    <button @click="getStudents" style="margin: auto;">演示</button>

    <table border="1" cellpadding="0"  style="margin: auto;">

        <tr>

            <td>id</td>

            <td>name</td>

            <td>tid</td>

        </tr>

        <tr v-for="Student in msg" >

            <td >{{Student.id}}</td>

            <td >{{Student.name}}</td>

            <td >{{Student.tid}}</td>

        </tr>

    </table>

</div>

</body>

</html>

和JavaScript：

<script>

    var vm = new Vue({

        el: "#app",

        data: {

            msg: null

        },

        methods:{

            getStudents: function () {

                var that = this;

                axios.get("http://localhost:8080/jie ")//自己的url

                    .then(function (response) {

                        that.msg = response.data;

                    }).catch(function (reason) {

                    alert("error");

                });

            }

        }

    });

</script>

显示：

如何用axios加后端数据库传值给前端的更多相关文章

  1. ASP.NET 相同页面前后端之间传值

    aspx页面前后端之间传值:前端的html或js获得后端的cs,后端的cs获得前端的js值. 一.前端获得后端的值 1.html元素 前端: <td><%=str%></ ...

  2. ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动

    一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...

  3. Spring Cloud实战 | 最八篇：Spring Cloud +Spring Security OAuth2+ Axios前后端分离模式下无感刷新实现JWT续期

    一. 前言 记得上一篇Spring Cloud的文章关于如何使JWT失效进行了理论结合代码实践的说明,想当然的以为那篇会是基于Spring Cloud统一认证架构系列的最终篇.但关于JWT另外还有一个 ...

  4. atitit.动态加载数据库配置in orm hibernate mybatis

    atitit.动态加载数据库配置in orm 1. 动态加载数据库配置的优点::: 1 1.1. 组合多个配置文件... 1 1.2. 连接多个数据库 1 2. 基本的流程:::getCfg内存对象, ...

  5. Android之数据存储----使用LoaderManager异步加载数据库

    一.各种概念: 1.Loaders: 适用于Android3.0以及更高的版本,它提供了一套在UI的主线程中异步加载数据的框架.使用Loaders可以非常简单的在Activity或者Fragment中 ...

  6. 如何用手机维护Mysql数据库

    如何用手机维护网站数据库 身边很多人都在拿ipad或iphone来玩儿游戏或听歌,大多数人认为它们就是个娱乐设备,在我看来它们同样可以帮助我们更加快捷的工作,我用手机遥控单反.用手机控制PPT的播放. ...

  7. ThinkCMF项目部署出现无法加载数据库驱动解决方案

    最近有个TP项目刚从从本地部署到阿里云服务器上,出现了无法加载数据库驱动的错误,提示 :( 无法加载数据库驱动: Think\Db\Driver 这里分享一下出现该错误的解决步骤: 首先记得项目部署到 ...

  8. java 加载数据库驱动

    JDBC编程步骤见 JDBC编程步骤 JDBC编程的第一步是加载数据库驱动,使用Class类的forName()方法,Class.forName("com.mysql.jdbc.Driver ...

  9. Android-LoaderManager异步加载数据库数据

    LoaderManager异步加载数据库数据,是在(Activity/fragment/其他UI等) 加载大量的本地Database库表数据,由于数据大在加载过程中会导致UI线程阻塞,导致用户体验不好 ...

  10. [置顶] Android异步加载数据库和多线程编程

    Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发.尚未有统一中文名称,中国大陆地区较多人使用“安卓” ...

随机推荐

  1. strimzi实战之三：prometheus+grafana监控（按官方文档搞不定监控？不妨看看本文，已经踩过坑了）

    欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 由于整个系列的实战都涉及到消息生产和消费,所 ...

  2. redis 源码分析：Jedis 哨兵模式连接原理

    1. 可以从单元测试开始入手 查看类JedisSentinelPool private static final String MASTER_NAME = "mymaster"; ...

  3. 传统的MVC开发模式和前后端分离开发模式

    1. 引言 在当今互联网时代,移动应用和网页应用的发展极大地推动了前后端分离开发模式的兴起.传统的后端渲染方式已经不能满足用户对高性能和优质用户体验的需求,于是前后端分离逐渐成为了一种主流的开发模式. ...

  4. WebKit Insie: Active 样式表

    WebKit Inside: CSS 样式表的匹配时机介绍了当 HTML 页面有不同 CSS 样式表引入时,CSS 样式表开始匹配的时机.后续文章继续介绍 CSS 样式表的匹配过程,但是在匹配之前,首 ...

  5. https://www.oracle.com/au/cloud/free/

    https://www.oracle.com/au/cloud/free/ "Oracle Cloud Free "免费云在线注册关于个人应用的用户在注册和试用的过程中遇到任何问题 ...

  6. K8s部署轻量级日志收集系统EFK（elasticsear + filebeat + kibana）

    目录 K8s部署EFK(elasticsear + filebeat + kibana)日志收集 一.准备镜像 二.搭建Elasticsearch + kibana 1.在可执行kubectl命令的服 ...

  7. ApiPost发送请求报错UT000036: Connection terminated parsing multipart data

    发送请求报错Caused by: java.io.IOException: UT000036: Connection terminated parsing multipart data 这个报错是因为 ...

  8. 轻松掌握组件启动之Redis单机、主从、哨兵、集群配置

    单机配置启动 Redis安装 下载地址:http://redis.io/download 安装步骤: 1: 安装gcc编译器:yum install gcc 2: 将下载好的redis‐5.0.3.t ...

  9. P8741 [蓝桥杯 2021 省 B] 填空问题 题解

    P8741 [蓝桥杯 2021 省 B] 填空问题 题解 题目传送门 欢迎大家指出错误并联系这个蒟蒻 更新日志 2023-05-09 23:19 文章完成 2023-05-09 23:20 通过审核 ...

  10. 文心一言 VS 讯飞星火 VS chatgpt （119）-- 算法导论10.3 4题

    四.用go语言,我们往往希望双向链表的所有元素在存储器中保持紧凑,例如,在多数组表示中占用前m 个下标位置.(在页式虚拟存储的计算环境下,即为这种情况.)假设除指向链表本身的指针外没有其他指针指向该链 ...