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 클라우드 데이터베이스 신청을 위한 무료 등록

Postman은 인터페이스 테스트용 소프트웨어를 다운로드하고 설치합니다.

npm i body-parser post 요청을 보내기 위해 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 실행합니다. 구성은 다음과 같습니다.

프런트 엔드 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 install element-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 >

(부록 2) 연구 주소

텐센트 강의실: 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

확장하다