uni-app的示例项目--简单的登陆页面及列表页面

于 2024-08-24 15:51:35 发布
阅读量507 收藏 6
点赞数 13
文章标签： uni-app 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bingbingyihao/article/details/141500528
版权

uni-app的示例项目--简单的登陆页面及列表页面

文章说明

随着移动端使用占比升高，手机端的App、小程序也成了一些场景下的首选；采用uni-pp开发此类应用具有很多优势，它可以直接使用vue3进行开发，同时它内置的许多小功能可以节省许多造轮子的操作，且可以将一套源码直接编译成App和小程序，非常方便

本文主要是为了学习uni-app的简单使用，采用原生自带的示例项目，再简单编辑了一些小功能，作为示例项目，可以在后续将PC端的我Web页面迁移到uni-app的架构

采用的开发工具是HBuilder，可在官网直接下载；同时在创建项目时可以选择官方自带的示例demo，在那里面可以直接找到基本组件的使用示例，学习起来非常方便

核心代码

登陆页面

<script setup>
	import {
		reactive
	} from 'vue';
	import UniForms from "../../uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
	import UniFormsItem from "../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
	import UniEasyInput from "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";

	const data = reactive({
		username: "",
		password: "",
	});

	function submit() {
		uni.navigateTo({
			url: '/pages/student/list'
		});
	}
</script>

<template>
	<div class="container">
		<div class="example">
			<UniForms>
				<UniFormsItem>
					<UniEasyInput v-model="data.username" placeholder="用户名" />
				</UniFormsItem>
				<UniFormsItem>
					<UniEasyInput type="password" v-model="data.password" placeholder="密码" />
				</UniFormsItem>
			</UniForms>
			<button type="primary" @click="submit()">登录</button>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.container {
		width: 100vw;
		height: calc(100vh - 44px);
	}

	.example {
		padding: 30px 15px;
		background-color: #fff;
		width: 90%;
		max-width: 400px;
		position: absolute;
		left: 50%;
		top: 40%;
		transform: translateX(-50%) translateY(-50%);
		box-shadow: 0 0 30px 1px #88888888;
		border-radius: 10px;
	}
</style>

列表页面

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	import UniForms from "../../uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
	import UniFormsItem from "../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";
	import UniEasyInput from "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";

	const data = reactive({
		studentList: [],
		addStudentForm: {
			name: "",
			age: "",
			sex: "",
			grade: "",
		},
		editStudentForm: {
			id: "",
			name: "",
			age: "",
			sex: "",
			grade: "",
		},
		deleteStudentForm: {
			id: "",
		}
	});

	const studentAddDialog = ref();

	function openStudentAddDialog() {
		data.addStudentForm.name = "";
		data.addStudentForm.age = "";
		data.addStudentForm.sex = "";
		data.addStudentForm.grade = "";
		studentAddDialog.value.open();
	}

	function addStudent() {
		data.studentList.push({
			id: data.studentList.length + 1,
			name: data.addStudentForm.name,
			age: data.addStudentForm.age,
			sex: data.addStudentForm.sex,
			grade: data.addStudentForm.grade,
		});
	}

	const studentEditDialog = ref();

	function openStudentEditDialog(item) {
		data.editStudentForm.id = item.id;
		data.editStudentForm.name = item.name;
		data.editStudentForm.age = item.age;
		data.editStudentForm.sex = item.sex;
		data.editStudentForm.grade = item.grade;
		studentEditDialog.value.open();
	}

	function editStudent() {
		for (var i = 0; i < data.studentList.length; i++) {
			if (data.studentList[i].id === data.editStudentForm.id) {
				data.studentList[i].name = data.editStudentForm.name;
				data.studentList[i].age = data.editStudentForm.age;
				data.studentList[i].sex = data.editStudentForm.sex;
				data.studentList[i].grade = data.editStudentForm.grade;
			}
		}
	}

	const studentDeleteDialog = ref();

	function openStudentDeleteDialog(item) {
		data.deleteStudentForm.id = item.id;
		studentDeleteDialog.value.open();
	}

	function deleteStudent() {
		for (var i = 0; i < data.studentList.length; i++) {
			if (data.studentList[i].id === data.deleteStudentForm.id) {
				data.studentList.splice(i, 1);
			}
		}
	}
</script>

