Vue實現簡單檢視模板（登入，後臺）
阿新 • • 發佈：2020-11-23
1.登入
<template> <div> <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box"> <h3 class="login-title">歡迎登入</h3> <el-form-item label="賬號" prop="username"> <el-input type="text" placeholder="請輸入賬號" v-model="form.username"/> </el-form-item> <el-form-item label="密碼" prop="password"> <el-input type="password" placeholder="請輸入密碼" v-model="form.password"/> </el-form-item> <el-form-item> <el-button type="primary" v-on:click="onSubmit('loginForm')">登入</el-button> </el-form-item> </el-form> <el-dialog title="溫馨提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose"> <span>請輸入賬號和密碼</span> <span slot="footer" class="dialog-footer"> <el-button type="primary" @click="dialogVisible = false">確 定</el-button> </span> </el-dialog> </div> </template> <script> export default { name:"Login", data(){ return { form:{ username: '', password: '' }, //表單驗證，需要再el-form-item 元素中增加prop屬性 rules:{ username:[ {required:true,message:'賬號不能為空',trigger:'blur'} ], password:[ {required: true,message: '密碼不能為空',trigger:'blur'} ] }, //對話方塊顯示和隱藏 dialogVisible:false } }, methods:{ onSubmit(formName) { //為表單繫結驗證功能 this.$refs[formName].validate((valid) =>{ if (valid){ //使用 vue-router路由到指定頁面，該方式稱之為程式設計式導航 this.$router.push("/main"); } else { this.dialogVisible = true; return false; } }); } } } </script> <style lang="scss" scoped> .login-box{ border: 1px solid #DCDFE6; width: 350px; margin:180px auto; padding:35px 35px 15px 35px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow:0 0 25px #909399; } .login-title{ text-align:center; margin:0 auto 40px auto; color:#303133; } </style>
2.url路徑錯誤
<template> <div> <h1>404,你的頁面走丟了！</h1> </div> </template> <script> export default { name: "NotFound" } </script> <style scoped> </style>
3.主頁
<template> <div> <el-container> <el-aside width="200px"> <el-menu :default-openeds="['1']"> <el-submenu index="1"> <template slot="title"><i class="el-icon-caret-right"></i>使用者管理</template> <el-menu-item-group> <el-menu-item index="1-1"> <!--name,地址，params：傳遞引數，需要物件：v-bind/:--> <router-link :to="{name:'UserP', params:{id:1}}">個人資訊</router-link> </el-menu-item> <el-menu-item index="1-2"> <router-link to="/user/list">使用者列表</router-link> </el-menu-item> <el-menu-item index="1-3"> <router-link to="/home">回到主頁</router-link> </el-menu-item> </el-menu-item-group> </el-submenu> <el-submenu index="2"> <template slot="title"><i class="el-icon-caret-right"></i>內容管理</template> <e1-menu-item-group> <el-menu-item index="2-1">分類管理</el-menu-item> <el-menu-item index="2-2">內容列表</el-menu-item> </e1-menu-item-group> </el-submenu> <el-submenu index="3"> <template slot="title"><i class="el-icon-caret-right"></i>系統管理</template> <e1-menu-item-group> <el-menu-item index="3-1">系統設定</el-menu-item> </e1-menu-item-group> </el-submenu> </el-menu> </el-aside> <el-container> <el-header style="text-align: right; font-size: 12px"> <el-dropdown> <i class="el-icon-setting" style="margin-right:15px"></i> <el-dropdown-menu slot="dropdown"> <el-dropdown-item>個人資訊</el-dropdown-item> <el-dropdown-item>退出登入</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </el-header> <el-main> <router-view/> </el-main> </el-container> </el-container> </div> </template> <script> export default { name: "main" } </script> <style scoped lang="scss"> .el-header { background-color: #4abaf8; color: #333; line-height: 60px; } .el-aside { color: #333; } </style>
4.主頁子模組，使用者列表
<template> <h1>使用者列表</h1> </template> <script> export default { name: "UserList" } </script> <style scoped> </style>
5.主頁子模組，個人資訊
<template> <div> <!--所有元素必須不能放在根節點下--> <h1>個人資訊</h1> <!-- {{$route.params.id}}--> {{id}} <div v-model="form"> <p v-model="form.name">{{form.name}}</p> </div> </div> </template> <script> export default { props:['id'], name: "UserProfile", beforeRouteEnter:(to,from,next)=>{ console.log("進入路由之前");//在這裡載入資料（axios） next(vm=>{ vm.getData();//進入路由之前執行getData }); }, beforeRouteLeave:(to,from,next)=>{ console.log("進入路由之後"); next(); }, data(){ return{ form:{ name:'', url:'' } } }, methods:{ getData:function (){ this.axios({ method:'get', url:'http://localhost:8080/static/mock/data.json' }).then(function (response){ console.log(response); }) } } } </script> <style scoped> </style>
6.路由
import Vue from 'vue' import Router from 'vue-router' import Main from '../views/Main' import Login from '../views/Login' import UserList from '../views/user/List' import Profile from '../views/user/Profile' //404 import NotFound from "../views/NotFound"; Vue.use(Router); export default new Router({ mode:'history', routes:[ { path:'/main', component:Main,//巢狀路由 props:true, children:[ {path: '/user/Profile/:id',name:'UserP',component: Profile,props:true}, {path: '/user/List',component: UserList} //path,寫的是服務端的網址，component中的才是真正要引入介面的地址 ] },{ path:'/login', component: Login },{//重定向 path:'/home', redirect:'/main'//重定向到Main的請求上，走/main的path },{ //404 path: '*', component:NotFound } ] });