Vue での ElementUI の使用に関する詳細な説明

Vue での ElementUI の使用に関する詳細な説明

ログイン + セッションストレージ

エフェクト表示

ここに画像の説明を挿入

ログインに成功すると、ユーザー ID がフロントエンドの sessionStorage に保存されます。インターセプターは、ユーザー ID が存在するかどうかに基づいてインターセプトします。ユーザーの権限も sessionStorage に保存できます。次に、特定のページにアクセスするときに、create メソッドで権限が使用可能かどうかを判断します。

<テンプレート>
	<div class="ログインラップ">
		<el-form class="ログインコンテナ" ref="ログインフォームRef" :model="ログインフォーム">
			<h1 class="title">ユーザーログイン</h1>
			<el-form-item ラベル="">
				<el-input type="text" placeholder="ユーザーアカウント" v-model="loginForm.username" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item ラベル="">
				<el-input type="text" placeholder="ユーザーパスワード" v-model="loginForm.password" autocomplete="off"></el-input>
			</el-form-item>

			<el-form-item>
				<el-radio-group v-model="ログインフォーム.resource">
					<el-radio label="管理者"></el-radio>
					<el-radio label="一般ユーザー"></el-radio>
				</el-ラジオグループ>
			</el-form-item>

			<el-form-item>
				<テンプレート スロット スコープ="スコープ">
					<el-button type="primary" @click="doLogin()" style="width: 100%;">ユーザーログイン</el-button>
					<!-- <el-button style="width: 48%;" @click="gotoRegister" >ユーザー登録</el-button> -->
				</テンプレート>
			</el-form-item>
			<!-- <el-row style="text-align: center;">

                <el-link @click="gotoRegister()">ユーザー登録</el-link>
                <el-link>パスワードを忘れましたか?</el-link>

            </el-row> -->
		</el-form>
	</div>
</テンプレート>

<スクリプト>
	エクスポートデフォルト{
		データ: 関数() {
			戻る {

				ログインフォーム: {
					ユーザー名: ''、
					パスワード: ''、
					リソース: ''
				}
			}
		},

		メソッド: {
			レジスタに移動: 関数() {
				this.$router.push({
					名前: 'レジスタ'
				});
			},
			ログイン() {
				リソースを this.loginForm.resource とします
				this.$refs.loginFormRef.validate(非同期有効 => {
					有効であれば戻り値:
					if (リソース == "管理者") {
						定数{
							データ:res
						} = this.axios.post("http://localhost:8088/loginadmin", this.loginForm) を待機します

						もし(res){
							this.$message.success("管理者ログインに成功しました")
							sessionStorage.setItem("personid","ljhjiayou")
						
							this.$router.push({
								パス: "/dong"
							});
						} それ以外 {
							this.$message.error("アカウントまたはパスワードのエラー")
						}
						//通常のユーザーログイン }else{
						
						定数{
							データ:res
						} = this.axios.post("http://localhost:8088/loginuser", this.loginForm) を待機します
						
						もし(res){
							コンソール.log(res)
							this.$message.success("通常のユーザーのログインが成功しました")
							sessionStorage.setItem("personid",res)
							this.$router.push({
								パス: "/person"
							});
						} それ以外 {
							this.$message.error("アカウントまたはパスワードのエラー")
						}
					}

				})
			}
		}
	}
