홈페이지>PHP 소스 코드>기타 카테고리
다운로드

카인 디자인이 얼마나 멋진가요?

소개

How-wonderful-the-cain-design은 vue.js 및 element 기반으로 v1 버전 이후의 백엔드 템플릿의 업그레이드 버전입니다. 현재 템플릿 프로젝트에는 로그인 , 권한 확인 , 라우팅 구성 , ajax 요청 , 모의 , 차트 , 404 페이지 , 401 페이지 및 여러 템플릿 페이지가 통합되어 있습니다. 백엔드 관리 페이지를 개발하는 서버 측 직원의 문제점을 해결합니다. 다음으로 본 프로젝트 사용 전 준비사항과 사용방법에 대해 소개하겠습니다. 프론트엔드 기초가 약한 파트너분들께 도움이 되었으면 좋겠습니다~

이 프로젝트는 vue-admin-element를 참조합니다.

참고 : 이 프로젝트는 [email protected]+ 버전과 [email protected]+를 사용합니다.

머리말

환경

노드(8.0+)를 로컬로 설치하려면 설치 버전을 직접 다운로드하고 다음 단계를 따르세요. 설치가 완료되면 설치가 성공했는지 확인합니다. 

 node -v
npm -v

버전 번호가 나타나면 성공입니다.

기술 스택

이 프로젝트에는 주로 다음과 같은 기술적 사항이 포함됩니다.

  • es2015+
  • 뷰
  • 뷰엑스
  • 뷰 라우터
  • 요소 UI
  • 더 적은
  • 전자 차트
  • mockjs
  • 에스린트
  • 액시오스
  • 바벨 폴리필

서버사이드 개발의 경우 vue 구문, element-ui 컴포넌트 라이브러리, axios 요청 작성 방법, eslint 코드 사양만 주의하면 됩니다. 차트가 유용하다면 echarts도 주의해야 합니다.

**중요 사항:** 코드 작성을 표준화하기 위해 프로젝트에서 eslint를 반드시 사용해야 합니다. 처음 접하게 되면 공식 웹사이트에 가서 어떤 문제가 있는지 확인해야 합니다. 문법과 그것을 수정하는 방법에 있습니다. 그러나 추후 유지 관리를 위해서는 매우 귀중한 투자입니다. 그러니 번거롭게 생각하지 말고 익숙해지세요 ^-^

코드 구조 

 // 结构树
|- build/  ------------------- 组件webpack区
|- config/  ------------------ 组件启动配置区，开发人员可在index.js中配置动态代理（当运行npm run dev时，该动态代理会生效，即可调用服务端接口），也可以修改端口号，防止端口号冲突
|- src/  --------------------- 组件源代码
	|- api/  ----------------- 接口编码区
	|- assets/  -------------- 图片区
    |- components/  ---------- 组件编码区
    |- icons/  --------------- 菜单icon svg图标区
    |- mock/  ---------------- 模拟接口区
    |- permission/  ---------- 路由权限编码区(可以不用修改)
    |- router/ --------------- 配置路由区，开发完成的页面都要在这里挂路由，才能展现
    |- store/  --------------- 全局缓存注入区，目前登陆的入口从这进入，会缓存用户信息，token信息以及权限信息
    |- styles/  -------------- 公共样式区
    |- utils/ ---------------- 工具区，开发人员开发的工具集都放在该目录中
    |- views/ ---------------- 页面开发区，开发人员开发的页面放在该目录中
    |- App.vue --------------- 启动的vue文件
    |- index.js -------------- 启动js文件，element-ui是按需加载的，开发人员要根据引用了哪些element组件在该js文件中引入，引入格式参照模板
|- static/  ------------------ static放置一些静态文件，和assets的区别：assets会被编译替换名字，static中的不会被编译，原汁原味
|- .babelrc  ----------------- babel 配置文件
|- .eslintignore  ------------ eslint ignore配置文件
|- .eslintrc.js  ------------- eslint配置文件
|- .gitignore  --------------- git忽略提交文件配置
|- .postcssrc.js  ------------ postcss配置文件
|- index.html  --------------- HTML 模板
|- package-lock.json  -------- npm 版本锁定文件，每添加一个依赖都会变化这个，保证对依赖版本的控制
|- package.json  ------------- npm 配置文件
|- README.md  ---------------- 项目帮助文档

