先写后台页面的原因是我需要先添加商品，然后才好在前端测试
1、先把后端的主页大体写出来，主要是后端路由部分
admin.vue
<template>
<section class="admin">
<!-- 头部 -->
<el-row class="header">
<!-- logo -->
<el-col :span="8">
<img class="logo" src="../assets/logo.png" alt="">
</el-col>
<!-- 管理员 -->
<el-col :span="16">
<img class="avatar" src="../assets/avatar.jpg" alt="">
<p class="adminname">李小霞</p>
</el-col>
</el-row>
<!-- 内容区 -->
<el-row class="main">
<!-- 左边导航菜单 -->
<el-col class="menu" :span="8">
<p></p>
<el-menu
class="admin-menu"
:default-active="$router.path"
router>
<el-menu-item
v-for="item in $router.options.routes[1].children"
:key="item.path"
:index="item.path">
{{item.name}}
</el-menu-item>
</el-menu>
</el-col>
<!-- 右边操作区域 -->
<el-col class="content" :span="16">
<transition name="el-zoom-in-center">
<router-view></router-view>
</transition>
</el-col>
</el-row>
</section>
</template>
<script>
export default {
data () {
return {
// ...
}
}
}
</script>
<style lang="less" scoped>
@import '../common/less/index.less';
.admin {
.header {
height: 60px;
box-shadow: 0 0 10px @color;
.logo {
margin: 0 5px;
width: 60px;
height: 60px;
}
.avatar {
margin: 0 15px;
width: 60px;
height: 60px;
border-radius: 30px;
float: right;
}
.adminname {
float: right;
font-size: 20px;
margin-top: 20px;
color: @color;
}
}
.main {
.menu {
.admin-menu {
position: fixed;
width: 25%;
top: 65px;
bottom: 0;
background: rgb(199, 193, 193);
.el-menu-item {
color: rgb(134, 165, 9);
&:hover {
background: @color;
color: #eee;
}
}
.is-active {
color: #eee !important;
font-weight: bold !important;
background: @color !important;
}
}
}
.content {
}
}
}
</style>
测试一下
1.gif
路由切换没有问题
2、管理员登录页面
adminlogin.vue，这个没什么好写的了，和前端用户登录差不多，只是要重写接口等等，
先把样子做出来，基本复制代码就可以了
<template>
<div class="container">
<el-form
:model="LoginForm"
ref="LoginForm"
:rules="rule"
label-width="0"
class="login-form">
<h3>管理员登录</h3>
<el-form-item prop="username">
<el-input
type="text"
v-model="LoginForm.username"
placeholder="username" >
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
type="password"
v-model="LoginForm.password"
placeholder="password" >
</el-input>
</el-form-item>
<el-form-item >
<el-button
type="danger"
class="submitBtn"
round
@click.native.prevent="submit"
:loading="logining">
登录
</el-button>
<el-button
type="primary"
class="resetBtn"
round
@click.native.prevent="reset">
重置
</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
import {AdminLogin} from '../../api/adminApi'
export default {
// ....
data () {
return {
LoginForm: {
username: '',
password: ''
},
logining: false,
rule: {
username: [
{
required: true,
max: 14,
min: 3,
message: '用户名是必须的，长度为3-14位',
trigger: 'blur'
}
],
password: [
{
required: true,
message: '密码是必须的！',
trigger: 'blur'
}
]
}
}
},
methods: {
// ...
submit () {
this.$refs.LoginForm.validate(valid => {
if (valid) {
this.logining = true
// 登录作为参数的用户信息
let LoginParams = {
username: this.LoginForm.username,
password: this.LoginForm.password
}
// 调用axios登录接口
AdminLogin(LoginParams).then(res => {
console.log(res)
// this.logining = false
// // 根据返回的code判断是否成功
// let {code, msg, user} = res.data
// if (code !== 200) {
// this.$message({
// type: 'error',
// message: msg
// })
// } else {
// this.$message({
// type: 'success',
// message: msg
// })
// // 将返回的数据注入sessionStorage
// sessionStorage.setItem('user', JSON.stringify(user))
// // 在这里挂上，官方说的分发，登录的action
// // 应该这样就行了把
// this.$store.dispatch('login')
// // console.log(user)
// // 跳转到我的信息的页面
// this.$router.push('/admin')
// }
})
} else {
console.log('submit err')
}
})
},
reset () {
this.$refs.LoginForm.resetFields()
}
}
}
</script>
<style scoped>
.login-form {
margin: 120px auto;
width: 310px;
background: #fff;
box-shadow: 0 0 10px #B4BCCC;
padding: 30px 30px 30px 30px;
border-radius: 25px;
}
.submitBtn {
width: 65%;
}
</style>
3、写后端管理员登录接口
在api文件夹下面新建一个 adminApi.js
adminApi.js
选区_001.png
4、写server的接口
- 1、 打开server的app.js，添加代码
选区_002.png
- 2、新建routes/adminroutes.js
选区_003.png
- 3、 新建controllers/admincontrol.js
选区_005.png
5、完善后端的login
adminlogin.vue
选区_006.png
store.js
import Vue from 'vue'
import Vuex from 'vuex'
// import
import {GetSended} from '../api/api'
import {dateArray} from '../common/js/common'
Vue.use(Vuex)
// 创建基本状态
const state = {
user: JSON.parse(sessionStorage.getItem('user')) || '',
sended: [],
adminer: JSON.parse(sessionStorage.getItem('adminer')) || ''
}
// 创建改变状态的方法
const mutations = {
// 用户登录
LOGIN (state) {
state.user = JSON.parse(sessionStorage.getItem('user'))
},
// 用户登出
LOGOUT (state) {
state.user = ''
},
// 个人已发货
SENDED (state) {
let pars = {
bename: state.user.name,
status: '待发货'
}
GetSended(pars).then(res => {
state.sended = res.data.sended
})
},
// 管理员登录
ADMINLOGIN (state) {
state.adminer = JSON.parse(sessionStorage.getItem('adminer'))
}
}
// getters
const getters = {
// 用户最近7天发货数量
sendedlast: state => {
let sendnum = []
for (let i = 0; i < dateArray.length; i++) {
let nums = state.sended.filter(num => {
return num.date === dateArray[i]
})
sendnum.push(nums.length)
}
return sendnum
},
// 用户代理等级折扣信息
sender: state => {
let sender = {
total: state.sended.length,
role: '',
zhekou: '',
num: '',
next: ''
}
if (state.sended.length < 10) {
sender.role = '初出茅庐'
sender.zhekou = '10'
sender.next = '渐入佳境'
sender.num = 10 - state.sended.length
} else if (state.sended.length < 100 && state.sended.length >= 10) {
sender.role = '渐入佳境'
sender.zhekou = '9.5'
sender.next = '炉火纯青'
sender.num = 100 - state.sended.length
} else if (state.sended.length < 1000 && state.sended.length >= 100) {
sender.role = '炉火纯青'
sender.zhekou = '9'
sender.next = '登峰造极'
sender.num = 1000 - state.sended.length
} else {
sender.role = '登峰造极'
sender.zhekou = '8.5'
sender.next = '已经是最高等级'
sender.num = 10000 - state.sended.length
}
return sender
},
// 用户发货分类统计
sendedall: state => {
console.log(state.sended)
let sendedall = []
sendedall.push({
name: state.sended.sendprodtype
})
return true
}
}
// 创建驱动actions可以使得mutations得以启动
const actions = {
// 用户登录
// 这里先来一个驱动LOGIN的东西就叫login吧
login ({commit}) {
commit('LOGIN')
},
// 用户登出
logout ({commit}) {
commit('LOGOUT')
},
// 用户发货统计
sended ({commit}) {
commit('SENDED')
},
// 管理员登录
adminlogin ({commit}) {
commit('ADMINLOGIN')
}
}
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
6、测试
随便写的数据，同样返回了，提示用户密码错误，说明成功了的
选区_007.png
我们还是需要测试以下数据正确的情况，但作为管理员一般来说没有注册这样的操作，只能靠管理员添加了，但这里可以使用postman来添加数据
先把添加管理员的功能写出来
选区_008.png
用postman添加数据
选区_009.png
查看结果
postman
选区_010.png
robo 3t
选区_011.png
测试
3.gif
结果正确跳转
在稍微把后台管理员的数据在admin.vue里面取一下
选区_013.png
选区_012.png
在测试一下
4.gif
数据得到了，但头像挂了，同事也证明是成功了的
github地址：
learn：https://github.com/lyttonlee/learn
server：https://github.com/lyttonlee/express-server-for-learn
