Download CapitalManagementSystem - Download do código-fonte CapitalManagementSystem

Sistema de gestão de fundos (com permissões)

Índice:

início rápido

Descrição da estrutura do arquivo

Descrição da função

Exibição de efeito

Descrição da interface

(Anexo 1) Registro do processo de codificação

(Anexo 2) Endereço de aprendizagem em vídeo

1. Início rápido

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

npm install

npm run client-install

npm run dev

Endereço do servidor: http://localhost:5000, endereço do cliente: http://localhost:8080

2. Descrição da estrutura do arquivo

1. Árvore de estrutura

Abra cmd ou powershell no diretório raiz e execute o comando tree /f para gerar

 .
│  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. Descrição da estrutura

①Arquivos de back-end

arquivo mestre

server.js

dois modelos

models/Profile.js

models/User.js

Configuração de roteamento

routers/api/profiles.js

routers/api/users.js

Verificação constante e de token

config/key

config/passport

②Arquivos de front-end

configuração padrão do vue

client/vue.config.js

Arquivo de entrada

client/public/index.html

componente raiz

client/src/App.vue

Configuração de roteamento

client/src/router.js

referência da biblioteca

client/src/main.js

carregamento, interceptação de solicitação, interceptação de resposta

client/src/http.js

armazenamento vuex

client/src/store.js

pasta estática

client/src/assets

Pasta de páginas

client/src/views

pasta de componentes

client/src/components

3. Descrição da função

4. Exibição de efeitos

teste não tem identidade, tudo é administrador


Página de registro	Página de login


Página inicial	Página de fluxo de fundos para não administradores


Filtragem de página de fluxo de fundos para não administradores	Registros de modificação de não administrador


Página de perfil de não administrador	Página de informações para todos os não administradores


Fluxo de fundos do administrador, página 5 itens/página	Página de fluxo de fundos do administrador10 itens/página


Edição da página de fluxo de fundos do administrador	Página de perfil do administrador


Página de informações do administrador	Filtragem de informações para todos os administradores

5. Descrição da interface

seção do usuário

1. teste de banco de dados de usuários

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

2. Cadastro de usuário

接口地址：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. Login do usuário

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

4. Obtenha o usuário atual

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

5. Obtenha todas as informações do usuário

接口地址：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
    }
]
}

Parte do fluxo de capital

1. teste de banco de dados de perfis

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

2. Aumentar o fluxo de capital

接口地址：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. Obtenha todo o fluxo de capital

接口地址：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. Obtenha um único fluxo de fundos

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

5. Edição do fluxo de fundos

接口地址：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. Excluir fluxo de fundos

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

(Anexo 1) Registro do processo de codificação

1. Configuração da interface de back-end (nodejs, express)

npm install nodemon -g install nodemon globalmente para evitar iniciar o servidor repetidamente

npm i mongoose instalar mangooose

Registro gratuito do site oficial do MongoDB Atlas para se inscrever no banco de dados em nuvem MongoDB Atlas

Postman baixa e instala software para teste de interface

npm i body-parser install body-parser para enviar solicitação de postagem

criptografia npm i bcrypt

npm i gravatar , você pode se registrar e fazer upload do avatar em https://en.gravatar.com/

npm i jsonwebtoken login retorna token com sucesso. O token pode ser entendido como um token ou uma chave.

npm install passport-jwt passport

2. Escrita de página front-end (vue-cli 3.9.3, element-ui)

npm install -g @vue/cli-service-global instala globalmente o vue-cli mais recente

Execute npm i concurrently no diretório de arquivos total para serialização de front-end e back-end. Não há necessidade de iniciar o serviço passo a passo.

Configure "scripts" do front-end client/package.json

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

Configure "scripts" do arquivo total 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 " "
  },

Execute npm run dev no diretório de arquivos total para habilitar serviços de front-end e back-end ao mesmo tempo.

npm i jwt-decode -S módulo de token de análise

npm i axios -S ferramenta de solicitação axios

npm i element-ui -S instala o componente element-ui

Use-o

Prompt de mensagem
Carregando Carregando
Menu de navegação NavMenu
Mesa de mesa
Formulário
Paginação
Seletor de data e hora DateTimePicker
ícone ícone
Caixa pop-up MessageBox

etc.

Apresente uma biblioteca 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 >

(Apêndice 2) Endereço do estudo

Sala de aula Tencent: https://ke.qq.com/course/391846

Sala de aula NetEase: https://study.163.com/course/introduction/1209227821.htm

Endereço da estação B (parece que apenas o último é válido: 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

Expandir