SpringBoot+Vue+Electron 개발 QQ 버 전 메 신 저 상세 튜 토리 얼

4876 단어 springbootvueelectronqq채 팅 도구
在这里插入图片描述
프로필JS 을 기반 으로 한 초 경량급 데스크 톱 채 팅 소프트웨어 다.주로 개인 클 라 우 드 프로젝트 내부 채 팅,기업 내부 관리 통신 등 기능,주요 통신 프로 토 콜 websocket 에 적용 된다.웹 페이지 채 팅 실현 도 지원 합 니 다.문자 채 팅,서로 파일 전송,오프라인 메시지,단체 채 팅,단선 재 접속 등 기능.
먼저 효 과 를 보 겠 습 니 다.아래 그림 왼쪽 은 web 판 이 고 오른쪽 은 PC 판 입 니 다.

2.현지 건설
2.1 기술 창고
백 엔 드 기술 창고:
  • springboot:개발 자 들 이 신속하게 개발 할 수 있 도록 하 는 자바 의 마이크로 서비스 프레임 워 크 입 니 다.
  • tio:백만 급 네트워크 프레임 워 크 oauth 2.0:OAuth 2.0 은 한 업계 의 표준 권한 수여 협의 이다.
  • OAuth 2.0 은 클 라 이언 트 개발 자 를 간소화 하 는 데 전념 하 는 동시에 웹 응용 프로그램,데스크 톱 응용 프로그램,핸드폰 과 거실 설비 에 특정한 권한 수여 절 차 를 제공한다.
    • 전단 기술 창고:
  • vue:사용자 인터페이스 구축 에 사용 되 는 점진 적 전단 프레임 워 크 입 니 다.
  • iview:Vue.js 를 기반 으로 하 는 오픈 소스 UI 구성 요소 라 이브 러 리 로 주로 PC 인터페이스의 중 배경 제품 에 서 비 스 를 제공 합 니 다.
  • electron:HTML,CSS,JavaScript 로 크로스 플랫폼 데스크 톱 응용 프로그램의 오픈 소스 라 이브 러 리 를 구축 합 니 다.
    • 2.2 백 엔 드 서비스 시작
    항목 다운로드gitBash 도 구 를 사용 하여 항목 을 로 컬 로 다운로드 합 니 다.
    git clone https://gitee.com/lele-666/V-IM.git
    프로젝트 의 앞 뒤 엔 드 코드 가 이렇게 한 번 에 다운로드 되 었 다 는 것 을 설명 합 니 다.
  • V-IM-PC:전단 코드
  • V-IM-server:백 엔 드 코드
    • 프로필 수정 application.properties
    데이터베이스 연결 과 파일 업로드 경 로 를 수정 합 니 다.
    
#server.port=8081
spring.mvc.static-path-pattern=/**
#       
web.upload-path=D:/Temp
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/vim?useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
...
    주:백 엔 드 서비스의 포트 는 자신의 필요 에 따라 설정 하면 됩 니 다.기본 값 은 8080 입 니 다.
    데이터베이스 초기 화
    데이터베이스 초기 화 스 크 립 트 는 V-IM-Server\doc\init-20181231.sql 이 며,Navicat 데이터베이스 시각 화 도 구 를 통 해 데이터베이스 스 크 립 트 를 가 져 오 면 됩 니 다.

    VServerApplication.java 실행
    프로젝트 를 Idea 으로 가 져 와 프로젝트 의 관련 의존 을 자동 으로 다운로드 한 후 프로젝트 VServerApplication 류 의 main 방법 을 직접 실행 하면 환경 시작 백 엔 드 서 비 스 를 개발 할 수 있다.

    2.3 web 전단 서비스 시작
    다운로드 의존
    다음 명령 을 한 번 에 실행 하면 전단 항목 에 필요 한 모든 의존 패 키 지 를 다운로드 할 수 있 습 니 다.
    
cd V-IM-PC #    
npm install #npm    
yarn #yarn
    로 컬 실행
    로 컬 운행 두 가지 방식 은 각각 Web 과 PC 이다.명령 은 다음 과 같 습 니 다.
    
npm run serve # web    
npm run electron:serve #
    주:web 이 시 작 될 때 전단 프로젝트 가 방문 하 는 포트 는 8080 으로 백 엔 드 포트 와 같 기 때문에 전단 의 방문 포트 를 수정 하면 됩 니 다.수 정 된 파일 은 index.js 입 니 다.
    
export default {
 app_name: "V-IM",
 http_protocol: "http",
 http_port: 8080, #      
 ws_port: 9326,
 init: "/api/user/init",
 his_url: "/api/message/list",
 chat_users_url: "/api/user/chatUserList",
 token_path: "/oauth/token",
 register_url: "/register",
 ws_protocol: "ws",
 getHostUrl: function() {
 return (
  this.http_protocol +
  "://" +
  localStorage.getItem("host") +
  ":" +
  this.http_port
 );
 },
 ...
    웹 버 전의 효과:

    PC 버 전의 효과:

    포장 명령
    로 컬 테스트 기능 문 제 는 프로젝트 포장 을 할 수 있 습 니 다.포장 명령 도 두 가지 가 있 습 니 다.
    
npm run build #   web  
npm run electron:build #
    2.4 PC 프론트 엔 드 시작
    PC 버 전 설치
    작가 가 포장 한*.exe 파일 을 직접 다운로드 하거나 위의 명령 으로 PC 버 전 을 구축 하 는 두 가지 방법 이 있 습 니 다.
    내 가 직접 다운로드 한 PC 버 전.
    다운로드 주소:https://gitee.com/lele-666/V-IM/raw/master/v-im%20Setup%200.5.3.exe
    로 컬 실행
    PC 버 전 을 설치 한 후 더 블 클릭 으로 실행 하면 됩 니 다.효 과 는 다음 그림 과 같 습 니 다:

    서 비 스 를 설정 하면 해당 하 는 백 스테이지 서비스 에 연결 할 수 있 습 니 다.
    마지막
    이런 절차 로 내 려 오 면 몇 분 이면 QQ 버 전 메 신 저 를 만 들 수 있다.이 편 은 개발 환경 에서 채 팅 도 구 를 만 드 는 절 차 를 말한다.물론 서버 배치 도 간단 하 다.이 채 팅 에 관심 이 있다 면 손가락 을 움 직 여 보 세 요!
    첨부 된 t-io 프로젝트 주소:https://gitee.com/tywo45/t-io
    총결산
    SpringBoot+Vue+Electron 개발 QQ 판 메 신 저 에 관 한 상세 한 튜 토리 얼 을 소개 합 니 다.더 많은 관련 springboot vue electron qq 메 신 저 내용 은 저희 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 찾 아 보 세 요.앞으로 도 많은 응원 부 탁 드 리 겠 습 니 다!
    SpringBoot MongoDB 색인 충돌 분석 및 해결 방법
    크롬 이 새 MacOS 에 잘못 보고 한 해결 NET::ERRCERT_WEAK_질문

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage