Go语言打造高并发web即时聊天(IM-Instant Messaging)应用-支持10万人同时在线

1.技术栈

1.1.前端技术

  • h5
    • ajax
      发送文字- 上传文字
      发送图片-上传图片
    • 使用h5获取音频
    • 使用h5发送WebSocket消息
  • Vue制作单页app
  • mui、css

1.2. 后端技术

  • WebSocket组件
    • http协议握手升级成WebSocket协议
  • channel、gorountine
    • 提高系统的并发性
  • template
    • 模板渲染技术

1.3.架构技术

  • Nginx反向代理
  • 消息总线MQ/Redis
  • UDP协议/HTTP2协议
2. 需求分析

2.1.基本需求

  • 2.1.1.发送、接收
    • 2.1.1.1.功能界面显示
      发送和接收界面的不同,发送的语音、图片、文字样式等等界面
    • 2.1.1.2.发送需求
      实现资源标准化编码
      • 资源信息采集并标准化,转换成 content/url
      • 资源编码,拼接成一个消息体(json/xml)
    • 2.1.1.3.确保消息体的可扩展性
      • 兼容基础媒介:图片、文字、语音(url/pic/content/num)
      • 承载大量新业务,业务扩展不能对现有业务产生影响
      • 红包/打卡/签到等本质上是消息,但是内容却是不一样的
// 消息体核心代码快-go语言结构体
type Message struct {
	// 消息ID
	Id int64 `json:"id,omitempty" form:"id"`
	// 消息发送方
	UserId int64 `json:"userid,omitempty" form:"userid"`
	// 群聊还是私聊标记
	Cmd int `json:"cmd,omitempty" form:"cmd"`
	// 对端ID,或者群ID
	Dstid int64 `json:"dstid,omitempty" form:"dstid"`
	// 消息样式
	Media int `json:"media,omitempty" form:"media"`
	// 消息的内容
	Content string `json:"content,omitempty" form:"content"`
	// 预览图片
	Pic string `json:"pic,omitempty" form:"pic"`
	// 服务的URL
	Url string `json:"url,omitempty" form:"url"`
	// 简单的描述
	Memo string `json:"memo,omitempty" form:"memo"`
	// 数字、数值相关
	Amount int `json:"amount,omitempty" form:"amount"`
}
  • 2.1.1.4.接收消息并解析显示
    • 接收到消息体【json】并进行解析
    • 区分不同形式(图片/文字/语音)
    • 界面显示发出和接收
  • 2.1.2.群聊
  • 基础功能无区别
  • 一条群聊的消息要在多个参与群聊的终端及时接收到
  • 服务器流量的计算
  • 服务器负载分析
假设群聊中:
用户A发送图片数据512k
100人在线群人员同时收到
512kb * 100 = 1024kb * 50 = 50M
假设有1024个群
1024* 50 M = 50G
  • 服务器流量的计算->服务器负载分析的【解决方案】
    • 1.使用缩略图(512k–>51.2k)提高单图下载和渲染速度,提供给用户【查看原图的】功能
    • 2.使用资源分离的方式,将资源服务和应用服务分离,提高资源服务并发能力,使用云服务(阿里云等)作为资源服务器,利用阿里云的海量并发服务实现资源的访问速度提高用户体验
    • 3.压缩消息体,发送文件路径而不是整个文件
  • 2.1.3.高并发
    • 单机状态+分布式+弹性扩容
    • 单机并发性能最优
    • 海量用户采用分布式部署
    • 应对突发事件进行弹性扩容
3.IM系统架构



4. WebSocket

4.1. 选型

  • 常用的go语言的WebSocket有:
  • A :joewalnes/websocketd----https://github.com/joewalnes/websocketd
github.com/joewalnes/websocketd
  • B:gorilla/websocket----https://github.com/gorilla/websocket
github.com/gorilla/websocket

以上两个包非官方,但是都依赖于下面的官方的扩展包下的net包中WebSocket。

  • C:golang/x/net/websocket----https://github.com/golang/net
    官方在github上开放的扩展包下的net的包中的WebSocket,需要在$GOPATH/src下创建golang.org/x/目录进行克隆https://github.com/golang/net.git
