how wonderful the cain designダウンロード - how wonderful the cain designソースコードのダウンロード

カインの素晴らしいデザイン

導入

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+
ビュー
ビュークス
vueルーター
要素 ui
少ない
eチャート
モックジェス
エスリント
アクシオス
バベルポリフィル

サーバーサイドの開発では、vue の構文、要素 ui コンポーネントライブラリ、axios リクエストの記述方法、eslint コードの仕様に注意するだけで済みます。チャートが役立つ場合は、echart にも注意する必要があります。

**重要な注意事項:** コードの記述を標準化するためにプロジェクトでは eslint の使用が必須です。初めて触れると、どのような問題があるのかを知るために公式 Web サイトにアクセスする必要があるかもしれません。文法とそれを修正する方法にあります。しかし、その後のメンテナンスを考えると、非常に価値のある投資となります。面倒だと思わないで、慣れてください^-^

コード構造

 // 结构树
|- 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 という 2 人のユーザーが設定されています。主な目的は、権限をテストすることです。

パスワードを入力しなくてもログインできますが、アカウント番号を入力する必要があります。

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

開発問題

要素 UI コンポーネントのリファレンス

ボタンコンポーネントを例に挙げると、ボタンコンポーネントを導入する必要がある場合は、次の手順に従う必要があります。

公式Webサイトで対応するコンポーネントが見つかったら、対応するコードをコピーします
```
 <el-button>默认按钮</el-button>
```
コンポーネントを /src/index.js にオンデマンドで導入します。導入方法がわからない場合は、すべてのコンポーネントのオンデマンド導入を参照して、インポートする対応するコンポーネントを見つけてください。
このコンポーネントの使用方法をよく読んでください。公式 Web サイトのドキュメントで非常にわかりやすく説明されています。

ユーザーログインインターフェースの変更

テンプレートプロジェクトのログインでは、mockjs を使用してログインをシミュレートします。テンプレートでのログインの具体的な実装手順は次のとおりです。

ログインページ、パス: /views/login/index.vue

ログインステップ1

知らせ：
if 判定のアカウントは存在しないので変更する必要があります。テンプレートには 3 つのユーザー権限に対応する合計 3 つのユーザー名があります。実際には次のように記述します。インターフェイスを調整した後のインターフェイスの戻りプロンプトになります。
this.$store.dispatch('Login', ...) は vuex の構文です。その目的は、/src/store/modules/user.js の Login メソッドを呼び出してサーバーインターフェイスを要求し、対応するユーザーを返すことです。グローバルキャッシュに保存されているデータは、グローバル呼び出しに便利です。
パラメータの形式に注意してください。オブジェクト内のパラメータは params に固定されており、ここでは get リクエストをシミュレートするため、params の値はオブジェクト内に配置できます。 params パラメータが必要です。その他のパラメータについては、axios config を参照してください。

ストアグローバルキャッシュログインパス:/src/store/modules/user.js

クリックしてログインすると、上記のメソッドが呼び出されます。実際にメソッド本体は、/scr/api/api.js の getInfo インターフェースを呼び出して、対応するユーザーデータを取得します。このうち、プッシュの 4 つのルートが使用されます。権限に関係なく、アクセス可能なルートが最初にルート配列に挿入され、次に権限、ユーザー情報、およびトークン情報がキャッシュされます。

getInfo インターフェースのパス:/src/api/api.js

ログイン-ステップ3

次に、getInfo インターフェイスを呼び出します。ここでは、result.code に注意する必要があります。これは、状態、ステータス、またはコードによって異なります。人から人へ。

モックシミュレーションインターフェイスのリクエストパス:/src/mock/login.js

ログイン-ステップ4

userMap オブジェクトは、私がシミュレートした 3 人のユーザーであることに注意してください。役割フィールドは、ルーティング構成テーブルの名前フィールドと比較して、ユーザーが権限を持つ機能ページです。
実際の開発では、ログインインターフェイスを変更するときに、ロールフィールドが存在し、形式が上記の配列と一致している必要があります。そうでない場合、権限システムは無効になります。

