乐趣区

关于前端:CMS系统开发后台模板搭建

jiezi

站在伟人的肩膀上，让咱们能够走的更高看的更远。

在调研和学习 CMS 零碎的过程中，我发现了一个国人开发的基于 Node 的 CMS，名字叫 NoderCMS，这款 CMS 无论是 UI 还是性能我感觉都很不错，很玲珑，不过曾经进行更新很多年了，但依然值得学习，我的第一版的开发也以这款软件为根底。

他在技术选型上，后盾用的 Angular，数据库用的 mongodb，UI 框架用的 Bootstrap3。而我数据库用的 SQLite，模板渲染用的传统的 ejs，UI 用的 ulu-ui，仿佛齐全不一样。

这里说下 UI 为什么用 lulu-ui，这款 ui 是张鑫旭大佬开发的，体积很小，提供了外围的性能和罕用组件，对于我要开发的 CMS 来说是不多不少，十分符合，而且这款 UI 不依赖其余库，js 也是用原生写的，所以渲染十分快。而且兼容 IE，我要写的这个我的项目也须要兼容 IE。

当然在抉择这款 UI 前，我也看了很多其余框架，比方 bootstrap、tailwindCSS 等等，然而他们都太宏大了，而且 API 很多，这点不合乎我的我的项目。

上面是搭建好的后盾，一张预览图

在开发初期，我没有用任何构建工具，而后像 less 和 es6 啥的都不能用，明天我基于 gulp 简略的写了个构建流，可能满足根本要求，模板目录看起来像上面这样：

在一个模块外面写 less、ejs 和 js，一个文件夹一个模块，而后编译后的文件放到 public 目录下，文件夹和模块名字一一对应，上面是编译后的构造：

 整个 gulp 配置很简略，gulpfile 文件如下：const gulp = require('gulp');
const less = require('gulp-less');
const path = require('path');
const autoprefixer = require('gulp-autoprefixer');
const babel = require('gulp-babel');
const del = require('del');
const sourcemap = require('gulp-sourcemaps');
const gutil = require('gulp-util');
const buildPath = path.join(__dirname, 'app/public/admin');

const log = gutil.log.bind(this);
// 编译 less
function style() {
  return gulp
    .src('app/view/admin/**/*.less')
    .pipe(less())
    .pipe(autoprefixer())
    .pipe(gulp.dest(buildPath));
}

// 编译 js
// 保留 sourcemap 不便调试
function script() {
  return gulp
    .src('app/view/admin/**/*.js')
    .pipe(sourcemap.init())
    .pipe(babel({ presets: [ '@babel/env'] }))
    .pipe(sourcemap.write('.'))
    .pipe(gulp.dest(buildPath));
}

// 文件删除后，编译文件也删除
function fileWatch() {const w1 = gulp.watch('app/view/admin/**/*.less', style).on('unlink', function (file) {log(gutil.colors.yellow(file) + 'is deleted');
    log(file);
    const filePath = file.replace(/view\//, 'public\/').replace('.less', '.css');
    del([filePath]);
  });

  const w2 = gulp.watch('app/view/admin/**/*.js', script).on('unlink', function (file) {log(gutil.colors.yellow(file) + 'is deleted');
    const filePath = file.replace(/view\//, 'public\/');
    const fileMapPath = filePath + '.map';
    del([filePath, fileMapPath]);
  });

  return Promise.all([w1, w2]);
}
exports.default = gulp.series(style, script, fileWatch);

到当初为止，后盾模板曾经初具雏形了，接下来是数据库表设计，前面还要开发一款 markdown 编辑器（不得不本人开发，没找到适合的），长征之路曾经踏出了第一步

退出移动版