실제 개발자 가 페이지를 개발할 때 가장 주의해야 할 디렉터리는 **/src/views 와 /src/router**입니다. 전자는 페이지를 작성하고, 후자는 해당 페이지의 라우팅 정보를 작성합니다. 라우팅은 템플릿의 권한 판단 필드로 사용됩니다. 즉, 서버가 반환한 권한 배열을 실제로 이름과 비교하여 일치하는 결과가 사용자가 소유한 권한 페이지이거나 그렇지 않은 경우 401 페이지입니다. 404 페이지가 반환됩니다.

프로젝트 디스플레이

이미지-20180422220114480

계기반

차트

기본

개발하다

개발 전제

현재 프로젝트에는 admin과 ChartUser라는 두 명의 사용자가 설정되어 있습니다. 주요 목적은 권한을 테스트하는 것입니다.

비밀번호를 입력하지 않고도 로그인이 가능하지만, 반드시 계좌번호를 입력해야 합니다. 

步骤一：
将本项目克隆到本地
git clone XXX
步骤二：
安装依赖
npm install
步骤三：
开发及预览
npm run dev
步骤四：
当运行上步控制台报了很多错误时，先运行
npm run lint
会自动帮你解决一些格式化的错误，若还有错误，就得自己找到错误的关键字，到官网中查找该如何修复，后面会介绍步骤

개발 문제

element-ui 구성 요소 참조

버튼 컴포넌트를 예로 들면, 버튼 컴포넌트를 도입해야 하는 경우 다음 단계를 따라야 합니다.

  1. 공식 웹사이트에서 해당 구성 요소를 찾으면 해당 코드를 복사하세요. 

     <el-button>默认按钮</el-button>

  2. 온디맨드 방식으로 /src/index.js에 컴포넌트를 도입하세요. 어떻게 도입해야 할지 모르신다면 모든 컴포넌트에 대한 온디맨드 소개를 참고하셔서 해당 컴포넌트를 찾아 import하시면 됩니다.

  3. 이 구성요소를 사용하는 방법을 주의 깊게 읽으십시오. 공식 웹사이트 문서에 매우 명확하게 설명되어 있습니다.

사용자 로그인 인터페이스 수정

템플릿 프로젝트의 로그인은 mockjs를 사용하여 로그인을 시뮬레이션합니다. 템플릿에서 로그인의 구체적인 구현 단계는 다음과 같습니다.

  1. 로그인 페이지, 경로: /views/login/index.vue

로그인-1단계

알아채다:

  1. if 판단의 계정이 존재하지 않아 수정이 필요합니다. 템플릿에 총 3개의 사용자 이름이 있는데, 이는 3개의 사용자 권한에 해당합니다. 작성을 단순화하기 위해 실제로는 이렇게 작성해야 합니다. 인터페이스를 조정한 후 인터페이스의 반환 프롬프트가 됩니다.
  2. this.$store.dispatch('Login', ...) 은 vuex의 구문입니다. /src/store/modules/user.js에서 Login 메소드를 호출하여 서버 인터페이스를 요청하고 해당 사용자를 반환하는 것이 목적입니다. 글로벌 캐시에 저장된 데이터는 글로벌 호출에 편리합니다.
  3. 매개변수의 형식에 주의하세요. 객체의 매개변수는 params로 고정되어 있으며, params의 값은 객체에 배치될 수 있습니다. get 요청이 여기에서 시뮬레이션되기 때문입니다. params 매개변수가 필요합니다. 더 많은 매개변수는 axios config를 참조하세요.
  1. 전역 캐시 저장 로그인 경로:/src/store/modules/user.js

로그인-step2