github.com/golang/net

4.2.安装net包

由于大陆境内有强的缘故,所以对于golang.org/x/net需要手动创建目录后,然后使用git clone方式进行下载

  • 进入$GOPATH/src/目录下:
cd $GOPATH/src/
  • 创建文件目录golang.org/x/
mkdir -p golang.org/x/
  • 进入golang.org/x/目录
cd golang.org/x/
  • 执行克隆net包
git clone https://github.com/golang/net.git
  • 查看确认
ls

4.3. 安装gorilla/websocket

本次选用gorilla/websocket为WebSocket服务

  • 使用go的get命令进行安装
go get -u -v github.com/gorilla/websocket

4.4.鉴权

判断id和token是否一致,一致则鉴权成功

4.4.1.鉴权成功

4.4.2.鉴权失败

4.4.3.鉴权接入/用户信息

4.4.4.鉴权接入/Conn

4.4.5.conn的维护

最简单的Conn的维护,让userid和conn形成一个映射关系,一个map【ClientMap】的键是int64类型的userid,值是conn的指针,实际开发过程中,一个用户的信息远不止这些,所以定义了一个ClientNode的结构体,用来存放conn的指针,以及用户的各种其他信息,所以对map【clientMap】做了升级,key为int64类型的用户id,值为clientNode的结构体指针

4.5.后端消息的接收

4.6.后端消息的发送

4.7.前端使用WebSocket

4.8.WebSocket的心跳机制

4.9.前端消息的发送



4.10. 前端消息的接收

4.11.流程

5.单机支持高并发

5.1.设计高质量的代码优化map

  1. 由于对map的频繁读写,会存在一个安全性问题,所以要设计稿质量的代码来优化map
  • 使用读写锁【读共享,写独占】
  • 读写锁的使用场景:读的次数多写的次数少的场合
  1. map不要太大
  • 一个map维持在一个特定的大小即可,太大了毫无意义可言

5.2.突破系统的瓶颈优化最大连接数

  • 系统选用linux
  • 解除linux系统的最大文件数

5.3.优化CPU资源的使用

  • 降低json编码频次
  • 做到一次编码处处使用

5.4.优化IO资源的使用

  • 合并写数据库次数
  • 优化对数据库的读操作
  • 尽可能多的使用缓存技术

5.5.应用服务和资源服务分离

  • 应用服务系统提供动态资源服务
  • 资源服务【图片、文件、css、js等】部署在第三方云服务平台上
6.golang web

6.1. web http编程核心API

  • 请求格式和回调函数绑定
// 绑定请求和处理函数
func HandleFunc(pattern string, handler func(ResponseWriter, *Request)) {
   DefaultServeMux.HandleFunc(pattern, handler)
}
// pattern string:请求的路径
// handler func(ResponseWriter, *Request):回调函数、处理函数

// 启动web服务器:监听并提供服务
func ListenAndServe(addr string, handler Handler) error {
   	server := &Server{Addr: addr, Handler: handler}
   	return server.ListenAndServe()
   }
// addr string:监听的IP+port
// handler Handler:回调函数,路由,如果没有自定义路由,可以传入nil来调用默认的路由
  • 测试demo
package main

import (
   "io"
   "log"
   "net/http"
)

func main() {

   // 绑定请求和处理函数
   http.HandleFunc("/user/login func(writer http.ResponseWriter, request *http.Request) {
   	// 执行数据库操作
   	// 逻辑处理
   	// restful风格API,返回JSON/XML
   	io.WriteString(writer, "hello world!")
   })
   // 启动web服务器:监听并提供服务
   if err := http.ListenAndServe("127.0.0.1:8080", nil); err != nil {
   	log.Fatal("http.ListenAndServe('127.0.0.1:8080', nil) Error:", err)
   }
}

启动服务器,并在终端进行测试

  • demo的终端测试:
curl http://127.0.0.1:8080/user/login/
7.实现后端登录接口

7.1.后端登录接口API

