从这一节开始我们将一点一点的从基础开始带大家写一个项目，如果其中有任何错误地方希望能得到大家指点，可以将你们意见写在评论区，我一定会及时做出改正。
首先我们需要建一个普通项目，不需要建一个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
成绩管理系统我后需还会改进各位小伙伴如果有什么建议可以向我提，我一定会尽快改进。
网友评论