gin投票系统3

对应视频v1版本

1.优化登陆接口

image-20231121202753325

将同步改为异步

原login前端代码：

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>香香编程-投票项目</title>
</head>
<body>
<main class="main"><form method="post" action="/login"><input type="text" name="name" placeholder="Your name"><input type="password" name="password" placeholder="Password"><button type="submit">Sign in</button></form>
</main>
</body>
</html>

现代码：

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>香香编程-投票项目</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<main class="main"><input type="text" name="name" id="name" placeholder="Your name"><input type="password" name="password" id="password" placeholder="Password"><button type="submit" id="login_sub">Sign in</button>
</main>
<script>$(document).ready(function(){//确保在页面完全加载后才执行内部的代码。$("#login_sub").on("click",function () {//事件监听器，它绑定了一个点击事件到sign in按钮$.ajax({//ajax函数内部，用于异步发送请求参数//请求资源路径url:"/login",//请求参数data:{name:$("#name").val(),password:$("#password").val()},//请求方式type:"post",//数据形式dataType:"json",//请求成功后调用的回调函数success:function (data) {console.log(data)if (data.code !== 0){alert(data.message)}else{alert("已登录")setTimeout("pageRedirect()", 3000);//三秒后调转}},//请求失败后调用的回调函数error:function () {alert("请求失败！")}});});});//实现跳转的函数function pageRedirect() {window.location.replace("/index");}
</script>
</body>
</html>

用Session代替Cookie*

这两个知识点非常重要！！！在工作中肯定会被问到

2.统一返回结构

httpcode
  1. 1xx（Informational）：信息性状态码
    • 代表意义： 表示请求已经被接收，继续处理。
    • 常见代码：
      • 100 Continue：服务器已经收到请求的首部，并且客户端应该继续发送请求的其余部分。
  2. 2xx（Successful）：成功状态码
    • 代表意义： 表示请求已成功被服务器接收、理解、并接受。
    • 常见代码：
      • 200 OK：请求成功。
      • 201 Created：请求已经被实现，新的资源已经被创建。
      • 204 No Content：服务器成功处理了请求，但没有返回任何内容。
  3. 3xx（Redirection）：重定向状态码
    • 代表意义： 需要客户端进行附加操作以完成请求。
    • 常见代码：
      • 301 Moved Permanently：永久性重定向。
      • 302 Found：临时性重定向。
      • 304 Not Modified：资源未被修改，可以使用缓存的版本。
  4. 4xx（Client Error）：客户端错误状态码
    • 代表意义： 客户端看起来可能发生了错误，妨碍了服务器的处理。
    • 常见代码：
      • 400 Bad Request：请求无效，服务器无法理解请求的语法。
      • 401 Unauthorized：请求要求身份验证。
      • 403 Forbidden：服务器拒绝请求。
  5. 5xx（Server Error）：服务器错误状态码
    • 代表意义： 服务器在处理请求的过程中发生了错误。
    • 常见代码：
      • 500 Internal Server Error：服务器内部错误。
      • 502 Bad Gateway：服务器作为网关或代理，从上游服务器收到无效响应。
      • 503 Service Unavailable：服务器暂时过载或维护，无法处理请求。

客户端 网络 服务器 找资源

服务器 网络 客户端

自己定义的业务code

image-20231122174058788

注意：使用不同状态码，浏览器也会有不同相应，有些错误码不能乱用

注意：image-20231123154330090

Code和上边的状态码不是一个东西，不要弄混了，下边的是自定义码，针对HTTP状态码和自定义的错误码通常起不同的作用：

  1. HTTP状态码：
    • 表示请求状态： HTTP状态码用于表示服务器对请求的处理结果。常见的状态码有 200 OK 表示成功，404 Not Found 表示资源未找到，500 Internal Server Error 表示服务器内部错误等。
    • 影响浏览器行为： 不同的HTTP状态码会触发浏览器和客户端的不同行为。例如，浏览器可能展示不同的错误页面或者执行不同的重定向。
  2. 自定义错误码：
    • 提供更多信息： 自定义错误码通常用于在请求成功时传递一些额外的信息，比如错误消息、错误代码等。这样，即使HTTP状态码为200，开发者仍然可以通过解析JSON数据获取更多关于请求状态的信息。
    • 统一错误格式： 使用自定义错误码可以帮助建立统一的错误格式，便于前后端协作。例如，可以在所有的错误响应中都包含一个 code 和 message 字段，使得前端可以更容易地处理错误情况。
    • 区分不同错误类型： 自定义错误码可以帮助区分不同类型的错误。通过查看错误码，开发者可以快速了解问题的性质，从而采取适当的措施。

3.优化投票接口

使用事务优化接口
func DoVote(userId, voteId int64, optIds []int64) bool { //太复杂，//gorm中最常用的事务处理方法tx := Conn.Begin() //创建一个数据库事务，Begin() 方法开始一个新的事务并返回对应的 *gorm.DB 对象 tx。var ret Voteerr := tx.Table("vote").Where("id=?", voteId).First(&ret).Error//在事务中执行一个查询操作，根据给定的 voteId 查询 vote 表中的数据，并将结果存储在 ret 变量中。if err != nil { //出现错误，打印出来并回滚；fmt.Printf("err:%s", err.Error())tx.Rollback()}for _, value := range optIds { // 遍历选项ID列表err := tx.Table("vote_opt").Where("id=?", value).Update("count", gorm.Expr("count+?", 1)).Errorif err != nil {//更新数据库中的选项计数fmt.Printf("err:%s", err.Error())tx.Rollback()}user := VoteOptUser{ //创建一个新的VoteOptUser结构体实例对应数据库的vote_opt_user表VoteId:     voteId,UserId:     userId,VoteOptId:  value,CreateTime: time.Now(),UpdateTime: time.Now(),}err = tx.Create(&user).Errorif err != nil {fmt.Printf("err:%s", err.Error())tx.Rollback()}//使用Create方法将新的VoteOptUser记录创建到数据库中}tx.Commit()return true
}
了解gorm事务的其他用法

4.把接口都换成异步

为什么要全部做成ajax形式？

  1. 为后端的前后端分离做准备，正产公司里，前后端一定是分离的！

  2. 为后续编写接口文档做准备。

    设计——>-开发------>前后端联调

5.增加功能

新增投票接口
修改投票接口
删除投票接口

这些操作统称为CURD，很多程序员，在公司中做的都是CURD。

在写这些操作时候要想到

  1. 这个业务，能不能挣钱，怎么挣钱，是否提高了工作效率。
  2. 当前的业务是否能进一步优化和提高效率（1减少后期维护的人工，2减少后期操作时间）
  3. 业务中有没有典型的问题，或者复杂场景，要学会写笔记，多记录典型问题，并反问自己是否真正掌握，若没有掌握，是因为之前完全不了解这种业务逻辑（这是需要前两个打好基础见得多），还是知道有这个场景但并没有较好的解决办法（技术不够向同事和老板或其他人请教）。

如果自己已经完全精通了这个领域的业务，那么就可以跳槽或者升职加薪换岗。

技术是一方面，业务经验也是一方面。在公司时就要考虑你做的业务对公司的重要性，如果可有可无甚至对产品来说是负优化，呢就不能在一棵树上吊死，提早考虑跑路，没准哪天就被炒鱿鱼了

6.投票结束，看到投票结果

设计一个新的返回结构

返回图表

使用Echarts画图

ECharts（Enterprise Charts）是百度开发的一套基于 JavaScript 的开源可视化图表库。它提供了丰富的图表类型和交互能力，可以用于创建各种数据可视化图表，如折线图、柱状图、饼图、散点图等。ECharts的设计目标是简单易用、灵活可扩展，使得开发者能够轻松地在网页上展示数据。

一些主要的特点和功能包括：

  1. 丰富的图表类型： ECharts支持多种图表类型，包括但不限于折线图、柱状图、饼图、散点图、雷达图、地图等，满足不同数据展示的需求。
  2. 交互性： ECharts提供了丰富的交互功能，例如数据区域缩放、数据视图、动画效果、多图联动等，用户可以通过交互更好地理解数据。
  3. 可定制性： 用户可以通过配置选项和自定义主题，灵活地定制图表的外观和行为，以适应不同的设计需求。
  4. 跨平台兼容： ECharts支持主流的浏览器，并提供了移动端的适配，可以在不同平台上展示相同的图表效果。
  5. 大数据量展示： ECharts对大数据量的展示也有良好的支持，通过数据的动态加载和异步更新，可以有效地处理大规模数据。
  6. 开源免费： ECharts是一个开源项目，采用 MIT 许可证，允许用户在满足许可证条件的情况下自由使用和修改。

ECharts的使用非常广泛，特别是在Web开发领域。通过在网页中嵌入 ECharts 图表，开发者可以直观地展示和分析数据，为用户提供更好的数据可视化体验。

示例：

为投票增加总数字段
<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>香香编程-投票项目</title><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<main class="main"><input type="text" name="name" id="name" placeholder="Your name"><input type="password" name="password" id="password" placeholder="Password"><button type="submit" id="login_sub">Sign in</button>
</main>
<script>$(document).ready(function(){//确保在页面完全加载后才执行内部的代码。$("#login_sub").on("click",function () {//事件监听器，它绑定了一个点击事件到sign in按钮$.ajax({//ajax函数内部，用于异步发送请求参数//请求资源路径url:"/login",//请求参数data:{name:$("#name").val(),password:$("#password").val()},//请求方式type:"post",//数据形式dataType:"json",//请求成功后调用的回调函数success:function (data) {console.log(data)if (data.code !== 0){alert(data.message)}else{alert("已登录")// setTimeout("pageRedirect()", 3000);//三秒后调转}},//请求失败后调用的回调函数error:function () {alert("请求失败！")}});});});//实现跳转的函数function pageRedirect() {window.location.replace("/index");}
</script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/214539.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

开关量防抖滤波器(梯形图和SCL源代码)

开关量防抖滤波器(梯形图和SCL源代码)

模拟量防抖超限报警功能块请查看下面文章链接： https://rxxw-control.blog.csdn.net/article/details/133969425https://rxxw-control.blog.csdn.net/article/details/133969425 1、开关量防抖滤波器 2、防抖滤波 3、梯形图代码
阅读更多...
2.Feign使用、上下文隔离及源码阅读

2.Feign使用、上下文隔离及源码阅读

目录 概述使用配置pom.xmlfeign 接口编写controller 测试降级处理pom.xmlapplication.yml代码 Feign如何初始化及调用源码阅读初始化调用 feign的上下文隔离机制源码 结束 概述 阅读此文&#xff0c;可以知晓 feign 使用、上下文隔离及源码阅读。源码涉及两方面&#xff1a;fe…
阅读更多...
课后作业7.3.1：构造一个自己的小操作系统

课后作业7.3.1：构造一个自己的小操作系统

构造一个自己的 mini 操作系统 任务描述 请实现如下功能&#xff1a; 1.写一个命令解释器程序 mysh.c &#xff0c;其功能是接收用户输入的命令并给出反馈。要求该程序既支持内部命令 cd、sync、exit &#xff1b;也支持外部命令&#xff0c;即可以接收 cat、ls 等命令&#x…
阅读更多...
数据结构与算法-Rust 版读书笔记-2线性数据结构-双端队列

数据结构与算法-Rust 版读书笔记-2线性数据结构-双端队列

数据结构与算法-Rust 版读书笔记-2线性数据结构-双端队列 1、双端队列 deque又称为双端队列&#xff0c;双端队列是与队列类似的项的有序集合。deque有两个端部&#xff1a;首端和尾端。deque不同于队列的地方就在于项的添加和删除是不受限制的&#xff0c;既可以从首尾两端添…
阅读更多...
vue3封装接口

vue3封装接口

在src下面创建一个文件夹任意名称 我拿这个名字举例子了apiService 相当于创建一个新的文件 // 封装接口 // apiService.js import axios from axios;// 接口前缀 const API_BASE_URL 前缀;接口后缀export const registerUser async (fileData) > {try {const response …
阅读更多...
透析跳跃游戏

透析跳跃游戏

关卡名 理解与贪心有关的高频问题 我会了✔️ 内容 1.理解跳跃游戏问题如何判断是否能到达终点 ✔️ 2.如果能到终点&#xff0c;如何确定最少跳跃次数 ✔️ 1. 跳跃游戏 leetCode 55 给定一个非负整数数组&#xff0c;你最初位于数组的第一个位置。数组中的每个元素代表…
阅读更多...
微信商家收款码扣多少手续费

微信商家收款码扣多少手续费

很多人想申请低手续费率的收款码不知从何下手&#xff0c;在参考了大量博客教学之后&#xff0c;终于搞懂了详细流程以及注意事项。在此记录一下。我申请的是一个只需要0.2%费率的微信收款码&#xff0c;申请时间是2022年2月12日。申请之前只需要准备营业执照和法人身份z&#…
阅读更多...
验证二叉搜索树[中等]

验证二叉搜索树[中等]

优质博文&#xff1a;IT-BLOG-CN 一、题目 给你一个二叉树的根节点root&#xff0c;判断其是否是一个有效的二叉搜索树。有效 二叉搜索树定义如下&#xff1a; 【1】节点的左子树只包含 小于 当前节点的数。 【2】节点的右子树只包含 大于 当前节点的数。 【3】所有左子树和右…
阅读更多...
Leetcode 40 组合总和 II

Leetcode 40 组合总和 II

题意理解&#xff1a; 每个数字在每个组合中只能使用 一次 数字可以重复——>难点&#xff08;如何去重&#xff09; 每个组合和target 求组合&#xff0c;对合限制&#xff0c;考虑回溯的方法。——将其抽象为树结构。 树的宽度——分支大小 树的深度——最…
阅读更多...
Spring IoC和DI

Spring IoC和DI

目录 一. Spring是什么 IoC DI 二. IoC&DI的使用 IoC 1.Controller&#xff08;控制器存储&#xff09; 2.Service&#xff08;服务存储&#xff09; 3.Repository&#xff08;仓库存储&#xff09; 4.Componemt&#xff08;组件存储&#xff09; 5.Configuratio…
阅读更多...
解决Could not establish connection to : XHR failed

解决Could not establish connection to : XHR failed

解决Could not establish connection to : XHR failed 问题描述 用vscode用远程连接服务器时总报上面的错误&#xff0c;用xshell和Xftp和vscode终端都可以连上&#xff0c;但是用vscode的ssh连接缺总报错&#xff0c;导致无法连接服务器进行代码调试 一、原因 原因可能是在…
阅读更多...
Go json 差异比较 json-diff(RFC6902)

Go json 差异比较 json-diff(RFC6902)

Go json 差异比较 json-diff(RFC 6902) 毕业设计中过程中为了比较矢量图的差异而依据 RFC 6902 编写的一个包&#xff0c;现已开源&#xff1a; Json-diff 使用 go get -u github.com/520MianXiangDuiXiang520/json-diff序列化与反序列化 与官方 json 包的序列化和反序列化不…
阅读更多...
AcWing 95. 费解的开关（递推）

AcWing 95. 费解的开关（递推）

题目链接 活动 - AcWing 本活动组织刷《算法竞赛进阶指南》&#xff0c;系统学习各种编程算法。主要面向有一定编程基础的同学。https://www.acwing.com/problem/content/97/ 题解 只要第一行开关的状态确定&#xff0c;则所有开关的状态都可以被推出来。第一行开关总共有种操…
阅读更多...
jemeter，同一线程组内，调用cookie实现接口关联

jemeter，同一线程组内，调用cookie实现接口关联

取cookie方式参考上一篇&#xff1a;jemeter&#xff0c;取“临时重定向的登录接口”响应头中的cookie-CSDN博客 元件结构 登录后要执行的接口为“api/get_event_list/”&#xff0c;在该HTTP请求下创建HTTP信息头管理器&#xff0c;配置如下&#xff1a; 执行测试后&#xff0…
阅读更多...
【ensp实践】eNSP实战篇（4）用eNSP实验来认识什么是OSPF及OSPF配置？

【ensp实践】eNSP实战篇（4）用eNSP实验来认识什么是OSPF及OSPF配置？

OSPF目录 写在前面涉及知识一、什么是OSPF&#xff1f;二、OSPF特性&#xff08;优缺点&#xff09;2.1 OSPF优点2.2 OSPF缺点 三、OSPF实验3.1 打开ensp&#xff0c;添加设备3.2 建立连线3.3 配置及ospf命令【核心】3.3.1 配置PC机3.3.2 设置命令 3.4 验证效果3.4.1、验证OSPF…
阅读更多...
使用JLink仿真器实现调试打印的N种方法

使用JLink仿真器实现调试打印的N种方法

方法一&#xff1a;使用MCU的串口 这是最古老也是最简单的方法。 电脑上面插一个USB转TTL&#xff0c;然后与MCU的UART_RX/UART_TX/GND连接起来。PC端再打开一个串口调试助手。两边的波特率一致&#xff0c;就可以收到MCU发过来的打印信息了。 方法二&#xff1a;使用JLink仿…
阅读更多...
【EMNLP 2023】面向Stable Diffusion的自动Prompt工程算法

【EMNLP 2023】面向Stable Diffusion的自动Prompt工程算法

近日&#xff0c;阿里云人工智能平台PAI与华南理工大学朱金辉教授团队合作在自然语言处理顶级会议EMNLP2023上发表了BeautifulPrompt的深度生成模型&#xff0c;可以从简单的图片描述中生成高质量的提示词&#xff0c;从而使文生图模型能够生成更美观的图像。BeautifulPrompt通…
阅读更多...
Android--Jetpack--Databinding源码解析

Android--Jetpack--Databinding源码解析

慢品人间烟火色&#xff0c;闲观万事岁月长 一&#xff0c;基本使用 关于databinding的基本使用请看之前的文章 Android--Jetpack--Databinding详解-CSDN博客 二&#xff0c;xml布局解析 分析源码呢&#xff0c;主要就是从两方面入手&#xff0c;一个是使用&#xff0c;一个…
阅读更多...
STM32F407-14.1.0-01高级定时器简介

STM32F407-14.1.0-01高级定时器简介

TIM1 和 TIM8 简介 高级控制定时器&#xff08;TIM1 和 TIM8&#xff09;包含一个 16 位自动重载计数器&#xff0c;该计数器由可编程预分频器驱动。 此类定时器可用于各种用途&#xff0c;包括测量输入信号的脉冲宽度&#xff08;输入捕获&#xff09;&#xff0c;或者生成输出…
阅读更多...
微软NativeApi-NtQuerySystemInformation

微软NativeApi-NtQuerySystemInformation

微软有一个比较实用的Native接口&#xff1a;NtQuerySystemInformation&#xff0c;具体可以参考微软msdn官方文档&#xff1a;NtQuerySystemInformation&#xff0c; 是一个系统函数&#xff0c;用于收集特定于所提供的指定种类的系统信息。ProcessHacker等工具使用NtQuerySys…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023