业务说明
业务名称登录
请求格式/user/login
请求参数mobile:用户手机号;password:用户密码
返回json{“code”:0,“msg”:“提示信息”,“data”:{“id”:111,“token”:333333 }}
  • 返回的json格式数据
{
    "code":0,// 0:成功,-1:失败
    "msg":"提示信息",// 用户名或密码错误等等
    "data":{
        "id":111,// 用户id
        "token":333333 // 鉴权因子,在WebSocket接入的时候用到
    }
}

7.1.1.登录接口API知识点梳理

7.1.1.1. 获取前端传递的参数

// 获得参数
request.ParseForm()
// 解析参数
mobile := request.PostForm.Get("mobile")
password := request.PostForm.Get("password")

7.1.1.2. 返回json格式数据给前端

// 1.设置header为JSON--默认的是text/html,故而要特别的设置为application/json
writer.Header().Set("Content-Type", "application/json")
// 2.设置header的响应状态码 - 成功-200
writer.WriteHeader(http.StatusOK)
// 3. 返回JSON数据
writer.Write([]byte(str))

7.1.1.3.代码

package main

import (
	"log"
	"net/http"
)

func main() {

	// 绑定请求和处理函数
	http.HandleFunc("/user/login", func(writer http.ResponseWriter, request *http.Request) {
		// 执行数据库操作
		// 逻辑处理
		// restful风格API,返回JSON/XML
		// 获得参数
		request.ParseForm()
		// 解析参数
		mobile := request.PostForm.Get("mobile")
		password := request.PostForm.Get("password")

		// 定义简单校验的标记
		loginOk := false
		if mobile == "17500000000" && password == "123456" {
			loginOk = true
		}
		// 默认的成功的JSON字符串
		str := `{"code":0,"data":{"id":1,"token":"test"}}`
		if !loginOk {
			// 失败的JSON字符串
			str = `{"code":-1,"msg":"用户名或密码错误"}`
		}
		// 1.设置header为JSON--默认的是text/html,故而要特别的设置为application/json
		writer.Header().Set("Content-Type", "application/json")
		// 2.设置header的响应状态码 - 成功-200
		writer.WriteHeader(http.StatusOK)
		// 3. 返回JSON数据
		writer.Write([]byte(str))

	})

	// 启动web服务器:监听并提供服务
	if err := http.ListenAndServe("127.0.0.1:8080", nil); err != nil {
		log.Fatal("http.ListenAndServe('127.0.0.1:8080', nil) Error:", err)
	}

}

  • 终端测试demo
  • 成功
curl http://127.0.0.1:8080/user/login -X POST -d "mobile=17500000000&password=123456"
  • 失败
curl http://127.0.0.1:8080/user/login -X POST -d "mobile=17500000000&password=12345"
  • 代码优化 -1
package main

import (
	"log"
	"net/http"
)

func userLogin(writer http.ResponseWriter, request *http.Request) {
	// 执行数据库操作
	// 逻辑处理
	// restful风格API,返回JSON/XML
	// 获得参数
	request.ParseForm()
	// 解析参数
	mobile := request.PostForm.Get("mobile")
	password := request.PostForm.Get("password")

	// 定义简单校验的标记
	loginOk := false
	if mobile == "17500000000" && password == "123456" {
		loginOk = true
	}
	// 默认的成功的JSON字符串
	str := `{"code":0,"data":{"id":1,"token":"test"}}`
	if !loginOk {
		// 失败的JSON字符串
		str = `{"code":-1,"msg":"用户名或密码错误"}`
	}
	// 1.设置header为JSON--默认的是text/html,故而要特别的设置为application/json
	writer.Header().Set("Content-Type", "application/json")
	// 2.设置header的响应状态码 - 成功-200
	writer.WriteHeader(http.StatusOK)
	// 3. 返回JSON数据
	writer.Write([]byte(str))

}
func main() {

	// 绑定请求和处理函数
	http.HandleFunc("/user/login", userLogin)

	// 启动web服务器:监听并提供服务
	if err := http.ListenAndServe("127.0.0.1:8080", nil); err != nil {
		log.Fatal("http.ListenAndServe('127.0.0.1:8080', nil) Error:", err)
	}
}
  • 代码优化-2
package main

import (
	"encoding/json"
	"log"
	"net/http"
)

