青春须早为，岂能长少年。这篇文章主要讲述使用APICloud AVM框架开发预约应用相关的知识，希望能为你提供帮助。
前段时间跟朋友一起搞了一个预约的项目，前端用的APICloud的AVM框架做的，后端用的php开发的，用的tp5框架，没几天就搞出来了。简单跟大家分享一下开发中的一些功能点的实现吧。也欢迎大家一起探讨。


一、整理项目脑图

文章图片
< /view>

< div class="zhanghao">
< input placeholder="请输入账号" v-model="zhanghao" maxlength="10" autofocus />
< /div>

< div class="mima">
< input type="password" placeholder="请输入密码" v-model="password" />
< /div>

< text class="zhuce" @click="reg()"> 注册< /text>
< text class="denglu" @click="handleClick()"> 登录< /text>
< /scroll-view>
< /div>
< image class="originImage" mode="scaleToFill" src=https://www.songbingjia.com/android/src> < /image>

< /view>
< /template>
< script>
export default
name: "tpl",
apiready()
api.setStatusBarStyle(
style: "light",
color: "-"
);
,
data()
return
zhanghao: ,
password: ,
src: "https://baodinglingqian.oss-cn-beijing.aliyuncs.com/bg.png"
;
,
computed:

,
methods:
handleClick(e)
api.openWin(
name: main,
url: ./main.stml,
pageParam:
name: test

);
,
reg()
var _this = this;
// 提交JSON数据
api.ajax(
url: http://yy.deui.cn/api.php/index/re,
method: get,
// headers:
//Content-Type: application/json; charset=utf-8
// ,
data:
body:
username: _this.zhanghao,
password: _this.password


, function (ret, err)

console.log(JSON.stringify(ret))
if (ret.msg == 返回成功)
api.toast(
msg: 注册成功,
location: "middle"
);
else
api.alert( msg: JSON.stringify(err) );

);


;
< /script>
< style>
.denglu
margin-top: 10px;
font-size: 14px;

.touxiang
margin-top: 10%;
width: 150px;
height: 150px;
border-radius: 100px;
margin: 0 auto;

html
width: 100%;
height: 100%;

body
width: 100%;
height: 100%;

.originImage
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 1;

.page
/* position:fixed; */
position: relative;
z-index: 9;
width: 100%;
height: 100%;

.page1
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 2;

input
padding-left: 10px;
line-height: 35px;
height: 35px;
border-radius: 5px;

.zhanghao
display: block;
margin: 0 auto;
margin-top: 15%;
margin-bottom: 15px;
height: 60px;

.mima
display: block;
margin: 0 auto;
margin-top: 25px;

.zhuce
width: 100%;
height: 35px;
line-height: 35px;
background-color: coral;
text-align: center;
color: #fff;
margin-top: 25px;

.page
height: 100%;
background-color: white;

.header
background: #81a9c3;
justify-content: center;
align-items: center;

.header__title
color: #fff;
font-size: 18px;
font-weight: bold;
height: 50px;
line-height: 50px;


.main
flex: 1;
padding: 15px;


.h1
font-size: 24px;


.item
flex-direction: row;
padding: 10px 0;

.item__text
color: #333;
white-space: nowrap;


.item__value
margin-left: 5px;


.footer
background: #81a9c3;
flex-direction: row;
justify-content: center;
align-items: center;


.footer__text
color: #fff;
font-size: 14px;
height: 30px;
line-height: 30px;

< /style>

文章图片
< /view>

< div class="zhanghao">
< input placeholder="请输入账号" v-model="zhanghao" maxlength="10" autofocus />
< /div>

< div class="mima">
< input type="password" placeholder="请输入mima" v-model="password" />
< /div>

< text class="zhuce" @click="login()"> 登录< /text>
< text class="denglu" @click="handleClick()"> 注册< /text>
< /scroll-view>
< /div>
< image class="originImage" mode="scaleToFill" src=https://www.songbingjia.com/android/src> < /image>

< /view>
< /template>
< script>
export default
name: "tpl",
apiready()
api.setStatusBarStyle(
style: "light",
color: "-"
);
var value = https://www.songbingjia.com/android/localStorage.getItem(uid);
api.openWin(
name: home,
url: ./home.stml
);
,
data()
return
zhanghao: ,
password: ,
src: "https://baodinglingqian.oss-cn-beijing.aliyuncs.com/bg.png"
;
,
computed:

