如何用axios加后端数据库传值给前端
小杰笔记：
如何用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加后端数据库传值给前端的更多相关文章
- ASP.NET 相同页面前后端之间传值
aspx页面前后端之间传值:前端的html或js获得后端的cs,后端的cs获得前端的js值. 一.前端获得后端的值 1.html元素 前端: <td><%=str%></ ...
- ajax验证表单元素规范正确与否 ajax展示加载数据库数据 ajax三级联动
一.ajax验证表单元素规范正确与否 以用ajax来验证用户名是否被占用为例 1创建表单元素<input type="text" id="t"> 2 ...
- Spring Cloud实战 | 最八篇：Spring Cloud +Spring Security OAuth2+ Axios前后端分离模式下无感刷新实现JWT续期
一. 前言 记得上一篇Spring Cloud的文章关于如何使JWT失效进行了理论结合代码实践的说明,想当然的以为那篇会是基于Spring Cloud统一认证架构系列的最终篇.但关于JWT另外还有一个 ...
- atitit.动态加载数据库配置in orm hibernate mybatis
atitit.动态加载数据库配置in orm 1. 动态加载数据库配置的优点::: 1 1.1. 组合多个配置文件... 1 1.2. 连接多个数据库 1 2. 基本的流程:::getCfg内存对象, ...
- Android之数据存储----使用LoaderManager异步加载数据库
一.各种概念: 1.Loaders: 适用于Android3.0以及更高的版本,它提供了一套在UI的主线程中异步加载数据的框架.使用Loaders可以非常简单的在Activity或者Fragment中 ...
- 如何用手机维护Mysql数据库
如何用手机维护网站数据库 身边很多人都在拿ipad或iphone来玩儿游戏或听歌,大多数人认为它们就是个娱乐设备,在我看来它们同样可以帮助我们更加快捷的工作,我用手机遥控单反.用手机控制PPT的播放. ...
- ThinkCMF项目部署出现无法加载数据库驱动解决方案
最近有个TP项目刚从从本地部署到阿里云服务器上,出现了无法加载数据库驱动的错误,提示 :( 无法加载数据库驱动: Think\Db\Driver 这里分享一下出现该错误的解决步骤: 首先记得项目部署到 ...
- java 加载数据库驱动
JDBC编程步骤见 JDBC编程步骤 JDBC编程的第一步是加载数据库驱动,使用Class类的forName()方法,Class.forName("com.mysql.jdbc.Driver ...
- Android-LoaderManager异步加载数据库数据
LoaderManager异步加载数据库数据,是在(Activity/fragment/其他UI等) 加载大量的本地Database库表数据,由于数据大在加载过程中会导致UI线程阻塞,导致用户体验不好 ...
- [置顶] Android异步加载数据库和多线程编程
Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发.尚未有统一中文名称,中国大陆地区较多人使用“安卓” ...
随机推荐
- mysql启动失败，报没有pid错误
mysql启动失败,报没有pid错误 安装完Mysql后,启动mysqld失败,花了很长时间才找到原因,现在根据网友提供的解决方法汇总一下,方便遇到时可以参考排查 现象:service mysql s ...
- Merkle Tree 简介
Merkle 树(Merkle Tree)是一种树状数据结构,通常用于验证大规模数据集的完整性和一致性.它的名字来源于其发明者 Ralph Merkle.Merkle 树在密码学.分布式系统和区块链等 ...
- Oracle-降低表的高水位线
在应用中存在一系列的表,对表的操作是批量插入又批量删除,最终导致表的水位线很高.高水位线影响全索引扫描的SQL.即影响系统的性能. 现有方法降低表的水位线: 1.降低表的高水位线 select 'al ...
- 前端三件套系例之JQuery——JQuery基础、JQuery选择器、JQuery文本属性样式操作、JQuery操作DOM
文章目录 1 JQuery基础 1. 了解jQuery 1.1 什么是jQuery 1.2 什么事JS类库 1.3 常见JS类库 1.4 jQuery的优势 1.5 jQuery的版本 1.6 jQu ...
- Programming abstractions in C阅读笔记：p166-p175
<Programming Abstractions In C>学习第58天,p166-p175总结. 一.技术总结 1.斐波那契数列(Fibonacci Sequenc) (1)斐波那契数 ...
- 低代码助力微信小程序对接，提升开发效率
摘要:本文由葡萄城技术团队原创并首发.转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 前言 微信小程序相信大家都用过,相较于APP,微信小程序的优势在于其便 ...
- DHorse v1.4.2 发布，基于 k8s 的发布平台
版本说明 优化特性 在集群列表增加集群版本: 修改Jvm的GC指标名: 解决问题 解决shell脚本换行符的问题: 解决部署历史列表页,环境名展示错误的问题: 解决指标收集功能的异常: 升级指南 升级 ...
- 【Vue3响应式入门#01】Reactivity
专栏分享:vue2源码专栏,vue3源码专栏,vue router源码专栏,玩具项目专栏,硬核推荐 欢迎各位ITer关注点赞收藏 背景 以下是柏成根据Vue3官方课程整理的响应式书面文档 - 第一节, ...
- 云图说｜初识API中心APIHub
阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要:API中心是为AP ...
- OpenResty入门之压测篇：压测工具界的 “悍马” wrk 审核中
在上篇文章 每个后端都应该了解的 OpenResty 入门以及网关安全实战 中,我向大家介绍了 OpenResty 的入门使用是 WAF 防御实战,这篇文章将给大家继续介绍 OpenResty 入门之 ...