로그인을 클릭하면 위의 메소드가 호출됩니다. 메소드 본문은 실제로 /scr/api/api.js에서 getInfo 인터페이스를 호출하여 해당 사용자 데이터를 가져옵니다. 그 중 push의 네 가지 경로를 사용해야 합니다. 권한에 관계없이 접근 가능한 경로가 먼저 경로 배열에 삽입된 다음 권한, 사용자 정보 및 토큰 정보가 캐시됩니다.

  1. getInfo 인터페이스 경로:/src/api/api.js

로그인-3단계

그런 다음 getInfo 인터페이스를 호출합니다. 여기서는 result.code에 주의해야 합니다. 이는 상태, 상태 또는 코드일 수 있습니다. 사람에서 사람으로.

  1. 모의 시뮬레이션 인터페이스 요청 경로:/src/mock/login.js

로그인-step4

userMap 객체는 제가 시뮬레이션한 세 명의 사용자입니다. 역할 필드는 라우팅 구성 테이블의 이름 필드와 비교하여 권한 필드의 메뉴는 사용자가 권한을 가지고 있는 기능 페이지입니다.

실제 개발에서 로그인 인터페이스를 수정할 때 역할 필드가 있어야 하며 형식이 위 배열과 일치해야 합니다. 그렇지 않으면 권한 시스템이 유효하지 않습니다.

위의 4단계를 마치면 전체 로그인 과정이 완료됩니다.

토큰 인증

템플릿을 개발하기 전 사용자 정보 인증을 위해 jwt를 사용하기로 서버 담당자와 협의했습니다.

처리 흐름은 로그인 시 토큰 정보가 글로벌 캐시에 저장되는 것입니다. 인터페이스 데이터가 요청될 때마다 프레임워크는 자동으로 헤더에 토큰 정보를 저장하며, 실패할 경우 직접 전달됩니다. 로그인 페이지와 로그인 정보가 로그아웃됩니다.

토큰 받기

**commit('SETTOKEN', 'test')**가 토큰 값을 처리하는 로그인 인터페이스이기도 합니다. 실제 프로젝트 개발에서는 이 테스트를 로그인을 통해 얻은 실제 토큰으로 대체해야 합니다.

인증 토큰

경로:/src/api/server.js

여기서 res.code===301 판단에 주의하세요. 서버 담당자와 사전 협의 후 토큰이 만료되면 반환되는 코드는 식별을 위해 301로 설정됩니다. 따라서 여기서의 판단도 코드, 상태, 상태 등 자신의 프로젝트 설정을 기반으로 합니다. ., 프로젝트에 따라 수정될 수 있습니다.

라우팅 테이블 구성 규칙

경로:/src/router/index.js

템플릿 시스템의 메뉴와 라우팅 테이블은 분리될 수 없습니다. 즉, 메뉴와 라우팅 테이블의 계층 구조가 일치합니다 . 따라서 라우팅 테이블은 규칙에 따라 작성되어야 합니다. 그렇지 않으면 메뉴 표시에 영향을 미치게 됩니다!

먼저 설정 규칙을 이해해야 합니다. 메뉴는 3단계를 초과할 수 없으므로 라우팅 구성 표에는 3가지 형식이 있습니다.

메뉴

  1. 1단계 메뉴

라우터 메뉴1

401 라우팅 매개변수 숨김이 true로 설정되면 메뉴 트리가 이 경로를 필터링하고 표시하지 않음을 의미합니다.

대시보드 라우팅은 1차 메뉴의 작성 형식은 위와 같습니다.

메타의 매개변수 제목은 메뉴에 표시되는 메뉴 이름을 나타냅니다.

icon은 메뉴 아이콘이고, 읽는 것은 /src/icons/ 디렉토리에 있는 svg 메뉴 아이콘입니다. 따라서 자신의 프로젝트를 수행할 때 아티스트에게 메뉴 아이콘을 svg 형식으로 생성해 달라고 요청한 다음 배치해야 합니다. 아이콘 디렉토리에 있는 아이콘의 매개변수 값은 아이콘의 파일 이름입니다.

첫 번째 수준 메뉴의 권한은 어린이의 이름과 일치합니다.

  1. 보조 메뉴

