vue admin webapp

vue-관리자-웹앱

Nuggets의 기사를 읽은 후 다른 사람들의 데모를 기반으로 Vue 백엔드 관리 시스템을 만들었습니다.

너겟 원본 기사 주소

이 프로젝트에 관련된 기술 스택에는 vue vue-cli vue-Router axios Echarts element-ui fastmock webpack이 포함됩니다.

이 프로젝트 github 주소 vue-admin-webapp

프로젝트 실행 주소

프로젝트 소개

vue-admin-webapp은 vuecli 및 element-ui를 기반으로 하는 백엔드 관리 시스템으로, fastmock을 사용하여 차트, 테이블, 권한, Excel 등을 포함한 데이터를 시뮬레이션합니다. 필요에 따라 경로를 추가할 수 있습니다.

설치하다

 # 克隆项目

git clone [email protected]:yqxshiki/vue-admin-webapp.git

# 进入项目目录
cd vue-admin-webapp

# 安装依赖
npm install

# 启动服务
npm run serve

시작 후 브라우저 http://localhost:8080이 자동으로 열리고 프로젝트 효과를 볼 수 있습니다.

프로젝트 페이지 구조

로그인 페이지로 이동합니다. 페이지는 주로 헤더 사이드바 표시 페이지의 세 부분으로 구성됩니다. 사이드바를 클릭하면 해당 경로로 이동할 수 있습니다.

로그인 권한 확인

fastmock에서 토큰을 받고, 로그인 시 localStorage 에 저장하고, 글로벌 프론트 가드를 설정하고, 다른 페이지에 들어갈 때 토큰이 있을 때만 들어갈 수 있고, 그렇지 않으면 로그인 페이지로 점프합니다.

글로벌 프론트 가드

 router . beforeEach ( ( to , from , next ) => {
  const isLogin = localStorage . loginToken ? true : false ;
  if ( to . path == "/login" ) {
    next ( ) ;
  } else {
    isLogin ? next ( ) : next ( '/login' )
  }
} ) 

차단 요청

 axios . interceptors . request . use ( config => {
  // 判断是否有token
  if ( localStorage . loginToken ) {
    config . headers . Authorization = localStorage . loginToken ;
  }
  return config ;
} , err => {
  // 请求错误
  return Promise . reject ( err ) ;
} ) 

응답 차단

 axios . interceptors . response . use ( res => {
  return res ;
} ,
  err => {
    const { status } = err . response ;
    if ( status == 401 ) {
      // 后台定义401为过期
      alert ( "token过期,请重新登录!" )
      // 清楚token
      localStorage . removeItem ( "loginToken" ) ;
      router . push ( "/login" ) ;
    } else {
      alert ( err . response . data )
    }
    return Promise . reject ( err ) ;
  } ) ;

Echart 멀티 차트

아래 그림과 같이 Echart, Line Chart, Pie Chart, Bar Chart, Dynamic Data Chart 등을 능숙하게 사용할 수 있습니다.

뛰어나다

실제 프로젝트에서는 엑셀은 주로 백엔드에서 한다. 물론 프론트엔드도 할 수 있지만 지금은 필요 없을 것 같아서 하지 않았다. 더 알고 싶으시면 검색해보시면 됩니다.

빠른 모의 데이터

공식 소개에서 인용한 내용은 다음과 같습니다.

Fastmock을 사용하면 백엔드 프로그램 없이 온라인으로 Ajax 요청을 실제로 시뮬레이션할 수 있습니다. 프로젝트 초기 단계에서 순수한 프런트엔드 효과 시연을 달성하기 위해 fatmock을 사용하거나 개발 중에 데이터 시뮬레이션을 구현하여 프런트엔드를 달성할 수 있습니다. -엔드와 백엔드 분리. Fastmock을 사용하기 전에 팀은 다음 솔루션 중 하나 이상을 사용하여 데이터 시뮬레이션을 구현할 수 있습니다.

• 로컬 필기 데이터 시뮬레이션은 프런트 엔드 코드에 많은 모의 코드를 생성합니다.
• Ajax 차단을 구현하고 필요한 json 규칙을 로컬로 구성하려면 mockjs 또는 canjs의 can-fixture를 사용하세요.
• 백엔드는 컨트롤러 계층에서 데이터를 가공하여 프런트엔드로 반환합니다.

---

내 fastmock 프로젝트 포트