</スクリプト>
//scoped="scoped"は、スタイルが現在のVUEのみを制御することを意味します
<スタイル スコープ="スコープ">
	.ログインラップ{
		ボックスのサイズ: 境界線ボックス;
		幅: 100%;
		高さ: 100%;
		パディング上部: 10%;
		background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjEzNjFweCIgaGVpZ2h0PSI2MDlweCIgdmlld0JveD0iMCAwIDEzNjEgNjA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0Ni4yICg0NDQ5NikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JvdXAgMjE8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iQW50LURlc2lnbi1Qcm8tMy4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6LSm5oi35a+G56CB55m75b2VLeagoemqjCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTc5LjAwMDAwMCwgLTgyLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDc3LjAwMDAwMCwgNzMuMDAwMDAwKSI++PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zOC4xMzU0NTE0LDg4LjM1MjAyMTUgQzQzLjg5ODQyMjcsODguMzUyMDIxNSA0OC41NzAyMzQsODMuNjgzODY0NyA0OC41NzAyMzQsNzcuOTI1NDAxNSBDNDguNTcwMjM0LDcyLjE2NjkzODMgNDMuODk4NDIyNyw2Ny40OTg3ODE2IDM4LjEzNTQ1MTQsNjcuNDk4NzgxNiBDMzIuMzcyNDgwMSw2Ny40OTg3ODE2IDI3LjcwMDY2ODgsNzIuMTY2OTM4MyAyNy43MDA2Njg4LDc3LjkyNTQwMTUgQzI3LjcwMDY2ODgsODMuNjgzODY0NyAzMi4zNzI0ODAxLDg4LjM1MjAyMTUgMzguMTM1NDUxNCw4OC4zNTIwMjE1IFoiIGlkPSJPdmFsLTMtQ29weSIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC40NSI++PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik02My45MjYyMTg3LDMzLjUyMTU2MSBMNDMuNjcyMTMyNiw2OS4zMjUwOTUxIiBpZD0iUGF0aC0xNSIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjAuNzAyNjc4OTY0IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS1kYXNoYXJyYXk9IjEuNDA1MzU3ODk5ODczMTUzLDIuMTA4MDM2OTUzNDY5OTgxIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjYuODUwOTIyLCAxMy41NDM2NTQpIHJvdGF0ZSgzMC4wMDAwMDApIHRyYW5zbGF0ZSgtMTI2Ljg1MDkyMiwgLTEzLjU0MzY1NCkgdHJhbnNsYXRlKDExNy4yODU3MDUsIDQuMzgxODg5KSIgZmlsbD0iI0NGREFFNiI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSI5LjEzNDgyNjUzIiBjeT0iOS4xMjc2ODA3NiIgcng9IjkuMTM0ODI2NTMiIHJ5PSI5LjEyNzY4MDc2Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOC4yNjk2NTMxLDE4LjI1NTM2MTUgQzE4LjI2OTY1MzEsMTMuMjE0MjgyNiAxNC4xNzk4NTE5LDkuMTI3NjgwNzYgOS4xMzQ4MjY1Myw5LjEyNzY4MDc2IEM0LjA4OTgwMTE0LDkuMTI3NjgwNzYgMCwxMy4yMTQyODI2IDAsMTguMjU1MzYxNSBMMTguMjY5NjUzMSwxOC4yNTUzNjE1IFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDkuMTM0ODI3LCAxMy42OTE1MjEpIHNjYWxlKC0xLCAtMSkgdHJhbnNsYXRlKC05LjEzNDgyNywgLTEzLjY5MTUyMSkgIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE0IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMTYuMjk0NzAwLCAxMjMuNzI1NjAwKSByb3RhdGUoLTUuMDAwMDAwKSB0cmFuc2xhdGUoLTIxNi4yOTQ3MDAsIC0xMjMuNzI1NjAwKSB0cmFuc2xhdGUoMTA2LjI5NDcwMCwgMzUuMjI1NjAwKSI+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMiIgZmlsbD0iI0NGREFFNiIgb3BhY2l0eT0iMC4yNSIgY3g9IjI5LjExNzY0NzEiIGN5PSIyOS4xNDAyNDM5IiByeD0iMjkuMTE3NjQ3MSIgcnk9IjI5LjE0MDI0MzkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQ0ZEQUU2IiBvcGFjaXR5PSIwLjMiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjIxLjU2ODYyNzUiIHJ5PSIyMS41ODUzNjU5Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMi1Db3B5IiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuNCIgY3g9IjE3OS4wMTk2MDgiIGN5PSIxMzguMTQ2MzQxIiByeD0iMjMuNzI1NDkwMiIgcnk9IjIzLjc0MzkwMjQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0yIiBmaWxsPSIjQkFDQUQ5IiBvcGFjaXR5PSIwLjUiIGN4PSIyOS4xMTc2NDcxIiBjeT0iMjkuMTQwMjQzOSIgcng9IjEwLjc4NDMxMzciIHJ5PSIxMC43OTI2ODI5Ij48L2VsbGlwc2U++PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMCIgZmlsbD0iI0NGREFFNiIgY3g9IjIxOC4zODIzNTMiIGN5PSIxMzguNjg1OTc2IiByeD0iMS42MTc2NDcwNiIgcnk9IjEuNjE4OTAyNDQiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC0xMC1Db3B5LTIiIGZpbGw9IiNFMEI0QjciIG9wYWNpdHk9IjAuMzUiIGN4PSIxNzkuNTU4ODI0IiBjeT0iMTc1LjM4MTA5OCIgcng9IjEuNjE3NjQ3MDYiIHJ5PSIxLjYxODkwMjQ0Ij48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPGVsbGlwc2UgaWQ9Ik92YWwtMTAtQ29weSIgZmlsbD0iI0UwQjRCNyIgb3BhY2l0eT0iMC4zNSIgY3g9IjE4MC4wOTgwMzkiIGN5PSIxMDIuNTMwNDg4IiByeD0iMi4xNTY4NjI3NSIgcnk9IjIuMTU4NTM2NTkiPjwvZWxsaXBzZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjguOTk4NTM4MSwyOS45NjcxNTk4IEwxNzEuMTUxMDE4LDEzMi44NzYwMjQiIGlkPSJQYXRoLTExIiBzdHJva2U9IiNDRkRBRTYiIG9wYWNpdHk9IjAuOCI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTEwIiBvcGFjaXR5PSIwLjc5OTk5OTk1MiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA1NC4xMDA2MzUsIDM2LjY1OTMxNykgcm90YXRlKC0xMS4wMDAwMDApIHRyYW5zbGF0ZSgtMTA1NC4xMDA2MzUsIC0zNi42NTkzMTcpIHRyYW5zbGF0ZSgxMDI2LjYwMDYzNSwgNC42NTkzMTcpIj4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbC03IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiIGN4PSI0My44MTM1NTkzIiBjeT0iMzIiIHJ4PSIxMS4xODY0NDA3IiByeT0iMTEuMjk0MTE3NiI++CiAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNC42NTk3Mzg1LDI0LjgwOTY5NCBMNS43MTY2NjA4NCw0Ljc2ODc4OTQ1IiBpZD0iUGF0aC0yIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZWxsaXBzZSBpZD0iT3ZhbCIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjAuOTQxMTc2NDcxIiBjeD0iMy4yNjI3MTE4NiIgY3k9IjMuMjk0MTE3NjUiIHJ4PSIzLjI2MjcxMTg2IiByeT0iMy4yOTQxMTc2NSI+PC9lbGxpcHNlPgogICAgICAgICAgICAgICAgICAgIDxlbGxpcHNlIGlkPSJPdmFsLUNvcHkiIGZpbGw9IiNGN0UxQUQiIGN4PSIyLjc5NjYxMDE3IiBjeT0iNjEuMTc2NDcwNiIgcng9IjIuNzk2NjEwMTciIHJ5PSIyLjgyMzUyOTQxIj48L2VsbGlwc2U+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM0LjYzMTI0NDMsMzkuMjkyMjcxMiBMNS4wNjM2NjY2Myw1OS43ODUwODIiIGlkPSJQYXRoLTEwIiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMC45NDExNzY0NzEiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cC0xOSIgb3BhY2l0eT0iMC4zMyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTI4Mi41MzcyMTksIDQ0Ni41MDI4NjcpIHJvdGF0ZSgtMTAuMDAwMDAwKSB0cmFuc2xhdGUoLTEyODIuNTM3MjE5LCAtNDQ2LjUwMjg2NykgdHJhbnNsYXRlKDExNDIuNTM3MjE5LCAzMjcuNTAyODY3KSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLTE3IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNDEuMzMzNTM5LCAxMDQuNTAyNzQyKSByb3RhdGUoMjc1LjAwMDAwMCkgdHJhbnNsYXRlKC0xNDEuMzMzNTM5LCAtMTA0LjUwMjc0MikgdHJhbnNsYXRlKDEyOS4zMzM1MzksIDkyLjUwMjc0MikiIGZpbGw9IiNCQUNBRDkiPgogICAgICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTQiIG9wYWNpdHk9IjAuNDUiIGN4PSIxMS42NjY2NjY3IiBjeT0iMTEuNjY2NjY2NyIgcj0iMTEuNjY2NjY2NyI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMy4zMzMzMzMzLDIzLjMzMzMzMzMgQzIzLjMzMzMzMzMsMTYuODkwMDExMyAxOC4xMDk5ODg3LDExLjY2NjY2NjcgMTEuNjY2NjY2NywxMS42NjY2NjY3IEM1LjIyMzM0NDU5LDExLjY2NjY2NjcgMCwxNi44OTAwMTEzIDAsMjMuMzMzMzMzMyBMMjMuMzMzMzMzMywyMy4zMzMzMzMzIFoiIGlkPSJPdmFsLTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExLjY2NjY2NywgMTcuNTAwMDAwKSBzY2FsZSgtMSwgLTEpIHRyYW5zbGF0ZSgtMTEuNjY2NjY3LCAtMTcuNTAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC01LUNvcHktNiIgZmlsbD0iI0NGREFFNiIgY3g9IjIwMS44MzMzMzMiIGN5PSI4Ny41IiByPSI1LjgzMzMzMzMzIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTQzLjUsODguODEyNjY4NSBMMTU1LjA3MDUwMSwxNy42MDM4NTQ0IiBpZD0iUGF0aC0xNyIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuNSwzNy4zMzMzMzMzIEwxMjcuNDY2MjUyLDk3LjY0NDk3MzUiIGlkPSJQYXRoLTE4IiBzdHJva2U9IiNCQUNBRDkiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwb2x5bGluZSBpZD0iUGF0aC0xOSIgc3Ryb2tlPSIjQ0ZEQUU2IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciIHBvaW50cz0iMTQzLjkwMjU5NyAxMjAuMzAyMjgxIDE3NC45MzU0NTUgMjMxLjU3MTM0MiAzOC41IDE0Ny41MTA4NDcgMTI2LjM2Njk0MSAxMTAuODMzMzMzIj48L3BvbHlsaW5lPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNTkuODMzMzMzLDk5Ljc0NTM4NDIgTDE5NS40MTY2NjcsODkuMjUiIGlkPSJQYXRoLTIwIiBzdHJva2U9IiNFMEI0QjciIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyIgb3BhY2l0eT0iMC42Ij48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIwNS4zMzMzMzMsODIuMTM3MjEwNSBMMjM4LjcxOTQwNiwzNi4xNjY2NjY3IiBpZD0iUGF0aC0yNCIgc3Ryb2tlPSIjQkFDQUQ5IiBzdHJva2Utd2lkdGg9IjEuMTY2NjY2NjciPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjY2LjcyMzQyNCwxMzIuMjMxOTg4IEwyMDcuMDgzMzMzLDkwLjQxNjY2NjciIGlkPSJQYXRoLTI1IiBzdHJva2U9IiNDRkRBRTYiIHN0cm9rZS13aWR0aD0iMS4xNjY2NjY2NyI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwtNSIgZmlsbD0iI0MxRDFFMCIgY3g9IjE1Ni45MTY2NjciIGN5PSI4Ljc1IiByPSI4Ljc1Ij48L2NpcmNsZT4KICAgICAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTUtQ29weS0zIiBmaWxsPSIjQzFEMUUwIiBjeD0iMzkuMDgzMzMzMyIgY3k9IjE0OC43NSIgcj0iNS4yNSI+PC9jaXJjbGU++);
		/* 背景色: #112346; */
		背景繰り返し: 繰り返しなし;
		背景の位置: 中央右;
		背景サイズ: 100%;
	}

	.ログインコンテナ{
		境界線の半径: 10px;
		マージン: 0px 自動;
		幅: 350ピクセル;
		パディング: 30px 35px 15px 35px;
		背景: #fff;
		境界線: 1px 実線 #eaeaea;
		テキスト配置: 左;
		ボックスの影: 0 0 20px 2px rgba(0, 0, 0, 0.1);
	}

	。タイトル {
		マージン: 0px 自動 40px 自動;
		テキスト配置: 中央;
		色: #505458;
	}
