基于java SpringBoot和Vue uniapp的影楼摄影预约小程序

摘要

        今天信息技术的发展很快,其足迹在我们的生活中随处可见。它影响着我们的衣食住行等各种需求。影响也在逐渐增加,逐渐渗透到各行各业,在这种背景下,经过实地考察后,为了让婚纱照管理更加高效方便,我决定开发一个摄影棚预约管理系统。随着社会的进步和时代的发展,科学技术不断向前发展,在21世纪,这是一个信息技术的时代。计算机技术的时代日新月异,计算机以前所未有的创新方式改变着世界的面貌,人们的现代化速度越来越快,生活方式发生了前所未有的新变化。计算机可以解决的问题数量大大增加,可以更有效地处理实际问题,节省大量时间。为此,影楼摄影预约系统的设计符合当前的现实。

实现的功能

本系统分为普通用户和管理员两种角色,普通用户是小程序端,管理员是PC浏览器端。

功能应该包括:注册登录、预约摄影功能、选择场景管理订单、分享照片的社区、个人中心等功能。

注册、登录:未注册用户可以注册,有了账号后可以登录小程序;

预约摄影功能:用户通过小程序登录后可以选择预约摄影;

选择场景管理订单:根据不同的订单管理自己预约信息;

分享照片的社区:主要是用户可以把自己喜欢的照片分享出去,也可以起到给影楼引流和宣传的作用;

个人中心:用户可以管理自己的个人信息。

用到的技术

后端 java语言的SpringBoot框架,MySql数据库,Maven依赖管理;

前端 Vue.js语法的UniApp框架。

部分代码展示

