前后端交互Demo练习

最新推荐文章于 2024-06-06 10:05:15 发布

希望不要秃头的0.0

最新推荐文章于 2024-06-06 10:05:15 发布

阅读量1.5k

点赞数 2

文章标签： html5 javascript html

本文链接：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>
						<

最低0.47元/天解锁文章

希望不要秃头的0.0

关注

2
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
前后端交互Demo练习

前面知识点大概都讲完了，今天来说一下星期天做的前后端交互的Demo，进行知识的汇总，查漏补缺。这个Demo主要是把数据库中的信息展现到前端页面，用户通过点击按钮进行增删改查的操作。流程图：一、前端页面的搭建工具：HBuilder X语言：HTML、JS、CSS框架：VUE1.前端页面框架的搭建1.1 项目结构vue基本框架搭建<!DOCTYPE html><html> <head> &lt...
复制链接

扫一扫