</スタイル>

ページネーションテーブル

エフェクト表示

ここに画像の説明を挿入

ページネーションは難しさであり、重要なポイントです。 ! !
handleSizeChangeメソッドはページングサイズを選択します
handleCurrentChangeメソッドはページを選択する
loadDataはバックエンドAPIインターフェースを呼び出してページ分割されたデータを取得します。

<テンプレート>
	<div>
		<el-table :data="テーブルデータ" 境界線スタイル="幅: 100%">
			<el-table-column 固定プロパティ="id" ラベル="ニュース ID" 幅="150">
			</el-table-column>
			<el-table-column prop="typeid" label="ニュースタイトル" width="200">
			</el-table-column>
			<el-table-column prop="otherid" label="ニュース概要" width="200"> </el-table-column>
			<el-table-column prop="money" label="ニュースコンテンツ" width="200">
			</el-table-column>
			<el-table-column prop="datetime" label="ニュースリリース時間" width="150"> </el-table-column>
			<el-table-column fixed="right" label="操作" width="200">
				<テンプレート スロット スコープ="スコープ">
					<el-button @click="updateExercise(scope.row)" size="mesdium" type="primary">変更</el-button>
					<el-button @click="deleteExercise(scope.row)" type="warning" size="medium">削除</el-button>
				</テンプレート>
			</el-table-column>
		</el-table>
		<div class="block">
			<el-pagination @size-change="サイズ変更ハンドル" @current-change="現在の変更ハンドル"
				:current-page="現在のページ" :page-sizes="[5, 10, 15, 20]" :page-size="ページサイズ"
				layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
			</el-pagination>
		</div>
	</div>