<template><view class="container"><!-- 小程序头部兼容 --><!-- #ifdef MP --><view class="mp-search-box"><input @confirm="search" class="ser-input" type="text" value="输入关键字搜索"  /></view><!-- #endif --><!-- 头部轮播 --><view class="carousel-section"><!-- 标题栏和状态栏占位符 --><view class="titleNview-placing"></view><!-- 背景色区域 --><view class="titleNview-background" :style="{backgroundColor:titleNViewBackground}"></view><swiper class="carousel" circular @change="swiperChange"><swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item" @click="navToDetailPage({title: '轮播广告'})"><image mode="aspectFill" :src="item.src" /></swiper-item></swiper><!-- 自定义swiper指示器 --><view class="swiper-dots"><text class="num">{{swiperCurrent+1}}</text><text class="sign">/</text><text class="num">{{swiperLength}}</text></view></view><view class="block-wrap"><u-grid :col="4" :border="false" ><u-grid-item index="0" @click="changeType(0)" ><image class="gn-icon" src="/static/picture-album.png"></image><view class="grid-text" :class="tab==0?'selTab':''">摄影服装</view></u-grid-item><u-grid-item index="1" @click="changeType(1)" ><image class="gn-icon" src="/static/map-draw.png"></image><view class="grid-text"  :class="tab==1?'selTab':''">拍摄场地</view></u-grid-item><u-grid-item index="2"><image class="gn-icon" @click="toOrder()" src="/static/camera.png"></image><view class="grid-text">预约拍摄</view></u-grid-item></u-grid></view><!-- 分类 --><!-- <view class="cate-section"><view class="cate-item" v-for="(item,index) in typeList" :key="item.id" @click="navTo(item.id)"><image :src="'/static/temp/t'+(index+1)+'.png'"></image><text>{{item.name}}</text></view></view> --><!-- <view class="ad-1"><image src="/static/temp/hot.png" mode="scaleToFill"></image></view> --><!-- 猜你喜欢 --><view class="f-header m-t"><image src="/static/temp/h1.png"></image><view class="tit-box"><text class="tit">{{ tab == 0?"服装列表":"场地列表" }}</text><text class="tit2">{{ tab == 0?"Cloth":"Place" }}</text></view><!-- <text class="yticon icon-you"></text> --></view><view class="guess-section"><view v-for="(item, index) in dataList" :key="index"class="guess-item"@click="toInfo(item)"><view class="image-wrapper"><image :src="picUrl+item.pic1" mode="aspectFill"></image></view><text class="title clamp">{{item.name}}</text><view class="base" ><view v-if="index2<3" class="tag" v-for="(item2,index2) in splitTag(item.tag)" :key="index2">{{item2}}</view></view><text class="price">{{tab==0?"服装":"影棚"}}租金:¥{{item.price}}</text></view></view></view>
</template><script>import appRequest from "@/common/appRequestUrl.js";export default {data() {return {tab:0,picUrl:appRequest.urlMap.getPicById,titleNViewBackground: '',swiperCurrent: 0,swiperLength: 0,carouselList: [],dataList: [],user:"",typeList:[],userInfo:"",name:""};},onLoad() {this.getData();// this.getType();	//options},onShow() {// this.user = appRequest.getUserInfo();// this.getGoods();},onNavigationBarSearchInputConfirmed(e) {if(e.text){this.name = e.text;this.getData();}},methods: {toOrder(){uni.navigateTo({url:"/pages/order/order"})},search(e) {this.name = e.detail.value;this.getData();},splitTag(text){return text.split(" ");},changeType(index){this.tab = index;if(index<2){this.getData();}},toLogin(){let _this = this;let userInfo = appRequest.getUserInfo();if(!userInfo){wx.login({success(res) {if (res.code) {let code = res.code;uni.showModal({title: "登录",content: "请授权获取微信信息用于登录",success: function(res) {if (res.confirm) {_this.getUserLogin(code);}}})} else {console.log('登录失败!' + res.errMsg)}}})}else{this.userInfo = userInfo;}},getUserLogin(code){let _this = this;uni.clearStorage();wx.getUserProfile({desc: '使用前需要微信授权登录', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写success: (res) => {console.log(JSON.stringify(res));appRequest.request({method: "GET",data: {code: code,enData: res.encryptedData,iv:res.iv,userInfo:res.userInfo},url: appRequest.urlMap.loginCheck,success: function(res) {if(res.data.code == 200){try {uni.setStorageSync('userInfo', res.data.data);uni.switchTab({url:"/pages/index/index"})} catch (e) {//callback()uni.clearStorage();}	}else{//callback()}},fail: function(res) {//callback();}})},fail: (err) => {console.log(err);}})},toInfo(item){uni.navigateTo({url:"../product/product?id="+item.id})},navTo(id){try {uni.setStorageSync('currId', id);} catch (e) {}	uni.switchTab({url:"../category/category"})},getData(){let _this = this;appRequest.request({method: "POST",url: appRequest.urlMap.findPhClothPlaceList,data:{type:_this.tab,validFlag:1,name:_this.name},success: function(res) {if(res.data.code == 200){_this.dataList = res.data.data;_this.carouselList = [];_this.swiperLength = 3;for(var i=0;i<3;i++){var obj = _this.dataList[i];if(obj){_this.carouselList.push({src: _this.picUrl+obj.pic1,background: "rgb(203, 87, 60)"});}}}else{_this.$api.msg(res.data.msg);}},fail: function(res) {_this.$api.msg("请求异常");}})},/*** 请求静态数据只是为了代码不那么乱* 分次请求未作整合*/async loadData() {let carouselList = await this.$api.json('carouselList');this.titleNViewBackground = carouselList[0].background;this.swiperLength = 5;this.carouselList = carouselList;// let goodsList = await this.$api.json('goodsList');// this.goodsList = goodsList || [];},//轮播图切换修改背景色swiperChange(e) {const index = e.detail.current;this.swiperCurrent = index;this.titleNViewBackground = this.carouselList[index].background;},//详情页navToDetailPage(item) {//测试数据没有写id,用title代替let id = item.title;uni.navigateTo({url: `/pages/product/product?id=${id}`})}}}
</script>

演示视频

基于SpringBoot和UniAPP影楼摄影预约小程序

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/105926.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

服务端 TCP 连接的 TIME_WAIT 过多问题的分析与解决

https://blog.csdn.net/zxlyx/article/details/120397006 本文给出一个 TIME_WAIT 状态的 TCP 连接过多的问题的解决思路&#xff0c;非常典型&#xff0c;大家可以好好看看&#xff0c;以后遇到这个问题就不会束手无策了。 问题描述 模拟高并发的场景&#xff0c;会出现批量…

【动态规划】01背包问题

文章目录 动态规划&#xff08;背包问题&#xff09;1. 01背包2. 分割等和子集3. 目标和4. 最后一块石头的重量 || 动态规划&#xff08;背包问题&#xff09; 1. 01背包 题目链接 状态表示 dp[i][j] 表示从前i个物品当中挑选&#xff0c;总体积不超过j,所有选法当中能挑选出…

小米汽车,能否在新能源汽车江湖站稳脚跟?

最近&#xff0c;圈内都在传小米汽车亦庄工厂已试生产近一个月&#xff0c;每周可产50辆样车&#xff0c;正在为首款新能源汽车量产做最后的准备。 此前的业绩交流会上&#xff0c;小米集团总裁卢伟冰透露&#xff0c;小米汽车结束了夏测且进展非常顺利&#xff0c;2024年上半…

前端开发纷繁复杂,是否有更高效的开发方式?

一、前言 此前&#xff0c;我曾跟大家聊到&#xff0c;低代码编程&#xff0c;在现阶段互联网业务疯狂增长的带动之下&#xff0c;被赋予了全新的使命和义务&#xff0c;即帮助开发者在前期以较低成本的方式&#xff0c;快速构建一个可投入市场的应用。 那么&#xff0c;有没有…

SpringBoot项目启动时预加载

SpringBoot项目启动时预加载 Spring Boot是一种流行的Java开发框架&#xff0c;它提供了许多方便的功能来简化应用程序的开发和部署。其中一个常见的需求是在Spring Boot应用程序启动时预加载一些数据或执行一些初始化操作。 1. CommandLineRunner 和 ApplicationRunner Spri…

串行通信协议

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、UART二、SPI二、IIC 前言 UART为异步串行通信&#xff0c;使用各自的时钟控制数据的发送和接受过程&#xff0c;不使用同步时钟&#xff0c;而是使用一些特…

平板触控笔哪款好用?好用的第三方apple pencil

而对于那些把ipad当做学习工具的人而言&#xff0c;苹果Pencil就成了必备品。但因为苹果Pencil太贵了&#xff0c;不少的学生们买不起。因此&#xff0c;最佳的选择还是平替电容笔&#xff0c;今天在这里整理了一些高性价比的电容笔&#xff01; 一、挑选电容笔的要点&#xf…

C语言学习系列-->字符函数和字符串函数

文章目录 一、字符函数1、字符分类函数2、字符转换函数 二、字符串函数1、strlen概述模拟实现 2、strcpy概述模拟实现 3、strcat概述模拟实现 3、strcmp概述模拟实现 4、有限制的字符串函数strncpystrncatstrncmp 4、strstr概述模拟实现 一、字符函数 1、字符分类函数 包含头…

常用消息中间件有哪些

RocketMQ 阿里开源&#xff0c;阿里参照kafka设计的&#xff0c;Java实现 能够保证严格的消息顺序 提供针对消息的过滤功能 提供丰富的消息拉取模式 高效的订阅者水平扩展能力 实时的消息订阅机制 亿级消息堆积能力 RabbitMQ Erlang实现&#xff0c;非常重量级&#xff0c;更适…

gitlab在项目中创建自己的分支的顺序操作,一整套流程

gitlab在项目中创建自己的分支的顺序操作&#xff0c;一整套流程 目录概述需求&#xff1a; 设计思路实现思路分析 参考资料和推荐阅读 Survive by day and develop by night. talk for import biz , show your perfect code,full busy&#xff0c;skip hardness,make a better…

三维模型OBJ格式轻量化压缩在大规模场景的加载和渲染的作用分析

三维模型OBJ格式轻量化压缩在大规模场景的加载和渲染的作用分析 OBJ格式是一种常用的三维模型文件格式&#xff0c;它存储了三维模型的几何信息和纹理坐标等相关属性。在大规模场景中加载和渲染三维模型时&#xff0c;OBJ格式的轻量化压缩对于提高性能和效率起到了重要的作用。…

MFC新建内部消息

提示&#xff1a;记录一下MFC新建内部消息的成功过程 文章目录 前言一、第一阶段二、第二阶段三、第三阶段总结 前言 先说一下基本情况&#xff0c;因为要在mapview上增加一个显示加载时间的功能。然后发现是要等加载完再显示时间&#xff0c;显示在主窗口。所以就是在子线程中…