Загрузка CapitalManagementSystem - Загрузка исходного кода CapitalManagementSystem

Система управления фондом (с разрешениями)

1. Быстрый старт

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

npm install

npm run client-install

npm run dev

Адрес сервера: http://localhost:5000, адрес клиента: http://localhost:8080

2. Описание структуры файла

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

3. Описание функции

4. Дисплей эффектов

тест не имеет личности, все является администратором


Страница регистрации	Страница входа


Домашняя страница	Страница движения средств без администратора


Фильтрация страниц движения средств без прав администратора	Записи об изменениях, не связанных с администратором


Страница профиля без администратора	Информационная страница для всех, кто не является администратором


Движение средств администратора, стр. 5 шт./стр.	Страница движения средств администратора10 шт./стр.


Редактирование страницы потока средств администратора	Страница профиля администратора


Информационная страница администратора	Фильтрация информации для всех администраторов

5. Описание интерфейса

пользовательский раздел

1.тест базы данных пользователей

接口地址：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.тест базы данных профилей

接口地址：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) Протокол процесса кодирования

1. Конфигурация внутреннего интерфейса (nodejs, express)

npm install nodemon -g установить nodemon глобально, чтобы избежать повторного запуска сервера

npm i mongoose устанавливаю mangooose

Официальный сайт MongoDB Atlas бесплатная регистрация для подачи заявки на облачную базу данных MongoDB Atlas

Почтальон загружает и устанавливает программное обеспечение для тестирования интерфейса

npm i body-parser установить 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, element-ui)

npm install -g @vue/cli-service-global устанавливает последнюю версию vue-cli

Запустите npm i concurrently в общем каталоге файлов для сериализации внешнего и внутреннего интерфейса. Нет необходимости запускать службу шаг за шагом. Конфигурация следующая:

Настройте "scripts" внешнего client/package.json

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

Настройте "scripts" всего файла package.json

  "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 установить компонент element-ui

Используйте это

Подсказка сообщения
Загрузка Загрузка
Меню навигации NavMenu
Стол стол
Форма формы
Пагинация
DateTimePicker выбор даты и времени
значок значок
Всплывающее окно MessageBox

и т. д.

Представляем 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 >

(Приложение 2) Адрес исследования

Класс Tencent: https://ke.qq.com/course/391846

Класс NetEase: https://study.163.com/course/introduction/1209227821.htm

Адрес станции B (кажется, действителен только последний:see_no_evil:):

https://www.bilibili.com/video/av59056478
https://www.bilibili.com/video/av55896464
https://www.bilibili.com/video/av53141006
https://www.bilibili.com/video/av54125678
https://www.bilibili.com/video/av44940777

Расширять