服务端渲染&数据处理
配套数据库为 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=utf8mb4&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=utf8mb4&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>