uni-app的示例项目--简单的登陆页面及列表页面
文章说明
随着移动端使用占比升高，手机端的App、小程序也成了一些场景下的首选；采用uni-pp开发此类应用具有很多优势，它可以直接使用vue3进行开发，同时它内置的许多小功能可以节省许多造轮子的操作，且可以将一套源码直接编译成App和小程序，非常方便
本文主要是为了学习uni-app的简单使用，采用原生自带的示例项目，再简单编辑了一些小功能，作为示例项目，可以在后续将PC端的我Web页面迁移到uni-app的架构
采用的开发工具是HBuilder，可在官网直接下载；同时在创建项目时可以选择官方自带的示例demo，在那里面可以直接找到基本组件的使用示例，学习起来非常方便
核心代码
登陆页面
html
<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>列表页面
html
<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>效果展示
登陆页面
学生列表页面
学生添加页面
学生编辑页面
学生删除页面