,
methods:
handleClick(e)
api.openWin(
name: region,
url: ./region.stml,
pageParam:
name: test

);
// api.toast(
//msg: this.data.text,
//location: "middle"
// );
,
login()
var _this = this;
api.ajax(
url: http://yy.deui.cn/api.php/index/login,
method: get,
// headers:
//Content-Type: application/json; charset=utf-8
// ,
data:
body:
username: _this.zhanghao,
password: _this.password


, function (ret, err)
console.log(JSON.stringify(ret))

localStorage.setItem(uid, ret.data.data[0][id]);

if (ret.msg == 返回成功)
api.toast(
msg: 登录成功,
location: "middle"
);

api.openWin(
name: home,
url: ./home.stml
);
else
api.alert( msg: JSON.stringify(err) );

);



;
< /script>
< style>
.denglu
margin-top: 10px;
font-size: 14px;

.touxiang
margin-top: 10%;
width: 150px;
height: 150px;
border-radius: 100px;
margin: 0 auto;

html
width: 100%;
height: 100%;

body
width: 100%;
height: 100%;

.originImage
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 1;

.page
/* position:fixed; */
position: relative;
z-index: 9;
width: 100%;
height: 100%;

.page1
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 2;

input
padding-left: 10px;
line-height: 35px;
height: 35px;
border-radius: 5px;

.zhanghao
display: block;
margin: 0 auto;
margin-top: 15%;
margin-bottom: 15px;
height: 60px;

.mima
display: block;
margin: 0 auto;
margin-top: 25px;

.zhuce
width: 100%;
height: 35px;
line-height: 35px;
background-color: coral;
text-align: center;
color: #fff;
margin-top: 25px;

.page
height: 100%;
background-color: white;

.header
background: #81a9c3;
justify-content: center;
align-items: center;

.header__title
color: #fff;
font-size: 18px;
font-weight: bold;
height: 50px;
line-height: 50px;


.main
flex: 1;
padding: 15px;


.h1
font-size: 24px;


.item
flex-direction: row;
padding: 10px 0;

.item__text
color: #333;
white-space: nowrap;


.item__value
margin-left: 5px;


.footer
background: #81a9c3;
flex-direction: row;
justify-content: center;
align-items: center;


.footer__text
color: #fff;
font-size: 14px;
height: 30px;
line-height: 30px;

< /style>

（5）首页轮播图
轮播图链接：??http://showdoc.deui.cn/web/#/27?page_id=366??

< template name=tpl>
< view class="page">
< div class="page1">
< safe-area class="header">
< text class="header__title"> 首页< /text>
< /safe-area>
< scroll-view class="main" scroll-y>
< swiper class="swiper" id="customSwiper" autoplay circular indicator-dots indicator-color="#ddd"
indicator-active-color="#f0f">
< swiper-item class="swiper-item" v-for="(_item,_index) in bannerlist">
< !-- < text class="desc"> _item.image< /text> -->
< image mode="scaleToFill" src=https://www.songbingjia.com/android/_item.image> < /image>
< /swiper-item>
< /swiper>
< div>
< a-cell-group>
< a-cell v-bind:title="_item.name" v-bind:value="https://www.songbingjia.com/android/_item.content" v-bind:label="_item.address"
arrow-direction="right" @click="godetial(_item)" v-for="(_item,_index) in shangjialist" />
< !-- < a-cell title="单元格" value="https://www.songbingjia.com/android/内容" label="描述信息" /> -->
< /a-cell-group>
< /div>
< /scroll-view>
< /div>
< image class="originImage" mode="scaleToFill" src=https://www.songbingjia.com/android/src> < /image>
< /view>
< /template>
< script>
import ACellGroup from "../../components/act/a-cell-group";
import ACell from "../../components/act/a-cell";
export default
name: test,
data()
return
shangjialist: [],
bannerlist: [],
current: 0,
src: "https://baodinglingqian.oss-cn-beijing.aliyuncs.com/bg.png"