func userLogin(writer http.ResponseWriter, request *http.Request) {
	// 执行数据库操作
	// 逻辑处理
	// restful风格API,返回JSON/XML
	// 获得参数
	request.ParseForm()
	// 解析参数
	mobile := request.PostForm.Get("mobile")
	password := request.PostForm.Get("password")

	// 定义简单校验的标记
	loginOk := false
	if mobile == "17500000000" && password == "123456" {
		loginOk = true
	}
	// 成功的JSON返回
	if loginOk {
		//"data":{"id":1,"token":"test"
		data := make(map[string]interface{})
		data["id"] = 1
		data["token"] = "test"
		ResponseJson(writer, 0, data, "")
	} else {
		// 失败的JSON返回
		ResponseJson(writer, -1, nil, "用户名或密码错误")
	}
}

// 定义一个结构体
type H struct {
	Code int         `json:"code"`
	Data interface{} `json:"data,omitempty"` //omitempty:如果序列化的字段值是nil,则不进行JSON序列化,不会再JSON数据中看到
	Msg  string      `json:"msg"`
}

func ResponseJson(writer http.ResponseWriter, code int, data interface{}, msg string) {
	// 1.设置header为JSON--默认的是text/html,故而要特别的设置为application/json
	writer.Header().Set("Content-Type", "application/json")
	// 2.设置header的响应状态码 - 成功-200
	writer.WriteHeader(http.StatusOK)
	// 3. 返回JSON数据
	// 定义一个结构体--结构体H
	h := H{
		Code: code,
		Data: data,
		Msg:  msg,
	}
	// 将结构体转换成JSON字符串
	result, err := json.Marshal(h)
	if err != nil {
		log.Fatal("json.Marshal(h) Error:", err)
	}
	// 返回数据
	writer.Write(result)
}
func main() {
	// 绑定请求和处理函数
	http.HandleFunc("/user/login", userLogin)
	// 启动web服务器:监听并提供服务
	if err := http.ListenAndServe("127.0.0.1:8080", nil); err != nil {
		log.Fatal("http.ListenAndServe('127.0.0.1:8080', nil) Error:", err)
	}
}

7.2.实现前端登录页面并接入

概要技术实现
实现静态资源服务func FileServer(root FileSystem) Handler {return &fileHandler{root}}
模板渲染技术template
前端技术Vue+Mui+Ajax+Promis

7.2.1.后端代码版本1

package main

import (
	"encoding/json"
	"html/template"
	"log"
	"net/http"
)

func userLogin(writer http.ResponseWriter, request *http.Request) {
	// 执行数据库操作
	// 逻辑处理
	// restful风格API,返回JSON/XML
	// 获得参数
	request.ParseForm()
	// 解析参数
	mobile := request.PostForm.Get("mobile")
	password := request.PostForm.Get("password")

	// 定义简单校验的标记
	loginOk := false
	if mobile == "17500000000" && password == "123456" {
		loginOk = true
	}
	// 成功的JSON返回
	if loginOk {
		//"data":{"id":1,"token":"test"
		data := make(map[string]interface{})
		data["id"] = 1
		data["token"] = "test"
		ResponseJson(writer, 0, data, "")
	} else {
		// 失败的JSON返回
		ResponseJson(writer, -1, nil, "用户名或密码错误")
	}
}