라우터 메뉴2

2단계 메뉴와 1단계 메뉴의 유일한 차이점은 자식이 1보다 크고 나머지는 동일하다는 것입니다.

  1. 세 번째 수준 메뉴

라우터 메뉴3

세 번째 수준 메뉴 형식에는 하위 항목 안에 하위 항목이 있습니다.

라우팅 테이블의 구성은 위의 지침에 따라 구성되어야 합니다. 그렇지 않으면 원하는 효과가 원하는 대로 나오지 않을 것입니다. 또한 메뉴 표시를 제어하려면 이름과 메뉴 권한의 페어링에 주의하세요.

인터페이스 작성

경로:/src/api/api.js

페이지에서 사용되는 모든 인터페이스는 통합 관리 및 손쉬운 수정을 위해 이 파일에 정의되어야 합니다.

쓰기 형식은 템플릿에서 제공하는 쓰기 방식입니다.

그러나 실제 개발에서는 get, post non-form form, post form form, Rest form 등 매개변수를 전송하는 다양한 방법을 접하게 됩니다. 다음은 이러한 형식에 해당하는 작성 템플릿입니다.

  1. 요청을 받다

액시오스-겟

축-비동기화

  1. 양식 제출 게시

축-폼-포스트

축-형태-포스트-비동기

참고: application/x-www-form-urlenconded의 헤더 매개변수를 전달해야 하는 경우 매개변수는 다음과 같이 작성되어야 합니다. 

 const params = {
  data: {},
  headers: {
    'content-type': 'application/x-www-form-urlencoded'
  }
}
  1. 비양식 제출 게시

비양식 제출은 기본적으로 양식 제출과 동일합니다. 차이점은 데이터에 대한 원래 할당을 매개변수에 대한 할당으로 변경해야 한다는 것입니다.

  1. 휴식 형태

축 휴식

축-휴식-비동기

템플릿 프레임워크는 나머지 매개변수도 균일하게 캡슐화하며 매개변수 전송 방법은 스크린샷입니다.

인터페이스 프록시

실제 개발은 모두 로컬 개발입니다. npm run dev를 사용하여 로컬에서 서비스를 시작하면 인터페이스가 요청될 때 어떻게 처리해야 할까요?

실제로는 매우 간단합니다. 단지 구성일 뿐입니다.

경로:/config/index.js 

 proxyTable: {
  '/cloudfs': {
    target: 'http://your_ip_address',
    changeOrigin: true,
    pathRewrite: {
  		'^/cloudfs': '/cloudfs'
	}
  },
  '/api': {
    target: 'http://your_ip_address',
    changeOrigin: true,
    pathRewrite: {
    	'^/api': '/api'
    }
  },
  '/plustek': {
    target: 'http://your_ip_address/plustek',
    changeOrigin: true,
    onProxyReq: function (proxyReq, req, res) {
      console.log('获取到', process.env.eimCookie)
      proxyReq.setHeader('Cookie', process.env.eimCookie) // 配置cookie方式
    },
    pathRewrite: {
    	'^/plustek': ''
    }
  }
}

개발자는 필요에 따라 프록시를 직접 구성할 수 있습니다.

쿠키 정보 설정

백엔드 시스템에 jwt와 같은 자체 인증 메커니즘이 있는 경우. 그러면 쿠키 정보 인증을 고려할 필요가 없습니다.

쿠키를 사용하려면 위 구성 프록시에 onProxyReq 구성을 직접 추가하고 헤더 정보에 쿠키 정보를 삽입한 후 저장한 후 다시 npm run dev를 실행하면 됩니다.

전자 차트 다이어그램 사용법
  1. 차트 작성기 구성요소 소개 
 import chartMaker from '@/components/charts/chartMaker';

components: {
	chartMaker,
},
  1. 태그 소개 
 <chart-maker id="chart-small1" height="120px" width="100%" :option.sync="chartOption" :forceRefresh.sync="forceRefreshChart"></chart-maker>
