基于Layui的单页版后台管理

web前端 2019年06月28日 15:17 Norsl 229 5

首先说一下什么是单页面应用

首先,从名字来看,“单页面”的意思就可以理解为只有一个页面,所有页面的显示/隐藏/切换,都是通过javascript来动态完成的,控制不同的DOM节点隐藏和显示。

页面的显示与切换是通过url地址的hash部分(xxx.com/#/user/info)来控制的,#开始往后的部分就称之为url地址hash部分,改变url地址的hash部分是不会让页面刷新的。在第一个#后面出现的任何字符,都会被浏览器解读为位置标识符。这意味着,这些字符都不会被发送到服务器端。所以利用这一点就实现了无刷新切换页面。而页面上的数据则全是通过ajax的方式来进行获取。

单页面应用较传统的页面比起来,加载速度更快,用户体验更好,但开发成本比传统的网页要更有难度,要求对javascript有一定的了解,但维护起来却更简单,因为都是模块化的。


这是两三个月前做的一个Demo,算是个半成品,但单页面应用的基础功能都实现了,有兴趣的童鞋可以试试,可以基于我做的这个进行扩展,看看效果图吧,仔细看url部分,通过改变hash部分来使页面切换,你只有自己弄到本地浏览才能感觉到(要放到web环境)

这个是首页(对应src/view/admin.html文件)

1561705316913224.png


文章管理页(对应src/view/article/list.html文件)

1561705407807650.png


设置页(对应src/view/other/setting.html文件)

1561705558683920.png


这是文件结构view下面就是各种视图文件,就像上面这三个页面。

db.json是一个数据测试文件,像首页和文章管理列表里面的那些数据,都是通过ajax在这个文件获取的,到时候你可以换成你的api获取真实数据。

QQ截图20190628150854.png


下载地址:layadmin.zip (解压密码norsl.cn)

或者clone:https://gitee.com/norsl/layadmin


如果需要修改或者是添加页面,建议会使用layui,不然可能有点麻烦

说点什么吗?

你的电子邮箱地址不会被公开。必填项已用 * 著名

*
*
验证码
  • repostone 2019年08月05日 16:32

    非技术的路过。

    Norsl 2019年08月05日 17:13

    其实也没啥技术含量
  • 景安快云 2019年07月19日 16:06

    贵站链接已加
  • 景安快云 2019年07月19日 13:35

    交换链接吗

    Norsl 2019年07月19日 14:29

    可以啊,已经做好链接了。

Norsl の 个人名片

职业:web开发

现居:四川 成都

Git:https://gitee.com/norsl

邮箱:3136904131@qq.com

最新评论

  • 小趣 : 这个目前没有尝试过
  • repostone : 从来没用过这些。
  • repostone : 顺便路过,留下一个足迹。
  • 林三 : 我也很久没有清理友链了,现在更新和回复好多哇!
  • 林三 : 我也好久没有清理友链了,现在更新和回复已经很忙了的说。
  • Norsl : 已经更新好了,就是访问你之前的域访问不到了。
  • 淡然若雅 : 换了新域名,有时间添加下。
  • Norsl : 这存款都是每个月工资里面抠出来的。哈哈哈
  • 萧瑟 : 不错呦,比我当初才出来的时候好多了,竟然还有小笔存款。
  • Norsl : 对啊,后面还要进行改版