generator-node-vue-admin

express-admin

基于express+mongodb+vue后台管理模版

使用yoeman创建模板

安装 yo

[sudo] npm install -g yo

安装模板生成器

[sudo] npm install -g generator-node-vue-admin

新建一个项目目录并进入

mkdir dir && cd $_

使用模板，这个命令会自动安装依赖(npm install)，建议终止掉，然后使用 cnpm 或 yarn 来安装，因为速度飞快。

yo node-vue-admin

前台

cd frontend
npm i

开发

npm run dev

打开浏览器访问http://localhost:8999/manage

端口等配置在frontend/config/index.js中修改

上线

npm run build

执行build后，生成的index.html在backend/view中，静态文件存储在backend/pubilc/static文件夹中

后台

执行

gulp dev

gulp

使用gulp-nodemon和gulp-livereload配置刷新 如果使用gulp dev执行，会自动监听js改变，并重启服务。 监听public文件夹内'scss'文件改动，刷新浏览器

管理入口

执行`gulp dev`后，服务端地址为`http://localhost:3000`

config.js配置

• mongodbName 为数据库名称

修改访问IP限制次数或者提示

app.js 文件修改 limiter

route

• page
  • /manage 管理入口
  • /manage/show/login 登录、注册
• api
  • /manage/signin 登录
  • /manage/signup 注册
  • /manage/logout 退出    - /manage/import 上传文件 （使用方法请查看表单文件上传）

文件

• /controllers 控制器
  • admin 管理用户（登录、注册、退出）
  • page 页面入口
  • upload 基于milter组件的上传配置
• /models mongodb模型
  • admin 管理员模型
• /public 静态文件
  • files/ 上传文件存储位置，在/controllers/upload.js中配置
  • images/ 图片
  • js/ JavaScript存放地址
  • style/ 样式文件。可以使用css或者less，less使用less-middleware编译，在app.js中配置
  • static/ 使用vue生成的静态文件
• /route 路由
• /views ejs模版
• app.js 入口文件
• config.js 配置文件
  • mongodbName 在mongodb中数据库名

License

MIT © JakeLaoyu