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

news2024/9/20 18:54:26

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的学生管理系统

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2070345.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

集合论与位运算之间的转换

集合论与位运算之间的转换

集合可以用二进制表示&#xff0c;二进制从低到高第 i 位为 1 表示 i 在集合中&#xff0c;为 0 表示 i 不在集合中。例如集合 {0,2,3} 可以用二进制数 1101(2)​ 表示&#xff1b;反过来&#xff0c;二进制数 1101(2)​ 就对应着集合 {0,2,3}。 例如集合 {0,2,3} 可以压缩成 …
阅读更多...
干货|软件测试简历的编写以及注意事项

干货|软件测试简历的编写以及注意事项

一、个人信息 1.年龄超过30岁的&#xff0c;就不体现年龄&#xff1b; 2.学历是本科的&#xff0c;以及专业是计算机的可以加上学历、专业2个标签&#xff0c;大专的则可以不体现&#xff1b; 3.英语过了四六级的可以加1个英语的标签&#xff1b; 4.如果你的户籍和面试城市…
阅读更多...
Python入门级 序列全集 [ 继上篇 进阶版 持续更新中哞哞哞！！！ ]例题较多

Python入门级 序列全集 [ 继上篇 进阶版 持续更新中哞哞哞！！！ ]例题较多

本文主要结合例题介绍了序列【常用函数、可迭代对象】&#xff0c;字典【函数、写法、定义、视图对象】&#xff0c;集合【常用函数】&#xff0c;运算符优先级。这几种数据集合在Python中也是蛮重要的&#xff0c;对于新手比较友好。 本文例题大多来自哔站up主鱼C-小甲鱼【Pyt…
阅读更多...
系统编程 网络 http协议

系统编程 网络 http协议

http协议------应用层的协议 万维网&#xff1a;http解决万维网之间互联互通 计算机web端网络只能看到文字 1.如何在万维网中表示一个资源&#xff1f; url <协议>&#xff1a;//<主机>&#xff1a;<端口>/<路径> ------------------------------…
阅读更多...
Adobe After Effects的插件--------CC Ball Action

Adobe After Effects的插件--------CC Ball Action

CC Ball Action是粒子效果器，其将2D图层变为一个个由3D小球构成的图层。它是AE内置的3D插件。 使用条件 使用该插件的图层需是2D图层。 我们以一张图片素材为例： 给图片图层添加CC Ball Action效果控件，然后新建一个摄像机（利用摄像机旋转、平移、推拉工具，方便在各个角…
阅读更多...
【LeetCode面试150】——36有效的数独

【LeetCode面试150】——36有效的数独

博客昵称&#xff1a;沈小农学编程 作者简介&#xff1a;一名在读硕士&#xff0c;定期更新相关算法面试题&#xff0c;欢迎关注小弟&#xff01; PS&#xff1a;哈喽&#xff01;各位CSDN的uu们&#xff0c;我是你的小弟沈小农&#xff0c;希望我的文章能帮助到你。欢迎大家在…
阅读更多...
微服务基础与Spring Cloud框架

微服务基础与Spring Cloud框架

一、系统架构的演变 1.1单体应⽤架构 Web应⽤程序发展的早期&#xff0c;⼤部分web⼯程(包含前端⻚⾯,web层代码,service层代码,dao层代码)是将 所 有的功能模块,打包到⼀起并放在⼀个web容器中运⾏。 1.2 垂直应⽤架构 当访问量逐渐增⼤&#xff0c;单⼀应⽤增加机器带来的…
阅读更多...
【Unity3D小技巧】Unity3D中实现FPS数值显示功能实现

【Unity3D小技巧】Unity3D中实现FPS数值显示功能实现

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址QQ群&#xff1a;398291828 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 很简单也很使用的小技巧&#xff0c;就是在Unity…
阅读更多...
PHP酒店宾馆民宿预订系统小程序源码

PHP酒店宾馆民宿预订系统小程序源码

酒店宾馆民宿预订系统&#xff1a;一键解锁完美旅行住宿新体验 &#x1f31f; 开篇&#xff1a;告别繁琐&#xff0c;拥抱便捷预订新时代 在这个快节奏的时代&#xff0c;每一次旅行的规划都希望能尽可能高效与省心。想象一下&#xff0c;在规划一场说走就走的旅行时&#xf…
阅读更多...
Nature | 小麦D基因组的起源和演化，野生近缘种对作物抗病改良具有重要潜力

Nature | 小麦D基因组的起源和演化，野生近缘种对作物抗病改良具有重要潜力

image-20240815151428804 2024年8月14日沙特阿卜杜拉国王科技大学Brande B. H. Wulff 和 Simon G. Krattinger团队在Natue发表Origin and evolution of the bread wheat D genome研究论文&#xff0c;通过研究粗山羊草&#xff08;Aegilops tauschii&#xff0c;也被称为节节麦…
阅读更多...
Ant-Design-Vue快速上手指南+排坑，操作详细步骤