id---不能重复
height---固定高度
width---宽度使用百分比，才能支持自适应，容器宽度由外层容器控制。
option---echarts参数，模板中已经集成了较为常用的图形使用
forceRefresh---强制刷新组件，传入为true时才会强制刷新
  1. 속성 정의 
 getChart1Option() {
      const tmpOption = {};
      tmpOption.title = {
        text: '访问量',
        left: '5',
        top: '10',
      };
      tmpOption.tooltip = {
        axisPointer: {
          lineStyle: {
            color: '#57617B',
          },
        },
        position(point, params, dom, rect, size) {
          if (point[0] < 30) {
            return [0, '50%'];
          } else if (point[0] > (size.viewSize[0] - 80)) {
            return [size.viewSize[0] - 80, '50%'];
          }
          return [point[0] - 30, '50%'];
        },
        formatter: '{b}月: {c}',
      };
      tmpOption.grid = {
        top: 55,
        left: '-8%',
        right: '5%',
        bottom: '2%',
        containLabel: true,
      };
      tmpOption.xAxis = [{
        show: false,
        type: 'category',
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#475669',
          },
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#E3E9EF'],
          },
        },
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
      }];
      tmpOption.yAxis = [{
        show: false,
        type: 'value',
        axisTick: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: '#475669',
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 14,
          },
        },
        splitLine: {
          lineStyle: {
            color: ['#E3E9EF'],
          },
        },
      }];
      tmpOption.series = [{
        name: '日访问量',
        type: 'line',
        smooth: true,
        // symbol: 'circle',
        symbolSize: 6,
        showSymbol: true,
        lineStyle: {
          normal: {
            width: 2,
          },
        },
        itemStyle: {
          normal: {
            color: '#0086E6',
            borderColor: '#0086E6',
            borderWidth: 2,
          },
        },
        data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122],
      }];
      this.chartOption = Object.assign({}, this.option, tmpOption);
    },
注意：模板中使用的属性设置方法，用的是Object.assign，用方法中的tmpOption属性强制覆盖默认的option属性，传入到组件
  1. 호출 속성 구성 방법 
 this.getChart1Option();
// 调用这个方法后，表格就能展现了
eslint 코드 사양 수정 단계

코드 작성을 마치면 완료되었다고 생각하고 게시하고 싶어질 것입니다. 코드에 형식 문제가 있을 경우 서버에 제출할 수 없기 때문에 기자회견이 거부된 것으로 나타났습니다.

그렇다면 코드 형식 문제를 해결하는 방법은 무엇입니까?

에스린트

  1. 먼저 npm run lint를 사용하세요. 무슨 일이 있어도 이것을 먼저 실행하면 많은 서식 문제를 빠르게 해결할 수 있습니다.

  2. 여전히 문제가 많다면 하나씩 해결해야 합니다. 해결책은 다음과 같습니다

    1. 오류 메시지에는 http://eslint.ort/docs/rules/no-var와 같은 링크가 있습니다. 이 링크를 클릭하면 eslint 공식 홈페이지로 이동하여 오류 원인을 확인하고 다음과 같이 수정합니다. 해당 형식.
    2. 이 오류가 실제로 수정하기 어려운 경우 이 사양을 차단할 수 있습니다. 루트 디렉터리의 .eslintrc.js 파일로 이동하여 위의 no-var 규칙과 같은 규칙 개체에 해당 규칙 차폐를 추가합니다. "no-var": 0을 구성하면 이 규칙이 필터링됩니다.

####풀어 주다 

 npm run build
运行完这个步骤后，会在该目录下生成vue-template文件目录，里面就是打包好的生产代码，放到nginx或者服务端的static目录就可以访问了。

위의 튜토리얼을 마친 후에는 이 템플릿을 사용할 수 있을 뿐만 아니라 프런트엔드 세계에도 입문했다고 믿습니다. 아직 문서가 불명확하거나 어떤 관련 지식이 보완되어야 하는지 알고 싶으시면 언제든지 연락주세요~

확장하다
추가 정보
관련 애플리케이션
추천
관련 정보 전체