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