EMOS个人教程-第6章 人脸考勤签到基础篇

1 章节介绍

2 创建小程序底部Tab导航

2.1 创建五个页面

2.2 修改pages.json

	"tabBar": {
		"color": "#666",
		"selectedColor": "#3474FF",
		"list": [{
				"text": "首页",
				"pagePath": "pages/index/index",
				"iconPath": "static/bar-1.png",
				"selectedIconPath": "static/bar-1-active.png"
			},
			{
				"text": "会议",
				"pagePath": "pages/meeting_list/meeting_list",
				"iconPath": "static/bar-2.png",
				"selectedIconPath": "static/bar-2-active.png"
			},
			{
				"text": "文档",
				"pagePath": "pages/document/document",
				"iconPath": "static/bar-3.png",
				"selectedIconPath": "static/bar-3-active.png"
			},
			{
				"text": "通讯录",
				"pagePath": "pages/contacts/contacts",
				"iconPath": "static/bar-4.png",
				"selectedIconPath": "static/bar-4-active.png"
			},
			{
				"text": "我的",
				"pagePath": "pages/mine/mine",
				"iconPath": "static/bar-5.png",
				"selectedIconPath": "static/bar-5-active.png"
			}
		]
	},

2.3 跳转到首页

//跳转到登陆页面
uni.switchTab({
  url: "../index/index"
})

3 开通腾讯云对象存储服务

3.1 静态资源要在网上

• 图片和视频
• 小程序打包体积不能超过2M，分包不能超过8M
• 小程序页面引用网上静态资源

3.2 腾讯云COS服务

• 创建存储桶
• 上传图片
  • 轮播图
  • 用户头像图片

4 设计首页的英雄区和栏目导航

4.1 Flex布局的优点

• 可以将控件水平排列
• 可以动态缩放控件
• 拥有多种对齐方式
• 不会出现高度坍塌

4.2 焦点图

• • interval
  • duration
  • circular

<swiper class="swiper" autoplay="true" interval="3000" duration="1000" circular="true">
	<swiper-item v-for="(imgurl, index) in imgurls" :key="index">
    	<image :src="imgurl" mode="widthFix"></image>
	</swiper-item>
</swiper>

5 设计人脸签到页面

• 调用系统相机

  • <camera>
  • wx.createCameraContext()
  • takePhoto()

• 业务流程

  • 先拍照
  • 后签到

<camera device-position="front" flash="off" class="camera" @error="error" v-if="showCamera"></camera>

6 实现签到自拍功能

• 从首页跳转到签到页面

  • 封装toPage()函数
  • 根据权限判定页面是否可以跳转

• 实现拍照和重拍功能

  • clickBtn()
    • 拍照
      • 获取图片地址
      • 更改按钮文字
      • 隐藏取景框
      • 显示拍摄的照片
    • 签到
  • afresh()
    • 隐藏拍摄照片
    • 显示取景框
    • 更改按钮文字

clickBtn() {
  let that = this;
  if (that.btnText == "拍照") {
    let ctx = uni.createCameraContext();
    ctx.takePhoto({
      quality: "high",
      success: function(resp) {
        console.log(resp.tempImagePath)
        that.photoPath = resp.tempImagePath
        that.showCamera = false
        that.showImage = true
        that.btnText = "签到"
      }
    })
  } else {
    //TODO 签到
    uni.showToast({
      title:"未开发"
    })
  }
},

7 缓存系统常量数据

• sys_config表保存了配置信息
• 读取常量数据
  • 编写持久层代码
  • 创建封装类
  • 编写SpringBoot初始化方法
    • init()
    • @PostConstruct

@Slf4j
@SpringBootApplication
@ServletComponentScan
public class EmosWxApiApplication {

    @Autowired
    private SysConfigDao sysConfigDao;

    @Autowired
    private SystemConstants constants;

    public static void main(String[] args) {
        SpringApplication.run(EmosWxApiApplication.class, args);
    }


    @PostConstruct
    public void init(){
        List<SysConfig> list=sysConfigDao.selectAllParam();
        list.forEach(one->{
            String key=one.getParamKey();
            key= StrUtil.toCamelCase(key);
            String value=one.getParamValue();
            try{
                Field field=constants.getClass().getDeclaredField(key);
                field.set(constants,value);
            }catch (Exception e){
                log.error("执行异常",e);
            }
        });
    }

}

8 封装检测当天是否可以签到（持久层）

• 查询工作日和休息日
• 查询当天是否签到

9 封装检测当天是否可以签到（业务层）

• 调用持久层
• 根据时间判断是否可以考勤

10 封装检测当天是否可以签到（Web层）

@RequestMapping("/checkin")
@RestController
@Api("签到模块Web接口")
@Slf4j
public class CheckinController {
    @Autowired
    private JwtUtil jwtUtil;

    @Autowired
    private CheckinService checkinService;

    @GetMapping("/validCanCheckIn")
    @ApiOperation("查看用户今天是否可以签到")
    public R validCanCheckIn(@RequestHeader("token") String token) {
        int userId = jwtUtil.getUserId(token);
        String result = checkinService.validCanCheckIn(userId, DateUtil.today());
        return R.ok(result);
    }
}

11 实现Shiro认证功能

• 认证对象内容不能为空
• SimpleAuthenticationInfo
  • 用户信息
  • Token令牌
  • Realm类的名字

12 实现 Shiro 授权功能

• 查询用户权限列表
• SimpleAuthorizationInfo
  • 保存权限列表

13 章节总结