半小时快速上手golang web编程之用户的增删改查

一.课程目标

• 本课程目标是让新手能够在最短的时间内了解到golang的增删改查流程. 从而让入门web开发更加容易.
• 本实例是快速实现一个用户的增删改查, 采用前后端分离模式, 后端采用gorose orm + gin框架完成api的开发, 前端使用原生html+css+jquery+ajax交互数据.
• 本项目源码已经发布到github: https://github.com/gohouse/go...

二.安装基础环境和依赖库

# 安装golang yum -y install golang # 安装gin web框架 go get https://github.com/gin-gonic/gin # 安装gorose orm框架 go get https://github.com/gohouse/gorose # 安装sqlite3驱动 go get https://github.com/mattn/go-sqlite3

注: 这里只是做一个centos下的命令行示例, 其他操作系统类似, 只是需要把上边几个依赖安装好即可.实际使用中,建议使用vgo管理.

三.创建文件并开启简单的http服务

1.创建文件

cd $GOPATH/src/ mkdir gopro && cd gopro touch main.go

2.编辑main.go,内容如下

package main import "github.com/gin-gonic/gin" func main() { r := gin.Default() r.GET("/ping", func(c *gin.Context) { c.String(200, "欢迎来到golang入门用户管理api服务系统") }) // listen and serve on 0.0.0.0:8080 (for windows "localhost:8080" ) r.Run() }

运行结果如下:

$ go run main.go [GIN-debug] [WARNING] Creating an Engine instance with the Logger and Recovery middleware already attached. [GIN-debug] [WARNING] Running in "debug" mode. Switch to "release" mode in production. - using env: export GIN_MODE=release - using code: gin.SetMode(gin.ReleaseMode) [GIN-debug] GET / --> main.BootGin.func1 (3 handlers) [GIN-debug] GET /UserAdd --> main.UserAdd (4 handlers) [GIN-debug] GET /UserList --> main.UserList (4 handlers) [GIN-debug] GET /UserEdit --> main.UserEdit (4 handlers) [GIN-debug] GET /UserDelete --> main.UserDelete (4 handlers) [GIN-debug] Environment variable PORT is undefined. Using port :8080 by default [GIN-debug] Listening and serving HTTP on :8080

浏览器访问 http://localhost:8080 即可看到欢迎语了,一个基本的http服务已经搭建完毕

四.开发接口

初始化gorose orm

使用单例封装一个gorose初始驱动函数,这里采用sqlite3作为示例的数据库, 实际使用跟mysql一致

var once sync.Once var engin *gorose.Engin //BootGorose 初始化gorose, 单例模式 func BootGorose() { var err error once.Do(func() { engin, err = gorose.Open(&gorose.Config{ Driver: "sqlite3", Dsn: "db2.sqlite", }) if err != nil { panic(err.Error()) } }) }

封装一个DB()函数方便快捷调用

// DB orm快捷使用函数 func DB() gorose.IOrm { return engin.NewOrm() }

初始化用户表

该表作为示例的增删改查对象

// UserInit 初始化用户表 // 实际使用中,建议不要放到代码中,避免每一次都会执行 func UserInit() { dbSql := `CREATE TABLE IF NOT EXISTS "users" ( "uid" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT, "username" TEXT NOT NULL default "", "age" integer NOT NULL default 0 )` affected_rows, err := DB().Execute(dbSql) if err != nil { panic(err.Error()) } if affected_rows == 0 { return } }

增加用户

1.添加路由

... router.GET("/UserAdd", UserAdd) ...

2.编写UserAdd方法

// UserAdd 用户增加 func UserAdd(c *gin.Context) { // 用户名 username := c.Query("username") // 年龄 age := c.DefaultQuery("age", "0") // 接受参数组装入库数据 var data = make(map[string]interface{}) if username == "" { c.JSON(http.StatusOK, FailReturn("用户名不能为空")) return } data["username"] = username if age != "0" { data["age"] = age } // 执行入库 affected_rows, err := DB().Table("users").Data(data).Insert() if err != nil { c.JSON(http.StatusOK, FailReturn(err.Error())) return } // api接口返回 c.JSON(http.StatusOK, SuccessReturn(affected_rows)) }

这里新增了两个工具函数SuccessReturn()和FailReturn(),方便api统一返回使用,具体方法如下:

// SuccessReturn api正确返回函数 func SuccessReturn(msg interface{}) map[string]interface{} { var res = make(map[string]interface{}) res["data"] = msg res["code"] = http.StatusOK res["msg"] = "success" return res } // FailReturn api错误返回函数 func FailReturn(msg interface{}) map[string]interface{} { var res = make(map[string]interface{}) res["data"] = "" res["code"] = http.StatusBadRequest res["msg"] = msg return res }

3.我们运行并测试一下效果,浏览器访问: http://localhost:8080/UserAdd?username=fizz .

浏览器显示如下内容, 则表示成功.

{ "code": 200, "data": 1, "msg": "success" }

我们可以继续执行,多添加几条数据,方便测试:
http://localhost:8080/UserAdd?username=fizz2&age=18

等我们完善一下查看接口, 就可以查看刚才添加的数据了

查看用户

1.添加路由

... router.GET("/UserList", UserList) ...

2.编写UserList方法

// UserList 获取用户列表 func UserList(c *gin.Context) { // 默认查询50条数据 userList, err := DB().Table("users").OrderBy("uid desc").Limit(50).Get() if err != nil { c.JSON(http.StatusOK, FailReturn(err.Error())) return } c.JSON(http.StatusOK, SuccessReturn(userList)) }

3.我们运行并测试一下效果,浏览器访问: http://localhost:8080/UserList

浏览器显示如下内容, 证明我们刚才添加的数据是正确的

{ "code": 200, "data": [ { "age": 0, "uid": 1, "username": "fizz" }, { "age": 18, "uid": 2, "username": "fizz2" } ], "msg": "success" }

修改用户

1.添加路由

... router.GET("/UserEdit", UserEdit) ...

2.编写UserEdit方法

// UserEdit 用户编辑 func UserEdit(c *gin.Context) { // 按照主键编辑 uid := c.Query("uid") username := c.DefaultQuery("username", "") age := c.DefaultQuery("age", "0") if uid == "" { c.JSON(http.StatusOK, FailReturn("用户id不能为空")) return } if username == "" && age == "0" { c.JSON(http.StatusOK, FailReturn("未修改")) return } var data = make(map[string]interface{}) if username != "" { data["username"] = username } if age != "0" { data["age"] = age } // 执行入库操作 affected_rows, err := DB().Table("users").Where("uid", uid).Data(data).Update() if err != nil { c.JSON(http.StatusOK, FailReturn(err.Error())) return } c.JSON(http.StatusOK, SuccessReturn(affected_rows)) }

3.我们运行并测试一下效果,浏览器访问: http://localhost:8080/UserEdit?username=fizz22&uid=2

浏览器显示如下内容, 证明修改成功

{ "code": 200, "data": [ { "age": 0, "uid": 1, "username": "fizz" }, { "age": 18, "uid": 2, "username": "fizz22" } ], "msg": "success" }

删除用户

1.添加路由

... router.GET("/UserDelete", UserDelete) ...

2.编写UserDelete方法

// UserDelete 用户删除 func UserDelete(c *gin.Context) { // 按主键删除 uid := c.Query("uid") if uid == "" { c.JSON(http.StatusOK, FailReturn("用户id不能为空")) return } affected_rows, err := DB().Table("users").Where("uid", uid).Delete() if err != nil { c.JSON(http.StatusOK, FailReturn(err.Error())) return } c.JSON(http.StatusOK, SuccessReturn(affected_rows)) }

3.我们运行并测试一下效果,浏览器访问: http://localhost:8080/UserDelete?uid=2

浏览器显示如下内容, 证明删除成功

{ "code": 200, "data": 0, "msg": "success" }

4.最后我们再查看一下数据, http://localhost:8080/UserList

{ "code": 200, "data": [ { "age": 0, "uid": 1, "username": "fizz" } ], "msg": "success" }

发现uid=2的数据已经删掉了,到此, 增删改查的api接口全部搞定

完成前端页面

1. 编写html+css

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>golang用户管理示例</title> <style> #user-box{ max-width: 600px; margin: 0 auto; } table{ text-align: center; border: 1px solid #000; } th{ width: 150px; } </style> </head> <body> <center><h1>欢迎来到golang入门用户管理api服务系统</h1></center> <hr> <div id="user-box"> <button onclick="UserAdd()">新增</button> <table> <tr> <th>uid</th> <th>用户名</th> <th>年龄</th> <th>操作</th> </tr> </table> </div> </body> </html>

2. 编写增加和修改的模态框弹层

<div id="modal"> <!-- 模态框 --> <dialog> <p>操作</p> <hr> <input type="hidden" id="uid"> <p> 用户名: <br> <input type="text" id="username"> </p> <p> 年&nbsp;&nbsp;龄: <br> <input type="text" id="age"> </p> <button onclick="UserSubmit()">提交</button> <button onclick="dialog.hide()">关闭</button> </dialog> </div>

3. 编写JavaScript

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script> var dialog = $("dialog"); var uid = $("#uid"); var username = $("#username"); var age = $("#age"); // 初始化数据 UserList(); function UserSubmit() { var url = "http://localhost:8080/UserEdit"; var uidVal = uid.val(); if (uidVal=="") { url = "http://localhost:8080/UserAdd" } $.get(url,{ uid:uid.val(), username:username.val(), age:age.val() },function (e) { console.log(e); if (e.code!=200) { alert("失败") } // dialog.hide() window.location.reload() }) } function UserAdd() { dialogInit() dialog.show() } function UserEdit(uidParam,usernameParam,ageParam) { dialogInit() dialog.show() uid.val(uidParam) username.val(usernameParam) age.val(ageParam) } function UserDelete(uidParam) { var url = "http://localhost:8080/UserDelete" $.get(url,{uid,uidParam},function (e) { console.log(e); dialog.hide() }) } function dialogInit() { uid.val("") username.val("") age.val("") } function UserList() { var url = "http://localhost:8080/UserList" $.get(url,{},function (e) { if (e.code==200) { if (e.data.length>0) { for(var i in e.data) { var data = e.data[i] $("table").append("<tr>\n" + " <td>"+data.uid+"</td>\n" + " <td>"+data.username+"</td>\n" + " <td>"+data.age+"</td>\n" + " <td><a href='javascript:;' onclick='UserEdit("+data.uid+",\""+data.username+"\","+data.age+")'>编辑</a> | " + "<a href='javascript:;' onclick='UserDelete("+data.uid+")'>删除</a> </td>" + " </tr>") } } } dialog.hide() }) } </script>

六.运行

开启gin静态文件服务器

... // 静态文件服务 router.Static("/html","./") ...

访问 http://localhost:8080/html 即可, 或者直接打开(index.html) , 效果如下, 原生html+css实现. 虽然丑了一点,但是麻雀虽小,五脏俱全,凑合着看下(^_^)

完整代码已放到了github

https://github.com/gohouse/go...

---