项⽬实训（⼆）使⽤Element制作导航栏⼀、安装Element
在项⽬⽂件夹中运⾏npm i element-ui -S
修改main.js
import Vue from'vue'
import App from'./App'
import router from'./router'
// eslint-disable-next-line no-unused-vars
import ElementUI from'element-ui'
import'element-ui/lib/theme-chalk/index.css'
// eslint-disable-next-line no-unused-vars
import store from'./store'
// 设置反向代理，前端请求发送到 localhost:8443/demo
var axios =require('axios')
js导航栏下拉菜单axios.defaults.baseURL ='localhost:8443/demo'
Vue.prototype.$axios = axios
Vue.use(ElementUI)
router.beforeEach((to,from, next)=>{
a.requireAuth){
if(store.state.user.username){
next()
}else{
next({
path:'login',
query:{redirect: to.fullPath}
})
}
}else{
next()
}
}
)
/
/ eslint-disable-next-line no-new
new Vue({
el:'#app',
render: h =>h(App),
router,
store,
components:{ App },
template:'<App/>'
})
⼆、使⽤Element改进登录页⾯
Login.vue
<template>
<body id="poster1">
<el-form class="login-container" label-position="left" label-width="100px">
<el-form-item class="login-item" label="⽤户名">
<el-input type="text" v-model="loginForm.username" placeholder="⽤户名" autocomplete="off"></el-input> </el-form-item>
<el-form-item class="login-item" label="密码">
<el-input type="text" v-model="loginForm.password" placeholder="密码" autocomplete="off"></el-input>
</el-form-item>
<el-form-item >
<el-button type="primary" @click="login('logi
nForm')">登录</el-button> </el-form-item>
</el-form>
</body>
</template>
<script>
export default{
data(){
return{
loginForm:{
username:'',// ⽤户名
password:''
},
responseResult:[]
}
},
methods:{
/**
* @description: 登陆界⾯传递⽤户名和密码
* @return void
*/
login(){
var _this =this
this.$axios
// 传递⽤户名和密码
.post('/user',{
username:this.loginForm.username,
password:this.loginForm.password
})
// 判断响应码，响应成功后跳转
.then(successResponse =>{
console.log(successResponse)
if(de ===200){
_this.$storemit('login', _this.loginForm)
var path =this.$direct
this.$place({path: path ==='/'|| path ===undefined?'/index': path})
}
})
.catch(failResponse =>{
})
}
}
}
</script>
<style>
.
login-container {
border-radius:10px;
background-clip: padding-box;
margin:180px auto;
width:22%;
height:200px;
padding:60px 35px 15px 35px;
background: #fff;
box-shadow:004px #cac6c6;
}
#poster1 {
background:url("../assets/background.jpg") no-repeat center;
height:100%;
width:100%;
background-size: cover;
position: fixed;
}
body{
body{
margin:0;
}
</style>
三、Element制作导航栏
导航栏需要显⽰在所有页⾯，在components中common⽂件夹并在其中新建NavBar.vue 根据官⽹代码
1.NavBar.vue
<template>
<el-menu :default-active="'/index'"class="NavBar" router mode="horizontal" @select="handleSelect"> <img class="logo" src="../assets/logo2.png" alt="⾦融⼤数据"/>
<h class="itemName">FinancialBigData</h>
<el-menu-item class="first-menu" index="./index">HOME</el-menu-item>
<el-submenu index="2">
<template slot="title">SERVICES</template>
<el-menu-item class="second-menu" index="./information">Information</el-menu-item>
<el-menu-item class="second-menu" index="./prediction">Prediction</el-menu-item>
<el-menu-item class="second-menu" index="./more">More</el-menu-item>
</el-submenu>
<el-menu-item class="first-menu" index="./login">LOGIN</el-menu-item>
</el-menu>
</template>
<script>
export default{
name:'NavBar2',
data(){
return{
activeIndex:'1',
activeIndex2:'1'
}
},
methods:{
handleSelect(key, keyPath){
console.log(key, keyPath)
}
}
}
</script>
<style>
.logo{
width:60px;
height:60px;
position: fixed;
float:left;
left:6%;
top:8px;
}
.itemName{
font-size:16px;
color: #cccccc;
text-align: center;
line-height:60px;
position: fixed;
left:9.5%;
top:30px;
}
.el-menu.el-menu--horizontal {
border-bottom:0;
background-color: transparent;
position: absolute;
float:right;
right:5%;
top:15px;
}
li.el-menu-item.first-menu{
color: #cccccc;
font-size:16px;
width:120px;
}
.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus,.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover,.el-menu--horizontal>.el-submenu . el-submenu__title:hover {
background-color: transparent;
color:white;
}
.el-menu--horizontal>.el-submenu .el-submenu__title {
color: #cccccc;
font-size:16px;
}
.el-menu--horizontal>.el-submenu:focus .el-submenu__title,.el-menu--horizontal>.el-submenu:hover .el-submenu__title {
color:white;
}
li.el-menu-item.second-menu{
background-color:rgba(255,255,255,0.1);
margin:0;
padding:60px 35px 15px 35px;
}
body{
margin:0;
}
</style>
2.配置路由
在components中新建Home.vue，引⼊导航栏组件
<template>
<div id="home">
<router-view/>
<nav-bar></nav-bar>
</div>
</template>
<script>
import NavBar from'./common/NavBar'
export default{
name:'Home',
components:{NavBar}
}
</script>
<style>
</style>
修改router/index.js
import Vue from'vue'
import Router from'vue-router'
import AppIndex from'../components/home/AppIndex' import Login from'../components/Login'
import Home from'../components/Home'
Vue.use(Router)
export default new Router({
mode:'history',
routes:[
{
path:'/home',
name:'Home',
component: Home,
// home页⾯并不需要被访问
redirect:'/index',
children:[
{
path:'/index',
name:'AppIndex',
component: AppIndex,
meta:{
requireAuth:true
}
}
]
},
{
path:'/login',
name:'Login',
component: Login
}
]
})