,
methods:
apiready()
this.banner()
this.allstores()
// var customSwiper = document.getElementById(customSwiper);
// customSwiper.load(
//data: this.data.dataList
// );
,
onchange(e)
this.data.current = e.detail.current;
,
godetial(item)
console.log(JSON.stringify(item))
api.openWin(
name: detial,
url: ./detial.stml,
pageParam:
id: item.id

);
,
banner()
var _this = this;
api.ajax(
url: http://yy.deui.cn/api.php/index/banner,
method: get,
, function (ret, err)
if (ret.msg == 返回成功)
_this.data.bannerlist = ret.data.data
// var customSwiper = document.getElementById(customSwiper);
// customSwiper.load(
//data: _this.data.bannerlist
// );
// console.log(JSON.stringify(_this.bannerlist))
else
api.alert( msg: JSON.stringify(err) );

);
,
allstores()
var _this = this;
api.ajax(
url: http://yy.deui.cn/api.php/index/stores,
method: get,
, function (ret, err)
if (ret.msg == 返回成功)
console.log(1)
console.log(JSON.stringify(ret.data.data))
console.log(1)
var obj = ret.data.data
for (let index = 0; index < obj.length; index++)
const element = obj[index];
element[content] = element[content].substring(0, 9) + ...

console.log(JSON.stringify(obj))
_this.data.shangjialist = obj
else
api.alert( msg: JSON.stringify(err) );

);



< /script>
< style>
.denglu
margin-top: 10px;
font-size: 14px;

.touxiang
margin-top: 10%;
width: 150px;
height: 150px;
border-radius: 100px;
margin: 0 auto;

html
width: 100%;
height: 100%;

body
width: 100%;
height: 100%;

.originImage
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 1;

.page
/* position:fixed; */
position: relative;
z-index: 9;
width: 100%;
height: 100%;

.page1
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
z-index: 2;

input
padding-left: 10px;
line-height: 35px;
height: 35px;
border-radius: 5px;

.zhanghao
display: block;
margin: 0 auto;
margin-top: 15%;
margin-bottom: 15px;
height: 60px;

.mima
display: block;
margin: 0 auto;
margin-top: 25px;

.zhuce
width: 100%;
height: 35px;
line-height: 35px;
background-color: coral;
text-align: center;
color: #fff;
margin-top: 25px;

.page
height: 100%;
background-color: white;

.header
background: #81a9c3;
justify-content: center;
align-items: center;

.header__title
color: #fff;
font-size: 18px;
font-weight: bold;
height: 50px;
line-height: 50px;


.main
flex: 1;
padding: 0px;


.h1
font-size: 24px;


.item
flex-direction: row;
padding: 10px 0;

.item__text
color: #333;
white-space: nowrap;


.item__value
margin-left: 5px;


.footer
background: #81a9c3;
flex-direction: row;
justify-content: center;
align-items: center;


.footer__text
color: #fff;
font-size: 14px;
height: 30px;
line-height: 30px;

.main
width: 100%;
height: 100%;

.swiper
width: 100%;
height: 190px;
/* background-color: blue; */

.swiper-item
justify-content: center;

.title
padding: 10px 0;
font-size: 20px;

.desc
width: 100%;
text-align: center;

.container
width: 100%;
height: 200px;

.indicator
flex-direction: row;
justify-content: center;
position: absolute;
width: 100%;
height: 20px;
bottom: 8px;

.indicator-item
width: 15px;
height: 8px;
margin: 3px;

.indicator-item-normal
background-color: #ddd;

.indicator-item-active
background-color: red;

< /style>

（6）首页列表
所有店铺链接：??http://showdoc.deui.cn/web/#/27?page_id=369??
上面的5的代码里面含有了。

< a-cell-group>
< a-cell v-bind:title="_item.name" v-bind:value="https://www.songbingjia.com/android/_item.content" v-bind:label="_item.address" arrow-direction="right" @click="godetial(_item)" v-for="(_item,_index) in shangjialist" />
< /a-cell-group>

shangjialist: [],
allstores()
var _this = this;
api.ajax(
url: http://yy.deui.cn/api.php/index/stores,
method: get,
, function (ret, err)
if (ret.msg == 返回成功)
console.log(1)
console.log(JSON.stringify(ret.data.data))
console.log(1)
var obj = ret.data.data
for (let index = 0; index < obj.length; index++)
const element = obj[index];
element[content] = element[content].substring(0, 9) + ...

console.log(JSON.stringify(obj))
_this.data.shangjialist = obj
else
api.alert( msg: JSON.stringify(err) );

);

（7）页面传参获取详情

api.openWin(
name: detial,
url: ./detial.stml,
pageParam:
id: 123

);

apiready() //like created
if (api.pageParam.id)
this.data.id = api.pageParam.id

console.log(this.data.id)