</テンプレート>
<スクリプト>
	エクスポートデフォルト{
		メソッド: {
			ハンドルサイズ変更(val) {
				//コンソール.log(値)
				this.pageSize = val;
				this.loadData( this.currentPage、 this.pageSize);
			},
			現在の変更を処理する(val) {
				コンソール.log(値)
				this.currentPage = val;
				this.loadData( this.currentPage、 this.pageSize);
			},
			//サーバーからデータを読み込む loadData: function(pageNum, pageSize) {
				_this = this とします。
				console.log(このページ番号)
				this.axios.get("http://localhost:8088/records/querystudentbypage?pageNum=" + pageNum +
					"&pageSize=" + this.pageSize).then(function(res) {
					//console.log(res.data.pagestudentdata.list)
					_this.tableData = res.data.pagestudentdata.list;
					_this.totalCount = res.data.number;

					
				}、 関数() {
					console.log('失敗');
				});
			},
			
			
			

		},
		データ() {
			戻る {
				// 現在のページ1: 5,
				// 現在のページ2: 5,
				// 現在のページ3: 5,
				// 現在のページ4: 4,
				現在のページ: 1,
				テーブルデータ: null、
				ページサイズ: 5,
				合計数: 15,
				ページ番号: 1,
			};
		},
		作成された() {
			// _this = this とします。
			// axios.get("http://localhost:8088/records").then(function(response) {
			// _this.tableData = レスポンス.data
			// })
			this.loadData(this.pageNum、this.pageSize) は、
		},
	}
