vue的學習-專案(七)
阿新 • • 發佈:2021-01-07
專案結構:
這裡使用的是elementUI的元件 https://element.eleme.cn/#/zh-CN/component/installation
如果沒有建立專案可學習 vue的學習-建立專案(三)
main.js 檔案
import Vue from 'vue' /*需要加SASS*/ import 'element-ui/lib/theme-chalk/index.css'; import App from './App' import router from './router' import ElementUI from 'element-ui'; import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios); Vue.use(ElementUI); Vue.use(router); new Vue({ el: '#app', router, /*給誰渲染*/ render: h => h(App) });
建立 index.js 檔案 用於 存放 路由的地方
import Vue from 'vue' import VueRouter from 'vue-router' import Main from '../views/Main' import Loginfrom '../views/Login' import NotFound from '../views/NotFound' import UserList from '../views/user/List' import PorFile from '../views/user/porFile' Vue.use(VueRouter); export default new VueRouter({ mode: 'history', routes: [ { path: '/login', name: 'login', component: Login }, { path:'/main/:username', name: 'main', props: true, children:[ { path: '/user/list', name: 'userList', component: UserList }, { path: '/user/proFile/:id', name: 'userProFile', component: PorFile } ], component: Main }, { path: '*', component: NotFound }, { path: '/goName', component: Main }, { path: '/', component: Login } ] });
建立 登入元件 Login.vue 用於使用者的登入
<template> <div id="id"> <div id="id1"> <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px"> <h3 style="text-align: center">歡迎登入</h3> <el-form-item label="賬號" prop="username"> <el-input v-model="formData.username" placeholder="請輸入賬號" clearable :style="{width: '220px'}"></el-input> </el-form-item> <el-form-item label="密碼" prop="password"> <el-input v-model="formData.password" placeholder="請輸入密碼" clearable show-password :style="{width: '220px'}"></el-input> </el-form-item> <el-form-item size="large"> <span id="sub"><el-button type="primary" @click="submitForm">登入</el-button></span> </el-form-item> </el-form> </div> </div> </template> <script> export default { name:"Login", components: {}, props: [], data() { return { formData: { username: '', password: '', }, rules: { username: [{ required: true, message: '請輸入賬號', trigger: 'blur' }], password: [{ required: true, message: '請輸入密碼', trigger: 'blur' }], }, } }, methods: { submitForm() { this.$refs['elForm'].validate(valid => { let me = this; if(valid){ //?username="+this.formData.username+"&password="+this.formData.password let username = this.formData.username; let password = this.formData.password; let info = this.formData.info; this.axios({ method: "get", url: 'http://127.0.0.1:8080/static/mock/user.json' }).then(function (response) { if(username===response.data.username && password===response.data.password){ me.$router.push("/main/"+ username); }else{ alert("賬號密碼錯誤!!!") } }); } }) }, }, } </script> <style scoped> #id{ box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); height: 240px; width: 400px; border-radius: 0; font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微軟雅黑",Arial,sans-serif; margin:0 auto; border:1px; position: absolute; top: 200px; left: 0; bottom: 0; right: 0; } #id1{ position: absolute; top: 10px; left: 0; bottom: 0; right: 0; } #sub{ position: absolute; top: 0; left: 50px; bottom: 0; right: 0; } </style>
建立 Main.vue 元件 ,該元件是登入成功之後跳轉的頁面
<template>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-message"></i>使用者管理
</template>
<el-menu-item-group>
<el-menu-item index="1-1">
<!-- 跳轉帶引數 name的路由元件中的name params 帶的引數 -->
<router-link :to="{name: 'userProFile', 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-group>
</el-submenu>
<el-submenu index="2">
<template slot="title">
<i class="el-icon-menu"></i>內容管理
</template>
<el-menu-item-group>
<el-menu-item index="2-1">分類管理</el-menu-item>
<el-menu-item index="2-2">內容列表</el-menu-item>
</el-menu-item-group>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<router-link style="font-size: 20px;" to="/goName">首頁</router-link>
<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>
{{username}}
</el-dropdown>
</el-header>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<style>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
<script>
export default {
props: ['username'],
data() {
}
};
</script>
因為我們的登入是模仿後臺傳過來的資料
user.json 檔案 所以登入必須是admin 和admin
{ "username": "admin", "password": "admin" }
建立NotFound.vue 的元件 ,用於 訪問路徑輸入錯誤跳轉的頁面
<template> <div style="align-content: center">404你的頁面走丟了</div> </template> <script> export default { name: "NotFound" } </script> <style scoped> </style>
建立 List.vue 元件 用於 使用者列表的展示
<template> <el-table :data="tableData" stripe style="width: 100%"> <el-table-column prop="name" label="名稱" width="180"> </el-table-column> <el-table-column prop="url" label="地址" width="300"> </el-table-column> <el-table-column prop="Email" label="郵箱"> </el-table-column> </el-table> </template> <script> export default { name: "List", data() { return{ tableData: null, } }, beforeRouteEnter:(to, from, next)=>{ console.log("進入路由前"); next(vm=>{ vm.getData(); }); }, beforeRouteLeave:(to, from, next)=>{ console.log("進入路由後"); next(); }, /* . to:路由將要跳轉的路徑資訊 . from:路徑跳轉前的路徑資訊 . next:路由的控制引數 . next()跳入下一個頁面 . next('/path')改變路由的跳轉方向,使其跳到另一個路由 . next(false)返回原來的頁面 . next((vm)=>)僅在 beforeRouteEnter中可用,vm是元件例項 */ methods: { getData: function () { let me = this; this.axios({ method: 'get', url: 'http://127.0.0.1:8080/static/mock/data.json' }).then(response=>(me.tableData=response.data)) } } } </script> <style scoped> </style>
這裡的資料也是模擬後臺傳來的資料
data.json 檔案
[ { "name": "部落格園", "Email": "[email protected]", "url": "https://www.cnblogs.com/lihui123/" }, { "name": "李輝", "Email": "[email protected]", "url": "https://www.cnblogs.com/lihui123/" }, { "name": "李輝部落格園", "Email": "[email protected]", "url": "https://www.cnblogs.com/lihui123/" } ]
建立porFile.vue 元件 用於 測試 帶引數的跳轉並把引數展示出來
<template> <div>個人資訊<br> {{$route.params.id}} </div> </template> <script> export default { name: "porFile" } </script> <style scoped> </style>