店铺详情：??http://showdoc.deui.cn/web/#/27?page_id=370??

< template>
< view class="page">
< view>
< a-nav-bar v-bind:title="title" left-text="返回" left-arrow @click-left="onClickLeft"
@click-right="onClickRight" />
< /view>
< view>
< a-cell-group>
< a-cell title="名称"v-bind:value="https://www.songbingjia.com/android/store.name" />
< a-cell title="电话"v-bind:value="https://www.songbingjia.com/android/store.phone" />
< a-cell title="城市"v-bind:value="https://www.songbingjia.com/android/store.city" />
< a-cell title="地址"v-bind:value="https://www.songbingjia.com/android/store.address" />
< a-cell title="内容"v-bind:value="https://www.songbingjia.com/android/store.content" />
< /a-cell-group>
< !-- < text text=store.name> < /text>
< text text=store.city> < /text>
< text text=store.content> < /text>
< text text=store.address> < /text>
< text text=store.phone> < /text> -->
< /view>
< view>
< a-button type="success"> 产品< /a-button>
< /view>
< view>
< a-cell-group>
< a-cellv-bind:title="_item.name"v-bind:value="https://www.songbingjia.com/android/_item.content" label="点击可预约" v-for="(_item,_index) in product" @click="yuyuproduct(_item)" />
< /a-cell-group>
< /view>
< /view>
< /template>
< script>
import ACellGroup from "../../components/act/a-cell-group";
import ACell from "../../components/act/a-cell";
import ANavBar from "../../components/act/a-nav-bar";
import AButton from "../../components/act/a-button";
export default
name: detial,
apiready() //like created
if (api.pageParam.id)
this.data.id = api.pageParam.id

console.log(this.data.id)
this.init()
,
data()
return
title: "详情",
id: 1,
store: ,
product:[]

,
methods:
init()
var _this = this;
api.ajax(
url: http://yy.deui.cn/api.php/index/searchstore,
method: get,
data:
body:
id: _this.data.id


, function (ret, err)
if (ret.msg == 返回成功)
console.log(1)
console.log(JSON.stringify(ret.data.product))
console.log(1)
_this.data.store = ret.data.data[0]
_this.data.product = ret.data.product
else
api.alert( msg: JSON.stringify(err) );

);
,
yuyuproduct(_item)
console.log(JSON.stringify(_item))
,
onClickLeft()
api.closeWin();
,
onClickRight()




< /script>
< style>
.page
height: 100%;

< /style>

（8）导航栏组件
import ANavBar from "../../components/act/a-nav-bar";
< view>
< a-nav-bar v-bind:title="title" left-text="返回" left-arrow @click-left="onClickLeft"
@click-right="onClickRight" />
< /view>
注意：导航栏组件的使用，文档中的引用
import ACell from"../../components/act/a-nav-bar.stml";
使用中建议去掉stml后缀，import ACell from"../../components/act/a-nav-bar";



（9）localStorage 对象使用
main.stml里面的这个，就是用的这个对象

localStorage.setItem(uid, ret.data.data[0][id]);

下面是localStorage的用法

// 设置存储.
sessionStorage.setItem(key, value);

// 获取存储.
var value = https://www.songbingjia.com/android/sessionStorage.getItem(key);

// 移除存储
sessionStorage.removeItem(key);

// 清除所有存储项
sessionStorage.clear();

// 获取已有存储项数
var length = sessionStorage.length;

// 根据存储项索引获取存储键名
var keyName = sessionStorage.key(index);

（10）APICloud组件、模块的使用
模块中添加模块，如果是H5的需要下载后，放到自己的代码中；如果是原生的模块，需要添加到自己应用中，去require去使用。网上有专门介绍这块的教程，不清楚的可以去搜搜。
【使用APICloud AVM框架开发预约应用】


四、项目后台这块是自己写的php后台，用的tp5框架。

tp5下的fastadmin框架，可以根据fastadmin一键生成简单后台，数据库文件为：
后台接口代码

< ?php

namespace app\\api\\controller;

use app\\common\\controller\\Api;
use think\\Db;
/**
* 首页接口
*/
class Index extends Api

protected $noNeedLogin = [*];
protected $noNeedRight = [*];

/**
* 首页
*
*/
public function index()

$this-> success(请求成功);

//注册
public function re()
$username = $this-> request-> request("username");
$password = md5($this-> request-> request("password"));
$sql = " INSERT INTO `yuyuuser` (`id`, `group_id`, `username`, `nickname`, `password`, `salt`, `email`, `mobile`, `avatar`, `level`, `gender`, `birthday`, `bio`, `money`, `score`, `successions`, `maxsuccessions`, `prevtime`, `logintime`, `loginip`, `loginfailure`, `joinip`, `jointime`, `createtime`, `updatetime`, `token`, `status`, `verification`) VALUES (NULL, 0, , ".$username .", ".$password.", , , , , 0, 0, NULL, , 0.00, 0, 1, 1, NULL, NULL, , 0, , NULL, NULL, NULL, , , )";
$rst = Db::query($sql);
$data =https://www.songbingjia.com/android/1;
$this-> success(返回成功, [data =https://www.songbingjia.com/android/> $data]);

//登录
public function login()
$username = $this-> request-> request("username");
$password = md5($this-> request-> request("password"));
$sql = "SELECTnickname,id FROM yuyuuser where nickname=".$username." and password=".$password." order by id DESC LIMIT 1";
$rst = Db::query($sql);
$this-> success(返回成功, [data =https://www.songbingjia.com/android/> $rst]);

//获取轮播图
public function banner()

$sql = "SELECT * FROM `yuyubanner`";
$rst = Db::query($sql);
$this-> success(返回成功, [data =https://www.songbingjia.com/android/> $rst]);

//获取网络协议
public function xieyi()

$sql = "SELECT * FROM `yuyuxieyi`";
$rst = Db::query($sql);
$this-> success(返回成功, [data =https://www.songbingjia.com/android/> $rst]);

//所有类型
public function leixing()

$sql = " SELECT * FROM `yuyutype`";
$rst = Db::query($sql);
$this-> success(返回成功, [data =https://www.songbingjia.com/android/> $rst]);

//所有店面
public function stores()

$sql = "SELECT * FROM `yuyustore`";
$rst = Db::query($sql);
$this-> success(返回成功, [data =https://www.songbingjia.com/android/> $rst]);

//店铺信息
public function searchstore()

$id = $this-> request-> request("id");
$sql = " SELECT * FROM `yuyustore` where id = ".$id;
$sql1 = "SELECT * FROM `yuyuproduct` where store_id = ".$id;

$rst = Db::query($sql);
$rst1 = Db::query($sql1);

$this-> success(返回成功, [data =https://www.songbingjia.com/android/> $rst,product=> $rst1]);

推荐阅读

• 

  什么是职场？
• 

  百日练，一百天读一百本书，打卡第9天，《你只是看上去很努力》35分钟，理解50%，2000/分钟
• 

  空调主机跟遥控器显示温度不同步是怎么回事 新科柜机空调不制冷调节温度显示不同步
• 

  等闲识得东风面中的东风是什么意思 等闲识得东风面释义
• 

  redis 集合的底层实现 redis集合存bean
• 

  Java中关于Collections集合工具类的详细介绍
• 

  福州贵安水世界好玩吗 2023福州贵安水世界门票多少钱一张
• 

  蜗居背景音乐歌词蜗居背景音乐歌词翻译
• 

  甘肃所有大学名单 甘肃省大学排名
• 

  雷殿生名字打分99分 雷王姓取名
• 

  python|python 的生产者和消费者模式
• 

  quiet怎么读 quiet怎么造句
• 

  龙眼肉罐头做法 新鲜的龙眼肉怎么做罐头
• 

  海藻面膜敷多长时间好
• 

  mysql my.cnf配置模板参考
• 

  苹果扣费怎么退 iPhone扣费怎么退款
• 

  你认为孤独的根源是什么？
• 

  减肥期间,有哪些做起来简单又好吃的减肥食谱？
• 

  创维55寸4k智能电视多少钱一台 哪个电视牌子好
• 

  二甲双胍|糖尿病天天吃二甲双胍，请花5分钟弄清这6个注意事项，很重要

• 现代化云桌面之Windows 365介绍篇
• IP动态变化如何监测——WGCLOUD
• 七种基于比较的排序，基于Java实现，收藏一下（）
• 如何修复VPN错误87（参数错误）
• Linux下的资源监控器:btop
• DNSiptables和NAT
• Linux哪个发行版本适合初学者?Linux基础入门！
• Linux驱动分析之LCD驱动架构
• 严重的 DDoS 攻击澳大利亚主要宽带提供商