// 定义一个结构体
type H struct {
	Code int         `json:"code"`
	Data interface{} `json:"data,omitempty"` //omitempty:如果序列化的字段值是nil,则不进行JSON序列化,不会再JSON数据中看到
	Msg  string      `json:"msg"`
}
func ResponseJson(writer http.ResponseWriter, code int, data interface{}, msg string) {
	// 1.设置header为JSON--默认的是text/html,故而要特别的设置为application/json
	writer.Header().Set("Content-Type", "application/json")
	// 2.设置header的响应状态码 - 成功-200
	writer.WriteHeader(http.StatusOK)
	// 3. 返回JSON数据
	// 定义一个结构体--结构体H
	h := H{
		Code: code,
		Data: data,
		Msg:  msg,
	}
	// 将结构体转换成JSON字符串
	result, err := json.Marshal(h)
	if err != nil {
		log.Fatal("json.Marshal(h) Error:", err)
	}
	// 返回数据
	writer.Write(result)
}
func main() {
	// 提供静态资源目录支持--当前目录
	//http.Handle("/",http.FileServer(http.Dir("./")))// 有安全风险,能让main对外暴露
	// 2.指定目录的静态资源文件支持
	http.Handle("/asset/", http.FileServer(http.Dir("./")))
	// 登录/user/login.shtml的请求--后端渲染
	http.HandleFunc("/user/login.shtml", func(w http.ResponseWriter, r *http.Request) {
		// 解析--使用模板template进行解析
		tpl, err := template.ParseFiles("./view/user/login.html")
		if err != nil {
			log.Fatal(`template.ParseFiles("./view/user/login.html") Error:`, err.Error())
		}
		// func (t *Template) ExecuteTemplate(wr io.Writer, name string, data interface{}) error
		// 参数1:io.Writer
		// 参数2:自定义的模板函数名称,此处在view/user/login.html中定义的{{define "/user/login.shtml"}}名称
		// 参数3:需要给前端做的数据绑定的数据
		tpl.ExecuteTemplate(w, "/user/login.shtml", nil)
	})
	// 注册/user/register.shtml的请求--后端渲染
	http.HandleFunc("/user/register.shtml", func(w http.ResponseWriter, r *http.Request) {
		// 解析--使用模板template进行解析
		tpl, err := template.ParseFiles("./view/user/register.html")
		if err != nil {
			log.Fatal(`template.ParseFiles("./view/user/register.html") Error:`, err.Error())
		}
		// func (t *Template) ExecuteTemplate(wr io.Writer, name string, data interface{}) error
		// 参数1:io.Writer
		// 参数2:自定义的模板函数名称,此处在view/user/register.html中定义的{{define "/user/register.shtml"}}名称
		// 参数3:需要给前端做的数据绑定的数据
		tpl.ExecuteTemplate(w, "/user/register.shtml", nil)

	})
	// 绑定请求和处理函数
	http.HandleFunc("/user/login", userLogin)
	// 启动web服务器:监听并提供服务
	if err := http.ListenAndServe("127.0.0.1:8080", nil); err != nil {
		log.Fatal("http.ListenAndServe('127.0.0.1:8080', nil) Error:", err)
	}
}

7.2.2.后端代码版本1优化

package main

import (
	"encoding/json"
	"html/template"
	"log"
	"net/http"
)

func userLogin(writer http.ResponseWriter, request *http.Request) {
	// 执行数据库操作
	// 逻辑处理
	// restful风格API,返回JSON/XML
	// 获得参数
	request.ParseForm()
	// 解析参数
	mobile := request.PostForm.Get("mobile")
	password := request.PostForm.Get("password")

	// 定义简单校验的标记
	loginOk := false
	if mobile == "17500000000" && password == "123456" {
		loginOk = true
	}
	// 成功的JSON返回
	if loginOk {
		//"data":{"id":1,"token":"test"
		data := make(map[string]interface{})
		data["id"] = 1
		data["token"] = "test"
		ResponseJson(writer, 0, data, "")
	} else {
		// 失败的JSON返回
		ResponseJson(writer, -1, nil, "用户名或密码错误")
	}
}

// 定义一个结构体
type H struct {
	Code int         `json:"code"`
	Data interface{} `json:"data,omitempty"` //omitempty:如果序列化的字段值是nil,则不进行JSON序列化,不会再JSON数据中看到
	Msg  string      `json:"msg"`
}
func ResponseJson(writer http.ResponseWriter, code int, data interface{}, msg string) {
	// 1.设置header为JSON--默认的是text/html,故而要特别的设置为application/json
	writer.Header().Set("Content-Type", "application/json")
	// 2.设置header的响应状态码 - 成功-200
	writer.WriteHeader(http.StatusOK)
	// 3. 返回JSON数据
	// 定义一个结构体--结构体H
	h := H{
		Code: code,
		Data: data,
		Msg:  msg,
	}
	// 将结构体转换成JSON字符串
	result, err := json.Marshal(h)
	if err != nil {
		log.Fatal("json.Marshal(h) Error:", err)
	}
	// 返回数据
	writer.Write(result)
}

