15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > RE从零开始构建一个Go网站(五)

RE从零开始构建一个Go网站(五)

时间:2023-05-29 06:27:02 | 来源:网站运营

时间:2023-05-29 06:27:02 来源:网站运营

RE从零开始构建一个Go网站(五):之前我们已经完成了数据库的连接和数据模型的基本构建,接下来就要开始后台管理系统的搭建~

一、引入前段框架

Beego是一款比较全能性的Go-web 框架,采用了 Go 语言默认的模板引擎,可以很方便的在静态HTML中插入动态语言生成的数据。

模版运行机制
所以我们能在beego框架中通过Html5的代码来构建我们的前端页面。

网站的后台管理系统使用layui包来作为基础 UI 框架感兴趣的可以去layui的官网上详细了解一下这个ui框架。

从官网上面下载layui框架的文件包并解压将里面的layui文件夹复制到网站目录下的static目录中。

同时因为layui框架的部分功能是依靠jquery来实现的,所以在引入layui的同时还要把jquery也引入才行,下载jquery3的js文件放入 static目录中的js目录中。

static目录是专门用于存放网站程序外部资源的一个目录

二、构建一个简单登陆页面

在views是图中新建一个login.html或者是login.tpl文件,模版引擎默认是支持tpl和html的后缀名的所以两种写法都可以,至于里面是很传统的Html5的写法。

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="/static/js/jquery_3.min.js"></script> <link rel="stylesheet" href="/static/layui/css/layui.css"> <script src="/static/layui/layui.js"></script></head><body><div class="login-main" style="width: 30%;margin: 10% auto"> <header class="layui-elip"><p>管理员登录:</p></header> <br> <form class="layui-form" action="/login" method="POST"> <div> <input type="text" name="account" required lay-verify="required" placeholder="账号" autocomplete="off" class="layui-input"> </div> <br> <div > <input type="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input"> </div> <br> <div > <button type="submit" class="layui-btn" style="width: 100%">登录</button> </div> </form> <p style="color: red">{{.msg}}</p> <p style="color: red"> {{range .err}} <li style="color: red">{{.}}</li> {{end}} </p></div><script type="text/javascript"> layui.use('form', function(){ var form = layui.form; form.render() });</script></body></html>

三、构建一条简单的路由

如何让浏览器能过正确的访问到我们的页面呢?这个时候我们需要一个「route」,route能过根据url找到对应的程序和页面,有点类似于门牌号。

Beego的路由默认是存放在routers/router.go 文件下

打开router.go 文件发现里面已经存在了一条路有,那就是程序初始化以后访问跟欢迎页时用到的路由。

我们发现这条路由是和一个controllers包里的MainController的结构体绑定在一起的,当我们没有指定方法时,请求的 method 和函数名一致,例如GET请求执行Get函数,POST请求执行Post函数。

我们先仿照框架自带的路由写一条属于我们自己的路由,放在init函数中

beego.Router("/login", &controllers.AdminController{})然后在controllers里新建一个adminController.go文件

并写入一下代码

package controllersimport( beego "github.com/beego/beego/v2/server/web")type AdminController struct { beego.Controller}func (a *AdminController) Get() { a.TplName = "login.html"}这样我们就新建了一个admin的controllers,并将它的Get方法指向了我们的login.html页面,这样当我们访问/login这条路由时,浏览器就会自动的跳转到登陆页面了。

在终端输入bee run

当程序跑起来以后访问

http://127.0.0.1:8080/login就能看到我们之前写的登陆页面了

至此我们就成功引入了前端资源并成功构建了一个web页面。

关键词:

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