市面常见的后台管理系统，一般都是网页端的，移动端的很少见，但在实际应用中，一款能随时随地对后台管理的应用显得很方便，由此萌生开发小程序端的后台管理应用，本程序由uniapp编写，运用了云数据库和云存储，将后端的功能集成到了前端，完全可以用前端知识进行开发。
一.登录页面
本页面主要负责用户登录，如果没有注册，可跳转到注册页面，使用了uview的组件开发，用户数据保存在小程序的云数据库里，这里的数据调取直接采用小程序端调取，不通过服务端，因此不用编写后端接口，操作更简单
<template>
<view ><u--form
labelPosition="left"
:model="model1"
:rules="rules"
ref="form1"
>
<!-- model绑定表单数据，表单验证规则 -->
<u-form-item
label="账号"
prop="userInfo.phone"
borderBottom
ref="item1"
>
<!-- prop提交到数据库的属性名 -->
<u--input
v-model="model1.userInfo.phone"
border="none"
></u--input>
</u-form-item>
<u-form-item
label="密码"
prop="userInfo.passd"
borderBottom
ref="item2"
>
<u--input
v-model="model1.userInfo.passd"
border="none"
type="password"
></u--input>
</u-form-item>
</u--form>
<button type="default" @tap="denlu()">登录</button>
<button type="default" @tap="zuce()">注册</button>
</view>
</template>
<script>
export default {
data() {
return {
msg:null,
passd1:"",
phone1:"",
model1:{
userInfo:{
phone:"",
passd:""
}
},
rules:{
"userInfo.phone":[{
required: true,
message: '请填写账号',
trigger: ['blur', 'change']
},
{
pattern:/^1[0-9]{10}$/,
message: '账号不正确',
trigger: ['change', 'blur'],
},
// trigger表单验证时机
// {
// 自定义验证
// validator: (rule, value, callback) => {
// // 上面有说，返回true表示校验通过，返回false表示不通过
// // uni.$u.test.mobile()就是返回true或者false的
// return uni.$u.test.contains(value);
// },
// message: '账号不正确',
// // 触发器可以同时用blur和change
// trigger: ['change','blur'],}
],
'userInfo.passd':[{
required: true,
message: '请填写密码',
trigger: ['blur', 'change']
},{
pattern:/^[a-zA-Z]\w{5}$/,
message: '密码不正确',
trigger: ['change', 'blur'],
},
]
}
}
},
onReady() {
// 需要在onReady中设置规则
this.$refs.form1.setRules(this.rules)
},
methods: {
zuce(){
uni.navigateTo({
url:"./zuce"
})
},
denlu(){
// 表单验证
this.$refs.form1.validate().then(res=>{
if(res==true){
// 小程序调用数据库,先初始化,填入开发环境
wx.cloud.init()
const testDB = wx.cloud.database({
env:
})
testDB.collection('shitang').where({
phone:this.model1.userInfo.phone,
passd:this.model1.userInfo.passd
})
.get({
success: function(res) {
// res.data 是包含以上定义的两条记录的数组
this.msg=JSON.stringify(res.data)
// uni.setStorageSync接受原始类型,不接受对象,所以转成字符串
console.log(this.msg)
uni.setStorageSync('wode',this.msg)
if(res.data.length!=0){
uni.navigateTo({
url:'./dianchan'
})
}
else{
uni.showToast({
title: `账号或密码错误`
})
}
}
})
}
})
}
},
}
</script>
<style>
</style>
二.注册页面
此页面使用了uniapp组件库，uni表单验证成功返回的表单数据，Uview表单验证成功返回的是布尔值,图片上传到云存储后返回一个fileID，把这个加入到表单数据中在上传到数据库
<template>
<view class="">
<view class="">
<uni-forms ref="form" :modelValue="formData" >
<!-- 使用validateFunction，不能添加：rules属性 -->
<uni-forms-item required label="姓名" name="name">
<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" :inputBorder="false"/>
</uni-forms-item>
<uni-forms-item required label="密码" name="passd">
<uni-easyinput type="password" v-model="formData.passd" placeholder="请输字母加数字6位密码" :inputBorder="false"/>
</uni-forms-item>
<uni-forms-item required name="sex" label="性别">
<uni-data-checkbox v-model="formData.sex" :localdata="sexs" :multiple="false" />
</uni-forms-item>
<uni-forms-item required label="电话" name="phone">
<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入电话" :inputBorder="false"/>
</uni-forms-item>
<uni-forms-item required label="部门" name="jop">
<uni-data-select v-model="formData.jop" :localdata="jops" placeholder="请选择部门" />
</uni-forms-item>
<uni-forms-item required label="头像" name="img">
<u-upload
:fileList="fileList1"
v-model="formData.img"
@afterRead="afterRead"
@delete="deletePic"
name="1"
multiple
:maxCount="1"
accept="image"
></u-upload>
</uni-forms-item>
</uni-forms>
<button @click="submitForm(form)">提交</button>
</view>
</view>
</template>
<script>
export default{
data(){
return{
formData:{
name:"",
sex:"男",
phone:"",
passd:"",
jop:"办公室",
img:"",
},
sexs:[{value:"男",text: "男" },{value:"女",text: "女"}],
jops:[{value:"办公室",text: "办公室" },{value:"物业部",text:"物业部"},{value:"内保部",text:"内保部"}],
fileList1:[],
rules:{
name:{
rules:[{
required:true,
errorMessage:"请输入姓名"
}]
},
sex:{
rules:[{
required:true,
}]
},
passd:{
rules:[{
required:true,
errorMessage:"请输入密码"
},
{
validateFunction:function(rule,value,data,callback){
let passdReg=/^[a-zA-Z]\w{5}$/
if(!passdReg.test(value)){
callback("密码格式不正确")
}
return true
}
}]
},
phone:{
rules:[{
required:true,
errorMessage:"请输入电话"
},
{
validateFunction:function(rule,value,data,callback){
let phoneReg=/^1[0-9]{10}$/
if (!phoneReg.test(value)) {
callback('手机格式不正确')
}
else{
callback()
}
return true}
}],
},
img:{
rules:[{
required:true,
errorMessage:"请选择头像"
}]
},
}
}
},
onReady() {
// 需要在onReady中设置规则
this.$refs.form.setRules(this.rules)
},
methods:{
afterRead(event){
// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
let lists = [].concat(event.file)
lists.map((item) => {
this[`fileList${event.name}`].push({
...item,
status: 'uploading',
message: '上传中'
})
})
wx.cloud.init({env: })
// 将图片上传至云存储空间
wx.cloud.uploadFile({
// 指定上传到的云路径
cloudPath: Date.now()+'.png',
// 指定要上传的文件的小程序临时文件路径
filePath:lists[0].url,
// 成功回调
success: res => {
console.log('上传成功', res)
this[`fileList${event.name}`].splice(0,1,Object.assign(lists[0], {
status: 'success',
message: '',
url:res.fileID
}))
console.log(lists[0])
this.formData.img=res.fileID
console.log(this.formData)
}
})
},
deletePic(event) {
this[`fileList${event.name}`].splice(0, 1)
wx.cloud.deleteFile({
fileList: [this.formData.img]
}).then(res => {
// handle success
console.log(res.fileList)
}).catch(error => {
// handle error
})
},
submitForm(form){
this.$refs.form.validate().then((res)=>{
uni.showToast({
title: `校验通过`
})
wx.cloud.init()
const testDB = wx.cloud.database({
env:
})
const todos = testDB.collection('shitang')
todos.add({
data:res
})
console.log(res)
setTimeout(()=>{
uni.navigateTo({
url:"./index"
})
},2000)
}).catch(err=>{
uni.showToast({
title:"请重新填写"
})
})
}
}
}
</script>
<style>
</style>
未完待续
扫一扫
6399
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
