功能和背景介绍
在项目的登录功能中，如果在登录时发现用户名和密码在用户表中不存在，会自动将用户名和密码保存在用户表中，创建一个新的用户。 因此，除了使用手机号和验证码登录以外，还支持使用用户名、密码进行登录。 如果首次使用手机号和验证码进行登录，会默认将手机号作为用户名创建新的用户，将用户结构体对象的数据保存在数据库中。 因此，我们有必要创建用户表。
用户数据结构体定义
在项目中，使用结构体定义用户数据结构。结构体定义如下所示：
代码语言：javascript复制type Member struct {
Id int64 `xorm:"pk autoincr" json:"id"`
UserName string `xorm:"varchar(20)" json:"user_name"`
Mobile string `xorm:"varchar(11)" json:"mobile"`
Password string `xorm:"varchar(255)" json:"password"`
RegisterTime int64 `xorm:"bigint" json:"register_time"`
Avatar string `xorm:"varchar(255)" json:"avatar"`
Balance float64 `xorm:"double" json:"balance"`
IsActive int8 `xorm:"tinyint" json:"is_active"`
City string `xorm:"varchar(10)" json:"city"`
}通过定义Member结构体，表示应用的用户信息。通过TAG中的xorm来指定结构体在数据库表中的约束。
ORM映射
通过engine.Sync2方法将Member同步映射成为数据库中的member表：
代码语言：javascript复制err = engine.Sync2(new(model.Member),
new(model.SmsCode))
if err != nil {
return nil,err
}插入数据
当用户获取完验证码，并填写验证码以后，用户点击登录，会发起登录请求。因此，我们需要来完成登录相关的逻辑操作和处理。用户手机号码和验证码登录的接口是api/login_sms，因此我们在已经创建的MemberController中解析短信验证码接口。如下所示：
代码语言：javascript复制func (mc *MemberController) Router(engine *gin.Engine) {
...
//发送手机验证码
engine.GET("/api/sendcode", mc.sendSmsCode)
//手机号和短信登录
engine.OPTIONS("/api/login_sms", mc.smsLogin)
}在MemberController中创建smsLogin方法完成用户手机号和密码登录的逻辑，详细实现如下：
代码语言：javascript复制//短信登录
func (mc *MemberController) smsLogin(context *gin.Context) {
var smsParam param.SmsLoginParam
err := toolbox.Decode(context.Request.Body, &smsParam)
fmt.Println(err.Error())
fmt.Println(context.PostForm("phone"))
fmt.Println(context.Query("code"))
if err != nil {
toolbox.Failed(context, "参数解析错误")
return
}
us := service.NewMemberService()
member := us.SmsLogin(smsParam)
if member != nil {
toolbox.Success(context, member)
return
}
toolbox.Failed(context, "登录失败")
}用户服务层
在MemberService.go文件中，编写SmsLogin方法完成手机号和密码登录。
代码语言：javascript复制func (msi *MemberService) SmsLogin(param param.SmsLoginParam) *model.Member {
dao := dao.NewMemberDao()
sms := dao.ValidateSmsCode(param.Phone, param.Code)
if sms == nil || time.Now().Unix()-sms.CreateTime > 300 {
return nil
}
member := dao.QueryByPhone(param.Phone)
if member != nil {
return member
}
user := model.Member{}
user.UserName = param.Phone
user.Mobile = param.Phone
user.RegisterTime = time.Now().Unix()
user.Id = dao.InsertMember(user)
return &user
}在MemberService中，首先验证手机号和验证码是否正确。如果通过了手机号和验证码的验证，通过手机号查询用户是否已经存在。如果用户记录不存在，则创建新的用户记录并保存到数据库中，如果用户记录已经存在，则表示登录成功，返回用户信息。
数据库操作的MemberDao实现如下
在MemberDao中，实现用户模块的数据库操作。 首先是手机验证码验证功能,如下所示：
代码语言：javascript复制func (md *MemberDao) ValidateSmsCode(phone string, code string) *model.SmsCode {
var sms model.SmsCode
if err := md.Where(" phone = ? and code = ? ", phone, code).Find(&sms); err != nil {
toolbox.Error(err.Error())
}
return &sms
}其次是根据手机号查询用户数据库表中是否存在手机号对应的用户，如下所示：
代码语言：javascript复制func (md *MemberDao) QueryByPhone(phone string) *model.Member {
var member model.Member
if err := md.Where(" phone = ? ", phone).Find(&member); err != nil {
toolbox.Error(err.Error())
}
return &member
}最后，对于新手机号，新建用户，插入到数据库中：
代码语言：javascript复制func (md *MemberDao) InsertMember(member model.Member) int64 {
result, err := md.InsertOne(&member)
if err != nil {
toolbox.Error(err.Error())
}
return result
}跨域
代码语言：javascript复制我们项目是使用gin开发一个接口项目，前端是使用vue webpack进行开发和编译运行的。 可以通过如下命令运行为大家提供的前端工程代码,在前端项目的根目录下执行：
npm run dev在浏览器中访问http://localhost:8080即可进入应用的首页，切换到用户登录界面。 同时后端程序的运行端口是8090。 当使用我们上面两节课已经开发完成的手机号 验证码的方式进行用户登录时。会发现遇到一个问题，如下图所示：
之前我们已经开发完成了手机号 验证码登录的功能，并且使用Postman已经测试成功了，为什么现在在浏览器中会出现这个问题呢？
跨域访问的问题
代码语言：javascript复制先了解一下什么是跨域访问。 在浏览器中的任意一个页面地址，或者访问后台的api接口url，其实都包含几个相同的部分：
/*
* 1、通信协议：又称protocol，有很多通信协议，比如http， tcp/ip协议等等。
* 2、主机：也就是常说的host。
* 3、端口：即服务所监听的端口号。
* 4、资源路径：端口号后面的内容即是路径。
*/当在一个页面中发起一个新的请求时，如果通信协议、主机和端口，这三部分内容中的任意一个与原页面的不相同，就被称之为跨域访问。 如，在gin接口项目中，前端使用nodejs开发，运行在8080端口，我们访问的应用首页是：http://localhost:8080。 在使用gin框架开发的api项目中，服务端的监听端口为8090。 一个端口数8080，一个是8090，两者端口不同，因此按照规定，发生了跨域访问。
OPTIONS请求
如上文所述，前端vue开发的功能，使用axios发送POST登录请求。在请求时发生了跨域访问，因此浏览器为了安全起见，会首先发起一个请求测试一下此次访问是否安全，这种测试的请求类型为OPTIONS，又称之为options嗅探，同时在header中会带上origin，用来判断是否有跨域请求权限。 然后服务器相应Access-Control-Allow-Origin的值，该值会与浏览器的origin值进行匹配，如果能够匹配通过，则表示有跨域访问的权限。 跨域访问权限检查通过，会正式发送POST请求。
服务端设置跨域访问
代码语言：javascript复制可以在gin服务端，编写程序进行全局设置。通过中间件的方式设置全局跨域访问，用以返回Access-Control-Allow-Origin和浏览器进行匹配。 在服务端编写跨域访问中间件，详细内容如下：
func Cors() gin.HandlerFunc {
return func(context *gin.Context) {
method := context.Request.Method
origin := context.Request.Header.Get("Origin")
var headerKeys []string
for k, _ := range context.Request.Header {
headerKeys = append(headerKeys, k)
}
headerStr := strings.Join(headerKeys, ",")
if headerStr != "" {
headerStr = fmt.Sprintf("access-control-allow-origin, access-control-allow-headers, %s", headerStr)
} else {
headerStr = "access-control-allow-origin, access-control-allow-headers"
}
if origin != "" {
context.Writer.Header().Set("Access-Control-Allow-Origin", "*")
context.Header("Access-Control-Allow-Origin", "*") // 设置允许访问所有域
context.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE,UPDATE")
context.Header("Access-Control-Allow-Headers", "Authorization, Content-Length, X-CSRF-Token, Token,session,X_Requested_With,Accept, Origin, Host, Connection, Accept-Encoding, Accept-Language,DNT, X-CustomHeader, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Pragma")
context.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers,Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma,FooBar")
context.Header("Access-Control-Max-Age", "172800")
context.Header("Access-Control-Allow-Credentials", "false")
context.Set("content-type", "application/json") //// 设置返回格式是json
}
if method == "OPTIONS" {
context.JSON(http.StatusOK, "Options Request!")
}
//处理请求
context.Next()
}
}其中的Access-Control-Allow-Origin的设置，表示允许进行跨域访问，*表示可以访问所有域。同时，通过Header方法进行了其他的设置。 最后context.Next()是中间件使用的标准用法，表示继续处理请求。
服务器设置跨域调用
代码语言：javascript复制在main函数中，调用编写好的跨域访问。调用如下:
func main(){
...
app := gin.Default()
app.Use(Cors())
...
}
/*
调用app.Use方法,设置跨域访问
*/功能演示
服务器设置好跨域访问以后，重新启动服务器api程序，并在浏览器端重新访问。可以看到正常发送了OPTIONS嗅探后，正常发送了POST请求。如下图所示：
