이 글에서는 주로 nodejs+mongodb+vue의 프론트엔드와 백엔드에 있는 ueditor를 구성하기 위한 샘플 코드를 소개합니다. 내용이 꽤 좋아서 지금 공유하고 참고하겠습니다.
개인 블로그 프로젝트를 할 때 배경과 상호작용하기 위한 리치 텍스트 박스 입력 컴포넌트가 필요했는데 nodejs에 대한 공식적인 구성이 없어서 직접 정보를 확인하고 조사해서 최종적으로 적용했습니다. 시스템.
1. 백엔드 구성
우선 이 프로젝트를 찾았습니다: https://github.com/netpi/ueditor 해당 오픈 소스 코드를 사용하여 노드에 ueditor를 적용할 수 있습니다. 다음:
1. 먼저 종속성을 설치합니다.
1 |
|
2. 노드 설정 구성
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
|
여기서는 ueditor가 필요하므로 플러그인이 다음 위치에 설치되었습니다. node_module이므로 추가 파일을 복사할 필요가 없으며 백엔드로 반환된 데이터를 저장하기 위해 이 디렉터리 아래에 새 공용 폴더를 생성하기만 하면 됩니다. 또한 구성 파일 config.json
도 도입해야 합니다. 2. 프런트 엔드 구성
Vue의 프런트 엔드 구성에는 ueditor 파일을 다운로드해야 합니다. 디렉토리에 넣고 static 폴더에 넣은 다음 vue 항목 파일에 ueditor 파일을 도입했습니다:
1 2 3 4 |
|
ueditor.config.js 파일의 디렉터리 구성은 플러그인이 있는 디렉터리:
1 |
|
그런 다음 구성 요소에서 구성하면 됩니다.
My UE.vue 컴포넌트:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
|
소개 방법:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
ueditor
3의 기본 기능을 성공적으로 구성할 수 있습니다.3 프론트 및 백엔드 요청 프록시
vue dev 환경에서, 백엔드 요청 프록시를 전달하도록 webpack의 ProxyTable을 설정할 수 있으며, 같은 방식으로 vue 빌드 이후의 파일은 정적 파일을 백엔드와 동일한 포트로 프록시하기 위해 Node를 사용해야 합니다. 백엔드 포트를 요청하기 전에 공간이 제한되어 기사가 충분히 명확하지 않을 수 있습니다. 자세한 내용은 내 프로젝트 코드를 참조하세요: https://github.com/cheer4chai/myBlog
위는 이 기사의 전체 내용입니다. . 더 많은 관련 내용을 보시려면 PHP 중국어 홈페이지를 주목해주세요!
관련 권장사항:
node.js는 스트림을 사용하여 읽기와 쓰기의 동기화, 동시에 읽기와 쓰기 기능을 달성합니다.ajax가 jquery에서 도메인 간 처리를 처리하는 방식에 대해angular2 및 nodejs는 이미지 업로드를 구현합니다.기능
위 내용은 nodejs+mongodb+vue 프론트 및 백엔드에서 ueditor를 구성하는 코드 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!