vue admin webapp

vue-admin-webapp

Après avoir lu un article de Nuggets, j'ai créé un système de gestion backend Vue basé sur les démos d'autres personnes.

Adresse originale de l'article Nuggets

Les piles technologiques impliquées dans ce projet incluent vue vue-cli vue-Router axios Echarts element-ui fastmock webpack

Adresse github de ce projet vue-admin-webapp

Adresse du projet en cours

Présentation du projet

vue-admin-webapp est un système de gestion backend basé sur vuecli et element-ui , utilisant fastmock pour simuler des données, notamment des graphiques, des tableaux, des autorisations, Excel, etc. Vous pouvez ajouter des itinéraires en fonction de vos besoins.

Installer

 # 克隆项目

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

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

# 安装依赖
npm install

# 启动服务
npm run serve

Après le démarrage, le navigateur http://localhost:8080 s'ouvrira automatiquement et vous pourrez voir l'effet du projet.

Structure des pages du projet

Accédez à la page de connexion. La page se compose principalement de trois parties : la page d'affichage de la barre latérale d'en-tête . Vous pouvez cliquer sur la barre latérale pour accéder à l'itinéraire.

Vérification de l'autorisation de connexion

Recevez un jeton de fastmock, stockez-le dans localStorage lors de la connexion, définissez la garde frontale globale, lorsque vous entrez dans d'autres pages, vous ne pouvez entrer que lorsqu'il y a un jeton, sinon il passera à la page de connexion

Garde avant mondiale

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

demande d'interception

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

interception de réponse

 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 ) ;
  } ) ;

Carte multi Echart

Maîtriser l'utilisation d'Echart, des graphiques linéaires, des diagrammes circulaires, des graphiques à barres, des graphiques de données dynamiques, etc., comme l'image ci-dessous

Exceller

Dans les projets réels, Excel est principalement réalisé sur le back-end. Bien sûr, le front-end peut également être réalisé, mais je ne pense pas que ce soit nécessaire maintenant, donc je ne l'ai pas fait. Si vous voulez en savoir plus, vous pouvez le rechercher.

données rapides

Voici une citation de l'introduction officielle

Fastmock vous permet de véritablement simuler des requêtes ajax en ligne sans programme back-end. Vous pouvez utiliser fatmock pour réaliser une démonstration d'effet front-end pur dans les premières étapes du projet, ou vous pouvez utiliser fastmock pour implémenter une simulation de données pendant le développement afin d'obtenir un front-end. séparation -end et back-end. Avant d'utiliser fastmock, votre équipe peut utiliser une ou plusieurs des solutions suivantes pour mettre en œuvre la simulation de données :

• La simulation de données manuscrites locales génère de nombreux codes fictifs dans le code frontal.
• Utilisez le can-fixture de mockjs ou canjs pour implémenter l'interception ajax et configurer les règles json nécessaires localement.
• Le backend fabrique des données au niveau de la couche contrôleur et les renvoie au frontend.

---

Mon port de projet fastmock