Springboot集成百度地图实现定位打卡功能

打卡sign表sql

CREATE TABLE `sign` (`id` int(11) NOT NULL AUTO_INCREMENT,`user` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '用户名称',`location` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '打卡位置',`time` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '打卡时间',`comment` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '备注',PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

百度开放平台

https://lbsyun.baidu.com/index.php?title=%E9%A6%96%E9%A1%B5

后台打卡逻辑

 // 新增或者更新@PostMappingpublic Result save(@RequestBody Sign sign) {if (sign.getId() == null) {  // 新增打卡String today = DateUtil.today();QueryWrapper<Sign> queryWrapper = new QueryWrapper<>();queryWrapper.eq("user", sign.getUser());queryWrapper.eq("time", today);Sign one = signService.getOne(queryWrapper);if (one != null) {  // 打过卡了return Result.error("-1", "您已打过卡");}sign.setTime(today);}signService.saveOrUpdate(sign);return Result.success();}

DateUtil是hutool的工具类

前台登录获取位置

mounted() {// 获取地理位置var geolocation = new BMapGL.Geolocation();geolocation.getCurrentPosition(function(r){if(this.getStatus() == BMAP_STATUS_SUCCESS){const province = r.address.provinceconst city = r.address.citylocalStorage.setItem("location", province + city)}});},

前台主页打卡功能

<template><div style="color: #666;font-size: 14px;"><div style="padding-bottom: 20px"><b>您好！{{ user.nickname }}</b></div><el-card>欢迎使用本系统<el-divider />虎虎生威，虎年大吉</el-card><el-card style="margin-top: 20px"><div style="margin: 20px 0; font-size: 20px">{{ new Date().getFullYear() + '年' + (new Date().getMonth() + 1) + '月' + new Date().getDate() + '日' }}</div><div style="width: 200px; height: 200px; line-height: 200px; border-radius: 50%; background-color: #1E90FF;font-size: 50px; color: #fff; text-align: center; cursor: pointer; box-shadow: 0 0 30px rgba(0, 0, 0, .2);" @click="sign">打 卡</div></el-card></div>
</template><script>export default {name: "Home",data() {return {user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}}},methods: {sign() {const location = localStorage.getItem("location")const username = this.user.usernamethis.request.post("/sign", { user: username, location: location }).then(res => {if (res.code === '200') {this.$message.success("打卡成功")} else {this.$message.error(res.msg)}})}}
}
</script>

前台管理打卡 SIgn.vue

<template><div><div style="margin: 10px 0"><el-input style="width: 200px" placeholder="请输入名称" suffix-icon="el-icon-search" v-model="name"></el-input>
<!--      <el-input style="width: 200px" placeholder="请输入" suffix-icon="el-icon-message" class="ml-5" v-model="email"></el-input>-->
<!--      <el-input style="width: 200px" placeholder="请输入" suffix-icon="el-icon-position" class="ml-5" v-model="address"></el-input>--><el-button class="ml-5" type="primary" @click="load">搜索</el-button><el-button type="warning" @click="reset">重置</el-button></div><div style="margin: 10px 0"><el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button><el-popconfirmclass="ml-5"confirm-button-text='确定'cancel-button-text='我再想想'icon="el-icon-info"icon-color="red"title="您确定批量删除这些数据吗？"@confirm="delBatch"><el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button></el-popconfirm><!-- <el-upload action="http://localhost:9090/sign/import" :show-file-list="false" accept="xlsx" :on-success="handleExcelImportSuccess" style="display: inline-block"><el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i></el-button></el-upload><el-button type="primary" @click="exp" class="ml-5">导出 <i class="el-icon-top"></i></el-button> --></div><el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"  @selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="id" label="ID" width="80" sortable></el-table-column><el-table-column prop="user" label="用户名称"></el-table-column><el-table-column prop="location" label="打卡位置"></el-table-column><el-table-column prop="time" label="打卡时间"></el-table-column><el-table-column prop="comment" label="备注"></el-table-column><el-table-column label="操作"  width="180" align="center"><template slot-scope="scope"><el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button><el-popconfirmclass="ml-5"confirm-button-text='确定'cancel-button-text='我再想想'icon="el-icon-info"icon-color="red"title="您确定删除吗？"@confirm="del(scope.row.id)"><el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button></el-popconfirm></template></el-table-column></el-table><div style="padding: 10px 0"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageNum":page-sizes="[2, 5, 10, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div><el-dialog title="信息" :visible.sync="dialogFormVisible" width="40%" :close-on-click-modal="false"><el-form label-width="140px" size="small" style="width: 85%;"><el-form-item label="用户名称"><el-input v-model="form.user" autocomplete="off"></el-input></el-form-item><el-form-item label="打卡位置"><el-input v-model="form.location" autocomplete="off"></el-input></el-form-item><el-form-item label="打卡时间"><el-date-picker v-model="form.time" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间"></el-date-picker></el-form-item><el-form-item label="备注"><el-input v-model="form.comment" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></div></el-dialog></div>
</template><script>
export default {name: "Sign",data() {return {tableData: [],total: 0,pageNum: 1,pageSize: 10,name: "",form: {},dialogFormVisible: false,multipleSelection: [],user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}}},created() {this.load()},methods: {load() {this.request.get("/sign/page", {params: {pageNum: this.pageNum,pageSize: this.pageSize,name: this.name,}}).then(res => {this.tableData = res.data.recordsthis.total = res.data.total})},save() {this.request.post("/sign", this.form).then(res => {if (res.code === '200') {this.$message.success("保存成功")this.dialogFormVisible = falsethis.load()} else {this.$message.error("保存失败")}})},handleAdd() {this.dialogFormVisible = truethis.form = {}this.$nextTick(() => {if(this.$refs.img) {this.$refs.img.clearFiles();}if(this.$refs.file) {this.$refs.file.clearFiles();}})},handleEdit(row) {this.form = JSON.parse(JSON.stringify(row))this.dialogFormVisible = truethis.$nextTick(() => {if(this.$refs.img) {this.$refs.img.clearFiles();}if(this.$refs.file) {this.$refs.file.clearFiles();}})},del(id) {this.request.delete("/sign/" + id).then(res => {if (res.code === '200') {this.$message.success("删除成功")this.load()} else {this.$message.error("删除失败")}})},handleSelectionChange(val) {console.log(val)this.multipleSelection = val},delBatch() {if (!this.multipleSelection.length) {this.$message.error("请选择需要删除的数据")return}let ids = this.multipleSelection.map(v => v.id)  // [{}, {}, {}] => [1,2,3]this.request.post("/sign/del/batch", ids).then(res => {if (res.code === '200') {this.$message.success("批量删除成功")this.load()} else {this.$message.error("批量删除失败")}})},reset() {this.name = ""this.load()},handleSizeChange(pageSize) {console.log(pageSize)this.pageSize = pageSizethis.load()},handleCurrentChange(pageNum) {console.log(pageNum)this.pageNum = pageNumthis.load()},handleFileUploadSuccess(res) {this.form.file = res},handleImgUploadSuccess(res) {this.form.img = res},download(url) {window.open(url)},exp() {window.open("http://localhost:9090/sign/export")},handleExcelImportSuccess() {this.$message.success("导入成功")this.load()}}
}
</script><style>
.headerBg {background: #eee!important;
}
</style>