# bootstrap-admin

**Repository Path**: jikey/bootstrap-admin

## Basic Information

- **Project Name**: bootstrap-admin
- **Description**: Koa2 - bootstrap版本的admin
- **Primary Language**: NodeJS
- **License**: MIT
- **Default Branch**: master
- **Homepage**: http://bootstrap.vyan.top
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 6
- **Created**: 2020-04-24
- **Last Updated**: 2022-05-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# bootstrap-admin

---


### 1. 相关介绍
前端基于 [Bootstrap](https://getbootstrap.com/) 框架，后端基于 [Koa2](https://koajs.com/)，模板基于 [Nunjucks](https://mozilla.github.io/nunjucks/cn/templating.html) 的一款Admin模板。

[在线预览](http://bootstrap.vyan.top/)
在线预览是 `php+laravel` 实现，此仓库为`node+koa`实现，里边的相关的 `css`, `html` 代码基本一样。


#### 1.1 基本介绍
- `来文设计` 名字唯一为便于搜索引擎和`Github`搜索直达，区别于其它开源项目。
- `Logo` 暂时空缺。

#### 1.2 技术栈
技术 | 说明 | 官网
----|----|----
Node | 基于 V8 开发平台 | [https://nodejs.org/zh-cn/](https://nodejs.org/zh-cn/)
Koa2 |  Web 应用框架 | [https://koajs.com/](https://koajs.com/)
nunjucks | 模板引擎 | [https://mozilla.github.io/nunjucks/](https://mozilla.github.io/nunjucks/)
Nodemon |  自动重启服务 | [https://nodemon.io/](https://nodemon.io/)


##### 1.2.1 Admin
整个的文件结构都基于`admin`文件夹下，方便与其它项目整合。

##### 1.2.2 Home
整个前台展示的页面，属于空缺部分。


#### 1.3 开发工具

系统 | 工具 | 官网
----|----|----
VScode | 主开发工具 | [https://code.visualstudio.com/](https://code.visualstudio.com/)
Webstorm | 开发工具(兼Git提交) | [https://www.jetbrains.com/webstorm/](https://www.jetbrains.com/webstorm/)
Atom | 源码阅读工具 | [https://atom.io/](https://atom.io/)
Cmder | Cmd替代工具[windows] | [https://cmder.net/](https://cmder.net/)
Notepad2 | 临时单文件编辑[windows] | [http://www.flos-freeware.ch/notepad2.html](http://www.flos-freeware.ch/notepad2.html)
Chrome | 调试工具 | [https://www.google.com/intl/zh-CN/chrome/](https://www.google.com/intl/zh-CN/chrome/)

#### 1.4 文件结构

```
├─config                // 配置
├─node_modules
├─public                // 公共静态资源
│  ├─bootstrap
│  │  ├─css
│  │  └─js
│  ├─css
│  │  ├─app.css
│  │  └─override.css
│  ├─examples
│  │  └─data
│  ├─font-awesome
│  ├─iconfont
│  ├─images
│  └─js
│      ├─libs
│      │  ├─g2
│      │  ├─jquery
│      │  ├─jquery-easing
│      │  ├─lodash
│      │  ├─nunjucks
│      │  ├─popper
│      │  ├─screenfull
│      │  └─settingDrawer
│      └─tinymce4.7.5
├─routes                // 路由
└─views                 // view层页面
	├─common
	├─error
	└─layouts
```

#### 1.5 如何启动
整个项目在admin 下，所以进入项目根目录之后还需要进入`cd admin`, 然后`npm i` 安装依赖，通过`npm start`来调用Nodemon启动服务

#### 1.6 如何参与
在 [Trello](https://trello.com/) 上认领任务之后，Fork项目clone到本地

- 增加路由 `admin\routes\index.js`
- 增加文件 `admin\views`
- 修改链接 `admin\views\layouts\_sidebar.njk`
- 刷新页面预览，如果没有效果，手动 `cmd` 输入命令 `rs` 重启服务


### 2. 开发约定
#### 2.1 Html
目前是基于`Html4`写的结构，可以用`Html5`的标签，比如`header`,`footer`,`nav`等
#### 2.2 CSS

- `admin/public/css/app.css`
框架核心css文件，可以增加此框架相关的核心css样式，以补充bootstrap样式的不足。比如bootstrap的按钮样式不满足想新加一个样式，可以写在此文件中。加注释，最后属性另分号。如：
```css
// Button
.btn-new{backgourd:#000;}
```
- `admin/public/css/override.css`
用来覆盖bootstrap样式问题，比如一个btn的圆角不符合期望值，可以直接在此文件中覆盖。不修改bootstrap本身css文件单纯抽出文件的好处，以便于bootstrap版本升级之后，功能还能保留。
- `admin/public/css/demo.css`
是此demo中所有相关的文件，与核心框架无关的样式控制。比如：代码着色相关的，只是此演示demo中用到。

#### 2.3 Javascript

- 核心依赖 `public/static/bootstrap/js/bootstrap.min.js`
- 与此框架相关的依赖放在此文件夹中 `public/js/libs`
- 与此框架相关的依赖放在此文件夹中`admin/public/js/libs`
拷贝文件之后在 `admin/views/common/_js.njk` 中增加引入路径，就可以在页面中正常使用。为了方便管理依赖相关的 `js,css `文件都放在此文件夹下。
- 此文件 `admin/public/js/app.js` 为此框架核心文件，当中有核心的命名空间的管理，以App为整个调用方式的引用命名
- `admin/public/js/index.js` 此文件为框架相关处理文件
- `admin/public/js/demo.js` 此文件为 `demo` 相关处理文件