通过koa创建一个后端管理系统

熟悉前端的朋友都知道,node目前来说,已经深入了我们的整个前端开发中,现在的时代已经不是“一招鲜吃遍天”的时代,作为一个前端开发人员,我们也必须得熟悉一下一些后端的知识,本文将会给大家介绍到如何通过node的框架koa来创建一个后端管理系统。

本文中我们将会使用到一些第三方的工具:

bootstrap:响应式布局利器

参考网址:https://v3.bootcss.com/

admin-lte: 基于bootstrap的一套UI框架库

参考网址: http://adminlte.la998.com/documentation/index.html

node:

参考网址:http://nodejs.cn/, 本文中所有需要安装的模块均采用cnpm,如果你不知道可以参考淘宝NPM镜像:http://npm.taobao.org/

第一步、安装koa脚手架并且创建koa项目工程,运行案例

cnpm install koa-generator -g

koa2 management_system -e

cd management_system && npm install

SET DEBUG=koa* & npm start management_system

// 默认端口为3000,可以通过http://localhost:3000访问到当前的项目

第二步、下载UI框架,本文基于admin-lte 2.3.7版本:https://github.com/almasaeed2010/AdminLTE/archive/v2.3.7.zip

第三步、改造项目

3.1 复制静态资源文件到本项目目录中

3.2 修改views/index.ejs

将 starter.html中的内容全部复制到index.ejs中,

3.3 需要给index.ejs中html标签处添加lang =“zh-CN”,可以预防出现是否翻译窗体,查看页面出现如下效果

3.4 依据ejs模板语法分割页面

创建header.ejs、menu.ejs、sidebar.ejs、footer.ejs

将其负责部分复制到响应页面,然后通过include语法导入即可

如图所示:

3.5 更改左侧menu中的列表选项、注意图标的选择:http://adminlte.la998.com/pages/UI/icons.html

3.6 复制index.ejs页面,将其粘贴为casts/index.ejs、directors/index.ejs、users/index.ejs、movie/index.ejs,并为每个页面写入关键词便于区分,一定要注意对应页面的引入模块的路径问题

第四步、添加路由

4.1 创建users.js、movie.js、directors.js、casts.js,

4.2 打开app.js 注册一下路由,使其生效

4.3 修改views/menu.ejs中的路由连接,点击左侧连接查看效果即可

第五步、添加左侧menu点击过后的效果

給menu添加一个id,为menulist

給每一个页面对应添加如下代码,eq中的参数为对应的下标值

$('#menulist').find('li').eq(0).addClass('active');

总结:至此,我们的几个基于koa的后台管理系统基本就构建完成了,下一篇将会推出数据库(非关系型数据库mongodb)相关知识。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180820G13PJ600?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券