Ant-Design-Vue快速上手指南+排坑，操作详细步骤

Ant-Design-Vue是一款基于Vue.js的UI组件库&#xff0c;它不仅提供了丰富的高质量组件&#xff0c;还支持灵活的配置选项&#xff0c;使得开发者能够快速构建出既美观又功能强大的前端应用。下面将详细介绍Ant-Design-Vue的快速上手指南和排坑操作&#xff0c;帮助开发者顺利使…
阅读更多...
Springboot整合mongodb和mysql两个数据库，mysql无法连接

Springboot整合mongodb和mysql两个数据库，mysql无法连接

一、问题 在日常开发中&#xff0c;难免需要用到mongodb和mysql数据库 当我在mongodb正常连接使用的时候&#xff0c;切换回mysql&#xff0c;发现无法连接 二、原因分析 1、端口查看被占用 winr打开命令提示符&#xff08;cmd&#xff09;&#xff0c;可以使用以下命令&…
阅读更多...
html标签大合集一文入门

html标签大合集一文入门

一、文档结构标签 <html>&#xff1a;网页的根标签 &#xff0c;嵌套包含所有标签。 <head>&#xff1a;头标签&#xff0c;包含文档的元数据用于编写网页的修饰内容&#xff0c;附加信息。 <body>&#xff1a;身体标签&#xff0c;用于编写展示内容&…
阅读更多...
HTML5休闲小游戏《城市争夺战》源码，引流、刷广告利器

HTML5休闲小游戏《城市争夺战》源码，引流、刷广告利器

HTML5休闲小游戏《城市争夺战》源码&#xff0c;直接把源码上传到服务器就能使用了&#xff01; 下载链接&#xff1a;https://www.huzhan.com/code/goods468820.html
阅读更多...
TCP Analysis Flags 之 TCP ACKed unseen segment

TCP Analysis Flags 之 TCP ACKed unseen segment

前言 默认情况下&#xff0c;Wireshark 的 TCP 解析器会跟踪每个 TCP 会话的状态&#xff0c;并在检测到问题或潜在问题时提供额外的信息。在第一次打开捕获文件时&#xff0c;会对每个 TCP 数据包进行一次分析&#xff0c;数据包按照它们在数据包列表中出现的顺序进行处理。可…
阅读更多...
Java---面向对象

Java---面向对象

一.面向对象 1.概念 1.1面向过程 C 吃饭&#xff1a;动作为核心 起身--》开门--》大量的逻辑判断 1.2面向对象 C/Java/Python/Go 目标&#xff1a;吃饭 人&#xff08;忽略&#xff09;吃饭 站在人类的角度思考问题 2.什么是对象&#xff1f; Object-->东西(万事万物皆…
阅读更多...
【数据结构2】哈希表、哈希表的应用(集合与字典、md5算法和文件的哈希值）

【数据结构2】哈希表、哈希表的应用(集合与字典、md5算法和文件的哈希值）

1 哈希表 哈希表一个通过哈希函数来计算数据存 储位置的数据结构&#xff0c;通常支持如下操作: 插入(键&#xff0c;值):插入键值对(键&#xff0c;值) Get(key):如果存在键为键的键值对则返回其值&#xff0c;否则返回空值 删除(键):删除键为键的键值对哈希表(Hash Table&am…
阅读更多...
开发者学习类网站

开发者学习类网站

目录 **1、CodeProject****2、simplilearn****3、VisuAlgo****4、Google AI****5、CodeWars****6、SourceForge****7、GeeksforGeeks****8、StackOverflow** 1、CodeProject 网址&#xff1a;https://www.codeproject.com/ CodeProject是一个免费公开自己写的代码与程序的优秀…
阅读更多...
稀土阻燃协效剂在木质地板中的应用

稀土阻燃协效剂在木质地板中的应用

木质地板作为一种天然材料&#xff0c;非常容易燃烧&#xff0c;因此需要采取措施来增强其阻燃性能。稀土阻燃协效剂基于稀土4f电子层结构带来的特有属性&#xff0c;在聚合物材料燃烧时可催化酯化成炭,迅速在高分子表面形成致密连续的碳层,隔绝聚合物材料内部的可燃性气体与氧…
阅读更多...
vue项目png图片加载不出来的问题

vue项目png图片加载不出来的问题

前提&#xff1a;因为命名的时候 配合后端&#xff0c;所以把图片的名称设置成中文的例如&#xff1a;新增圆、新增方块等命名&#xff1b;提交到线上环境后&#xff0c;发现有些图片不能完全显示&#xff1b;鼠标移入查看地址&#xff0c;发现其他展示的图片已经转为base64的形…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023