小杰笔记：

如何用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. oracle-应用连接数激增测试

    在生产环境遇见过表的连接数过高,导致系统宕机的问题,操作上是由于在大表上建立索引,造成全表锁.故手动在表加表级锁,表上的应用不停,查看Oracle数据库连接数是否激增. 1 应用正常运行,查看当前数据 ...

  2. C++算法之旅、09 力扣篇 | 常见面试笔试题（上）算法小白专用

    刷题的目的是为了更好的理解数据结构与算法,更好的理解一些封装起来的库函数是怎么实现的,而不是简简单单的为了刷题而刷题. 时间.空间复杂度 事后统计法 提前写好算法代码和编好测试数据,在计算机上跑,通过 ...

  3. Kbaor_2023_9_28_Java第一次实战项目_ELM_V1_食品的实体类、工具类与实现类

    Kbaor_2023_9_28_Java第一次实战项目_ELM_V1_食品的实体类.工具类与实现类 ELM_V1_食品的实体类 package elm_V1; /** * [食品实体类] * * @a ...

  4. linux知识点 ROM，RAM，SRAM，DRAM，Flash

    参考视频:https://www.bilibili.com/video/BV13L4y1b7So?spm_id_from=333.337.search-card.all.click SRAM,DRAM ...

  5. DevOps2023现状报告｜注重文化、以用户为中心是成功的关键

    Google Cloud DORA 团队的一份新研究报告强调了企业文化和关注用户作为成功软件交付支柱的重要性. 2023 DevOps 状况报告分析了过去 9 年来通过此类最大规模调查收集的全球 36 ...

  6. 虹科案例｜虹科Visokio商业智能平台在疫后帮酒店业打好翻身仗！

    疫后时代以来,报复性度假呈爆炸式增长,首先点燃的就是酒店行业.面对疫后更为理性"挑剔"的客户以及酒店行业复苏节点: 如何提升酒店管理效率? 怎么准确判断流量变化趋势,拓展线上客源? ...

  7. 动态规划的状态设计 | bot 讲课の补题

    sto james1badcreeper orz. 好厉害的题,但是怎么有人补了三天才补完呢? CF1810G The Maximum Prefix 线性 dp,怎么有 bot 说题目难度在 *240 ...

  8. 19. 从零开始编写一个类nginx工具, 配置数据的热更新原理及实现

    wmproxy wmproxy是由Rust编写,已实现http/https代理,socks5代理, 反向代理,静态文件服务器,内网穿透,配置热更新等, 后续将实现websocket代理等,同时会将实现 ...

  9. tailwindcss 选型，以及vue配置使用

    一.为什么选择tailwindcss? Tailwind CSS 是一个受欢迎的.功能丰富的CSS框架,它与传统的CSS框架(如Bootstrap)有些不同.以下是一些人们通常对于Tailwind C ...

  10. HTML DOM之三：节点关系导航

    1.获取节点列表 1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p>Hello World!</p> 6 ...