前端vue与后端golang数据库mysql 实现登录操作

最近学了golang语言，简单写一个登录操作的demo。

首先，也是最基本的，先写一个登录框页面，如图。

 附代码

<template>
  <div>
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="50px"
      class="demo-ruleForm"
    >
      <el-row><p></p> </el-row>
      <el-row><p></p> </el-row>
      <el-row>
        <el-form-item class="ppp" label="账号" prop="user">
          <el-input
            style="width: 200px"
            v-model="ruleForm.user"
          ></el-input> </el-form-item
      ></el-row>
      <el-row>
        <el-form-item label="密码" prop="username">
          <el-input
            style="width: 200px"
            v-model="ruleForm.username"
          ></el-input> </el-form-item
      ></el-row>

      <el-button class="bui" >登录</el-button>
      <el-row><p></p> </el-row>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        user: "",
        username: "",
      },
    };
  },
};
</script>
<style>
.demo-ruleForm {
  background-color: rgba(116, 87, 43, 0.8);
  width: 300px;
  margin-left: 500px;
  margin-top: 200px;
  border-radius: 20px;
  border: 3px solid #3ac8bc;
}

.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 19px;
  color: #eceff4;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  margin-left: 20px;
}
.bui {
  background-color: blanchedalmond;
  border: 3px solid #5b807d;
  border-radius: 20px;
  width: 200px;
}
</style>

然后前后交互用axios，导入必要的包-----此处省略

接着写出往后端传值的过程。

 async userlogin() {
      const res = await this.$http.post("/user/login", {
        uname: this.ruleForm.user,
        pwd: this.ruleForm.username,
      });
      if (res.data.code == 200) {
        
        alert("登录成功");
      } else {
        alert("登录失败");
      }
    },

uname与pwd为向后端传值的参数，分别指向from表单中的user和username。

前端完成，然后写后端。

直接附代码

func (*userApi) Login(r *ghttp.Request) {
	uname := r.GetString("uname")
	pwd := r.GetString("pwd")
	row, _ := g.DB().GetOne("select * from userinfo  where uname = ? and pwd = ?", uname, pwd)
	if len(row) > 0 {
		r.Response.WriteJson(g.Map{"code": 200, "msg": "ok", "data": nil})
	} else {
		r.Response.WriteJson(g.Map{"code": 500, "msg": "fail", "data": nil})
	}
}

2，3行写出是什么数据类型的

4行为sql语句 uname,与pwd分别对应前端输入的user和username

然后回到前端，再按钮那调那个方法 @click

现在已经完成了，输入数据库已经有的账号和密码提示如图。

 然后输入一个错误的，如图。

 完成。如果遇到问题可前端F12一步步监听，然后判断问题所在。