beego从入门到弃坑（二）登录

作者: 三月孙记风 | 来源:发表于2019-01-09 11:52 被阅读0次

beego从入门到弃坑（二）登录
beego从入门到弃坑（三）登录
beego从入门到弃坑（一）
日常活动表格
grok从入门到弃坑
electron从入门到弃坑
iOS端IM开发从入门到填坑
beego从入门到弃坑（四）数据库连接以及构造器使用
Xposed从入门到弃坑：一、Xposed初探
Beego入门(二)

从这一节开始我们将一点一点的从基础开始带大家写一个项目，如果其中有任何错误地方希望能得到大家指点，可以将你们意见写在评论区，我一定会及时做出改正。
首先我们需要建一个普通项目，不需要建一个API项目，那是建立前后台分离时，才会用到。他仅仅是方便我们查看API接口并没有什么神奇的地方。
首先创建一个新的项目

bee new acheme

目录结构

2019-01-09_09-47.png

cd acheme/
bee run

2019-01-09_09-52.png

打开目录之后我们会发现beego项目中的views目录放的文件是tpl结尾而不是常见的html结尾，我在网上查的说tpl文件一般用于框架中的模板文件，但这写都不重要，我们会把他都改成html文件

但我们打开contollers文件时会看到如下代码

2019-01-09_10-29.png

c.Data["Website"] = "beego.me"        这是beego后台往前台传递数据如果我们按住Ctrl+鼠标点击Data查看源码会发现Data是一个接口。
在go语言中你可以把接口想象成java中的object类型，他意味你可以传递任何数据类型。

2019-01-09_10-33.png

接下来我们把tpl文件改成html，开始动手了小伙伴们。

2019-01-09_10-40.png
在这里我要着重的生明一下，在beego中他的一个controller方法对应这一个tpl文件，这是一个很重要的坑，可能你现在不以为然，但到后面他会让你生气到爆

下面让我们以一个小登录为例子

前端我用了一些layui框架的，如果不熟系的话可以自行看layui文档，我便不细讲，表单的提交我用的是ajax
index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>成绩管理系统</title>
    <meta charset="UTF-8">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=0"
          name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="/static/css/style.css"/>
    <!-- 提示升级高级浏览器操作 -->
    <style>
        .ie-list a {
            margin-right: 80px;
        }

        #particles-js {
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: 50% 50%;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body class="body_bj">
<div id="particles-js">
    <div class="login layui-form">
        <div class="logo">
            <img src="/static/img/cat.jpeg" alt="">
        </div>
        <ul class="login-list">
            <li><input type="text" id="school" autocomplete="off" placeholder="请输入学号" required lay-verify="required|school" class="layui-input"></li>
            <li><input type="password" id="password" autocomplete="off" placeholder="请输入密码" required lay-verify="required|password" class="layui-input"></li>
            <li><input type="text" id="captcha" autocomplete="off" placeholder="请输入验证码" required lay-verify="required|captcha" class="layui-input"><span class="yzm2"></span></li>
            <li><button class="btn" lay-submit lay-filter="login" type="submit">登 录</button></li>
            <li class="tar"><a href="/reception/forget">忘记密码？</a></li>
        </ul>
    </div>
</div>

<script type="text/javascript" src="/static/layui/layui.js"></script>
<script type="text/javascript" src="/static/js/particles.min.js"></script>
<script>
    layui.use(['form','jquery', 'layer'], function () {
        let $ = layui.jquery,
                layer = layui.layer,
                form = layui.form;
        form.verify({
            school: function(value){
                if(value == "") {
                    console.log(value)
                    return '请输入正确的学号';
                }
            },
            password: function (value) {
                if (value == ""){
                    return '输入密码';
                }
            },
            captcha: function (value) {
                if (value == ""){
                    return '请输入正确的验证码';
                }
            }
        });

        form.on('submit(login)', function(data) {
            // console.log($(".captcha-img").attr("src").split("/")[2].split(".")[0]);
            $.ajax({
                type: "POST",
                url:'/reception/login/judge',
                data:{
                    school: $('#school').val(),
                    password: $('#password').val(),
                    captcha: $('#captcha').val(),
                },
                success:function(res){
                    console.log(res)
                            layer.msg(res);
                },
                error:function (data) {
                    console.log(data)
                }
            });
        });

    });
</script>
<script>
    particlesJS('particles-js',
            {
                "particles": {
                    "number": {
                        "value": 40,  //数量
                        "density": {
                            "enable": true,
                            "value_area": 800
                        }
                    },
                    "color": {
                        "value": "#ffffff"
                    },
                    "shape": {
                        "type": "circle",
                        "stroke": {
                            "width": 0,
                            "color": "#000000"
                        },
                        "polygon": {
                            "nb_sides": 5
                        },
                        "image": {
                            "src": "img/github.svg",
                            "width": 100,
                            "height": 100
                        }
                    },
                    "opacity": {
                        "value": 0.3,
                        "random": false,
                        "anim": {
                            "enable": false,
                            "speed": 1,
                            "opacity_min": 0.1,
                            "sync": false
                        }
                    },
                    "size": {
                        "value": 3,
                        "random": true,
                        "anim": {
                            "enable": false,
                            "speed": 40,
                            "size_min": 0.1,
                            "sync": false
                        }
                    },
                    "line_linked": {
                        "enable": true,
                        "distance": 150,
                        "color": "#ffffff",
                        "opacity": 0.4,
                        "width": 1
                    },
                    "move": {
                        "enable": true,
                        "speed": 1,
                        "direction": "none",
                        "random": false,
                        "straight": false,
                        "out_mode": "out",
                        "bounce": false,
                        "attract": {
                            "enable": false,
                            "rotateX": 600,
                            "rotateY": 1200
                        }
                    }
                },
                "interactivity": {
                    "detect_on": "canvas",
                    "events": {
                        "onhover": {
                            "enable": true,
                            "mode": "grab"
                        },
                        "onclick": {
                            "enable": false,
                            "mode": "push"
                        },
                        "resize": true
                    },
                    "modes": {
                        "grab": {
                            "distance": 150,
                            "line_linked": {
                                "opacity": 1
                            }
                        },
                        "bubble": {
                            "distance": 400,
                            "size": 40,
                            "duration": 2,
                            "opacity": 8,
                            "speed": 3
                        },
                        "repulse": {
                            "distance": 200,
                            "duration": 0.4
                        },
                        "push": {
                            "particles_nb": 4
                        },
                        "remove": {
                            "particles_nb": 2
                        }
                    }
                },
                "retina_detect": false
            }
    );
</script>

</body>
</html>

router中的代码

package routers

import (
    "acheme/controllers"
    "github.com/astaxie/beego"
)

func init() {
    beego.Router("/", &controllers.MainController{})
    beego.Router("/reception/login/judge", &controllers.MainController{},"post:Login")
}

MainController{} 为结构体的名字Login为要请求的方法，最好结构体的名字和文件的名字一致比较好

controller中的代码

package controllers

import (
    "fmt"
    "github.com/astaxie/beego"
)

type MainController struct {
    beego.Controller
}

func (c *MainController) Get() {
    c.Data["Website"] = "beego.me"
    c.Data["Email"] = "astaxie@gmail.com"
    c.TplName = "index.html"
}

func (c *MainController)Login()  {
    fmt.Println(c.GetString("school"))
}

fmt.Println(c.GetString("school"))可以将接受到的参数打印到控制台c.GetString("school")是接受参数的方法，无论get或post请求都可以接受到.
此时我们在登录窗口输入

2019-01-09_11-31.png

打开控制台看我们有没有接受到参数

2019-01-09_11-33.png

会发先我们已经接受到参数了
接下来我们修改一下controller

func (c *MainController)Login()  {
    if c.GetString("school") == "" {
        c.Ctx.WriteString("请输入学号")
        return
    }else if c.GetString("school") == "" {
        c.Ctx.WriteString("请输入学号")
        return
    } else if c.GetString("school") == "" {
        c.Ctx.WriteString("请输入学号")
        return
    }
    c.Ctx.WriteString("登录成功")
    return
}

此时我们再次登录就会有的登录成功的提示了
如果仅仅这样返回参数当然是不行，因为c.Ctx.WriteString()只能返回string，如果我们想要返回更复杂的数据就不行了，我会在下一节中详细讲述如何使用beego自带的验证机制，以及其自带的验证码，如何去用，还有他们会有什么坑。

这是我写的demo的git链接https://github.com/dajumao/acheme
这是完整成绩管理系同的链接https://github.com/dajumao/achievement
成绩管理系统我后需还会改进各位小伙伴如果有什么建议可以向我提，我一定会尽快改进。

beego从入门到弃坑（二）登录
从这一节开始我们将一点一点的从基础开始带大家写一个项目，如果其中有任何错误地方希望能得到大家指点，可以将你们意见写...
beego从入门到弃坑（三）登录
在上一节中我带领小伙伴们完成了一个简单的登录，在这一节我们继续对这个登录做一下完善，我们需要在controller...
beego从入门到弃坑（一）
最近由于要写课程设计的原因，我便开始一边学习beego，一边开始用它写一个小型的管理系统。但是只有你真正的去用的时...
日常活动表格
来源：攻抗战死灰粉带你从入门到弃坑
grok从入门到弃坑
初次使用是在使用logstash时用来分割反向代理的日志，由单个简单的正则组合，就能对一大段文字进行切割，惊叹与简...
electron从入门到弃坑
科学梯子自备 electron的安装资料地址：https://github.com/electron/elect...
iOS端IM开发从入门到填坑
iOS端IM开发从入门到填坑 iOS端IM开发从入门到填坑
beego从入门到弃坑（四）数据库连接以及构造器使用
beego框架对数据库的链接，如果你只是把数据库连接写到配置文件里，是不起任何人作用的，对于用习惯了laravel...
Xposed从入门到弃坑：一、Xposed初探
最近心血来潮，开始折腾xposed框架，xposed框架可以说得上是款Android系统God级别的开源hook框...
Beego入门(二)
1.类型相关内容在实现类型相关业务之前，我们先创建类型表。这里我们添加上一对多多对多的关系。一个类型下面有很多...