本文主要是介绍JsyangAdmin：让前端er也可以快速进行全栈开发,欢迎star，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JsyangAdmin

基于nodejs+egg+squelize+mysql+antd-design+wangEditor+dva+umi+react开发的后台管理平台快速生成方案，让前端er也可以快速进行全栈开发

示例：jsyang-admin.huangyanyang.cn/

文档：jsyangadmin.github.io/

使用教程

登录后台

默认登录账号:admin,密码：jsyang666

这两个写死在代码里了,可以在/jsyang-admin/app/controller/admins.js下的adminLogin函数去修改对应代码

创建没有生成代码和管理员管理菜单的用户

点击管理员管理-新建-输入账号密码-确定

生成最简单的curd(增删改查)界面

假设我们现在要做有个学生统计表，学生有id,学号sid，性别sex,年龄age,电话号码telphone，学分score,创建时间created_at,更新时间updated_at这些字段，现在我们需要给他做一个增删改查的功能，同时还要提供接口给移动端或者其他客户端使用，看看我们怎么通过JsyangAdmin快速实现这个功能:

新建一个符合以上需求的对象(建议在ide中用js文件编写，可以事先检查语法错误):

{
  id: { type: 'INTEGER', primaryKey: true, autoIncrement: true, comment: '学生ID' },
  sid: { type: 'STRING(50)', comment: '学号' },
  sex: { type: 'INTEGER',comment: '性别' },
  age: { type: 'INTEGER', comment: '年龄' },
  telphone: { type: 'STRING(20)', comment: '电话号码' },
  score: { type: 'INTEGER', comment: '学分' },
  created_at: { type: 'DATE', comment: '创建时间' },
  updated_at: { type: 'DATE', comment: '更新时间' }
}
复制代码

• 点击代码生成
• 输入菜单名：学生管理（提交后将在左边侧边栏显示)
• 输入报名: student (将会作为生成的代码的包的命名，包括后台接口名等等)
• 字段结构选择代码形式（图形化形式还在开发中⊙﹏⊙||| ）
• 将以上写好的对象复制进Model定义源代码的输入框中
• 点击提交

如果看到提交成功的提示说明代码已经生成成功，这时候你会看到前台和后台的两个命令行窗口已经开始自动编译，运行了:

这个时候先不要急着点击学生管理查看效果，会报错的，因为数据表还没生成呢，所以还需要一步(这里后续会考虑引入shell.js自动执行，再给大家省点心😁)

生成数据表

上述生成的代码包含在jsyang-admin/database/migrations/students.js，所以我们可以在根目录执行下面的命令生成student表：

npx sequelize db:migrate

Sequelize CLI [Node: 10.16.0, CLI: 5.5.1, ORM: 4.44.4]

Loaded configuration file "database/config.json".
Using environment "development".
sequelize deprecated String based operators are now deprecated. Please use Symbol based operators for better security, read more at http://docs.sequelizejs.com/manual/tutorial/querying.html#operators node_modules/.4.44.4@sequelize/lib/sequelize.js:245:13
== students: migrating =======
== students: migrated (0.264s)
复制代码

可以看到studen种子文件已经被播种生成了students表了,去mysql看一下:

mysql> use jsyang_admin
Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Database changed
mysql> show tables;
+------------------------+
| Tables_in_jsyang_admin |
+------------------------+
| SequelizeMeta          |
| admins                 |
| students               |
+------------------------+
3 rows in set (0.00 sec)
复制代码

确定students表生成成功，现在我们可以放心地去点击前台的学生管理菜单查看效果了：

测试增删改查功能

• 新增 & 查看

  

  

• 编辑

• 删除

  

  

  

进阶

高级类型

图片类型 && 富文本类型 && 关联类型

现在要做一个商品上架功能，操作跟上一章一样

 {
  id: { type: 'INTEGER', primaryKey: true, autoIncrement: true, comment: '商品ID' },
  title: { type: 'STRING(50)', comment: '商品名称' },
  category: {
    type: 'relate',
    relation: [
      { label: '服装', value: 1 },
      { label: '食品', value: 2 },
      { label: '日常用品', value: 3 },
      { label: '电子产品', value: 4 },
      { label: '书籍', value: 5 }
    ],
    comment: '商品分类'
  },
  img: { type: 'img', comment: '商品图片' },
  detail: { type: 'richtext(3000)', comment: '商品详情' },
  storeNumber: { type: 'INTEGER', comment: '库存' },
  status: {
    type: 'relate',
    relation: [
      { label: '上架', value: 1 },
      { label: '下架', value: 2 },
      { label: '售罄', value: 3 }
    ],
    comment: '状态'
  },
  created_at: { type: 'DATE', comment: '创建时间' },
  updated_at: { type: 'DATE', comment: '更新时间' }
}
复制代码

为了保留状态，这次我们可以通过项目提供的接口/localhost:7001/api/code/produce进行代码生成，使用postman进行接口提交

这个接口还提供了一个参数icon用于设置菜单的图标，支持的图标可以查看antd-design图标文档

点击提交发送参数到接口

接口返回代码生成成功，这时候前台和后台又会检测到代码变化，重新开始编译，编译完记得运行npx sequelize db:migrate进行数据表的生成哦

npx sequelize db:migrate

Sequelize CLI [Node: 10.16.0, CLI: 5.5.1, ORM: 4.44.4]

Loaded configuration file "database/config.json".
Using environment "development".
sequelize deprecated String based operators are now deprecated. Please use Symbol based operators for better security, read more at http://docs.sequelizejs.com/manual/tutorial/querying.html#operators node_modules/.4.44.4@sequelize/lib/sequelize.js:245:13
== goods: migrating =======
== goods: migrated (0.204s)
复制代码

之后就是点击生成的菜单商品管理进行增删改查的测试啦

• 关联类型

  

• 图片类型 & 富文本类型

  

  

  点击确定，新增成功！

  

编辑和删除和上一章操作一样，这里不再赘述。

生成接口给客户端（如你的商城APP、小程序等)使用

每次你生成一次代码，都会在egg的路由中生成一套restful风格的接口。

你可以通过这些接口在你的客户端中进行增删改查，如果你觉得这些功能还不能满足你的需求（比如一些联表查询操作等),你可以通过学习egg开发找到对应的源代码进行修改😉

比如上面的商品管理功能会生成如下的接口

请求方式	接口路径	接口功能
GET	/goods	获取所有商品数据
GET	/goods/:id	获取单个商品数据
POST	/goods	新增商品
PUT	/goods/:id	修改单个商品数据
DELETE	goods/:id	删除单个商品

具体实现可以查看egg restful风格路由

登录普通权限的账号查看效果

可以看到，使用我们在管理员管理的账号密码登录后只能看到学生管理和商品管理两个菜单，并没有管理员管理和代码生成两个菜单权限，这样就可以将这个账号密码给你的客户使用了。

当然最好不要将代码中具有超级管路员权限的账号admin密码jsyang666直接部署到你的应用中，你应该自己去修改代码，以免具有超级管理员权限的账号密码被坏人使用，造成损失。作者接下来也会努力在权限方面进行开发迭代，以降低这个风险。

首次登陆你可能会进入这个页面

那是因为首页设置默认路由是http://localhost:8000/#/manage/admin,而这个路由只有超级管理员才有权限访问，所以会显示403,你可以去antd-pro的路由配置更改默认路由为http://localhost:8000/#/manage/student,这样你的客户刚登陆进来就不会一头雾水了。

    routes: [
// ---        { path: '/', redirect: '/manage/admin' },
+++        { path: '/', redirect: '/manage/student' },
复制代码

这篇关于JsyangAdmin：让前端er也可以快速进行全栈开发,欢迎star的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！