Web Form

news/发布时间2024/6/15 17:38:17

https://github.com/bonfy/go-mega/blob/master/04-web-form.md

从这网站学的

随着我们项目的扩大,代码量会愈来愈多,我们需要建立这样的数据结构来使整个项目看起来没有那么臃肿

package model - 负责数据建模

vm - View Model,定义各种结构体来表示不同的视图模型

controller - http路由,就是对各个uri进行处理的函数,引用model包中的数据模型来执行业务逻辑,并使用vm包中的视图模型来准备数据以供渲染页面使用

g.go 负责存放该package的全局变量以及init函数

我直接开了一个新的文件夹来存放着一章的教程

下面我们来看一下这个login.html

{{define "content"}}<h1>Login</h1><form action="/login" method="post" name="login"><p><input type="text" name="username" value="" placeholder="Username or Email"></p><p><input type="password" name="password" value="" placeholder="Password"></p><p><input type="submit" name="submit" value="Login"></p></form>
{{end}}

我们看这段代码的表单第一行

<form action="/login" method="post" name="login"> 这里的action指定我们需要到这个目标URL

post是指表单提交的方法,post一般是指比较敏感的信息

name = "login"是指表单的名字是login,这样可以在JavaScript中通过这个名称来引用这个表单

JavaScript,css大家可以去菜鸟上了解一下基本的用途

<p><input type="text" name="username" value="" placeholder="Username or Email"></p>

主要解释一下placeholder,这个是指用户可以在其中输入用户名或电子邮件地址

value="" 表示输入字段的初始值为空

之前看过那个web基础,感觉这个类似于在做个项目,比go web基础好太多了,当然可能是我变强了,笑哭

接收表单数据

就是我们会发现我们在点login的时候,客户端的响应是没有的,只是说账号和密码都清空了,像qq它给的回应都是一个界面了对吧,我们这里只需要有个回应就好了,所以我们要对loginHandler进行修改

...func loginHandler(w http.ResponseWriter, r *http.Request) {tpName := "login.html"vop := vm.IndexViewModelOp{}v := vop.GetVM()if r.Method == http.MethodGet {templates[tpName].Execute(w, &v)/*templates.Execute通常都是用模板来渲染画面的*/}if r.Method == http.MethodPost {r.ParseForm()username := r.Form.Get("username")password := r.Form.Get("password")fmt.Fprintf(w, "Username:%s Password:%s", username, password)}
}
表单后端验证

一般验证用户名密码正确性检查只能在后端验证

我们在LoginViewModel里面添加一个Err字段,用于输出检查的错误返回

package vmtype LoginViewModel struct {BaseViewModelErrs []string
}type LoginViewModelOp struct {
}func (LoginViewModelOp) GetVM() LoginViewModel {v := LoginViewModel{}v.SetTitle("Login")return v
}
func (v *LoginViewModel) AddError(errs ...string) {v.Errs = append(v.Errs, errs...)
}

我们主要来解析一下新增的login.html代码

这里就不按照

...{{if .Errs}} <!--判断属性Errs是否为空,如果不为空--><ul>   <!--ul表示无序列表,无序列表中通常以项目符号表示-->{{range .Errs}}<li>{{.}}</li><!--每个列表项使用<li>标签来定义-->{{end}}</ul>{{end}}
...

我们在controller中的home.go中新增check方法和修改loginHandler方法

...func check(username, password string) bool {if username == "bonfy" && password == "abc123" {return true}return false
}func loginHandler(w http.ResponseWriter, r *http.Request) {tpName := "login.html"vop := vm.LoginViewModelOp{}v := vop.GetVM()//因为客户端在访问的时候其实是get方法//在提交信息的时候是POST方法if r.Method == http.MethodGet {templates[tpName].Execute(w, &v)}if r.Method == http.MethodPost {r.ParseForm()username := r.Form.Get("username")password := r.Form.Get("password")if len(username) < 3 {v.AddError("username must longer than 3")}if len(password) < 6 {v.AddError("password must longer than 6")}if !check(username, password) {v.AddError("username password not correct,please input again")}if len(v.Errs) > 0 { //重新执行这个模板,然后显示这个错误templates[tpName].Execute(w, &v)} else {http.Redirect(w, r, "/", http.StatusSeeOther)//成功的话就会转到一个新的网站}fmt.Fprintf(w, "Username:%s Password:%s", username, password)}
}

这里提醒一下大家,那个html文件改变较大,如果出错了,可以重点看一下那个文件

{{define "content"}}
<h1>Login</h1>
<form action="/login" method="post" name="login"><p><input type="text" name="username" value="" placeholder="Username or Email"></p><p><input type="password" name="password" value="" placeholder="Password"></p><p><input type="submit" name="submit" value="Login"></p>
</form>
{{if .Errs}}
<ul>{{range .Errs}}<li>{{.}}</li>{{end}}
</ul>
{{end}}
{{end}}

等会要调试一下,看一下怎么走的,总结一下

就是注册一个路由处理器,里面有路由处理器,对每个uri路径进行处理

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

如若内容造成侵权/违法违规/事实不符,请联系万泰站长网进行投诉反馈email:xxxxxxxx@qq.com,一经查实,立即删除!

相关文章

Android自定义view;实现掌阅打开书籍动画效果

这里利用自定义view的方式来处理&#xff0c;初始化数据&#xff0c;camera通过setLocation调整相机的位置&#xff0c;但是Camera 的位置单位是英寸&#xff0c;英寸和像素的换算单位在 Skia 中被写成了72 像素&#xff0c;8 x 72 576&#xff0c;所以它的默认位置是 (0, 0, …

Prometheus+grafana环境搭建redis(docker+二进制两种方式安装)(四)

由于所有组件写一篇幅过长&#xff0c;所以每个组件分一篇方便查看&#xff0c;前三篇 Prometheusgrafana环境搭建方法及流程两种方式(docker和源码包)(一)-CSDN博客 Prometheusgrafana环境搭建rabbitmq(docker二进制两种方式安装)(二)-CSDN博客 Prometheusgrafana环境搭建m…

备战蓝桥杯---数论相关问题

目录 一、最大公约数和最小公倍数 二、素数判断 三、同余 四、唯一分解定理 五、约数个数定理 六、约数和定理 五、快速幂 六、费马小定理 七、逆元 一、最大公约数和最小公倍数 文章链接&#xff1a;最大公约数和最小公倍数 二、素数判断 文章链接&#xff1a;在J…

C和C++内存管理

目录&#xff1a; 一&#xff1a;C和C内存分布 二&#xff1a;C动态内存管理方式 三&#xff1a;C动态内存管理方式 四&#xff1a;operator new与operator delete函数 五&#xff1a;new和delete的实现原理 六&#xff1a;定位new表达式(placement-new) 七&#xff1…

根据mysql的执行顺序来写select

过滤顺序指的是mysql的逻辑执行顺序&#xff0c;个人觉得我们可以按照执行顺序来写select查询语句。 目录 一、执行顺序二、小tips三、案例第一轮查询&#xff1a;统计每个num的出现次数第二轮查询&#xff1a;计算**最多次数**第三轮查询&#xff1a;找到所有出现次数为最多次…

VMware配置环境(安装运行问题)及系列dns端口网络类型IP远程连接学习之(详谈8000字)

安装vmware快速配置步骤 下载VMware安装包 在下载好VMware安装包之后双击运行 接受条款 关闭VMware自动更新 勾选快捷键方式 安装VMware安装 输入许可证&#xff08;有需要私信小编&#xff09; 安装完成 重启电脑即可 最终成功界面: 安装Linux系统 创建虚拟机 选择…