上記の 4 つのステップの後、ログインプロセス全体が完了します。

トークン認証

テンプレートを開発する前に、ユーザー情報の認証に jwt を使用するようにサーバー担当者と交渉しました。
処理の流れとしては、ログイン時にトークン情報がグローバルキャッシュに保存されます。インターフェースデータがリクエストされるたびにフレームワークが自動でトークン情報をヘッダーに保存し、失敗した場合は直接トークン情報を転送します。ログインページにアクセスすると、ログイン情報がログアウトされます。

トークンの取得

これはログインインターフェイスでもあり、**commit('SETTOKEN', 'test')** がトークン値を処理します。実際のプロジェクト開発では、このテストをログインによって取得された実際のトークンに置き換える必要があります。

認証トークン

パス:/src/api/server.js
ここで res.code===301 の判定に注目してください。サーバー担当者との事前のネゴシエーションの後、トークンの有効期限が切れると、返されるコードは識別のために 301 に設定されます。したがって、ここでの判断は、コード、ステータス、状態などの独自のプロジェクトの設定にも基づいて行われます。 . プロジェクトに応じて変更できます。

ルーティングテーブルの設定ルール

パス:/src/router/index.js
テンプレートシステムにおけるメニューとルーティングテーブルは分離不可能です。つまり、メニューとルーティングテーブルの階層構造は一貫しています。したがって、ルーティングテーブルはルールに従って書かれなければなりません。そうしないと、メニューの表示に影響を及ぼします。
まず、設定ルールを理解する必要があります。メニューは 3 レベルを超えることができないため、ルーティング構成テーブルには 3 つの形式があります。

メニュー

最初のレベルのメニュー

ルーターメニュー1

401 ルーティングパラメータ hidden が true に設定されている場合、メニューツリーがこのルートをフィルタリングして除外し、表示しないことを意味することに注意してください。
ダッシュボードのルーティングは第 1 レベルのメニューです。第 1 レベルのメニューの記述形式は、子に 1 つだけあります。
メタ内のパラメータのタイトルは、メニューに表示されるメニュー名を表します。
icon はメニューアイコンであり、読み込まれるのは /src/icons/ ディレクトリにある svg メニューアイコンです。したがって、独自のプロジェクトを行う場合は、アーティストにメニューアイコンを svg 形式で作成してもらい、配置する必要があります。 icon のパラメータ値はアイコンのファイル名です。
第 1 レベルのメニューの権限は、子の名前と一致します。

二次メニュー

ルーターメニュー2

第 2 レベルのメニューと第 1 レベルのメニューの唯一の違いは、子が 1 より大きく、その他は同じであることです。

3 番目のレベルのメニュー

ルーターメニュー3

第 3 レベルのメニュー形式には、子の中に子があります。

ルーティングテーブルの構成は、上記の手順に従って構成する必要があります。そうしないと、期待どおりの効果が得られません。メニュー表示を制御するための名前とメニュー権限の組み合わせにも注意してください。

インターフェースの書き込み

パス:/src/api/api.js
統一管理して簡単に変更できるように、ページで使用されるすべてのインターフェイスをこのファイルで定義する必要があります。
記載形式はテンプレートが提供する記載方法となります。
しかし、実際の開発では、get、post non-form フォーム、post form フォーム、rest フォームなど、パラメータを送信する複数の方法に遭遇することになります。以下は、これらの形式に対応する記述テンプレートです。

リクエストを取得する

アクシオスゲット

axios-get-async

フォーム送信を投稿する

axios-form-post

axios-form-post-async

注: application/x-www-form-urlenconded のヘッダーパラメーターを渡す必要がある場合、パラメーターは次のように記述する必要があります。
 const params = {
  data: {},
  headers: {
    'content-type': 'application/x-www-form-urlencoded'
  }
}

フォーム以外の投稿を投稿する

非フォーム送信は基本的にフォーム送信と同じです。違いは、元のデータへの割り当てを params への割り当てに変更する必要があることです。

休憩フォーム

アクシオスレスト

axios-rest-async

テンプレートフレームワークは残りのパラメーターも均一にカプセル化しており、パラメーターの転送方法はスクリーンショットです。

インターフェースプロキシ

実際の開発はすべてローカル開発です。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': ''
    }
  }
}

開発者は必要に応じて自分でプロキシを構成できます

Cookie情報を設定する

バックエンドシステムに jwt などの独自の認証メカニズムがある場合。その場合、Cookie 情報の認証を考慮する必要はありません。
Cookie を使用する場合は、上記の構成プロキシに onProxyReq 構成を直接追加し、Cookie 情報をヘッダー情報に挿入して保存し、npm run dev を再度実行します。

echartsダイアグラムの使用法

チャートメーカーコンポーネントの導入

 import chartMaker from '@/components/charts/chartMaker';

components: {
	chartMaker,
},

タグの紹介

 <chart-maker id="chart-small1" height="120px" width="100%" :option.sync="chartOption" :forceRefresh.sync="forceRefreshChart"></chart-maker>
id---不能重复
height---固定高度
width---宽度使用百分比，才能支持自适应，容器宽度由外层容器控制。
option---echarts参数，模板中已经集成了较为常用的图形使用
forceRefresh---强制刷新组件，传入为true时才会强制刷新

プロパティを定義する

 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属性，传入到组件

コール属性設定メソッド

 this.getChart1Option();
// 调用这个方法后，表格就能展现了

eslint コード仕様の変更手順

コードを書き終えると、完成したと喜んで思い、公開したくなります。コードにフォーマットの問題がある場合、サーバーへの送信が許可されないため、記者会見は拒否されたことが判明した。
では、コード形式の問題を解決するにはどうすればよいでしょうか?

エスリント

まず、npm run lint を使用します。何はともあれ、これを最初に実行すれば、多くの書式設定の問題はすぐに解決されます。
まだ問題がたくさんある場合は、それを 1 つずつ解決する必要があります。解決策は次のとおりです
1. エラーメッセージには http://eslint.ort/docs/rules/no-var などのリンクがあります。このリンクをクリックして eslint 公式 Web サイトにアクセスし、エラーの原因を調べて次のように変更します。対応する形式。
2. このエラーを修正することが実際に難しい場合は、この仕様をブロックできます。ルートディレクトリの .eslintrc.js ファイルに移動し、上記の no-var ルールなどの対応するルールシールドをルールオブジェクトに追加します。「no-var」: 0 を設定すると、このルールがフィルタリングされます。

＃＃＃＃リリース

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

上記のチュートリアルを終えると、このテンプレートを使用できるようになっただけでなく、フロントエンドの世界に入ったことになると思います。ドキュメントがまだ不明瞭な場合、または関連する知識を補足する必要がある場合は、いつでも私に連絡してください~

拡大する

how wonderful the cain design

カインの素晴らしいデザイン

導入

序文

環境

テクノロジースタック

コード構造

プロジェクトの表示

開発する

開発前提

開発問題

要素 UI コンポーネントのリファレンス

ユーザーログインインターフェースの変更

トークン認証

ルーティングテーブルの設定ルール

インターフェースの書き込み

インターフェースプロキシ

Cookie情報を設定する

echartsダイアグラムの使用法

eslint コード仕様の変更手順

ant design

次のiPhoneをデザインする

逃げる方法

どうやって2 脱出するか

The Wonderful 101: リマスター版ヴォルケン王子

コグニションエピソード 4: カインキラー

chat.petals.dev

GPT Prompt Templates

GPTyped

termwind

wp functions

slugify

waymo open dataset

termwind

wp functions