vue-element-admin
- 統合ソリューション： vue-element-admin
- 基本テンプレート： vue-admin-template
統合ソリューションを強くお勧めします。
公式サイトでは基本的なテンプレートの使用を推奨していますが、必要に応じて統合ソリューションから機能を追加してください。統合スキームの一部の機能が使用できないため、冗長なコードが形成されます。
ただし、基本テンプレートの使用は非常に基本的で、タブナビゲーションなどの機能は多くありません。基本テンプレートにはパンくずナビゲーションしかありません。現時点では、タブの機能を追加したい場合は、私のような人がソースコードに精通していない。何をコピーすればよいかわからない。
したがって、統合スキーム、冗長性は冗長であり、コードの削除はコードのコピーよりも常に簡単です。
前作はすべて巨人の肩の上に立っていましたが、ビジネスニーズに応じて、業界の大物によってフレームワークが改造され、基本的にはビジネスコードだけを気にして直接使用されていました。したがって、このフレームワークは使用されていませんが、開発は難しくありません。
さて、最初から新しいプロジェクトがこのフレームワークを再び使用します。実際には、フレームワークのソースコードをgithubからダウンロードして開発を開始しているため、多くの詳細を要約して記録する必要があります。
テキスト
ログイン：確認コードコードなど、ユーザー名とパスワードに加えてログインに必要なパラメーター
src / store / modules / user.js
login（{commit}、userInfo）{
const {ユーザー名、パスワード、コード、コードID} = userInfo
新しいPromise（（resolve、reject）=> {を返す
login（{ユーザー名：username.trim（）、パスワード：パスワード、コード：code.trim（）、codeId：codeId}）。then（response => {
const {data} =応答
commit（ 'SET_TOKEN'、data.token）
setToken(data.token)
// commit（ 'SET_TOKEN'、data.token）
// setToken(data.token)
resolve（）
}）。catch（error => {
拒否（エラー）
}）
}）
}、
トークンを変更する
src / utils / request.js
if（store.getters.token）{
//各リクエストにトークンを運ばせます
// ['X-Token']はカスタムヘッダーキーです
//実際の状況に応じて変更してください
//config.headersekenen'X-Token '] = getToken（）
config.headers ['auth-token'] = 'userToken：' + getToken（）//各リクエストにカスタムトークンを伝送させます。実際の状況に応じて変更してください
}
タイムアウトの変更をリクエストする
src / utils / request.js
タイムアウト：10000
ルーティングの変更：ログインページでパスワードを忘れた場合など、ルーティングにリダイレクトが必要ない場合。
src / permit.js
const whiteList = ['/ login'、 '/ auth-redirect'、 '/ forgetPwd'] //リダイレクトホワイトリストなし
権限ルーティング：権限関連ページの権限を参照してください
src / router / index.js
export const asyncRoutes = [{}];
ルートはナビゲーションメニューで非表示になっています：非表示：true
src / router / index.js
{{
パス： '/ forgetPwd'、
名前： 'ForgetPwd'、
コンポーネント：（）=>
インポート（ '@ / views / user / forgetPwd'）、
非表示：true
}、
設定：デフォルトでメニューの上にロゴ表示を開くように設定します
src / store / modules / settings.js
src / settings.js
/ **
* @type {boolean} true | false
* @ descriptiontagsViewが必要かどうか
* /
tagsView：true、
表示されているプロパティには$でアクセスする必要があります。または、Vueインスタンスでは_はプロキシされません。
src / permit.js中修改Message.error（error）是Message.error（error.message）
キャッチ（エラー）{
//トークンを削除し、ログインページに移動して再ログインします
store.dispatch（ 'user / resetToken'）を待つ
Message.error（error.message）
next（ `/ login？redirect = $ {to.path}`）
NProgress.done（）
}
権限制御に関して、フレームワークはページレベルおよびボタンレベルの権限制御をサポートします。
ルーティングの権限制御はページレベルで行われます。
src / router / index.js
{{
パス： '/ permit'、
コンポーネント：レイアウト、
リダイレクト： '/ permit / page'、
alwaysShow：true、//常にルートメニューを表示します
名前： '許可'、
メタ：{
タイトル： '許可'、
アイコン： 'ロック'、
ロール：['admin'、 'editor'] //ルートナビゲーションでロールを設定できます
}、
子供達： [
{{
パス： 'ページ'、
コンポーネント：（）=> import（ '@ / views / permit / page'）、
名前： 'PagePermission'、
メタ：{
タイトル： 'ページ許可'、
ロール：['admin'] //または、サブナビゲーションでのみロールを設定できます
}
}、
{{
パス： 'ディレクティブ'、
コンポーネント：（）=> import（ '@ / views / permit / directive'）、
名前： 'DirectivePermission'、
メタ：{
タイトル： '指令許可'
//役割を設定しない場合、意味：このページには権限は必要ありません
}
}、
{{
パス： '役割'、
コンポーネント：（）=> import（ '@ / views / permit / role'）、
名前： 'RolePermission'、
メタ：{
タイトル： '役割の許可'、
役割：['admin']
}
}
]
}、
ページの権限制御はボタンレベルです。
キーメソッド
v-if = "checkPermission（['admin'、 'editor']）"
v-permission = "['admin'、 'editor']"
フロントエンドとバックエンドのパラメーターの相互作用：応答コードと応答メッセージについて
バックエンドは、ヘッダー内のステータスコードとx-api-messageを応答コードとエラーメッセージとして取得するように要求します。
メッセージをデコードします（base64）
decodeURIComponent（window.atob（ 'dG9rZW4lRTQlQjglOEQlRTglODMlQkQlRTQlQjglQkElRTclQTklQkElRUYlQkMlODE ='））
インターセプターをリクエストする
src / utils / request.js
以下の問題は、ステータスコードが403または404の場合、res.statusを使用して取得できないことです。エラー処理関数で取得するには、error.response.statusを使用する必要があります。
//応答インターセプター
service.interceptors.response.use（
/ **
*ヘッダーやステータスなどのhttp情報を取得したい場合
*応答を返してください=>応答
* /
/ **
*カスタムコードでリクエストステータスを確認する
*これはほんの一例です
※HTTPステータスコードでステータスを判断することもできます
* /
応答=> {
// const res = response.data
const res = response
//カスタムコードが200でない場合、エラーと判断されます。
//応答ステータスステータスコード情報を取得します
if（res.status！= 200）{
メッセージ（{
メッセージ：res.msg || 'リクエストに失敗しました'、
タイプ： 'エラー'、
期間：5 * 1000
}）
if（res.status == 401）{
//再ログインします
MessageBox.confirm（ 'ログインに失敗しました。もう一度ログインしてください！'、 'OK'、{
ConfirmButtonText： '再度ログイン'、
cancelButtonText： 'キャンセル'、
タイプ： '警告'
}）。then（（）=> {
store.dispatch（ 'user / resetToken'）。then（（）=> {
location.reload（）
}）
}）
}
Promise.reject（new Error（res.msg || 'Request failed'））を返します
} そうしないと {
解像度を返す
}
}、
エラー=> {
メッセージ（{
メッセージ：error.message、
タイプ： 'エラー'、
期間：5 * 1000
}）
Promise.reject（error）を返します
}
）
学習の拡大：http：//www.axios-js.com/zh-cn/docs/#%E9%94%99%E8%AF%AF%E5%A4%84%E7%90%86
エラー処理
|
要約：通常のパラメーターの相互作用を使用して、それらの蛾は何をしますか。後で他の人に相談しましたが、上記の記述にはまだ機能上の問題があります。他のプロトコルを送信に使用する場合、一部のプロトコルにはヘッダーメッセージがありません。さらに、バックエンドの戻り値は全体として暗号化されており、メッセージとステータスコードは、他の戻り値と一緒に記述する方が便利です。
{
"code": "200",
"msg": "成功",
"data": [{...},{...}]
}
设置的路由，跳出框架显示。
その理由は、コンポーネント：レイアウトが設定されていないためです。
src / router / index.js
{{
パス： '/ user'、
コンポーネント：レイアウト、
子供達： [{
パス： '中央'、
名前：「センター」、
コンポーネント：（）=>
インポート（ '@ / views / user / center / index'）、
非表示：true、
メタ：{タイトル： 'パーソナルセンター'}
}]
}
elementUIフォームリセット未定義のプロパティ「フォーム」を読み取れません」
除外
フォームにはrefが必要であり、formNameの名前は一貫している必要があります。
el-formおよびform-itemコンポーネントを完成させ、小道具を構成する必要があります。構成せずにこのメソッドを実行すると、入力ボックスの値はリセットされません。
エラーの理由：これはrefであり、refではないことに注意してください。
resetForm（formName）{
this。$ refs [formName] .resetFields（）;
}
ページングコンポーネントの英語表示を中国語に切り替えます
最初はそれが言語の問題であることに気づかず、全文検索でGotoを見つけることができませんでした。
後で私はそれが言語の問題であることを知りました。
src / main.js
デフォルト設定では、英語が使用されます。
デフォルトは中国語であるため、直接コメント。次のVue.use要素にも注釈を付ける必要があることに注意してください。
// 'element-ui / lib / locale / lang / en'からenLangをインポートします//中国語の言語パックを使用している場合は、デフォルトでサポートしてください。追加のインポートは必要ありません。依存関係を削除してください。
Vue.use（Element、{
サイズ：Cookies.get（ 'size'）|| 'medium'、// element-uiのデフォルトサイズを設定
// locale：enLang //中国語を使用している場合は、設定する必要はありません。削除してください
}）
現在のページを閉じる
this。$ store.dispatch（ 'tagsView / delView'、this。$ route）
書かれていると効果がなく、間違った場所に書かれている可能性があります。たとえば、次の例では、終了メソッドエラーが記事コンポーネント（記事）に書き込まれます。
アプリケーション例
記事管理リストページ（インデックス）==（クリックして追加、ジャンプ）== "新しい記事ページ（追加）==（サブコンポーネント）=="記事コンポーネント（記事）==（コンテンツを入力して送信をクリック）==》追加に成功し、親コンポーネントをトリガー（追加）して現在のページを閉じ、リストページイベントに戻ります。
記事管理リストページ（インデックス）==（クリックして編集、ルーティングを介して記事IDを運ぶ、ジャンプ）== "記事編集ページ（編集）==（サブコンポーネント）=="記事コンポーネント（記事）==塗りつぶしコンテンツの後、[送信] ==》 [編集が成功しました]をクリックし、親コンポーネントのイベントをトリガーして（編集）、現在のページを閉じてリストページに戻ります。
備考：
1.編集ページ（編集）にとどまり、ブラウザの更新を直接クリックします。更新すると記事IDが失われます。更新すると、他のページは自動的に閉じられ、現在のページのみが保持されます。
2.追加と編集、主に追加。リストページに戻った後、リストページはデータを再度取得する必要があります。リストページに、ページ初期化の方法をアクティブ化して記述します。
アクティベート（）{
this.getTableData（）
}
記事の新しいページ
<テンプレート>
<article-detail：is-edit = "false" @ close = "closeSelectedTag" />
</ template>
<スクリプト>
'./components/ArticleDetail'からArticleDetailをインポートします
デフォルトのエクスポート{
名前： 'ManageModuleNewsAdd'、
コンポーネント：{ArticleDetail}、
メソッド：{
closeSelectedTag（）{
//現在のページを閉じます
this。$ store.dispatch（ 'tagsView / delView'、this。$ route）
this。$ router.push（{
名前： 'ManageModuleNews'
}）
}
}
}
</ script>
記事編集ページ
<テンプレート>
<article-detail：is-edit = "true" @ close = "closeSelectedTag" />
</ template>
<スクリプト>
'./components/ArticleDetail'からArticleDetailをインポートします
デフォルトのエクスポート{
名前： 'ManageModuleNewsEdit'、
コンポーネント：{ArticleDetail}、
メソッド：{
closeSelectedTag（）{
//現在のページを閉じます
this。$ store.dispatch（ 'tagsView / delView'、this。$ route）
this。$ router.push（{
名前： 'ManageModuleNews'
}）
}
}
}
</ script>
記事コンポーネント
作成した（） {
if（this.isEdit）{//编辑isEdit = true
const id = this。$ route.params.id
if（！id）{
//更新するとIDが失われます。更新すると、他のページは自動的に閉じられ、現在のページのみが保持されます。
this。$ message（{
メッセージ： '情報IDが失われました。このページを閉じて、再入力してください。'、
タイプ： '警告'
}）
} そうしないと {
// IDに基づいて記事の詳細を照会します
this.fetchData（id）
}
} そうしないと {
// 追加
this.newsForm = this.defaultNews
this.fileObj.fileUrl = ''
}
}、
メソッド：{
handleSubmit（）{
if（this.isEdit）{
this.updateNews（this.newsForm）
} そうしないと {
this.addNews（this.newsForm）
}
}、
async addNews（row）{
const res = await addNews（row）
if（res.code === 200）{
this。$ message（{
メッセージ： '正常に追加されました！'、
タイプ： '成功'
}）
//親コンポーネントをトリガーし、現在のページを閉じて、リストページにジャンプします
this。$ emit（ 'close'）
}
}、
非同期updateNews（row）{
const res = await updateNews（row）
if（res.code === 200）{
this。$ message（{
メッセージ： '正常に保存してください！'、
タイプ： '成功'
}）
//親コンポーネントをトリガーし、現在のページを閉じて、リストページにジャンプします
this。$ emit（ 'close'）
}
}、
}
======
つづく