Descarga de CapitalManagementSystem - CapitalManagementSystem Descarga del código fuente

Sistema de gestión de fondos (con permisos)

Tabla de contenido:

inicio rápido

Descripción de la estructura del archivo

Descripción de la función

Visualización de efectos

Descripción de la interfaz

(Anexo 1) Registro del proceso de codificación

(Adjunto 2) Dirección de aprendizaje en vídeo

1. Inicio rápido

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

npm install

npm run client-install

npm run dev

Dirección del servidor: http://localhost:5000, dirección del cliente: http://localhost:8080

2. Descripción de la estructura del archivo

1. Árbol de estructura

Abra cmd o powershell en el directorio raíz y ejecute el comando tree /f para generar

 .
│  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. Descripción de la estructura

①Archivos de fondo

archivo maestro

server.js

dos modelos

models/Profile.js

models/User.js

Configuración de enrutamiento

routers/api/profiles.js

routers/api/users.js

Verificación constante y simbólica

config/key

config/passport

②Archivos frontales

configuración predeterminada de vue

client/vue.config.js

Archivo de entrada

client/public/index.html

componente raíz

client/src/App.vue

Configuración de enrutamiento

client/src/router.js

referencia de la biblioteca

client/src/main.js

carga, interceptación de solicitudes, interceptación de respuestas

client/src/http.js

almacenamiento virtual

client/src/store.js

carpeta estática

client/src/assets

Carpeta de páginas

client/src/views

carpeta de componentes

client/src/components

3. Descripción de la función

4. Visualización de efectos

La prueba no tiene identidad, todo es el administrador.


Página de registro	Página de inicio de sesión


pagina de inicio	Página de flujo de fondos para no administradores


Filtrado de páginas de flujo de fondos para no administradores	Registros de modificación de no administradores


Página de perfil de no administrador	Página de información para todos los no administradores


Página de flujo de fondos del administrador 5 artículos/página	Página de flujo de fondos del administrador 10 artículos/página


Edición de la página de flujo de fondos del administrador	Página de perfil de administrador


Página de información del administrador	Filtrado de información para todos los administradores.

5. Descripción de la interfaz

sección de usuario

1.prueba de base de datos de usuarios

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

2. Registro de usuario

接口地址：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. Inicio de sesión de usuario

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

4. Obtenga el usuario actual

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

5. Obtenga toda la información del usuario

接口地址：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 del flujo de capital

1.prueba de base de datos de perfiles

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

2. Incrementar el flujo 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. Obtener todo el flujo 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. Obtener un flujo de fondos único

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

5. Edición del flujo de fondos

接口地址：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.Eliminar flujo de fondos

接口地址：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 del proceso de codificación

1. Configuración de la interfaz backend (nodejs, express)

npm install nodemon -g instala nodemon globalmente para evitar iniciar el servidor repetidamente

npm i mongoose instalar mangooose

Registro gratuito en el sitio web oficial de MongoDB Atlas para solicitar la base de datos en la nube MongoDB Atlas

Postman descarga e instala software para pruebas de interfaz

npm i body-parser instalo body-parser para enviar la solicitud de publicación

cifrado npm i bcrypt

npm i gravatar avatar, puedes registrarte y subir el avatar en https://en.gravatar.com/

npm i jsonwebtoken inicia sesión correctamente y devuelve el token. El token puede entenderse como un token o una clave.

npm install passport-jwt passport

2. Escritura de la página frontal (vue-cli 3.9.3, element-ui)

npm install -g @vue/cli-service-global instala globalmente el último vue-cli

Ejecute npm i concurrently en el directorio de archivos total para la serialización de front-end y back-end. No es necesario iniciar el servicio paso a paso.

Configurar "scripts" del client/package.json

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

Configurar "scripts" del archivo 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 " "
  },

Ejecute npm run dev en el directorio de archivos total para habilitar los servicios de front-end y back-end al mismo tiempo.

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

npm i axios -S herramienta de solicitud axios

npm i element-ui -S instalar el componente element-ui

Úselo

Mensaje de mensaje
Cargando Cargando
Menú de navegación NavMenu
mesa mesa
formulario de formulario
Paginación
Selector de fecha y hora DateTimePicker
icono icono
Cuadro emergente de cuadro de mensaje

etc.

Presentar una 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) Dirección del estudio

Aula Tencent: https://ke.qq.com/course/391846

Aula NetEase: https://study.163.com/course/introduction/1209227821.htm

Dirección de la estación B (parece que solo la última es válida: 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