快速开发一个Web-Admin系统

两种解决方案

1. Django Admin
2. vue-element-admin

分层设计

1. DB
   • MySQL ☆
   • PostgreSQL
   • SQLite
2. ORM/Restful API
   • Python
     • Django
     • Django Framework ☆
     • Restful API
   • Java
   • Go
3. F2E
   • Vue
     • element
     • vue-element-admin ☆
   • AngularJS
   • React

vue-element-admin

定位是后台集成方案，不适合当基础模板来开发

1. vue
2. eleme
3. vue-element-admin

JS/Node/Vue

JS前世今生

• C-- (C minus minus)
  • ScriptEase
• LiveWire
  • LiveScript
    • JavaScript
• JScript/VBScript

JavaScript标准

• ECMAScript
  • JavaScript
  • ActionScript
  • QtScript
  • WMLScript

JavaScript版本

• ES2（1998年6月）
• ES3（1999年12月）
• ES4（第四版因为过于复杂废弃了）
• ES5（2009年12月）
• ES6（2015年6月17日）

社区规范

• CommonJS（侧重服务器）
  • Nodejs
  • MongoDB
  • CouchDB
  • Ringojs
  • Preserver
• AMD规范（侧重浏览器）
  • require.js
  • curl.js
• CMD规范（侧重浏览器）
  • seajs

浏览器兼容性

• JavaScript
• DOM
• BOM
• CSS

JavaScript虚拟机

Node和浏览器都可以运行js代码，我们可以认为它们都是JS虚拟机的一种

• 开发时
  • Node: Npm/Webpack
• 运行时
  • Browser: Chrome/Firefox

Python虚拟机

• CPython
• PyPY
• Jython
• IronPython
• Stackless

Java虚拟机

• HotSpot VM
• J9 VM
• Zing VM

WebPack

image

生成代码

数据库设计约定

1. 如果表名user, 主键为id，则外键命名为user_id
2. 表名为名词，单数形式
3. 表名的复数形式直接追加s即可，不必考虑英语语法
4. 所有表都包括两个字段，created_at|updated_at
5. 所有表使用删除标记方式，is_deleted
6. created_at，插入记录时自动更新，应用层代码无需处理
7. updated_at，更新记录时自动更新，应用层代码无需处理
8. 若表名后缀为history，只允许查询和插入操作
9. 若表名后缀为runtime，数据必须保证和网关引擎(Edge)一致
10. 若字段名前缀为is_，表示字段类型为布尔类型
11. 外键表必须还有name字段

函数命名/定义约定

函数名 = 动作 + 资源 + 表现

  1 import fetch from '@/utils/fetch'
  2
  3 export function fetchPluginList(query) {
  4   ...
  5 }
  6 export function createPluginEntity(name, desc, created_at, updated_at, is_deleted) {
  7   ...
  8 }
  9
 10 export function updatePluginEntity(id, name, desc, created_at, updated_at, is_deleted) {
 11   ...
 12 }
 13

集成约定

• 要bundle，不要fork
  • Nginx
    • × Tenginx
    • √ Openresty
• 尽量不破坏原有代码结构，易于后续跟踪升级
• 尽量保持一致的代码风格

代码模板化

重点是抽象

1. 页面功能
2. 代码逻辑

Vue命名规范

• 视图
• 方法及放置顺序
• 数据属性
• 生命周期

实现

即将开源...