//万能模板解析渲染
func RenderingView() {
	// 全局解析--使用模板template进行解析
	tpl, err := template.ParseGlob("./view/**/*") //**表示的是一个目录,*表示的是文件
	// 如果出现错误不再继续
	if err != nil {
		log.Fatal(`template.ParseGlob Error:`, err.Error())
	}
	// 循环遍历所有的模板,并执行注册
	for _, v := range tpl.Templates() {
		// 获取模板名称
		tplName := v.Name()
		http.HandleFunc(tplName, func(writer http.ResponseWriter, request *http.Request) {
			// func (t *Template) ExecuteTemplate(wr io.Writer, name string, data interface{}) error
			// 参数1:io.Writer
			// 参数2:自定义的模板函数名称
			// 参数3:需要给前端做的数据绑定的数据
			tpl.ExecuteTemplate(writer, tplName, nil)
		})
	}

}
func main() {
	// 指定目录的静态资源文件支持
	http.Handle("/asset/", http.FileServer(http.Dir("./")))
	// 调用万能模板解析渲染
	RenderingView()
	// 绑定请求和处理函数
	http.HandleFunc("/user/login", userLogin)
	// 启动web服务器:监听并提供服务
	if err := http.ListenAndServe("127.0.0.1:8080", nil); err != nil {
		log.Fatal("http.ListenAndServe('127.0.0.1:8080', nil) Error:", err)
	}
}

7.2.3.前端代码-login

{{/*定义模板的名称,shtml表示是后端渲染的文件*/}}
{{define "/user/login.shtml"}}
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>登录</title>
        <link rel="stylesheet" href="/asset/plugins/mui/css/mui.css"/>
        <link rel="stylesheet" href="/asset/css/login.css"/>
        <script src="/asset/plugins/mui/js/mui.js"></script>
        <script src="/asset/js/vue.min.js"></script>
        <script src="/asset/js/util.js"></script>
    </head>
    <body>

    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">登录</h1>
    </header>
    <div class="mui-content" id="pageapp">
        <form id='login-form' class="mui-input-group">
            <div class="mui-input-row">
                <label>账号</label>
                <input v-model="user.mobile" placeholder="请输入手机号" type="text" class="mui-input-clear mui-input">
            </div>
            <div class="mui-input-row">
                <label>密码</label>
                <input v-model="user.passwd" placeholder="请输入密码" type="password" class="mui-input-clear mui-input">
            </div>
        </form>
        <div class="mui-content-padded">
            <button @click="login" type="button" class="mui-btn mui-btn-block mui-btn-primary">登录</button>
            <div class="link-area"><a id='reg' href="register.shtml">注册账号</a> <span class="spliter">|</span> <a
                        id='forgetPassword'>忘记密码</a>
            </div>
        </div>
        <div class="mui-content-padded oauth-area">
        </div>
    </div>
    </body>
    </html>
    <script>
        var app = new Vue({
            el: "#pageapp",
            data: function () {
                return {
                    user: {
                        mobile: "",
                        passwd: ""
                    }
                }
            },
            methods: {
                login: function () {
                    //检测手机号是否正确
                    console.log("login")
                    //检测密码是否为空

                    //网络请求
                    //封装了promis
                    util.post("/user/login", this.user).then(res => {
                        console.log(res)
                        if (res.code != 0) {
                            mui.toast(res.msg)
                        } else {
                            //location.replace("//127.0.0.1/demo/index.shtml")
                            mui.toast("登录成功,即将跳转")
                        }
                    })
                },
            }
        })
    </script>
{{end}}

7.2.4.前端代码-register

{{/*定义模板的名称,shtml表示是后端渲染的文件*/}}
{{define "/user/register.shtml"}}
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>注册</title>
        <link rel="stylesheet" href="/asset/plugins/mui/css/mui.css"/>
        <link rel="stylesheet" href="/asset/css/login.css"/>
        <script src="/asset/plugins/mui/js/mui.js"></script>
        <script src="/asset/js/vue.min.js"></script>
        <script src="/asset/js/util.js"></script>
    </head>
    <body>

    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">注册</h1>
    </header>
    <div class="mui-content" id="pageapp">
        <form id='login-form' class="mui-input-group">
            <div class="mui-input-row">
                <label>账号</label>
                <input v-model="user.mobile" placeholder="请输入手机号" type="text" class="mui-input-clear mui-input">
            </div>
            <div class="mui-input-row">
                <label>密码</label>
                <input v-model="user.passwd" placeholder="请输入密码" type="password" class="mui-input-clear mui-input">
            </div>
        </form>
        <div class="mui-content-padded">
            <button @click="login" type="button" class="mui-btn mui-btn-block mui-btn-primary">注册</button>
            <div class="link-area"><a id='reg' href="register.shtml">注册账号</a> <span class="spliter">|</span> <a
                        id='forgetPassword'>忘记密码</a>
            </div>
        </div>
        <div class="mui-content-padded oauth-area">
        </div>
    </div>
    </body>
    </html>
    <script>
        var app = new Vue({
            el: "#pageapp",
            data: function () {
                return {
                    user: {
                        mobile: "",
                        passwd: ""
                    }
                }
            },
            methods: {
                login: function () {
                    //检测手机号是否正确
                    console.log("login")
                    //检测密码是否为空

                    //网络请求
                    //封装了promis
                    util.post("/user/login", this.user).then(res => {
                        console.log(res)
                        if (res.code != 0) {
                            mui.toast(res.msg)
                        } else {
                            //location.replace("//127.0.0.1/demo/index.shtml")
                            mui.toast("登录成功,即将跳转")
                        }
                    })
                },
            }
        })
    </script>
{{end}}

7.2.5.前端代码-test

{{/*定义模板的名称,shtml表示是后端渲染的文件*/}}
{{define "/user/test.shtml"}}
    <!DOCTYPE html>
    <html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>test</title>
        <link rel="stylesheet" href="/asset/plugins/mui/css/mui.css"/>
        <link rel="stylesheet" href="/asset/css/login.css"/>
        <script src="/asset/plugins/mui/js/mui.js"></script>
        <script src="/asset/js/vue.min.js"></script>
        <script src="/asset/js/util.js"></script>
    </head>
    <body>

    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">test</h1>
    </header>
    <h1>test</h1>
    </body>
    </html>

{{end}}
8.在golang中使用xorm操作数据库

8.1.xorm安装

xorm的github地址:https://github.com/go-xorm/xorm
xorm的中文文档地址:https://github.com/go-xorm/xorm/blob/master/README_CN.md
xorm教程地址:https://books.studygolang.com/xorm/

go get -u -v github.com/go-xorm/xorm

8.2.MySQL驱动的安装

go的mysql驱动的github地址:https://github.com/go-sql-driver/mysql

go get -u -v github.com/go-sql-driver/mysql

8.3.xorm初始化

import (
	"encoding/json"
	_ "github.com/go-sql-driver/mysql" //只执行该包的init函数
	"github.com/go-xorm/xorm"
	"html/template"
	"log"
	"net/http"
)

// xorm的引擎
var DBEngine *xorm.Engine

// init函数实现数据库连接的初始化
func init() {
	// 数据库驱动名
	driverName := "mysql"
	//data source name(DSN):数据源名称:
	//DSN=[username[:password]@][protocol[(address)]]/dbname[?param1=value1&...&paramN=valueN]
	//DSN最完整的形式=username:password@protocol(address)/dbname?param=value
	//除databasename外,所有值都是可选的。所以最小的DSN是=/dbname
	//如果您不想预先选择数据库,请dbname留空=/这与空DSN字符串具有相同的效果:
	//或者,Config.FormatDSN可用于通过填充结构来创建DSN字符串。
	dataSourceName := "root:root@(127.0.0.1:3306)/chat?charset=utf8&parseTime=true&loc=Asia%2FShanghai"
	//连接数据库
	DBEngine, err := xorm.NewEngine(driverName, dataSourceName)
	if err != nil {
		log.Fatal("xorm.NewEngine(driverName,dataSourceName) Error:", err.Error())
	}
	// 是否显示SQL语句
	DBEngine.ShowSQL(true)
	// 设置数据库的最大连接数
	DBEngine.SetMaxOpenConns(2)
	log.Println("database init success!")

}

8.4.xorm实现增删改查