</スクリプト>

後部

@レスポンス本文
    @RequestMapping(値 = "/querystudentbypage", メソッド = RequestMethod.GET)
    パブリック Map<String, Object> querystudentbypage(@RequestParam(value="pageNum")int pageNum, @RequestParam(value="pageSize")int pageSize)
    {
        PageHelper.startPage(ページ番号、ページサイズ);
        リスト<レコード> courses = recordsMapper.selectList(null);
        PageInfo<レコード> page = new PageInfo<>(コース);
        System.out.println("---------------"+ページ);
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("pagestudentdata", ページ);
        map.put("数値", page.getTotal());
        マップを返します。
    }

参考リンク

スイッチ + タブ

エフェクト表示

ここに画像の説明を挿入

スイッチの主なメソッドはswitchChangeです
タブページは難しくありません。以下のコードが分からない場合は、公式ドキュメントを参照してください。

フロントエンドスイッチメインコード

 <el-table-column prop="name" label="固定するかどうか" width="150">
		  	<テンプレート スロット スコープ="スコープ">
		  		<el-switch v-model="scope.row.statusid" :active-value="1" :inactive-value="2"
		  			@change="switchChange($event, scope.row)" アクティブカラー="#13ce66"
		  			非アクティブカラー="#ff4949"></el-switch>
		  	</テンプレート>
 </el-table-column>

完全なコード

<テンプレート>
  <el-tabs v-model="アクティブ名" @tab-click="ハンドルクリック">
    <el-tab-pane label="すべてのアカウント" name="first">
		<el-table :data="テーブルデータ" 境界線スタイル="幅: 100%">
		  <el-table-column fixed prop="accoundid" label="アカウントID" width="150">
		  </el-table-column>
		  <el-table-column prop="password" label="パスワード" width="200">
		  </el-table-column>
		  <el-table-column prop="バランス" label="バランス" width="200"> </el-table-column>
		  <el-table-column prop="name" label="固定するかどうか" width="150">
		  	<テンプレート スロット スコープ="スコープ">
		  		<el-switch v-model="scope.row.statusid" :active-value="1" :inactive-value="2"
		  			@change="switchChange($event, scope.row)" アクティブカラー="#13ce66"
		  			非アクティブカラー="#ff4949"></el-switch>
		  	</テンプレート>
		  </el-table-column>
		  <el-table-column prop="personid" label="personid" width="200">
		  </el-table-column>
		  <el-table-column fixed="right" label="操作" width="200">
		    <テンプレート スロット スコープ="スコープ">
		      <el-button @click="deleteExercise(scope.row)" type="warning" size="medium"
		        >削除</el-button
		      >
		    </テンプレート>
		  </el-table-column>
		</el-table>
	</el-tab-pane>
    <el-tab-pane label="凍結されたアカウント" name="second">
		<el-table :data="tableDatab" 境界線スタイル="幅: 100%">
		  <el-table-column fixed prop="accoundid" label="アカウントID" width="150">
		  </el-table-column>
		  <el-table-column prop="personinfo.realname" label="name" width="200">
		  </el-table-column>
		  <el-table-column prop="password" label="パスワード" width="200">
		  </el-table-column>
		  <el-table-column prop="バランス" label="バランス" width="200"> </el-table-column>
		  
		  <el-table-column fixed="right" label="操作" width="200">
		    <テンプレート スロット スコープ="スコープ">
				<el-button @click="qiyong(scope.row)" type="warning" size="medium"
				  >有効にする</el-button
				>
		    </テンプレート>
		  </el-table-column>
		</el-table>
	</el-tab-pane>
    <el-tab-pane label="有効なアカウント" name="third">
		<el-table :data="tableDatabc" 境界線スタイル="幅: 100%">
		  <el-table-column fixed prop="accoundid" label="アカウントID" width="150">
		  </el-table-column>
		  <el-table-column prop="personinfo.realname" label="name" width="200">
		  </el-table-column>
		  <el-table-column prop="password" label="パスワード" width="200">
		  </el-table-column>
		  <el-table-column prop="バランス" label="バランス" width="200"> </el-table-column>
		  
		  <el-table-column fixed="right" label="操作" width="200">
		    <テンプレート スロット スコープ="スコープ">
		      <el-button @click="dongjie(scope.row)" type="warning" size="medium"
		        >フリーズ</el-button
		      >
		    </テンプレート>
		  </el-table-column>
		</el-table>
	</el-tab-pane>
  </el-tabs>
</テンプレート>
<スクリプト>
  エクスポートデフォルト{
    データ() {
      戻る {
		テーブルデータ: null、
		テーブルデータベース: null、
		テーブルデータbc: null、
        アクティブ名: 'first'
      };
    },
    メソッド: {
      handleClick(タブ、イベント) {
        console.log(タブ、イベント);
      },
	  スイッチチェンジ(e, データ) {
	  	(e == 1)の場合{
	  		axios.get('http://localhost:8088/accounts/kaiqi/' + data.accoundid).then((res) => {
	  			this.$メッセージ({
	  				メッセージ: 「正常に開きました」
	  				タイプ: 「成功」
	  			});
	  			// 場所を再読み込み()
	  		});
	  	} それ以外の場合 (e == 2) {
	  		axios.get('http://localhost:8088/accounts/dongjie/' + data.accoundid).then((res) => {
	  			this.$メッセージ({
	  				メッセージ: 「フリーズ成功」、
	  				タイプ: 「成功」
	  			});
	  			// 場所を再読み込み()
	  		});
	  	}
	  
	  
	  },
	  東傑(行) {
	    _this=これとする
	    this.$confirm('「+row.personinfo.realname+」のアカウントを凍結してもよろしいですか?', 'アカウントを凍結', {
	    	confirmButtonText: '確認'、
	    	cancelButtonText: 'キャンセル'、
	    	タイプ: '警告'
	    })。そして()=>{
	    	axios.get('http://localhost:8088/accounts/dongjie/'+row.accoundid).then(function (response){
	    		if (レスポンスデータ) {
	    			_this.$alert(row.personinfo.realname+'アカウントが正常に凍結されました!', 'アカウントを凍結',{
	    				confirmButtonText: '確認'、
	    				コールバック: アクション =>{
	    					場所.reload()
	    				}
	    			});
	    		}
	    	})
	    }).catch(()=>{
	    	
	    });
	  },
	  qiyong(行) {
	    _this=これとする
	    this.$confirm('+row.personinfo.realname+' でアカウントを有効にしてもよろしいですか?', 'アカウントを有効にする', {
	    	confirmButtonText: '確認'、
	    	cancelButtonText: 'キャンセル'、
	    	タイプ: '警告'
	    })。そして()=>{
	    	axios.get('http://localhost:8088/accounts/kaiqi/'+row.accoundid).then(function (response){
	    		if (レスポンス.データ) {
	    			_this.$alert(row.personinfo.realname+'アカウントが正常に有効化されました!', 'アカウントを有効にする',{
	    				confirmButtonText: '確認'、
	    				コールバック: アクション =>{
	    					場所.reload()
	    				}
	    			});
	    		}
	    	})
	    }).catch(()=>{
	    	
	    });
	  },
	  削除エクササイズ(行) {
	    _this=これとする
	    this.$confirm('アカウントを削除してもよろしいですか'+row.accoundid+'?','アカウントを削除',{
	    	confirmButtonText: '確認'、
	    	cancelButtonText: 'キャンセル'、
	    	タイプ: '警告'
	    })。そして()=>{
	    	axios.delete('http://localhost:8088/accounts/'+row.accoundid).then(function (response){
	    		if (レスポンス.データ) {
	    			_this.$alert(row.accoundid+'アカウントが正常に削除されました!', 'アカウントを削除',{
	    				confirmButtonText: '確認'、
	    				コールバック: アクション =>{
	    					場所.reload()
	    				}
	    			});
	    		}
	    	})
	    }).catch(()=>{
	    	
	    });
	  },
    },
	作成された(){
		_this=this とします。
		axios.get("http://localhost:8088/accounts").then(function (response){
			_this.tableData=レスポンスデータ
		})
		axios.get("http://localhost:8088/accounts/dongjie").then(function (response){
			_this.tableDatab=レスポンスデータ
		})
		axios.get("http://localhost:8088/accounts/qiyong").then(function (response){
			_this.tableDatabc=レスポンスデータ
		})
	},
  };
