2020-08-17 14:10:40

goweb-060-服务端渲染&数据处理

服务端渲染&数据处理

配套数据库为 news_new.sql

模板渲染展示

后端

package main import ( "html/template" "net/http" _ "github.com/go-sql-driver/mysql" "github.com/jmoiron/sqlx" ) func main() { // 注册路由 http.HandleFunc("/", Index) http.HandleFunc("/list", List) // 监听端口提供服务 http.ListenAndServe(":8080", nil) } // 处理函数 单个数据 func Index(w http.ResponseWriter, r *http.Request) { // 连接数据库 db, _ := sqlx.Open(`mysql`, `root:root@tcp(127.0.0.1:3306)/news?charset=utf8&parseTime=true`) mod := &Class{} err := db.Get(mod, "select * from class where id =1") if err != nil { w.Write([]byte(err.Error())) } // 创建模板容器 tmpl := template.New("set") // 新建模板并加载模板文件 tmpl.New("index.html").ParseFiles("./index.html") // 执行模板 tmpl.ExecuteTemplate(w, "index.html", mod) } // 处理函数 列表 func List(w http.ResponseWriter, r *http.Request) { // 连接数据库 db, _ := sqlx.Open(`mysql`, `root:root@tcp(127.0.0.1:3306)/news?charset=utf8&parseTime=true`) mods := make([]Article, 0, 4) // Unsafe 取消字段不匹配警告 err := db.Unsafe().Select(&mods, "select * from article limit 4") if err != nil { w.Write([]byte(err.Error())) } // 创建模板容器 tmpl := template.New("set") // 新建模板并加载模板文件 tmpl.New("list.html").ParseFiles("list.html") // 执行模板 tmpl.ExecuteTemplate(w, "list.html", mods) } // Class 分类 type Class struct { Id int Name string //分类名 Url string //图片链接 } // Article 新闻 type Article struct { Id int Title string //标题 Author string //作者 }

页面模板

index
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模板渲染</title> </head> <body> 数据主键:{{.Id}} 分类名称:{{.Name}} 图片:<img src="{{.Url}}" alt="图片加载失败显示"> </body> </html>
list
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>模板渲染</title> </head> <body> {{range $k,$v:=.}} {{$k}}==> <b>标题</b>{{$v.Title}},<b>作者</b>{{$v.Author}} <br> {{end}} </body> </html>

表单获取数据

后端

package main import ( "fmt" "html/template" "net/http" ) func main() { // 注册路由 http.HandleFunc("/html", Html) http.HandleFunc("/form/data", FormData) // 监听端口提供服务 http.ListenAndServe(":8080", nil) } // 展示页面 func Html(w http.ResponseWriter, r *http.Request) { // 创建模板容器 tmpl := template.New("set") // 新建模板并加载模板文件 tmpl.New("form.html").ParseFiles("./form.html") // 执行模板 tmpl.ExecuteTemplate(w, "form.html", nil) } // 获取表单数据 func FormData(w http.ResponseWriter, r *http.Request) { r.ParseForm() // num := r.Form.Get("num") // num := r.FormValue("num") num := r.Form["num"][0] //多个一样会取第一个 passwd := r.Form.Get("passwd") fmt.Fprintf(w, "账号:%s,密码:%s", num, passwd) }

页面模板

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表单数据</title> </head> <body> <form action="/form/data" method="POST"> 账号:<input type="text" name="num"><br> 密码:<input type="password" name="passwd" ><br> <input type="submit" value="提交"> </form> </body> </html>

图片/文件上传

后台

package main import ( "crypto/rand" "encoding/hex" "fmt" "html/template" "io" "net/http" "os" ) func main() { // 注册路由 // 静态目录 http.Handle("/static/", http.StripPrefix("/static/", http.FileServer(http.Dir("static/")))) http.HandleFunc("/html", Html) http.HandleFunc("/form/upload", FormUpload) // 监听端口提供服务 http.ListenAndServe(":8080", nil) } // 展示页面 func Html(w http.ResponseWriter, r *http.Request) { // 创建模板容器 tmpl := template.New("set") // 新建模板并加载模板文件 tmpl.New("upload.html").ParseFiles("upload.html") // 执行模板 tmpl.ExecuteTemplate(w, "upload.html", nil) } // 获取表单数据 func FormUpload(w http.ResponseWriter, r *http.Request) { f, fh, err := r.FormFile("file") if err != nil { io.WriteString(w, err.Error()) return } // 简单随机字符串 b := make([]byte, 20) rand.Read(b) // 16进制编码 str := hex.EncodeToString(b) // str := time.Now().Format("20060102_150405") //当前时间作为随机字符串 // 添加随机字符串防止重复上传 // 更加高效随机字符串生成 https://github.com/zxysilent/utils/blob/master/rand.go#L24 fname := "static/" + str + fh.Filename // 也可以只有随机名 fout, _ := os.Create(fname) io.Copy(fout, f) f.Close() fout.Close() // 图片和文件都是文件主要是处理后缀名 fmt.Fprintf(w, "文件上传成功%s", fname) }

页面模板

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>图片文件上传</title> </head> <body> <!-- 文件上传 enctype="multipart/form-data" --> <!-- application/x-www-form-urlencoded 在发送前编码所有字符(默认) multipart/form-data 不对字符编码,在使用包含文件上传控件的表单时,必须使用该值。 text/plain 空格转换为 "+" 加号,但不对特殊字符编码。 --> <form action="/form/upload" method="POST" enctype="multipart/form-data"> <input type="file" name="file" /> <input type="submit" value="提交" /> </form> </body> </html>

本文链接:https://blog.zxysilent.com/post/goweb-060.html

-- EOF --