Treasury Management System (with permission)

An application used nodejs,vue3,element-ui ヾ(@^▽^@)ノ

A fast start

git clone https://github.com/Allenem/CapitalManagementSystem.git

npm install

cd client

npm install

cd ../

npm run dev

Server address: http: // localhost: 5000, client address: http: // localhost: 8080

Second, the file structure

1. tree

Open the root directory cmdor powershellrun tree /fcommand to generate

.
│  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. Structure Description

① back-end file

Master File

server.js

Both models

models/Profile.js

models/User.js

Routing Configuration

routers/api/profiles.js

routers/api/users.js

Constant and token verification

config/key

config/passport

② front file

vue default configuration

client/vue.config.js

Entry file

client/public/index.html

Root component

client/src/App.vue

Routing Configuration

client/src/router.js

Reference library

client/src/main.js

loading, intercepting the request, the response intercepted

client/src/http.js

vuex storage

client/src/store.js

Static folder

client/src/assets

Page Folders

client/src/views

Component Folder

client/src/components

Third, the function

[X] interface configuration backend users (registration, login, access)
[X] profilss backend interface configuration (all queries, a single query, add, change, delete)
[X] registration page
[X] login page
[X] Home page
[X] funds flowing water page
[] Page modify records
[X] profile page
[X] full information page
[X] 404 pages

Fourth, the results show

test no identity, all administrators

Registration page, login page
register login

Home, a non-administrator of funds flowing water page
home employeefundlist

Non-Administrator capital flow page screening, non-administrator modify records
employeefundlistsearch changelist

Non-personal information page administrators, non-administrator full page
notmanagerinfoshow employeeuserlist

Administrators funds flowing water Page (5 / page, 10 / page)
managerfundlist5items managerfundlist10items

Administrators funds flowing water page editor, administrator of personal information page
managerfundlistedit managerinfoshow

Administrators full page, full information filtering administrator
manageruserlist manageruserlistsearch

V. Interface Description

User Part

1.users database testing

接口地址：http://localhost:5000/api/users/test
请求方式：get
请求示例：Examples
接口参数：
1.请求参数说明：
{
    
}
2.返回参数说明：
{
  "msg":"users test api works"
}

2. User Registration

接口地址：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",
  "password": "123456",
  "identity": "manager"
}

3. User Login

接口地址：http://localhost:5000/api/users/login
请求方式：post
请求示例：Examples
接口参数：
返回参数说明：
1.请求参数说明：
{
  "email": "[email protected]", 
  "password": "123456",
}
2.返回参数说明：
{
  "success": true,
  "token": "'Bearer'  + token"
}

4. Get the current user

接口地址：http://localhost:5000/api/users/current
请求方式：get
请求示例：Examples
接口参数：
返回参数说明：
1.请求参数说明：
{
  
}
2.返回参数说明：
{
  "id": "qwertyuiopasdfghjklcvbnm",
  "name": "test",
  "email": "[email protected]",
  "identity": "manager"
}

5. Obtain all user information

接口地址：http://localhost:5000/api/users/
请求方式：get
请求示例：Examples
接口参数：
返回参数说明：
1.请求参数说明：
{
  
}
2.返回参数说明：
{
"user":
[
    {
        "_id": "5d320d3bb77a763724d503d9",
        "name": "test",
        "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
    }
]
}

Funds flowing water section

1.profiles database testing

接口地址：http://localhost:5000/api/profiles/test
请求方式：get
请求示例：Examples
接口参数：
1.请求参数说明：
{
    
}
2.返回参数说明：
{
  "msg":"profiles test api works"
}

2. Add water funds

接口地址：http://localhost:5000/api/profiles/add
请求方式：post
请求示例：Examples
接口参数：
返回参数说明：
1.请求参数说明：
{
  "type":"优惠券",
  "describe":"买书",
  "income":"30",
  "expend":"20",
  "cash":"10",
  "remark":"开心"
}
2.返回参数说明：
{
  "type":"优惠券",
  "describe":"买书",
  "income":"30",
  "expend":"20",
  "cash":"10",
  "remark":"开心"
}

3. Get All funds flowing water

接口地址：http://localhost:5000/api/profiles/
请求方式：get
请求示例：Examples
接口参数：
返回参数说明：
1.请求参数说明：
{

}
2.返回参数说明：
{
  "profile":
  [
    {
      "type":"优惠券",
      "describe":"买书",
      "income":"30",
      "expend":"20",
      "cash":"10",
      "remark":"开心"
    },
    {
      "type":"礼券",
      "describe":"充值",
      "income":"50",
      "expend":"20",
      "cash":"30",
      "remark":"好开心"
    }
  ]
}

4. funds flowing water to get a single

接口地址：http://localhost:5000/api/profiles/id
请求方式：get
请求示例：Examples
接口参数：
返回参数说明：
1.请求参数说明：
{
  "id":"5d320d3bb77a763724d503d9"
}
2.返回参数说明：
{
  "_id":"5d320d3bb77a763724d503d9",
  "type":"优惠券",
  "describe":"买书",
  "income":"30",
  "expend":"20",
  "cash":"10",
  "remark":"开心"
}

5. Edit the funds flowing water

接口地址：http://localhost:5000/api/profiles/edit/id
请求方式：post
请求示例：Examples
接口参数：
返回参数说明：
1.请求参数说明：
{
  "type":"优惠券",
  "describe":"买书",
  "income":"30",
  "expend":"20",
  "cash":"10",
  "remark":"开心"
}
2.返回参数说明：
{
  "type":"优惠券",
  "describe":"买书",
  "income":"30",
  "expend":"20",
  "cash":"10",
  "remark":"开心"
}

6. Delete funds flowing water

接口地址：http://localhost:5000/api/profiles/delete/id
请求方式：delete
请求示例：Examples
接口参数：
返回参数说明：
1.请求参数说明：
{
  "id":"5d320d3bb77a763724d503d9"
}
2.返回参数说明：
{
  "_id":"5d320d3bb77a763724d503d9",
  "type":"优惠券",
  "describe":"买书",
  "income":"30",
  "expend":"20",
  "cash":"10",
  "remark":"开心"
}
//已删除的信息

(Attached) coding during recording

1. backend interface configuration (nodejs, express)

npm install nodemon -g Global avoid duplication start the server installation nodemon

npm i mongoose Installation mangooose

MongoDB Atlas official website free registration MongoDB Atlas cloud database

postman download and install the software interface testing

npm i body-parser Mounting post requests made body-parser

npm i bcrypt encryption

npm i gravatar Avatar can be registered to upload an avatar https://en.gravatar.com/

npm i jsonwebtoken Login successful return token, token can be understood as a token or a key

npm install passport-jwt passport Verification token

2. Write the front page (vue-cli 3.9.3, element-ui)

npm install -g @vue/cli-service-global Global install the latest vue-cli

Run total file directory npm i concurrentlybefore and after the end serial, do not open the service step by step, configuration is as follows:

Configure the front client/package.jsonof"scripts"

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "start": "npm run serve"
  },

The total configuration file package.jsonof"scripts"

  "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\""
  },

Run total file directory npm run devrealized before and after the end of the service at the same time open

npm i jwt-decode -S Parsing token module

npm i axios -S Request Tool axios

npm i element-ui -S Component mounting element-ui

Use it

Message message prompts
Loading loading
NavMenu navigation menu
Table Table
Form Form
Pagination pagination
DateTimePicker date and time picker
Icon Icon
MessageBox 弹框

and many more

Introducing font-awesomeGallery

<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>