초보자가 Vue.js + Node.js를 통해 개인 블로그를 만드는 방법

이 글은 주로 초보자가 Vue.js + Node.js를 통해 개인 블로그를 만들 수 있는 방법을 소개합니다. 이 글은 모든 사람에게 확실한 참고 자료이자 학습 가치가 있는 샘플 코드를 통해 자세히 소개합니다.

Scheme

• UI 스타일: 주로 Randy의 블로그 스타일을 참조하고, 내 아이디어를 약간 추가합니다(주로 그냥 게으르게 하기 위해).

• 프런트엔드 페이지: Vue2.0 기반의 반응형 SPA, 아? 왜냐고 물어보시죠? "About"의 자기소개처럼: 저는 Vue SPA 개발에 능숙하다고 생각합니다.

• 백엔드: 프론트엔드 엔지니어를 위한 풀 스택 지름길: Node.js. 인터페이스 작성 및 정적 페이지 렌더링을 담당합니다.

• 데이터베이스: 원래 계획은 MongoDB를 사용하는 것이었지만 일정을 맞추기 위해 데이터베이스를 전혀 사용하지 않은 첫 번째 버전입니다.

• 기사: 마크다운 구문을 사용하여 기사를 작성한 후 html로 변환하는 hexo의 방법을 참조하세요. md 형식의 기사도 로컬에서 편집하여 서버에 업로드하는데 Node.js는 md 파일을 직접 읽어서 html로 변환하여 프런트 데스크에 반환합니다. 따라서 당분간 데이터베이스가 필요하지 않습니다.

• 배포: AWS, 1년 동안 무료! 1년 뒤에 무엇을 할 것인지 나에게 묻는다. 하나님은 아시죠! 아마도 1년 동안 제가 시작부터 포기하게 되었을 것입니다.

항해하세요! 출항하다!

1. 페이지 레이아웃: Cloud의 블로그를 직접 보시고 간단한 소개를 해주세요. 첫 번째 화면은 전체 표시 영역을 덮는 100% 너비와 높이의 배경화면입니다. 콘텐츠에는 블로그 이름, 부제 및 블로거에 대한 세 개의 링크가 포함되어 있으며 아래쪽 화살표를 클릭하면 두 번째 화면의 기본 주제로 스크롤됩니다. [홈], [기사], [작품], [정보]의 네 가지 탭 모듈로 나누어져 있습니다. 기본값은 [Homepage]로 최신 기사 세부정보, [Article]은 기사 목록, 클릭하면 기사 내용 읽기, [Works]는 작품 목록, 이 부분은 아직 완성되지 않았으며, [About]은 일부 소개입니다. 블로거에 대해서. 추신: 구글 이미지 첫 화면에 나오는 배경화면을 찾느라 오전 내내 이 사진을 찾았는데, 휴대폰 배경화면이 중앙에 있고 보이는 영역 전체를 덮고 있다는 점을 생각하면 꽤 만족스럽습니다. PC와 모바일에서 보기 좋은 사진을 찾기란 쉽지 않은데, 그래도 블로거들은 환자를 고르는데 어려움을 겪는다.

2. 프런트 엔드 개발: Vue 스캐폴딩으로 시작

   
   

3. # 全局安装 vue-cli
   $ npm install --global vue-cli
   # 创建一个基于 webpack 模板的新项目
   $ vue init webpack blog
   # 安装依赖，走你
   $ cd blog
   $ npm install
   $ npm run dev

4. 그런 다음 SPA 라우팅용 Vue-router와 Ajax용 vue-resource 또는 axios를 설치하세요.

   $ npm install --save vue-router
   $ npm install --save axios
   # vue官方推荐的ajax库不再是vue-resource,而是axios

   그러면 첫 번째 단계에서 페이지 레이아웃 아이디어를 기반으로 정적 페이지를 작성하는 것이 어렵지 않을 것입니다. 세 번째 단계에서. 여기서는 더 말하지 않겠습니다. 정적 페이지를 완성한 후

   $ npm run build

5. 컴파일합니다. 백엔드 개발: 서버 디렉터리 구조를 만들고 Express 프레임워크를 설치하고 md 파일을 html

   $ mkdir blog-server && cd blog-server
   $ mkdir public
   $ npm install --save express$ npm install --save marked

   Writing 인터페이스로 변환하도록 표시합니다. 현재 세 가지 주요 인터페이스가 있습니다.

   정적 페이지를 렌더링하고, 두 번째 부분에서 컴파일한 정적 파일과 md 형식의 기사 파일을 공용 폴더에 복사한 다음, Express에 내장된 미들웨어를 사용하여 공용 폴더를 정적 리소스 파일의 루트 디렉터리로 지정하고 캐시하세요. 단일 페이지 애플리케이션이므로 404 오류를 처리해야 합니다.

   # server.jsvar express = require('express');var app = express();
   app.use(express.static('public',{maxAge:60*60*24*30}));
   app.get('/',function(req,res){
    res.sendFile('/index.html',{root: __dirname + '/public/'});
   });
   app.listen(80);

1. 기사 목록 인터페이스를 받으세요. fs.readdir 메소드는 md 파일이 위치한 폴더를 읽어서 모든 md 파일의 파일명, 즉 기사 제목, 생성 시간, 기사 경로를 반환하고 생성 시간 순으로 정렬하여 [ 기사] 페이지입니다.

2. 기사 콘텐츠 인터페이스. 첫 번째 인터페이스에서 반환된 파일 이름과 경로에 따라 fs.readFile 메서드를 사용하여 md 파일의 내용을 읽고 표시를 사용하여 HTML로 변환한 후 클라이언트에 반환하고 기사 콘텐츠 페이지에 렌더링합니다. .

3. 홈 페이지 콘텐츠 인터페이스. 인터페이스 2와 유사하게 최신 기사를 읽고 돌아오세요. 도메인 간 문제를 처리하는 것을 잊지 마세요.

   app.all('*', function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "X-Requested-With");
   res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
   res.header("X-Powered-By",' 3.2.1')
   res.header("Content-Type", "application/json;charset=utf-8");
   next();
   });

6. Deployment

• AWS(Amazon 클라우드 호스트) 신청, 1년 무료 체험, 신용카드 정보 필수입니다. EC2, win 또는 Linux 시스템 인스턴스를 사용하는 것이 좋습니다. 해당 포트를 열고 node.js를 설치하세요.

• PM2를 설치하고 세 번째 단계에서 server.js 서비스를 실행한 다음 PM2가 시스템과 함께 시작되도록 합니다.

  $ npm install -g PM2
  $ pm2 start server.js
  $ pm2 startup

  此时我们的博客系统已经运行在EC2上了。

  购买域名。在腾讯云上购买的xyz域名，第一年8块钱。解析到该EC2的公网IP上，即可通过域名访问。

위 내용은 초보자가 Vue.js + Node.js를 통해 개인 블로그를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!