</スクリプト>

フロントエンドインターセプター

ルートにログイン権限が必要かどうかを判断する

メイン.js

router.beforeEach((to, from, next) => {
	// 次()
	if (to.meta.requireAuth) { // ルートにログイン権限が必要かどうかを判定します if (sessionStorage.getItem("personid")) {
			次()
		} それ以外 {
			// ログインしていない場合はログインページへジャンプします next('/')
		}
	} それ以外 {
		次()
	}
})

ルート

ルートにメタを追加: requireAuth: true
アクセスするにはログインが必要かどうかを示します

{
		パス: '/listxw',
		名前: 「ニュース管理」
		コンポーネント: インデックス、
		表示: true、
		メタ: {
			認証が必要: 有効
		},

		リダイレクト: "/listxw",
		子供たち: [{
				パス: "/addxw",
				名前:「ニュースを追加」
				コンポーネント: addxw、
				メタ: {
					認証が必要: 有効
				},

			},
			{
				パス: "/updatexw",
				名前: 「ニュースを変更」
				コンポーネント: updatexw、
				メタ: {
					認証が必要: 有効
				},

			},
			{
				パス: '/listxw',
				名前: 「ニュースリスト」
				コンポーネント: listxw、
				メタ: {
					認証が必要: 有効
				},

			},
			{
				パス: '/person',
				名前:「個人情報」
				構成要素: 人、
				メタ: {
					認証が必要: 有効
				},

			},
			{
				パス: '/record',
				名前: '取引記録'、
				コンポーネント: レコード、
				メタ: {
					認証が必要: 有効
				},
			
			}
		]、
	},

リッチテキストエディタ

エフェクト表示
以下の名前はリッチテキストエディタを使用して表示されます

ここに画像の説明を挿入

まずVue-Quill-Editorをインストールする必要があります
コマンド: npm install vue-quill-editor --save
Quill をダウンロード (Vue-Quill-Editor には依存関係が必要です)
npm インストール quill --save

完全なコード

<テンプレート>
	<div>
		<el-form ref="ログインフォームRef" label-width="100px" style="幅: 60%" :model="ログインフォーム">
			<el-form-item label="ニュースタイトル">
				<el-input v-model="ログインフォーム.title"></el-input>
			</el-form-item>
			<el-form-item label="ニュース概要">
				<el-input v-model="loginForm.newsabstract"></el-input>
			</el-form-item>
			<el-form-item label="ニュースコンテンツ">
				<div class="edit_container" style="width: 100%">
					<quill-editor v-model="loginForm.text" ref="myQuillEditor" :options="editorOption"
						@blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @change="onEditorChange($event)">
					</quill-editor>
				</div>
			</el-form-item>



			<el-form-item>
				<el-button type="primary" @click="changePwd()">ニュースを追加</el-button>
			</el-form-item>
		</el-form>
		<div v-html="str" ​​class="ql-editor">
			{{str}}
		</div>
	</div>

</テンプレート>



