財務管理システム（権限を持ちます）

アプリケーション使用nodejs、vue3、要素-UIヾ（@ ^▽^ @）ノ

ファストスタート

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.ツリー

ルートディレクトリを開くcmdか、powershell実行tree /fを生成するコマンドを

.
│  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.構造体説明

①バックエンドファイル

マスターファイル

server.js

両モデル

models/Profile.js

models/User.js

ルーティングの設定

routers/api/profiles.js

routers/api/users.js

定数およびトークン検証

config/key

config/passport

②フロントファイル

VUEのデフォルトの設定

client/vue.config.js

エントリ・ファイル

client/public/index.html

ルートコンポーネント

client/src/App.vue

ルーティングの設定

client/src/router.js

参考図書館

client/src/main.js

ロードは、要求を傍受、応答が傍受します

client/src/http.js

vuexストレージ

client/src/store.js

静的フォルダ

client/src/assets

ページのフォルダ

client/src/views

コンポーネントのフォルダ

client/src/components

第三に、機能

[X]インターフェイスコンフィギュレーションバックエンドユーザー（登録、ログイン、アクセス）
[X] profilssバックエンドインターフェースの構成（すべての照会は、単一のクエリは、追加、変更、削除）
[X]登録ページ
[X]ログインページ
[X]ホーム・ページ
[X]水のページを流れる資金を
[]ページには、レコードを変更します
[X]プロフィールページ
[X]フル情報ページ
[X] 404ページ

第四に、結果は

何のアイデンティティーをテストしない、すべての管理者

登録ページ、ログインページ

ホーム、水のページを流れる資金の非管理者
employeefundlist

非管理者の資本フローページのスクリーニングは、非管理者がレコードを変更します
employeefundlistsearch 変更リスト

非個人情報ページの管理者、管理者以外の全ページ
notmanagerinfoshow employeeuserlist

水のページを流れる管理者の資金（5 /ページ、10 /ページ）
managerfundlist5items managerfundlist10items

管理者の資金を流れる水のページエディタ、個人情報ページの管理者
managerfundlistedit managerinfoshow

管理者は全ページ、管理者をフィルタリング完全な情報
manageruserlist manageruserlistsearch

V.インターフェイス説明

ユーザ部

データベースのテストを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",
  "password": "123456",
  "identity": "manager"
}

3.ユーザーログイン

接口地址：http://localhost:5000/api/users/login
请求方式：post
请求示例：Examples
接口参数：
返回参数说明：
1.请求参数说明：
{
  "email": "[email protected]", 
  "password": "123456",
}
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",
        "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
    }
]
}

冷却水部を流れる資金

データベースのテストを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":"优惠券",
  "describe":"买书",
  "income":"30",
  "expend":"20",
  "cash":"10",
  "remark":"开心"
}

3.水を流れるすべての資金を入手

接口地址：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.資金

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

5.編集流水資金

接口地址：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.水を流し資金を削除します。

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

記録時（添付）コーディング

1.バックエンドインターフェース構成（nodejs発現）

npm install nodemon -g グローバル避ける重複は、サーバーのインストールを開始nodemon

npm i mongoose インストールmangooose

MongoDBのアトラス公式ホームページ無料登録MongoDBのアトラスのクラウドデータベース

郵便配達のソフトウェア・インタフェースのテストをダウンロードしてインストール

npm i body-parser ボディ・パーサ製マウントポスト要求

npm i bcrypt 暗号化

npm i gravatar アバターはアバターhttps://en.gravatar.com/をアップロードするために登録することができます

npm i jsonwebtoken 成功したリターントークンログイン、トークンは、トークンまたはキーとして理解することができます

npm install passport-jwt passport 検証トークン

2.フロントページ（VUE-CLI 3.9.3、要素-UI）を書きます

npm install -g @vue/cli-service-global グローバル最新VUE-CLIをインストール

総ファイルディレクトリを実行してnpm i concurrently、エンドシリアルの前と後に、ステップによってサービスステップを開けないでください、次のように、構成は次のとおりです。

フロントの設定client/package.jsonのを"scripts"

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

トータルコンフィギュレーション・ファイルpackage.jsonの"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\""
  },

合計ファイルディレクトリ実行npm run devのオープンと同時に、サービスの終了前と後の実現を

npm i jwt-decode -S トークンモジュールの解析

npm i axios -S ツールaxiosをリクエスト

npm i element-ui -S 部品実装要素-UI

それを使用してください

メッセージメッセージプロンプト
ロードロード
NavMenuのナビゲーションメニュー
テーブル表
フォームフォーム
ページネーションのページネーション
DateTimePickerの日付と時刻のピッカー
アイコンアイコン
メッセージボックス弹框

等

紹介font-awesomeギャラリー

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