一、准备工作
众所周知,即时通讯的应用在目前的市场需求中是很广泛的,要想实现比较高级的应用,首先要认识即时通讯到底怎么回事,初始workman
请参考如下地址:https://itfun.tv/chapters/185/body
二、功能需求
本例主要实现一个当后端数据变化时,前端显示的数据实时变化。以之前小米商城会员统计图表功能为例。
当会员列表的会员性别发生变化时,前端图表实时变动。接下来,我们来实现此功能。
三、具体实现
1、首先去后台的会员管理模块中,加载出会员表中所有数据。并使用ajax
实现男女性别的切换。部分代码如下:
@section('js')
<script>
$('.change_sex').click(function () {
var info = {
id: $(this).parents('tr').data('id'),
attr: $(this).data('attr')
};
var _this = $(this);
$.ajax({
type: "PATCH",
url: "/admin/shop/customers/change_attr",
data: info,
success: function () {
_this.toggleClass('am-icon-male am-icon-female');
}
})
})
</script>
@endsection
public function change_attr(Request $request)
{
$customer = Customer::find($request->id);
$attr = $request->attr;
$customer->sex = $attr == 1 ? 2 : 1;
$customer->save();
}
2、后台首页使用Echarts
以图标的形式显示出会员的男女性别统计。注意使用接口开发。
1、路由:在
api.php
文件中写上如下内容
Route::namespace('Api')->group(function