프론트엔드 기술이 지속적으로 발전함에 따라 프론트엔드와 백엔드를 분리하는 아키텍처 모델이 점점 더 대중화되고 있습니다. 프런트엔드와 백엔드 분리의 장점은 분명합니다. 프런트엔드와 백엔드는 각각 고유한 기술 선택과 개발 리듬을 사용하여 독립적으로 개발할 수 있으므로 시스템의 유지 관리성과 확장성을 향상시킬 수 있습니다. 널리 사용되는 프런트엔드 프레임워크인 Vue는 더 나은 사용자 경험을 제공할 수 있습니다. 이 기사에서는 Vue를 사용하여 프런트엔드와 백엔드 분리의 아키텍처 패턴을 구현하는 방법을 자세히 소개하고 인터페이스 도킹 방법을 시연합니다.
1. 백엔드 구현
백엔드 구현은 Java의 Spring 프레임워크나 Python의 Django 프레임워크 등 우리에게 익숙한 언어와 프레임워크를 선택할 수 있습니다. 여기서는 너무 자세히 설명하지 않겠습니다.
2. 프론트엔드 구현
Vue는 가볍고 사용하기 쉬운 프론트엔드 프레임워크로, 프론트엔드와 백엔드 분리의 아키텍처 패턴을 구현하는 데 매우 적합합니다. Vue를 사용하여 프런트엔드와 백엔드 분리를 달성하는 단계는 다음과 같습니다.
먼저 명령줄 도구를 통해 새 Vue 프로젝트를 만들어야 합니다. 여기서는 Vue-cli 스캐폴딩을 사용하고 있습니다.
npm install -g vue-cli // 全局安装Vue-cli vue init webpack my-project // 创建一个webpack项目
구성 파일 config/index.js에서 ProxyTable 속성을 프록시 백엔드 주소로 구성하세요.
module.exports = {
// ...
dev: {
// ...
proxyTable: {
'/api': {
target: 'http://localhost:8888', // 后端接口地址
changeOrigin: true // 是否跨域
}
}
}
}Vue의 핵심 아이디어는 컴포넌트화입니다. 프론트 엔드 페이지를 컴포넌트로 정의할 수 있습니다. 동시에 인터페이스는 ajax를 통해 호출됩니다. 여기에서 Vue 리소스 라이브러리를 사용할 수 있습니다.
<template>
<div>
<h2>用户列表</h2>
<table>
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr v-for="user in users" :key="user.id">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
export default {
name: 'UserList',
data () {
return {
users: []
}
},
created () {
Vue.http.get('/api/users')
.then(response => {
this.users = response.data
})
.catch(error => {
console.log(error)
})
}
}
</script>위 코드에서는 UserList라는 구성 요소를 정의하고 생성된 이벤트를 트리거하여 인터페이스를 호출하여 사용자 목록을 얻습니다. , 마지막으로 데이터 바인딩을 페이지에 전송합니다. 여기서 호출되는 인터페이스 주소는 "/api/users"입니다. 구성 파일에 프록시를 설정했기 때문에 실제로 백엔드 주소 "http://localhost:8888/api" /users"에 액세스합니다.
프런트 엔드 코드 작성을 마친 후 다음 명령을 통해 Vue 프로젝트를 빌드하고 패키징할 수 있습니다.
npm run build
패키징 후 생성된 폴더가 배포해야 할 폴더입니다. 이 폴더를 넣으세요. 일반적인 방법으로 웹 서버에 배포하면 됩니다.
3. 인터페이스를 연결하는 방법은 무엇입니까?
인터페이스 도킹은 프런트엔드와 백엔드 분리 아키텍처의 핵심 콘텐츠입니다. 위 코드에서는 백엔드 주소 "http://localhost:8888/api/users"에 액세스합니다. 실제로 백엔드에 연결하는 방법에는 두 가지가 있습니다.
이 경우 JSON 형식을 반환하는 API 인터페이스를 제공하기 위해 백엔드가 필요하며, 프런트엔드는 ajax를 통해 이 인터페이스를 호출하여 데이터를 얻습니다. 백엔드에서 반환되는 데이터 형식은 다음과 같습니다.
{
"code": 0,
"message": "",
"data": [{ "id": 1, "name": "张三" }, { "id": 2, "name": "李四" }]
}프런트엔드 코드에서 백엔드에서 반환된 데이터를 구문 분석하고 표시해야 합니다.
Vue.http.get('/api/users')
.then(response => {
if (response.body.code === 0) {
this.users = response.body.data
} else {
alert(response.body.message)
}
})위 코드에서 백엔드가 0이면 목록 데이터가 페이지에 표시되고, 그렇지 않으면 경고 상자가 나타나 오류 메시지를 표시합니다.
이 경우 백엔드는 RESTful API 인터페이스를 노출해야 합니다. 예를 들어, 사용자 관리 시스템에서는 다음과 같은 API 인터페이스를 가질 수 있습니다:
| 인터페이스 이름 | 요청 방법 | Function | |
|---|---|---|---|
| /users | GET | 모든 사용자 가져오기 + | |
| /users/{id} | DELETE | ||
| 프런트엔드 코드에서 이러한 인터페이스를 호출하는 메소드의 예는 다음과 같습니다. | // 获取所有用户
Vue.http.get('/api/users')
.then(response => {
// ...
})
// 获取指定用户信息
Vue.http.get('/api/users/' + userId)
.then(response => {
// ...
})
// 新建一个用户
let data = { name: '张三', age: 20 }
Vue.http.post('/api/users', data)
.then(response => {
// ...
})
// 更新指定用户信息
let data = { name: '李四', age: 30 }
Vue.http.patch('/api/users/' + userId, data)
.then(response => {
// ...
})
// 删除指定用户
Vue.http.delete('/api/users/' + userId)
.then(response => {
// ...
})로그인 후 복사 | ||
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
