1.效果展示
1.1前端展示
场馆预约平台用到的一些技术和开发环境的简介,用到开发技术主要包括:
(1)前端用到Element UI组件库和Vue框架
(2)后端用到Node
(3)包管理器Npm
(4)中间件Express
(5)数据库MySQL
系统开发环境主要是:前端开发工具Vscode,Hbuilder、操作系统Win10、CPU i5-9300H、内存8G。
1.2 后端展示
系统管理员拥有绝对的权利可以对系统的数据相应的操作。主要包括对用户模块、轮播图模块、预约场地模块、预约表模块和动态模块。
2.代码
<template>
<view class="login">
<view class="login-title">场馆预约</view>
<view class="login-content">
<el-form :model="form" :rules="rules" ref="form" label-width="40px" class="demo-ruleForm">
<el-form-item prop="phone">
<el-input v-model="form.phone" placeholder="用户名/手机号"></el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="form.password" placeholder="密码" type="password"></el-input>
</el-form-item>
</el-form>
</view>
<view class="login-button"><el-button type="info" round @click="onsubmit">登录</el-button></view>
<view class="login-botton">
<view class="login-password" @click="findPassword">找回密码</view>
<span>|</span>
<view class="login-zhuce" @click="Registration">注册账号</view>
</view>
</view>
</template>
<script>
import {
mapMutations } from 'vuex';
export default {
data() {
return {
form: {
phone: '',
password: ''
},
rules: {
phone: [{
required: true, message: '请输入手机号', rule: '/^1[23456789]\d{9}$/' }],
password: [{
required: true, message: '请输入密码', trigger: 'blur' }]
}
};
},
methods: {
// ...mapMutations(['user_Login']),
//登录
onsubmit() {
this.$refs.form.validate(valid => {
if (valid) {
uni.request({
url: '/api/login/loginUser',
method: 'POST',
data: this.form,
success: res => {
console.log(res.data.data.data);
if (res.data.code == 200) {
this.$store.commit("userLogin",res.data.data.data );
//页面跳转
this.$router.push('/pages/index/index');
uni.showToast({
title: res.data.data.msg,
icon: 'none'
});
} else {
uni.showToast({
title: res.data.data.msg,
icon: 'none'
});
}
}
});
} else {
console.log('error submit!!');
return false;
}
});
},
Registration() {
console.log('hah ');
uni.navigateTo({
url: '../../pages/login/registration'
});
},
findPassword() {
console.log('hah ');
this.$router.push('/pages/login/findPassword');
}
}
};
</script>
<style lang="less">
.login {
background-image: linear-gradient(120deg, #05ee28, #6a3dad);
width: 100%;
background-position: center;
background-size: cover;
background-color: #464646;
margin:0px;
background-size:100% 100%;
background-attachment:fixed;
height: 1535rpx;
opacity: 0.8;
.login-title {
padding-top: 150rpx;
display: flex;
justify-content: center;
font-weight: 700;
font-size: 40rpx;
color: #fff;
letter-spacing: 5rpx;
margin-bottom: 50rpx;
}
.demo-ruleForm {
width: 90%;
height: 60rpx;
}
/deep/.el-input__inner {
height: 100rpx;
border-radius: 50rpx;
padding-left: 40rpx;
}
.login-botton {
}
/deep/.el-button--info {
width: 80%;
margin-left: 12%;
margin-top: 260rpx;
height: 80rpx;
}
.login-botton {
display: flex;
margin-top: 100rpx;
justify-content: center;
.login-password {
padding-right: 20rpx;
color: #fff;
}
.login-zhuce {
padding-left: 20rpx;
color: #fff;
}
}
}
</style>
<template>
<view class="content">
<view v-for="item in newList" :key="item.id">
<view class="title">{
{
item.name }}</view>
<view class="time">{
{
item.uploadTime}}</view>
<rich-text :nodes="item.desc" class="text"></rich-text>
<view class="img" @click="previewImg(item.imgUrl)"><img :src="item.imgUrl" alt="" /></view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
newList: [],
};
},
onLoad(res) {
uni.showLoading({
title: '加载中',
mask:true
});
uni.request({
url: '/api/index/searchNews?id=' + res.id,
method: 'POST',
success: res => {
console.log(res.data);
this.newList = res.data;
uni.setNavigationBarTitle({
title:this.newList[0].name
})
setTimeout(function () {
uni.hideLoading();
}, 200);
},
fail: () => {
},
complete: () => {
}
});
},
methods: {
previewImg(urlimg) {
let _this = this;
let imgsArray = [];
imgsArray[0] = urlimg;
uni.previewImage({
current: 0,
urls: imgsArray
});
},
}
};
</script>
<style lang="less">
page {
background-color: #efefef;
}
.content {
margin-top: 20rpx;
border-radius: 20rpx;
margin-left: 2%;
width: 90%;
background-color: white;
padding: 10rpx 20rpx;
.title {
padding: 10rpx 0;
font-size: 35rpx;
font-weight: 700;
}
.time {
padding: 10rpx 0;
font-size: 20rpx;
color: gray;
}
.item {
font-size: 30rpx;
color: gray;
text-indent: 2em;
text-align: justify;
line-height: 50rpx;
}
.img img {
width: 100%;
border-radius: 20rpx;
}
.text{
text-indent: 2em;
letter-spacing: 2rpx;
line-height: 55rpx;
color: #666;
}
}
</style>
3.获取源码
加 code8896