资金管理系统(带权限)
资金管理系统(带权限)
项目地址:https://github.com/Allenem/CapitalManagementSystem.git 一、快速开始git clone https://github.com/Allenem/CapitalManagementSystem.git npm install cd client npm install cd ../ npm run dev 服务端地址:http://localhost:5000,客户端地址:http://localhost:8080 二、文件结构说明1.结构树根目录下打开 . │ package-lock.json │ package.json │ README.md │ server.js │ ├─client │ │ .gitignore │ │ babel.config.js │ │ package-lock.json │ │ package.json │ │ README.md │ │ vue.config.js │ │ │ ├─public │ │ │ favicon.ico │ │ │ index.html │ │ │ │ │ └─css │ │ reset.css │ │ │ └─src │ │ App.vue │ │ http.js │ │ main.js │ │ router.js │ │ store.js │ │ │ ├─assets │ │ 403.png │ │ 404.gif │ │ bg.jpg │ │ coin.png │ │ showcase.jpg │ │ │ ├─components │ │ Dialog.vue │ │ HeadNav.vue │ │ LeftMenu.vue │ │ │ └─views │ 404.vue │ ChangeList.vue │ FundList.vue │ Home.vue │ Index.vue │ InfoShow.vue │ Login.vue │ Register.vue │ UserList.vue │ ├─config │ keys.js │ passport.js │ ├─effectImg │ …… │ ├─models │ Profile.js │ User.js │ └─routers └─api profiles.js users.js 2.结构说明①后端文件主文件
两个模型
路由配置
常量和token验证
②前端文件vue默认配置
入口文件
根组件
路由配置
库的引用
loading,请求拦截,响应拦截
vuex存储
静态文件夹
页面文件夹
组件文件夹
三、功能说明
四、效果展示test无身份,all为管理员 注册页,登录页 主页,非管理员资金流水页 非管理员资金流水页筛选,非管理员修改记录 非管理员个人信息页,非管理员全员信息页 管理员资金流水页(5/page,10/page) 管理员资金流水页编辑,管理员个人信息页 管理员全员信息页,管理员全员信息筛选 五、接口说明用户部分1.users数据库测试接口地址:http://localhost:5000/api/users/test 请求方式:get 请求示例:Examples 接口参数: 1.请求参数说明: { } 2.返回参数说明: { "msg":"users test api works" } 2.用户注册接口地址:http://localhost:5000/api/users/register 请求方式:post 请求示例:Examples 接口参数: 1.请求参数说明: { "name": "test","email": "[email?protected]","password": "123456","identity": "manager" } 2.返回参数说明: { "name": "test","email": "[email?protected]","avatar": "xxx","identity": "manager" } 3.用户登录接口地址:http://localhost:5000/api/users/login 请求方式:post 请求示例:Examples 接口参数: 返回参数说明: 1.请求参数说明: { "email": "[email?protected]",} 2.返回参数说明: { "success": true,"token": "'Bearer' + token" } 4.获取当前用户接口地址:http://localhost:5000/api/users/current 请求方式:get 请求示例:Examples 接口参数: 返回参数说明: 1.请求参数说明: { } 2.返回参数说明: { "id": "qwertyuiopasdfghjklcvbnm","name": "test","email": "[email?protected]","identity": "manager" } 5.获取所有用户信息接口地址:http://localhost:5000/api/users/ 请求方式:get 请求示例:Examples 接口参数: 返回参数说明: 1.请求参数说明: { } 2.返回参数说明: { "user": [ { "_id": "5d320d3bb77a763724d503d9","email": "[email?protected]","avatar": "//www.gravatar.com/avatar/1aedb8d9dc4751e229a335e371db8058?s=200&r=pg&d=mm","password": "$2b$10$TBjcpQBI2hsXfZMB5DKzXuQBeevJI7mc7GuootkbwscUT9A/wiI6S","date": "2019-07-19T18:34:35.489Z","__v": 0 },{ "_id": "5d32b28ae6b23dcb8dd4f727","name": "abc","email": "[email?protected]","avatar": "//www.gravatar.com/avatar/4adcca49b3b1e5a08ac202f5d5a9e688?s=200&r=pg&d=mm","password": "$2b$10$TFjKmx0vtwbDjQMr6R0kNeQ/jQvDLzCksDPXebDBJyykahun7Cnhi","identity": "employee","date": "2019-07-20T06:19:54.158Z","__v": 0 } ] } 资金流水部分1.profiles数据库测试接口地址:http://localhost:5000/api/profiles/test 请求方式:get 请求示例:Examples 接口参数: 1.请求参数说明: { } 2.返回参数说明: { "msg":"profiles test api works" } 2.资金流水添加接口地址:http://localhost:5000/api/profiles/add 请求方式:post 请求示例:Examples 接口参数: 返回参数说明: 1.请求参数说明: { "type":"优惠券","describe":"买书","income":"30","expend":"20","cash":"10","remark":"开心" } 2.返回参数说明: { "type":"优惠券","remark":"开心" } 3.资金流水获取全部接口地址:http://localhost:5000/api/profiles/ 请求方式:get 请求示例:Examples 接口参数: 返回参数说明: 1.请求参数说明: { } 2.返回参数说明: { "profile": [ { "type":"优惠券","remark":"开心" },{ "type":"礼券","describe":"充值","income":"50","cash":"30","remark":"好开心" } ] } 4.资金流水获取单个接口地址:http://localhost:5000/api/profiles/id 请求方式:get 请求示例:Examples 接口参数: 返回参数说明: 1.请求参数说明: { "id":"5d320d3bb77a763724d503d9" } 2.返回参数说明: { "_id":"5d320d3bb77a763724d503d9","type":"优惠券","remark":"开心" } 5.资金流水编辑接口地址:http://localhost:5000/api/profiles/edit/id 请求方式:post 请求示例:Examples 接口参数: 返回参数说明: 1.请求参数说明: { "type":"优惠券","remark":"开心" } 6.资金流水删除接口地址:http://localhost:5000/api/profiles/delete/id 请求方式:delete 请求示例:Examples 接口参数: 返回参数说明: 1.请求参数说明: { "id":"5d320d3bb77a763724d503d9" } 2.返回参数说明: { "_id":"5d320d3bb77a763724d503d9","remark":"开心" } //已删除的信息 (附)打码过程记录1.后端接口配置(nodejs,express)
MongoDB Atlas 官网免费注册申请 MongoDB Atlas 云数据库 postman 下载安装软件进行接口测试
2.前端页面书写(vue-cli 3.9.3,element-ui)
总文件目录下运行 配置前端 "scripts": { "serve": "vue-cli-service serve","build": "vue-cli-service build","start": "npm run serve" }, 配置总文件 "scripts": { "client-install": "npm install --prefix client","client": "npm start --prefix client","start": "node server.js","server": "nodemon server.js","dev": "concurrently "npm run server" "npm run client"" }, 总文件目录下运行
用到其
等等 引入 <link href="//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"> <!-- 示例 --> <i class="fa fa-margin fa-server fa-2x"></i> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |