每天更新…
項目位址：https://gitee.com/wang_li_pingping/mallmanager
install dependencies
npm install
serve with hot reload at localhost:8080
npm run dev
build for production with minification
npm run build
build for production and view the bundle analyzer report
npm run build --report
1、項目搭建 2、路由配置 3、全局樣式重置
App.vue：
#app {
height: 100%;
}
asset下建立重置樣式reset.css（需要全局生效的樣式 按需增改删）
html,body{
height: 100%;
padding: 0;
margin: 0;
}
4、使用者登入頁面
login頁面 使用者token存儲
<template>
<div class="login-wrap">
<el-form
class="login-form"
label-position="top"
label-width="80px"
:model="formdata">
<h2>使用者登入</h2>
<el-form-item label="使用者名">
<el-input v-model="formdata.username"></el-input>
</el-form-item>
<el-form-item label="密碼">
<el-input v-model="formdata.password"></el-input>
</el-form-item>
<el-button class="login-btn" type="primary" @click.prevent="handleLogin()">登入</el-button>
</el-form>
</div>
</template>
<script>
export default {
data(){
return{
formdata:{
username:'',
password:'',
}
}
},
methods:{
//登入請求
async handleLogin(){
/*this.$http.post('login',this.formdata).then(res=>{
console.log(res,'登入接口');
//解構指派的寫法
const {
data,
meta:{msg,status}
} = res.data
//登入成功
/!**
* 成功
*1.跳轉home
* 2.提示成功
* 失敗
* 1.提示資訊
*
* *!/
if(status===200){
this.$router.push({name:'home'})
this.$message.success(msg)
}else {
this.$message.error(msg)
}
})*/
//es7 async+await 簡化異步操作
const res = await this.$http.post('login',this.formdata)
console.log(res,'登入接口');
//解構指派的寫法
const {
data,
meta:{msg,status}
} = res.data
//登入成功
/**
* 成功
* 0.儲存使用者token
*1.跳轉home
* 2.提示成功
* 失敗
* 1.提示資訊
*
* */
if(status===200){
//儲存token
localStorage.setItem('token',data.token)
this.$router.push({name:'home'})
this.$message.success(msg)
}else {
this.$message.error(msg)
}
}
}
}
</script>
<style>
.login-wrap{
height: 100%;
background-color: #324152;
/*彈性盒布局：讓登入視窗居中css*/
display: flex;
justify-content: center;
align-items: center;
/*讓登入視窗居中css*/
}
.login-wrap .login-form{
width: 400px;
background-color: #fff;
border-radius: 5px;
padding: 30px;
}
.login-wrap .login-btn{
width: 100%;
}
</style>
5、home頁面：
使用者token校驗 退出清除token
<template>
<el-container class="container">
<el-header class="header">
<el-row>
<el-col :span="4">
<div class="grid-content bg-purple">
<img src="../../assets/logo.png">
</div>
</el-col>
<el-col :span="18" class="middle">
<h3>超級賽亞人電商背景系統</h3>
</el-col>
<el-col :span="2">
<div class="grid-content bg-purple">
<a href="#" class="loginOut" @click.prevent="handleSignOut()">退出</a>
</div>
</el-col>
</el-row>
</el-header>
<el-container>
<el-aside class="aside" width="200px">
<!--側邊欄-->
<el-menu
:unique-opened="true"
>
<!--1-->
<el-submenu index="1">
<template slot="title">
<i class="el-icon-setting"></i>
<span>使用者管理</span>
</template>
<el-menu-item index="1-1">
<i class="el-icon-setting"></i>
<span>使用者清單</span>
</el-menu-item>
</el-submenu>
<!--2-->
<el-submenu index="2">
<template slot="title">
<i class="el-icon-user-solid"></i>
<span>權限管理</span>
</template>
<el-menu-item index="2-1">
<i class="el-icon-user-solid"></i>
<span>角色清單</span>
</el-menu-item>
<el-menu-item index="2-2">
<i class="el-icon-location"></i>
<span>權限清單</span>
</el-menu-item>
</el-submenu>
<!--3-->
<el-submenu index="3">
<template slot="title">
<i class="el-icon-location"></i>
<span>商品管理</span>
</template>
<el-menu-item index="3-1">
<i class="el-icon-location"></i>
<span>商品清單</span>
</el-menu-item>
<el-menu-item index="3-2">
<i class="el-icon-location"></i>
<span>分類參數</span>
</el-menu-item>
<el-menu-item index="3-3">
<i class="el-icon-location"></i>
<span>商品分類</span>
</el-menu-item>
</el-submenu>
<!--4-->
<el-submenu index="4">
<template slot="title">
<i class="el-icon-location"></i>
<span>訂單管理</span>
</template>
<el-menu-item index="4-1">
<i class="el-icon-location"></i>
<span>訂單清單</span>
</el-menu-item>
</el-submenu>
<!--5-->
<el-submenu index="5">
<template slot="title">
<i class="el-icon-location"></i>
<span>資料統計</span>
</template>
<el-menu-item index="5-1">
<i class="el-icon-location"></i>
<span>資料報表</span>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main class="main">Main</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
//mewVue之前觸發
beforeCreate () {
//擷取token
const token = localStorage.getItem('token')
//if token 有->繼續渲染元件
if (!token){
this.$router.push({name:'login'})
}
//token沒有->跳轉登入
},
data(){
return{
}
},
methods:{
handleSignOut(){
/**
* 1.清除token
* 2.提示資訊
* 3.來到login元件
* */
localStorage.clear();
this.$message.success("退出成功");
this.$router.push('/login')
}
}
}
</script>
<style>
.container {
height: 100%;
}
.header {
background-color: #b3c0d1;
}
.aside {
background-color: #d3dcd6
}
.main {
background-color: #e9eef3;
}
/*頭部樣式*/
.middle {
text-align: center;
}
.loginOut {
line-height: 60px;
text-decoration: none;
}
</style>
登入頁面效果：
home頁面(注：圖示亂找的 )
