前后端交互Demo练习

最新推荐文章于 2024-04-22 12:15:06 发布
最新推荐文章于 2024-04-22 12:15:06 发布
阅读量1.5k 收藏 17
点赞数 2
文章标签： html5 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Yjh_pythonking/article/details/120003632
版权

        前面知识点大概都讲完了，今天来说一下星期天做的前后端交互的Demo，进行知识的汇总，查漏补缺。

        这个Demo主要是把数据库中的信息展现到前端页面，用户通过点击按钮进行增删改查的操作。

流程图：

 

一、前端页面的搭建

工具：HBuilder X

语言：HTML、JS、CSS

框架：VUE

1.前端页面框架的搭建

1.1 项目结构vue基本框架搭建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端交互案例</title>
		<script src="../js/axios.js" type="text/javascript"></script>
		<script src="../js/vue.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="app">
			<!-- 用户修改 -->
			<div id="">
				
			</div>
			<!-- 用户新增 -->
			<div id="">
				
			</div>
			<!-- 用户列表 -->
			<div id="">
				
			</div>
			
		</div>
		<script type="text/javascript">
			const app=new Vue({
				el:"#app",
				data:{
					
				}methods:{
					
				},
				created() {
					
				}
			})
		</script>
	</body>
</html>

知识点：

注意导入Ajax和vue的JS文件

注意生命周期函数created在VUE对象的根目录写，不在methods里写，由系统在完成创建对象后自动调用 

1.2根据数据库数据进行内容填充

用户修改：

<div id="" align="center">
				<h2>用户修改</h2>
				编号：<input type="text" name="" id="" value="" disabled/>
				姓名：<input type="text" name="" id="" value="" /><br>
				年龄：<input type="text" name="" id="" value="" />
				性别：<input type="text" name="" id="" value="" /><br>
				<button type="button">确认修改</button>
			</div>

用户新增：

<div id="" align="center">
				<h2>用户新增</h2>
				姓名：<input type="text" name="" id="" value="" />
				年龄：<input type="text" name="" id="" value="" />
				性别：<input type="text" name="" id="" value="" />
				<button type="button">确认新增</button>
			</div>

用户列表：

