ログイン + セッションストレージエフェクト表示
<テンプレート> <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; } </スタイル> ページネーションテーブル エフェクト表示
<テンプレート> <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()); マップを返します。 } 参考リンク スイッチ + タブエフェクト表示
フロントエンドスイッチメインコード <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('/') } } それ以外 { 次() } }) ルート
{ パス: '/listxw', 名前: 「ニュース管理」 コンポーネント: インデックス、 表示: true、 メタ: { 認証が必要: 有効 }, リダイレクト: "/listxw", 子供たち: [{ パス: "/addxw", 名前:「ニュースを追加」 コンポーネント: addxw、 メタ: { 認証が必要: 有効 }, }, { パス: "/updatexw", 名前: 「ニュースを変更」 コンポーネント: updatexw、 メタ: { 認証が必要: 有効 }, }, { パス: '/listxw', 名前: 「ニュースリスト」 コンポーネント: listxw、 メタ: { 認証が必要: 有効 }, }, { パス: '/person', 名前:「個人情報」 構成要素: 人、 メタ: { 認証が必要: 有効 }, }, { パス: '/record', 名前: '取引記録'、 コンポーネント: レコード、 メタ: { 認証が必要: 有効 }, } ]、 }, リッチテキストエディタエフェクト表示
完全なコード <テンプレート> <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(/</g, '<'); str = str.replace(/>/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 でリッチテキストエディタを使用するための参考リンク
これで、vue の ElementUI の詳細な使用方法についての記事は終了です。より関連性の高い vue ElementUI の使用コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: ウェブページのコメントにより IE でテキストがオーバーフローする
>>: dockerコンテナは直接実行され、pingを介してパブリックIP操作を取得します。
目次1. 三項演算子の判定2. 動的に設定されるクラス3. 方法判定4. 配列バインディング5. e...
目次概要戦略パターンを使用しないフォーム検証戦略パターンを使用して最適化する戦略パターンの利点要約す...
プロジェクトでは https サービスを使用する必要があるため、Alibaba Cloud では無料...
この記事では、Ubuntu 18.04 に Redis と phpredis 拡張機能をインストール...
目次1. Nginx の紹介1. Nginx とは何ですか? 2. Nginx を使用する理由3. ...
目次1. 二重連結リストとは何か2. 双方向リンクリストのカプセル化3. 双方向リンクリストの一般的...
ウェブページにBaiduマップを挿入するBaidu Maps を自分の Web ページに追加したい場...
Tomcatログの関係一枚の写真は千の言葉に値する! localhost.{yyyy-MM-dd}....
序文:複数の要素を格納するために、配列は最も一般的に使用されるデータ構造ですが、配列には多くの欠点も...
要約する1. 類似点どちらも、ターゲット関数が実行されると内部の this ポインターを変更できます...
この記事はGitHub https://github.com/qq449245884/xiaozhi...
1. はじめに要件は、特定の時間範囲内で、1 時間ごとのデータと前の 1 時間ごとのデータの差と比率...
前回、私たちは 2 つのヘッダー レイアウト (フレックスボックス 1 つとフロート 1 つ) を考...
MySQL のインデックスの種類には、通常のインデックス、一意のインデックス、全文インデックスがあり...
1. フローティングとは何ですか?フローティングは、その名の通り、浮遊することを意味します。要素がド...