vue admin webapp

Vue-Admin-Weight

После прочтения «Наггетс» статью, я подражаю системе управления фоном Vue, созданной демонстрацией других людей

Адрес статьи Nuggets оригинал

Технологический стек, вовлеченный в этот проект,-Vue Vue-Cli Vue-Router Axios Element-UI WebPack

Этот проект GitHub Адрес Vue-Admin-Webapp

Адрес эксплуатации проекта

Введение проекта

Vue - Admin- Webapp -это система управления фоном.

Установить

 # 克隆项目

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 Multi -Chart

Он будет квалифицирован в Echart, прямой персонаже, характере торта, диаграммах столбов, динамических диаграммах данных и т. Д., Такой как рисунок ниже

Экстр

Excel в основном сделан в реальном проекте. Если вы хотите знать, вы можете искать это.

Данные FastMock

Цитируя официальное введение здесь

Fastmock позволяет вам по -настоящему моделировать запрос AJAX без программы Back -End. Перед использованием FastMock реализация моделирования данных вашей команды может быть одной или нескольких в следующей схеме

• Локальное моделирование данных почерка, создавая много максимального кода в переднем коде.
• Используйте Mockjs или Canjs Can-Fixture для реализации перехвата AJAX, и необходимые правила JSON настроены локально.
• Поддельные данные о задней части возвращаются на переднюю часть на уровне контроллера.

---

Мой порт проекта FastMock