<div id="">
				<table border="" cellspacing="" cellpadding="" align="center" width="80%">
					<tr><th colspan="5"><h2>用户列表</h2></th></tr>
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
最低0.47元/天 解锁文章
希望不要秃头的0.0
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javaWeb作业之前后台交互小Demo
u013110682的博客
03-14 2122
实现javaWeb小Demo,练习前后端交互
一个简化版的SSH后端接口框架demo
07-24
一个简化版的SSH后端接口框架demo，不需要引用大量的第三方工具包，只有三个很小的核心包
AxureUX WEB前后端交互原型通用元件库 v3.11 (Axure RP9专用版)
06-28
AxureUX WEB前后端交互原型通用元件库 v3.11 (Axure RP9专用版) AxureUX WEB前后端交互原型通用元件库 v3.11 (Axure RP9专用版) AxureUX WEB前后端交互原型通用元件库 v3.11 (Axure RP9专用版) AxureUX WEB前后端交互原型通用元件库 v3.11 (Axure RP9专用版) AxureUX WEB前后端交互原型通用元件库 v3.11 (Axure RP9专用版) AxureUX WEB前后端交互原型通用元件库 v3.11 (Axure RP9专用版) AxureUX WEB前后端交互原型通用元件库 v3.11 (Axure RP9专用版) AxureUX WEB前后端交互原型通用元件库 v3.11 (Axure RP9专用版) AxureUX WEB前后端交互原型通用元件库 v3.11 (Axure RP9专用版) AxureUX WEB前后端交互原型通用元件库 v3.11 (Axure RP9专用版) AxureUX WEB前后端交互原型通用元件库 v3.11 (Axure RP9专用版)
前端-Rap模拟数据接口
12-14
一份关于前端-Rap模拟数据接口的开发文档。有需要的可以下载看看。
Flask 数据库前后端交互案例-1
最新发布
a1309525802的博客
04-22 5533
Flask 数据库前后端交互案例目录结构templates目录base.htmlheader.htmlleft.html首页职员管理页面添加员工界面员工编辑页面员工详情界面后台main.pyapp.pymodels.pyviews.py 目录结构 静态文件链接：https://pan.baidu.com/s/1VtvUG_4OKbACGQDMREHRzg 提取码：sdsx templates目录 base.html templates/base.html <!DOCTYPE html> &lt
移动端web交互UI demo
02-28
web移动端开发，表单验证，模态窗口，高度自适应弹框，确认按钮，取消按钮，翻滚列表，滚动列表，倒计时按钮
Rest风格前后端分离 web项目demo
05-03
非常好的rest前后端分离项目 企业开发目前主流所选的模式 如果能看懂并整合自己的项目会有巨大的收获
POSTMAN前后端交互工具
09-19
前后端交互工具，通过postman可以尽量减少对接联调工作中的沟通，更好实现前后端分离工作
前端如何调用后端接口进行数据交互（极简）
热门推荐
weixin_43005654的博客
03-18 6万+
axios，前后端数据交互，数据渲染，发请求，axjax
实现数据库与前端交互的小demo
sadjoker2048的博客
05-04 1814
前言 小白学习过程中练习小样，涉及最简单的前端页面以及基础的servlet和数据库连接，本篇只写流程。大概是一些培训机构试听课中会讲的，比较浅显。文章仅用于小白自己梳理业务思路，权当锻炼一下思维。 逻辑结构 每块代码要实现的功能： 1.User实体类：规定用户属性，实现get/set方法，以及实现构造方法。 2.BaseDao：建立getConnections方法，返回值为Connection，实现数据库的连接操作。 3.UserDao接口：规范UserDao的方法（这里主要...
ajax 前后端数据传输demo实例
weixin_30588729的博客
07-19 366
先写html页面(test.html)： 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf8"> 5 <title>ajax</title> 6 <script type="text/javascript" src...
优秀的前端学习demo
02-08
非常优秀的前端学习demo
Springmvc和ajax如何实现前后端交互
08-19
主要介绍了Springmvc和ajax如何实现前后端交互,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
后台前端样式DEMO
04-24
后台前端样式DEMO
websocket-demo前后端交互的实例代码
05-23
websocket-demo前后端交互的实例代码
SSM框架前后端信息交互实现流程详解
08-18
主要介绍了SSM框架前后端信息交互实现流程详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
HTML+PHP实现前后端交互(新手篇)
03-31
HTML+PHP实现前后端交互(新手篇)简单小demo给新手参考(推荐)
Axure WEB前后端交互原型通用元件库 v2.0.rar
04-24
包含了常用组件、信息输出、信息输入、信息反馈、综合系列、页面交互等6种元件分类，这些分类由近百款元件类型和上千个独立元件组成。相比于旧版本，新版中包含了更加丰富的元件类型和业务组件，并且去掉了一些实用...
泛型方法以及泛型方法、泛型类的使用场景
岁月平添了我的愁
01-08 938
1. 泛型方法 在方法中出现了泛型的结构，泛型参数与类的泛型参数没有任何关系，换句话说，泛型方法所属的类是不是泛型类都没关系 泛型方法在调用时指明泛型参数的类型，并非在实例化类时确定， arr给E指挥的类型是integer，并且可以加static public <E> List<E> copy(E[] arr){ ArrayList<E> list=new ArrayList<>(); for (E e : arr) { l
springboot前后端交互demo
03-16
您好，以下是一个简单的Spring Boot前后端交互的示例： 1. 后端代码（使用Spring Boot和Spring MVC）： ```java @RestController public class UserController { @GetMapping("/users") public List<User> getUsers() { // 从数据库或其他数据源获取用户列表 List<User> users = new ArrayList<>(); users.add(new User("Alice", 20)); users.add(new User("Bob", 25)); return users; } @PostMapping("/users") public User addUser(@RequestBody User user) { // 将用户保存到数据库或其他数据源 return user; } } public class User { private String name; private int age; // 省略getter和setter方法 } ``` 2. 前端代码（使用Vue.js和axios）： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Spring Boot前后端交互示例</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <h1>用户列表</h1> <ul> <li v-for="user in users">{{ user.name }} ({{ user.age }})</li> </ul> <h1>添加用户</h1> <form @submit.prevent="addUser"> <label>姓名：</label> <input type="text" v-model="newUser.name"><br> <label>年龄：</label> <input type="number" v-model="newUser.age"><br> <button type="submit">提交</button> </form> </div> <script> new Vue({ el: '#app', data: { users: [], newUser: { name: '', age: } }, mounted() { axios.get('/users').then(response => { this.users = response.data; }); }, methods: { addUser() { axios.post('/users', this.newUser).then(response => { this.users.push(response.data); this.newUser = { name: '', age: }; }); } } }); </script> </body> </html> ``` 这个示例演示了如何使用Spring Boot和Vue.js构建一个简单的前后端交互应用。在后端，我们使用Spring MVC来处理HTTP请求和响应。在前端，我们使用Vue.js来构建用户界面，并使用axios来发送HTTP请求。在这个示例中，我们可以查看用户列表并添加新用户。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值