项目主要有两个controller：①skins；②convert
skins主要负责皮肤相关的增删改查
convert主要负责将皮肤配置项转为特定的格式
以 RESTful 的方式来定义路由
| Method | Path | Controller.Action |
|---|---|---|
| GET | /skins | app.controllers.skins.index |
| GET | /skins/:id | app.controllers.skins.show |
| POST | /skins | app.controllers.skins.create |
| PUT | /skins/:id | app.controllers.skins.update |
| DELETE | /skins/:id | app.controllers.skins.destroy |
覆盖了皮肤的增删改查和全部查看
在前端项目中，用store存储所有的settings，根据处于哪个组件划分module，一个module存储一个组件的settings
然后在更改任何一个state的属性值时，立即向服务器发送所有的store.state的值，保存/更新AllSettings
服务器存储的AllSettings的格式类似js，如下：
colorDefaultOne: '#F7F7F7',colorDefaultTwo: '#F2F2F2',colorDefaultThree: '#EDEDED',colorDefaultFour: '#E6E6E6',colorDefaultFive: '#D9D9D9',colorDefaultSix: '#999'在convert/js/:name中将存储的AllSettings的格式转换为js文件所需的格式，如下：
colorDefaultOne: '#F7F7F7';
colorDefaultTwo: '#F2F2F2';
colorDefaultThree: '#EDEDED';
colorDefaultFour: '#E6E6E6';
colorDefaultFive: '#D9D9D9';
colorDefaultSix: '#999';同时提供转换为scss文件的api，convert/scss/:name
function jsToScss(js) {
// 1. 添加开头的$；
let scss = '$' + js;
const arr = scss.split(':');
// 2. 将变量名从小驼峰式改为用-连接
const nameArr = arr[0].split('');
const length = nameArr.length;
for (let i = 1; i < length; i++) {
if (nameArr[i].toUpperCase() === nameArr[i]) {
nameArr.splice(i, 0, '-');
nameArr[i + 1] = nameArr[i + 1].toLowerCase();
}
}
arr[0] = nameArr.join('');
// 3. 将变量值的引号去掉
arr[1] = arr[1].replace(/\'/g, '');
scss = arr.join(':');
scss += ';';
return scss;
}这里传回的都是字符串，前端需要读取内容并指定后缀名下载
观察custom.scss文件，可以发现其中import了许多文件，最后将其中的变量重写覆盖，最后作用到具体的html标签中
sass官方中scss转css的方法有以下两种：compile和compileString
const sass = require('sass');
// 将scss文件转为css
const result = sass.compile("style.scss");
console.log(result.css);
// 将字符串转为css
const result = sass.compileString(`
h1 {
font-size: 40px;
code {
font-face: Roboto Mono;
}
}`);
console.log(result.css);如果用文件：优点：可以直接支持import其他文件（应该是可以正常解析的）；缺点：需要额外直接转存上文生成的css文件
如果用字符串：优点：不需要文件操作的任何支持，直接生成；缺点：需要将其他import的文件先处理成字符串然后和上文生成的scss字符串进行拼接（可能会有顺序上的问题）
最后还是生成css字符串而不是文件，让前端自己处理下载格式
已经在/test中进行了测试，
compileString可以正常的覆盖解析变量，生成css格式字符串，已经选择使用这种方式
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent