Vue+Express를 통한 전면 및 후면 분리

먼저 이유를 설명하자면 자신이 얼마 전에 실습을 했기 때문에 실습 기간에 프로젝트 개발에 참여하기 위해 Vue, Vuex, Vue-Router를 대충 배웠기 때문에 대체적으로 기초가 될 것이다.여기도 곧 졸업 디자인을 할 예정입니다. 방학을 마치고 돌아온 이틀 동안 Node에 관한 지식을 배웠습니다. 가장 중요한 것은 Express라는 Node를 기반으로 한 웹 프레임워크를 배웠습니다. 제가 선택한 필설 제목도 Node와 관련된 것이기 때문에 자연스럽게 Vue와 Express로 앞뒤가 분리된 프로젝트를 하고 싶고 졸업 디자인을 위해 준비한 셈입니다.다음은 본론으로 들어가겠습니다.
1. Vue와 Express는 어떻게 앞뒤 분리를 실현합니까
Express를 접할 때 html,ejs,jade 같은 템플릿을 사용하여 이루어진View층 페이지 개발이 더 많다.우선 저는views 디렉터리에서 직접 사용하지 않았습니다.유사함 대신 vue 접두사 파일.ejs 템플릿 파일의 생각입니다.내가 먼저 생각한 것은 먼저 백엔드 프로젝트를 구축한 다음에 vue-cli로 백엔드 프로젝트를 생성하는 것이다. 그러나 두 프로젝트의 기초 구조가 모두 건설되었는데 어떻게 그 둘을 유기적으로 결합시킬 수 있겠는가?
해결 방향
이전에 자신이 Vue로 프로젝트를 하는 과정에서도 전후단이 분리되었다. 단지 전단은 하나의 프로젝트이고 후단은 자바의 프로젝트이다. 그러면 전후단의 상호작용을 하려면 일반적으로 전단 코드를 포장한 후에 후단 프로젝트의 특정한 디렉터리에 놓는다.전단 패키지: vue-cli는 웹 패키지 패키지를 사용합니다. 패키지 명령을 실행하면 루트 디렉터리에 dist 폴더를 생성합니다. 이 폴더에는 전단의img, css, js 파일이 포함되어 있습니다.express에서 정적 자원을 제공합니다:express 생성기를 사용하여 생성된 프로젝트 프로젝트에서는 일반적으로 ejs 템플릿 파일을views 폴더 밑에 놓고 express에 내장된 중간부품이 있어 정적 자원에 접근하는 문제를 해결할 수 있습니다.

app.use(express.static('public')) //public                 ，         ，   express    

같은 정적 자원에 접근하면express에서.static () 중간부분에 vue-cli가 포장된 디스켓 폴더 이름을 쓰면 됩니다. 전방 프로젝트의 정적 자원에 접근할 수 있습니다.
2. 앞뒤가 분리된 후에 템플릿이나 페이지를 어떻게 렌더링합니까
Express+ejs(jade) 모드에서 보기 템플릿을 보여주면 주로 ejs(jade) 템플릿을 통해 렌더링하는 방식이지만 Express+Vue 모드에서는 Vue가 한 페이지의 응용 프로그램이기 때문에 Express는 어떠한 경로에 대한 처리도 한 페이지(html 방식)만 되돌려줍니다.

Express+ejs(jade) 모드는 노드와 접촉하는 것도 얕고 실제 조작하는 항목이 적기 때문에express의 원리에 대해 생소하다.엊그저께 나는 Express 프레임워크에 대해 작은 복습을 해서 이론을 대체적으로 이해했다. 오늘 Vue+Express를 할 때 어떻게 페이지를 과장하는 원리를 잊어버렸지???Express를 위해 템플릿 엔진을 개발하기 위해 저는 이 글을 보고 나서야 백엔드에서 루트를 처리할 때 npm run build를 사용하여 템플릿을 렌더링하고 되돌려준다는 것을 깨달았습니다.res.render('about')views 폴더 아래의about을 가리킨다.ejs 템플릿 파일.

Express+Vue 모드는 Vue를 사용하여 전방 페이지를 개발하는데 실제로 후방 express는 루트를 처리할 때 한 페이지, 즉 전방 패키지 생성 후의 index만 되돌려준다.html 파일.

//               /dist/index.html
app.get('*', function(req, res) {
    const html = fs.readFileSync(path.resolve(__dirname, '../dist/index.html'), 'utf-8')
    res.send(html)
})

이렇게 하면 전후단 분리도 잘 되고 페이지 방문도 ok가 된 다음에 전방 페이지 논리와 후단 루트 처리와 데이터베이스 조작을 계속 개발할 수 있다.
전재 대상:https://www.cnblogs.com/sminocence/p/10370565.html