项目预览
自定义脚手架
- 克隆
cli-creator到本地
git clone https://gitee.com/steveouyang/cli-creator.git
- 脚手架配置实例 根目录/project.config.json
{
"package": "cli-creator",
/* 脚手架名称 */
"cmdName": "ocli",
/* 【用户家目录下】的全局配置文件 */
"rcFile": {
/* 配置文件名 */
"name": ".oclirc",
/* 给全局配置文件注入的默认数据 */
"default": {
/* github用户名 */
"registry": "ouyangsuo",
/* 其它自定义信息 */
"type": "users",
"author": "steveouyang"
}
},
/* 模板信息（ocli init 模板名字） */
"templates": {
// 模板仓库地址github/ouyangsuo/mongo-expresser
"mongo-expresser": "express+mongodb服务端代码生成器",//模板存在
"vue-client": "vue3+vueRouter+vuex+vant移动端项目",//模板工程暂时不存在
"vue-manager": "vue3+vueRouter+vuex+element中后台项目",//模板存在
"vue-uniapp": "vue3+uniapp小程序项目"//模板工程暂时不存在
}
}
- 安装依赖 有忽略报错之
cd cli-creator
npm install
- 修改package.json
{
...
"bin": {
/* ocli改成自己的脚手架名字 */
"ocli": "./bin/www"
},
"scripts": {
"compile": "babel src -d dist",
"watch": "npm run compile --watch",
/* ocli改成自己的脚手架名字 */
"postinstall": "ocli config set"
},
...
}
- 编译并生成目标代码
cd cli-creator
# 删除dist目录
rimraf ./dist
# 编译脚手架到到dist目录
npm run compile
- 将自定义脚手架注册为全局CMD命令
cd cli-creator
# 将自定义脚手架注册为全局CMD命令
npm link
- 测试脚手架
# 在终端的任意位置输入以下命令，如果出现使用帮助信息则意味着脚手架命令注册成功
ocli -v 或 ocli --version
ocli -h 或 ocli --help
- 解除脚手架注册
# 在任意位置输入
npm unlink -g cli-creator
创建后台/服务端项目
- 使用脚手架创建工程
# mongo-expresser为工程的模板代码
# 默认地址：https://github.com/ouyangsuo/mongo-expresser
# 自己如果有github账号，可以将上述工程fork一份到自己的账号下
ocli init mongo-expresser myserver
- 安装依赖
cd myserver
npm install
- 配置工程模块信息
{
// 数据库名称
"dbName": "mydb",
// 服务端运行端口
"port": 8002,
// token秘钥
"jwtSecret": "jinwandalaohu",
// token的默认有效时长
"tokenAge": "3600s",
// 路由模块配置
"routes": [
/*
为film模块生成一整套接口
POST /film/0 + JSON或form格式的请求体 = 插入单个film
POST /film/-1 + JSON请求体携带数组 = 批量插入多个film
DELETE /film/:id = 删除单个film
PUT /film/:id + JSON或form格式的请求体 = 修改单个film
GET /film/:id = 查询单个film信息
GET /film/0 = 查询所有film
*/
{
"name": "film",
"middlewares": {
/* 为系列接口配置鉴权中间件
adminCheck=管理员校验（注册时admin字段须为true）
loginCheck=登录校验
登录成功后 服务端的返回信息中有token 需在后续请求中使用authorization="Bearer token的值"
*/
"create": ["adminCheck"],
"createMany": ["adminCheck"],
"retrieve": [],
"retrieveMany": ["loginCheck"],
"update": ["adminCheck"],
"delete": ["adminCheck"]
}
},
{
"name": "city",
"middlewares": {
"create": ["adminCheck"],
"createMany": ["adminCheck"],
"retrieve": ["loginCheck"],
"retrieveMany": ["loginCheck"],
"update": ["adminCheck"],
"delete": ["adminCheck"]
}
}
]
}
- 运行服务端
npm run start
此时所有模块的CRUD接口已经生成完毕
服务端功能列表
所有模块的CRUD
- POST /film/0 + JSON或form格式的请求体 = 插入单个film
- POST /film/-1 + JSON请求体携带数组 = 批量插入多个film
- DELETE /film/:id = 删除单个film
- PUT /film/:id + JSON或form格式的请求体 = 修改单个film
- GET /film/:id = 查询单个film信息
- GET /film/0 = 查询所有film
静态文件服务
- localhost:8002/img/huya.webp 对应着public目录下的同名文件
上传服务
- localhost:8002/page/file_upload.html 上传页面
- 使用表单上传单个文件+输入文件名，文件会存储到服务端的public/upload目录下
创建中后台/管理端项目
- 使用脚手架拉取github上的模板代码创建工程框架
# vue-manager对应着模板工程：https://github.com/ouyangsuo/vue-manager
# mymanager是自己的工程名字
ocli init vue-manager mymanager
- 安装依赖 + 运行代码
cd mymanager
npm install
npm run dev
工程结构
- public 静态资源目录 将来可以通过baseUrl/favicon.ico方式来访问
- src
- api = axios三层封装
- assets = 内涵常用的样式定义 +高频scss变量和mixin + 组件切换动画
- demos = 主要框架的demo代码，例如：ElementPlus,Echarts（待扩展）...
- directives = 常用的自定义指令
- hooks = 常用的自定义hook
- router = 路由表，包含首页、登录页、demo集（嵌套路由）、404...
- store = 中央数据仓库，包含子模块demo，包含持久化配置
- views = 存放页面级组件
- components = 可复用组件
- App.vue = 根组件，已经配置了组件切换动画
- main.js = 已经全局配置好了ElementPlus + vuex + vue-router + 全局自定义指令注册；后续如果有自定义组件库，还可以继续扩展...
- package.json = 已经引入了axios,vuex,vuex-persistedState,vue-router,ElementPlus等常用依赖
- vite.config.js = 打包配置文件，已经将上述主要目录路径做了别名，跨域配置（待扩展）...
