Lua admin后台开发 (4) 开发一个简单的后台页面

前面的章节我们学会了如何页面设置与后台使用方法, 现在我们来为我们到后台写几个简单的页面.

登录后台

首先我们打开登录页面后登录.

在这里插入图片描述

添加菜单

如下图所示,菜单管理添加几个页面.

在这里插入图片描述
上面的菜单图标可以这里找到喜欢的unicode并且填入.
在这里插入图片描述

细心的同学可能会发现: 即使我们现在添加菜单成功, 页面也没用显示刚刚我们创建的菜单栏.

现在我们刷新一下当前页面就会显示已经创建成功的菜单栏.

编写路由

这里开始我们假设开发者已经知晓jquery与html的编写与使用, 同时知道layui前端框架的使用方法.

如果开发者不懂上述内容, 可以自行在网上查找相关教程后继续学习.

路由与代码实现

为了本章节简单易懂, 我们注册了三个简单的一级页面路由与三个api路由.

同时导入admin.view与json库, 这在我们后面需要使用到.

local cfadmin = require "admin"
local json = require "json"

具体实现代码如下所示:

1. api路由

• /api/admin/test1

• /api/admin/test2

• /api/admin/test3

实现代码如下:

view.api("/api/admin/test1", function (ctx, db)
  return json.encode { code = 200, message = "这是/api/admin/test1的接口"}
end)

view.api("/api/admin/test2", function (ctx, db)
  return json.encode { code = 200, message = "这是/api/admin/test1的接口"}
end)

view.api("/api/admin/test3", function (ctx, db)
  return json.encode { code = 200, message = "这是/api/admin/test1的接口"}
end)

2. use路由

• /admin/test1

• /admin/test2

• /admin/test3

实现代码如下:

view.use("/admin/test1", function (ctx, db)
  return view.template([[hello test1]]) { }
end)

view.use("/admin/test2", function (ctx, db)
  return view.template([[hello test2]]) { }
end)

view.use("/admin/test3", function (ctx, db)
  return view.template([[hello test3]]) { }
end)

关于view.template的使用方法, 可以从文档找到. 这里不再赘述.

规则

开发一个页面路由与接口需要知道以下几种内部规则:

• 页面use路由一般定义为/admin/+前缀.

• 接口api路由一般定义为/api/admin/+前缀.

前缀的意义

接口路由的前缀定义了这类接口需要传递一个Token的http协议头部, 这个头部在admin库内部会进行认证. 无效或权限不足的用户将会无法访问.

页面路由的前缀定义了页面路由所属后台页面, 任何人放这个页面都将会进行权限认证. 无效或权限不足的用户将会无法访问.

需要注意的是: 上述只能使用admin.view库的注册的页面与接口路由才能被保护.(内部实现重写了app:before方法, 请不要自行再次注册这个方法).

测试

1. 测试use路由

依次打开前面我们注册的三个页面路由查看效果:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

很好, 所有页面都已经正常运行.

2. 测试api路由

依次打开前面我们注册的三个接口路由查看效果:

在这里插入图片描述

你会发现所有接口路由都因为没有认证与权限被拒绝.

这没有关系, 后面我们讲解路由联动的时候会涉及到这里.

完整代码

local httpd = require "httpd"
local app = httpd:new("http")

-- httpd启用Cookie扩展
app:enable_cookie()
-- httpd设置Cookie加密的密匙
app:cookie_secure("candymi")


local DB = require "DB"

local db = DB:new {
  host = "localhost",
  port = 3306,
  username = 'root',
  password = '123456789',
  database = 'cfadmin',
  charset = 'utf8',
  max = 100,
}

db:connect()

-- 导入cf内置的admin库
local cfadmin = require "admin"

-- 注册后台页面路由
cfadmin.init_page(app, db)


local view = require "admin.view"
local json = require "json"


view.use("/admin/test1", function (ctx, db)
  return view.template([[hello test1]]) { }
end)

view.use("/admin/test2", function (ctx, db)
  return view.template([[hello test2]]) { }
end)

view.use("/admin/test3", function (ctx, db)
  return view.template([[hello test3]]) { }
end)

view.api("/api/admin/test1", function (ctx, db)
  return json.encode { code = 200, message = "这是/api/admin/test1的接口"}
end)

view.api("/api/admin/test2", function (ctx, db)
  return json.encode { code = 200, message = "这是/api/admin/test1的接口"}
end)

view.api("/api/admin/test3", function (ctx, db)
  return json.encode { code = 200, message = "这是/api/admin/test1的接口"}
end)


app:static("static")

app:listen("", 9090)

app:run()

最后

下一章节我们继续学习admin库的路由联动与页面模块化