Article directory
1. Effect display
1.1 Front-end display
An introduction to some technologies and development environments used in the venue reservation platform. The development technologies used mainly include:
(1) The front-end uses the Element UI component library and the Vue framework
(2) The back-end uses Node
(3) Package manager Npm
( 4) Middleware Express
(5) Database MySQL
system development environment mainly includes: front-end development tools Vscode, Hbuilder, operating system Win10, CPU i5-9300H, and memory 8G.
1.2 Backend display
System administrators have absolute rights to operate the system data accordingly. It mainly includes user module, carousel module, reservation venue module, reservation table module and dynamic module.
2.Code
<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. Get the source code
Add code8896