<スクリプト>
	輸入 {
		quillEditor
	} from "vue-quill-editor"; //エディターを呼び出す import 'quill/dist/quill.core.css';
	'quill/dist/quill.snow.css' をインポートします。
	'quill/dist/quill.bubble.css' をインポートします。

	エクスポートデフォルト{
		コンポーネント:
			quillEditor
		},

		データ() {
			戻る {

				ログインフォーム: {
					タイトル: ""、
					ニュース概要: "",
					文章: ""、
					発売日: ""、

				},
				文字列: ''、
			};
		},

		メソッド: {
			パスワードの変更: 関数() {
				this.$refs.loginFormRef.validate(非同期有効 => {
					有効であれば戻り値:
					定数{
						データ:res
					} = this.axios.put("http://localhost:8088/news", this.loginForm) を待機します
					もし(res){

						this.$message.success("ニュースが正常に追加されました")
						this.$router.push({
							パス: "/listxw"
						});
					} それ以外 {
						this.$message.error("ニュースを追加できませんでした")
					}
				})
			},
			onEditorReady(editor) { // エディターを準備する },
			onEditorBlur() {}, // フォーカス喪失イベント onEditorFocus() {}, // フォーカス獲得イベント onEditorChange() {}, // コンテンツ変更イベント // トランスコーディング escapeStringHTML(str) {
				str = str.replace(/&lt;/g, '<');
				str = str.replace(/&gt;/g, '>');
				str を返します。
			}

		},
		計算: {
			エディター() {
				this.$refs.myQuillEditor.quill を返します。
			},
		},
		マウント() {
			let content = '<ul><li><strong>李佳豪</strong></li><li><strong><u>陈刚</u></strong></li><li><strong><s><u>李锦鸣</u></s></strong></li><li><em>杨军</em></li></ul>'; // 背景から返されるコンテンツ文字列を要求します。 this.str = this.escapeStringHTML(content);
		}



	};
</スクリプト>

<スタイル>
</スタイル>

Vue でリッチテキストエディタを使用するための参考リンク

ローカル ソース コード フロントエンド E:\VNC\project\capital_vue
バックエンド E:\VNC\project\capital

これで、vue の ElementUI の詳細な使用方法についての記事は終了です。より関連性の高い vue ElementUI の使用コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vue+ElementUI はページング関数を実装します - mysql データ
  • Vue+elementuiはドロップダウンテーブルの複数選択と検索機能を実現します
  • Vue Element-ui はツリーコントロールノードを実装し、アイコンを追加します。詳細な説明
  • ホバープロンプトにはvue2+elementuiを使用する
  • Element UI をインストールして vue3.0 でベクター グラフィックスを使用する方法

<<:  ウェブページのコメントにより IE でテキストがオーバーフローする

>>:  dockerコンテナは直接実行され、pingを介してパブリックIP操作を取得します。

推薦する

vscodeを使用してuniappを開発する方法

私はフロントエンド プロジェクトの開発に常に vscode を使用してきたため、現在ではいくつかの小...

Linux で tcpdump コマンドを使用してデータ パケットをキャプチャおよび分析する方法の詳細な説明

序文tcpdump はよく知られたコマンドライン パケット分析ツールです。 tcpdump コマンド...

HTML内のフレームセットタグが正常に表示されない原因の解析と解決方法

<frameset></frameset>は皆さんもよくご存知のものです。こ...

MySQLパラダイムの使用に関する詳細な説明

1. パラダイムこのパラダイムの英語名は Normal Form であり、1970 年代にリレーショ...

MySQL slow_log テーブルを InnoDB エンジンに変更することはできません。詳細な説明

背景mysql.slow_log からスロー クエリ ログを取得するのは遅く、テーブルは csv テ...

Angular CDK を使用してサービスポップアップトーストコンポーネント機能を実装する

目次1. 環境設備2. ToastコンポーネントとToastServiceを作成する2.1 Toas...

Uniapp WeChatアプレット: キー障害の解決策

ユニアプリコード <テンプレート> <表示> <image v-for...

Centos7 で keepalived ログを別のパスに設定する方法の詳細な説明

Keepalived のインストール: cd <keepalived_sourcecode_p...

du コマンドを使用して Linux システム ディレクトリのサイズを取得する方法

Linux システムを使用したことがある人なら、Linux システムの ls コマンドは通常、ファイ...

HTTPSの最も優れた説明

皆さんおはようございます。しばらく記事を更新していませんでした。実は、私は流行中に1か月以上家にいて...

MySQL はどのようにしてデータの整合性を確保するのでしょうか?

オンライン ビジネスにとってデータの一貫性と整合性が重要であることは明らかです。データが失われないよ...

Mac OS 10.11 での MySQL 5.7.12 のインストールと設定のチュートリアル

Mac OS 10.11 に MySQL をインストールして設定する方法を、主に写真を使って手順を簡...

mysql maxとwhere間の実行問題の概要

mysql maxとwhereの間の実行の問題SQLを実行します: テーブル「grades」を作成し...

MySQL/MariaDB で完全な Unicode をサポートする方法

目次utf8mb4 の紹介UTF8 バイト数超過エラーutf8mb4 サポートデフォルトの文字エンコ...

Tomcatの各ポートの機能の詳細な説明

tomcat 設定ファイルから、tomcat の起動時にデフォルトで 8080 (8443)、800...