현실을 인정하고 환상을 버리고 싸울 준비를 하라

1. 구성 요소 정의

1. 뷰 컴포넌트 생성

src/views 폴더 아래에 다음 폴더와 파일을 만듭니다.

2, 코어/통합 등급/list.vue

<template>
  <div class="app-container">
    积分等级列表
  </div>
</template>

3, 코어/통합 등급/form.vue

<template>
  <div class="app-container">
    积分等级表单
  </div>
</template>

2. 라우팅 정의

src/router/index.js 파일을 수정하고, constantRoutes를 재정의하고, 대시보드 라우팅 노드에 복사합니다.

참고: 각 경로의 이름은 동일할 수 없습니다.

{
    path: '/core/integral-grade',
    component: Layout,
    redirect: '/core/integral-grade/list',
    name: 'coreIntegralGrade',
    meta: { title: '积分等级管理', icon: 'el-icon-s-marketing' },
    alwaysShow: true,
    children: [
      {
        path: 'list',
        name: 'coreIntegralGradeList',
        component: () => import('@/views/core/integral-grade/list'),
        meta: { title: '积分等级列表' }
      },
      {
        path: 'create',
        name: 'coreIntegralGradeCreate',
        component: () => import('@/views/core/integral-grade/form'),
        meta: { title: '新增积分等级' }
      },
      {
        path: 'edit/:id',
        name: 'coreIntegralGradeEdit',
        component: () => import('@/views/core/integral-grade/form'),
        meta: { title: '编辑积分等级' },
        hidden: true
      }
    ]
},

1. 풀스택 개발 프로세스

1. 프런트 엔드 호출 프로세스

다음 그림은 개발 프로세스에 관련된 여러 핵심 모듈을 보여줍니다. 라우팅 구성 및 페이지 구성 요소 생성을 완료했습니다. 다음으로 페이지 구성 요소의 템플릿 <템플릿> 부분과 스크립트를 더욱 개선해야 합니다. <script> 와 다른 부분들, 그리고 프론트엔드와 백엔드 도킹에 필요한 api 모듈을 생성하고, 마지막으로 api 모듈을 통해 백엔드 인터페이스에 대한 호출을 시작합니다.

2. nginx 리버스 프록시 설정

현재 응용 프로그램의 프런트 엔드 및 백 엔드의 기본 아키텍처는 다음과 같습니다. srb-admin은 백 엔드의 srb-core 마이크로 서비스를 직접 호출하는 프런트 엔드 프로그램입니다.

프론트 엔드 프로그램이 동시에 여러 백엔드 서비스에 연결할 수 있도록 nginx 리버스 프록시, 마이크로 서비스 게이트웨이 등과 같은 다양한 솔루션을 사용할 수 있습니다. 여기서는 먼저 nginx를 프런트 엔드와 백 엔드 사이의 역방향 프록시 레이어로 사용합니다. 아키텍처는 다음과 같습니다.

nginx 구성

server {
	listen       80;
	server_name  localhost;

	location ~ /core/ {           
	    proxy_pass http://localhost:8110;
	}
	location ~ /sms/ {           
	    proxy_pass http://localhost:8120;
	}
	location ~ /oss/ {           
            proxy_pass http://localhost:8130;
	}
}

nginx 명령

nginx 시작 #nginx 시작
-s stop
#nginx 중지 -s reload #구성 다시 로드

프런트 엔드 구성: .env.development

# 기본 API: nginx에 연결
VUE_APP_BASE_API = 'http://localhost'

3, 모의 서버

VUE_APP_BASE_API의 수정은 플랫폼의 모의 로그인 기능의 모의 데이터에 영향을 미치므로 모의 서버의 주소를 수정해야 합니다.

mock/mock-server.js 파일의 37행 수정

url: new RegExp(`/dev-api${url}`),

src/api/user.js에서 인터페이스 호출을 수정하고 각 원격 호출에 대한 구성을 추가합니다.

baseURL: '/dev-api',

둘째, 프론트엔드 컴포넌트 개발

1. API 모듈 정의

src/api/core/integral-grade.js 파일을 생성합니다.

// @ 符号在vue.config.js 中配置， 表示 'src' 路径的别名
import request from '@/utils/request'

export default {
  list() {
    return request({
      url: '/admin/core/integralGrade/list',
      method: 'get'
    })
  }
}

2. 페이지 구성 요소 스크립트 정의

src/views/core/integral-grade/list.vue

<script>
import integralGradeApi from '@/api/core/integral-grade'
export default {
  // 定义数据模型
  data() {
    return {
      list: [] // 数据列表
    }
  },

  // 页面渲染成功后获取数据
  created() {
    this.fetchData()
  },

  // 定义方法
  methods: {
    fetchData() {
      // 调用api
      integralGradeApi.list().then(response => {
        this.list = response.data.list
      })
    }
  }
}
</script>

3. 페이지 구성 요소 템플릿 정의

<template>
  <div class="app-container">
    <!-- 表格 -->
    <el-table :data="list" border stripe>
      <el-table-column type="index" width="50" />
      <el-table-column prop="borrowAmount" label="借款额度" />
      <el-table-column prop="integralStart" label="积分区间开始" />
      <el-table-column prop="integralEnd" label="积分区间结束" />
    </el-table>
  </div>
</template>

4. Axios 응답 인터셉터 수정

src/utils/request.js에서 49행

if (res.code !== 20000) {

바뀌었다

if (res.code !== 0 && res.code !== 20000) {

백엔드 인터페이스의 통합 결과는 0을 성공적인 응답 결과로 판단하고 모의 데이터는 20,000개의 올바른 결과를 판단하기 때문에

마이크로 서비스 프로젝트: Shangrongbao(14) (프론트 엔드 플랫폼: Shangrongbao 관리 시스템 라우팅 구성)