<template>
	<div class="container">
		<div class="button-container">
			<button type="primary" @click="openStudentAddDialog()">添加</button>
		</div>

		<view>
			<uni-popup ref="studentAddDialog" type="dialog">
				<uni-popup-dialog title="添加学生" @confirm="addStudent()">
					<UniForms style="width: 100%;">
						<UniFormsItem>
							<UniEasyInput v-model="data.addStudentForm.name" placeholder="姓名" />
						</UniFormsItem>
						<UniFormsItem>
							<UniEasyInput v-model="data.addStudentForm.age" placeholder="年龄" />
						</UniFormsItem>
						<UniFormsItem>
							<UniEasyInput v-model="data.addStudentForm.sex" placeholder="性别" />
						</UniFormsItem>
						<UniFormsItem>
							<UniEasyInput v-model="data.addStudentForm.grade" placeholder="年级" />
						</UniFormsItem>
					</UniForms>
				</uni-popup-dialog>
			</uni-popup>
		</view>

		<view>
			<uni-popup ref="studentEditDialog" type="dialog">
				<uni-popup-dialog title="编辑学生" @confirm="editStudent()">
					<UniForms style="width: 100%;">
						<UniFormsItem>
							<UniEasyInput v-model="data.editStudentForm.name" placeholder="姓名" />
						</UniFormsItem>
						<UniFormsItem>
							<UniEasyInput v-model="data.editStudentForm.age" placeholder="年龄" />
						</UniFormsItem>
						<UniFormsItem>
							<UniEasyInput v-model="data.editStudentForm.sex" placeholder="性别" />
						</UniFormsItem>
						<UniFormsItem>
							<UniEasyInput v-model="data.editStudentForm.grade" placeholder="年级" />
						</UniFormsItem>
					</UniForms>
				</uni-popup-dialog>
			</uni-popup>
		</view>

		<view>
			<uni-popup ref="studentDeleteDialog" type="dialog">
				<uni-popup-dialog type="confirm" cancelText="取消" confirmText="确认" title="删除学生" @confirm="deleteStudent()" :content="`确认删除该学生的信息吗？`">
				</uni-popup-dialog>
			</uni-popup>
		</view>

		<div class="student-list">
			<template v-for="item in data.studentList" :key="item.id">
				<uni-card padding="0" :title="item.name">
					<view class="content">
						<view class="content-item">
							<text class="content-item-text">年龄：{{item.age}}</text>
						</view>
						<view class="content-item">
							<text class="content-item-text">性别：{{item.sex}}</text>
						</view>
						<view class="content-item">
							<text class="content-item-text">年级：{{item.grade}}</text>
						</view>
					</view>

					<view slot="actions" class="card-actions">
						<view class="card-actions-item">
							<uni-icons type="compose" size="18" color="#999"></uni-icons>
							<text class="card-actions-item-text" @click="openStudentEditDialog(item)">编辑</text>
						</view>
						<view class="card-actions-item">
							<uni-icons type="trash" size="18" color="#999"></uni-icons>
							<text class="card-actions-item-text" @click="openStudentDeleteDialog(item)">删除</text>
						</view>
					</view>
				</uni-card>
			</template>
		</div>
	</div>
</template>

<style scoped lang="scss">
	.container {
		width: 100vw;
		height: calc(100vh - 44px);
	}

	.button-container {
		padding: 10px;
	}

	.student-list {
		.content {
			margin: 10px 0;

			.content-item {
				height: 30px;
				line-height: 30px;
				padding: 0 20px;

				.content-item-text {
					font-size: 12px;
					color: #666;
				}
			}
		}

		.card-actions {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			height: 45px;
			border-top: 1px #eee solid;

			.card-actions-item {
				display: flex;
				flex-direction: row;
				align-items: center;

				.card-actions-item-text {
					font-size: 12px;
					color: #666;
					margin-left: 5px;
				}
			}
		}
	}
</style>

效果展示

登陆页面
在这里插入图片描述

学生列表页面
在这里插入图片描述

学生添加页面
在这里插入图片描述

学生编辑页面
在这里插入图片描述

学生删除页面
在这里插入图片描述

源码下载

uni-app的学生管理系统

bingbingyihao
关注
  • 13
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uni-app介绍基本框架信息及简单实例
2201_75957608的博客
06-19 990
【代码】简单的待办事项列表应用。
Uni-app介绍
2301_78388122的博客
06-19 1133
在Uni-app开发过程中，需要注意跨平台适配、组件复用、异步操作处理、性能优化、路由管理、调试和测试、文档和社区支持、兼容性考虑、UI设计和交互、安全性等方面。Uni-app的工程包含pages、static、components等目录和文件结构，通过配置App.vue、main.js、manifest.json、pages.json等文件来实现应用的配置和页面管理。这些目录和文件组成了一个Uni-app工程的基本结构，开发者可以在这个基础上进行开发，添加自己的页面和组件，并根据需要进行配置和扩展。
uni-app 实例项目开发流程，更新中 ...
CodingmanNAN的博客
04-01 272
uni-app 实例项目开发流程
开发一个简单的uni-app项目的常用功能和技巧
m0_73768515的博客
06-18 1865
uni-app提供了丰富的UI组件，如等，以及一些特定平台的组件。可以根据需要选择合适的组件来构建你的应用界面。
uni-app框架（项目创建）
小林的博客
03-26 1205
dcloud官方除uni-app外，还有新生的uni-app x（即下一代uni-app），如果是初学者或者刚入门同学，建议还是使用uni-app进行开发。无论是vue还是uni，作为前端开发的一个框架学习方法是一致的，因此在开发学习的过程中需要注意目录结构、开发规范、生命周期、页面结构等重点，然后依次进行深入学习。本文档以vue3、组合式api、ts进行开发学习。
uni-app项目打包成apk（本地打包篇）
热门推荐
zxczero的博客
09-01 4万+
uni-app项目打包成apk（本地打包篇）
uni-app开发介绍
asen_0611的博客
04-20 1659
uni-app的快速入门
uni-app扫盲，快速了解uni-app开发框架
qq18285的博客
04-29 2129
uni-app扫盲
uni-app 路由库 uni-simple-router 示例工程演示
qq_37919080的博客
07-12 479
您可以学习如何配置路由表、定义路由规则、处理路由导航、使用路由参数和查询参数等。示例工程还包含了常见的路由场景，如嵌套路由、动态路由和重定向等，以帮助您更好地掌握插件的用法
uni-app封装请求完成示例项目
11-02
【uni-app封装请求完成示例项目】是一个专为uni-app框架设计的实用示例，旨在帮助开发者更高效地处理网络请求。uni-app是一款基于Vue.js开发的多端框架，能够一次编写，多端运行，覆盖H5、小程序、App等平台。在实际...
uni-app调用Android原生可以实现通信及打开WiFi
01-13
**uni_demo示例**\n 提供的`uni_demo`可能包含了一个简单的uni-app项目，该项目演示了如何调用Android原生插件来控制WiFi。在`uni_demo`中，你可能会看到一个按钮，点击后触发uni-app端的调用，通过`uni.$...
uni-app-mqtt示例.zip
02-03
【uni-app-mqtt示例.zip】是一个包含前端 MQTT 实现的项目压缩包，主要使用了 uni-app 框架，并结合 JavaScript 的 MQTT 库来实现设备间的实时通信。uni-app 是一个基于 Vue.js 的多端开发框架，可以编写一次代码，...
uni-app新大陆PDA扫描盘点RFID小示例
01-28
如果是源代码，它可能包含uni-app的项目结构，如pages（页面）、components（组件）、static（静态资源）、uni_modules（uni-app插件）等目录。如果是APK，那么它包含了编译打包后的应用，可以通过反编译工具查看其...
uni-app-小程序自定义底部菜单样式示例
08-12
【uni-app小程序自定义底部菜单样式示例】 在uni-app框架中，开发微信小程序、支付宝小程序、H5等多端应用时，我们经常会遇到需要自定义底部导航菜单的需求，以实现更加个性化和一致性的用户体验。本示例将详细介绍...
uniapp 向左滑动进入下一题，向右滑动进入上一题功能实现
最新发布
beyond520lin的博客
08-24 120
在 UniApp 中实现向左滑动进入下一题，向右滑动进入上一题的功能，可以利用触摸事件来判断用户的滑动方向。：确保你有一个可以显示的问题的页面。：通过touchstart和touchend事件来判断用户的滑动方向。：根据滑动的方向改变当前问题的索引。
uniapp聊天界面滚动到底部
奔跑吧代码
08-23 200
uniapp中scroll-view聊天界面滚动到底部展示最新消息
前端 uniapp 多端条件编译
XYX8958的博客
08-23 559
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。
uniapp（微信小程序如何使用单选框、复选框）
weixin_51480428的博客
08-23 559
说明：selected用来记录每次用户选择的值，当是单选的时候属性中的selected属性需要设置成字符串，当是复选框的时候，此时选择的是数组，selected属性应设置为数组。disabled属性是配合组件使用的，意思是是否禁用该选项，name属性用来将选项渲染给用户看，_name是根据我自己的业务需求设计的，我的需求是记录用户选择的每个选项，我需要根据用户的选项在表单上进行定位，最终生成pdf文件。此处需要将用户选择的非空选项对应的_name值记录到一个数组中去。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值