首页 >

让学生以二维码的方式去扫描查询呢 – CSS – 前端,css在浏览器显示

css期刊,css 图标设计,css 数字气泡列表,css中三大特性,2017css安全峰会,js div css样式改变颜色,css在浏览器显示让学生以二维码的方式去扫描查询呢 - CSS - 前端,css在浏览器显示

结论:人民教师好,偶用代码实现您的需求。本文代码将会同步发布到仓库,提供免费使用。

前言

分析需求:

1 – 表格:本文使用excel。wps同理。

2 – 查询:本文提供的接口,可供本地电脑使用,或部署到服务器,提供学生查询。

3 – 鉴权:默认使用学生学号作为其权限。

下面是使用界面的实际效果图。

准备数据表

新建一个数据表,大家写一些随机数字,用于模拟学生各科成绩。

上表一共7列,分别是学号,姓名,班级,班别,语文数学英文成绩。

大家使用学生学号,用于鉴别身份,和返回成绩。

如果有身份验证需求,可以为每个学生,生成一个自己的密码,配合学号,就可以查看自己的数据了。

这是下面的数据基础。

使用golang创建应用

golang构建本需求的优点在于,便于部署。

大家仅需要一个页面表单,用于学生填写自己的学号,然后返回其成绩。

首先,把这个表单页面设计出来。

用最简单的页面元素,为了美观和使用方便,大家使用Bootstrap渲染样式,使用Gin框架的模板引擎渲染页面。

下图表单的样式。

仅包含一个输入框,类型为“number”数字,和一个查询按钮。

代码如下图。

其次,将显示结果用表格展示出来。

下图是没有查询结果时候的空白显示。

上方是状态提示信息,下方是学生的得分情况。

表格代码如下图。

第三,规划路由

因为要开发出来二维码,所以首页使用GET请求,也就是默认的空白页。

查询表单,使用POST方法,用于区分。这样可以只用一个根路由“/”就可以解决问题。实际上大家也是这么做的。

下图是Gin的路由表。

其中要说明的是,r.Static()是注册的“静态资源路由”,为了templates模板内引入js,css等静态文件发挥作用,否则无法导入其他路由地址的资源。

第四,操作excel文件

大家主要使用学生学号,在excel内匹配,如果找到,就返回该学生整条数据,写入结构变量内。如果没有找到,就返回“未找到记录”。

大家使用 360EntSecGroup-Skylar/excelize 这个库操作excel。其中函数方法 extract() 就是用于根据学号检索数据的。

代码如下图。

返回的结构化数据,可以固定查询结果的数据结构。

第五,项目目录结构

下图是本项目使用的所有文件目录树。

其中 bootstrap的js,font等文件未使用。

测试一下

先要将上述代码编译通过,运行以下指令

go build

没有错误提示,则编译成功,根目录下生成一个 src 可执行文件。在命令行直接运行,输出内容如下图。

在浏览器直接输入 localhost:20315 就可以访问到如下界面。

然后大家访问一条有效的数据,看查询结果。

可以看到,excel内的数据,正确地查询出来了。

在来一条不存在的数据测试,结果如下图。

可以看到,查询失败的提示信息。

二维码

有了以上这些铺垫,可以知道,二维码可有可无。

因为网页应用,使用网址访问也好,使用二维码扫码,跳转至网页也好,都是行的通的。

只需要将网址,生成一个二维码,就可以了。

结语

本文通过Go语言框架Gin,构造了一个web服务页面,并通过Go语言excel库操作查询excel文件内的表格数据。通过路由方式,展示到网页内。是一个完整的闭环。

本文代码同步发布在仓库,需要的私信关键字“成绩查询”获取代码资源地址。

【本文由 @程序员小助手 发布,持续分享编程故事,欢迎关注】


让学生以二维码的方式去扫描查询呢 - CSS - 前端,css在浏览器显示
  • 卡塔库栗和艾尼路 - CSS - 前端,css3动图
  • 卡塔库栗和艾尼路 - CSS - 前端,css3动图 | 卡塔库栗和艾尼路 - CSS - 前端,css3动图 ...

    让学生以二维码的方式去扫描查询呢 - CSS - 前端,css在浏览器显示
  • 做美工设计会不会很累 - CSS - 前端,html引入css无效
  • 做美工设计会不会很累 - CSS - 前端,html引入css无效 | 做美工设计会不会很累 - CSS - 前端,html引入css无效 ...

    让学生以二维码的方式去扫描查询呢 - CSS - 前端,css在浏览器显示
  • 如何让html网页背景图出现在底部 - CSS - 前端,css 手机点击蓝色边框
  • 如何让html网页背景图出现在底部 - CSS - 前端,css 手机点击蓝色边框 | 如何让html网页背景图出现在底部 - CSS - 前端,css 手机点击蓝色边框 ...