小杰笔记：

如何用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. Dubbo3应用开发—Dubbo序列化方案(Kryo、FST、FASTJSON2、ProtoBuf序列化方案的介绍和使用)

    Dubbo序列化方案(Kryo.FST.FASTJSON2.ProtoBuf序列化方案的介绍和使用) 序列化简介 序列化是Dubbo在RPC中非常重要的一个组成部分,其核心作用就是把网络传输中的数据, ...

  2. MySQL 高级(进阶) SQL 语句

    MySQL 高级(进阶) SQL 语句 use gy; create table location (Region char(20),Store_Name char(20)); insert into ...

  3. DevOps｜破除壁垒,重塑协作-业务闭环释放产研运协作巨大效能

    - 会议太多了,员工开会效率降低了50%! 上篇文章<研发效能组织架构:职能独立vs业务闭环>介绍了职能独立型组织架构和业务闭环型组织架构的特点,优劣势.也许有的小伙伴可能对这两种组织架构 ...

  4. 2023_10_09_MYSQL_DAY_01_课后题

    2023_10_09_MYSQL_DAY_01_课后题 #第三章 #1. 查询每名员工的员工姓名,入职时间. SELECT ename, hiredate FROM emp; #2. 查询部门表中部门 ...

  5. ansible-配置文件优化-性能调优

    ansible-配置文件详解:ansible默认配置文件为/etc/ansible/ansible.cfg,配置文件中可以对ansible进行各项参数的调整,包括并发线程.用户.模块路径.配置优化等, ...

  6. 飞码LowCode前端技术：如何便捷配置出页面

    简介 飞码是京东科技平台研发部研发的低代码产品,可使营销运营域下web页面快速搭建.本文将从三个方面来讲解如何便捷配置出页面,第一部分从数据.事件.业务支持三个方面进行分析,第二部分从模板与页面收藏与 ...

  7. Python 用户输入和字符串格式化指南

    Python 允许用户输入数据.这意味着我们可以向用户询问输入.在 Python 3.6 中,使用 input() 方法来获取用户输入.在 Python 2.7 中,使用 raw_input() 方法 ...

  8. bad_python

    对着正确的pyc文件在010把题目文件的前缀改掉,然后在线反编译得到代码

  9. 决策树C4.5算法的技术深度剖析、实战解读

    在本篇深入探讨的文章中,我们全面分析了C4.5决策树算法,包括其核心原理.实现流程.实战案例,以及与其他流行决策树算法(如ID3.CART和Random Forests)的比较.文章不仅涵盖了丰富的理 ...

  10. 🔥🔥Java开发者的Python快速进修指南：面向对象基础

    当我深入学习了面向对象编程之后,我首先感受到的是代码编写的自由度大幅提升.不同于Java中严格的结构和约束,Python在面向对象的实现中展现出更加灵活和自由的特性.它使用了一些独特的关键字,如sel ...