thinkphp vue后台管理系统_Vue实现后台管理系统勉励篇

最近状态有点懈怠 又要开始着手敲代码了 此篇为勉励篇

首先看一下使用的工具

webstrom

这个工具相对于其他的工具我认为是不错的，

可以很好的进行代码调试

首先看一下建立好的目录结构

网络请求使用axios

user.js

// 用户登录的请求模块import request from '@/utils/request'export const login = data => {  return request({    method: 'POST',    url: '/mp/v1_0/authorizations',    data  })}// 获取用户信息export const getUserProfile = () => {  const user = JSON.parse(window.localStorage.getItem('user'))  console.log(user)  return request({    method: 'GET',    url: '/mp/v1_0/user/profile',    // axios通过headers    headers: {      Authorization: `Bearer ${user.token}`    }  })}

主入口程序

main.js

import Vue from 'vue'import App from './App.vue'import router from './router'import './styles/index.less'// 加载组件库import ElementUI from 'element-ui'// 加载样式import 'element-ui/lib/theme-chalk/index.css'Vue.config.productionTip = false// 注册组件库Vue.use(ElementUI)new Vue({  router,  render: h => h(App)}).$mount('#app')

首页组件

home.vue

<template>  <div class="home-container">首页div>template><script>export default {  name: 'HomeIndex',  data () {    return {    }  }}script><style scoped lang="less">style>

侧边栏

aside.vue

<template>    <el-menu    class="nav-menu el-menu-vertical-demo"    :default-active="$route.path"    background-color="#002033"    text-color="#fff"    active-text-color="#ffd04b"    router  >    <el-menu-item index="/">      <i class="el-icon-s-home">i>      <span slot="title">首页span>    el-menu-item>    <el-menu-item index="/article">      <i class="el-icon-document">i>      <span slot="title">内容管理span>    el-menu-item>    <el-menu-item index="/image">      <i class="iconfont iconimage">i>      <span slot="title">素材管理span>    el-menu-item>    <el-menu-item index="/publish">      <i class="iconfont iconpublish">i>      <span slot="title">发布文章span>    el-menu-item>    <el-menu-item index="/comment">      <i class="iconfont iconcomment">i>      <span slot="title">评论管理span>    el-menu-item>    <el-menu-item index="/fans">      <i class="el-icon-setting">i>      <span slot="title">粉丝管理span>    el-menu-item>    <el-menu-item index="/settings">      <i class="el-icon-setting">i>      <span slot="title">个人设置span>    el-menu-item>  el-menu>template><script>export default {  name: 'AppAside',  methods: {    handleOpen (key, keyPath) {      console.log(key, keyPath)    },    handleClose (key, keyPath) {      console.log(key, keyPath)    }  }}script><style scoped lang="less">.nav-menu {  .iconfont {    margin-right: 10px;    padding-left: 5px;  }}style>

整体组件 侧边栏和导航栏要固定

index.vue

<template>  <el-container class="layout-container">    <el-aside class="aside">      <app-aside class="aside-menu">app-aside>    el-aside>    <el-container>      <el-header class="header">        <div>          <i class="el-icon-s-fold">i>          <span>江苏传智播客科技教育有限公司span>        div>        <el-dropdown>          <div class="avatar-wrap">            <img class="avatar" :src="user.photo" alt="">            <span>{{user.name}}span>            <i class="el-icon-arrow-down el-icon--right">i>          div>            <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 class="main">        <router-view />el-main>    el-container>  el-container>template><script>import AppAside from './component/aside'import { getUserProfile } from '@/api/user'export default {  name: 'LayoutIndex',  components: { AppAside },  component: {    AppAside  },  data () {    return {      user: {}    }  },  created () {    this.loadUserProfile()  },  methods: {    loadUserProfile () {      // 这个接口需要授权才能使用      getUserProfile().then(res => {        console.log(res)        this.user = res.data.data      })    }  }}script><style scoped lang="less">.layout-container{  position: fixed;  left:0;  right:0;  top:0;  bottom: 0;}.aside{  width: 100px;  background-color: #d3dce6;  .aside-menu{    height: 100%;  }}.header{  height: 60px;  background-color: #b3c0d1;  display: flex;  justify-content: space-between;  align-items: center;  border-bottom: 1px solid #ccc;}.main{  background-color: #e9eef3;}.avatar-wrap{  display: flex;  align-items: center;  .avatar{  width: 40px;    height: 40px;    border-radius: 50%;    margin-right: 10px;  }}style>

路由

router.js

import Vue from 'vue'import VueRouter from 'vue-router'// @表示src路径的别名 好处就是它不受当前文件路径影响import Login from '@/views/login/index'import Home from '@/views/home/home'import Layout from '@/views/layout/index'Vue.use(VueRouter)// 路由配置表const routes = [{  path: '/login',  name: 'login',  component: Login},{  path: '/',  /* name: 'layout', */  component: Layout,  children: [{    path: '', // path为空 会作为默认子路由    name: 'home',    component: Home  }]}]const router = new VueRouter({  routes})export default router

登录

index.vue

<template>  <div class="login-container">        <div class="login-head">div>        <el-form class="login-form" ref="login-form" :model="user" :rules="formRules">      <el-form-item prop="mobile">        <el-input v-model="user.mobile" placeholder="请输入手机号">el-input>      el-form-item>        <el-form-item prop="code">          <el-input v-model="user.code" placeholder="请输入验证码">el-input>        el-form-item>      <el-form-item prop="agree">        <el-checkbox v-model="user.agree">我已阅读并同意用户协议和隐私条款el-checkbox>      el-form-item>      <el-form-item>        <el-button class="login-btn" type="primary" :loading="loginLoading" @click="onLogin">登录el-button>      el-form-item>    el-form>  div>template><script>import { login } from '@/api/user'export default {  name: 'LoginIndex',  components: {  },  props: {},  data () {    return {      user: {        mobile: '13911111111', // 手机号        code: '246810', // 验证码        agree: false// 是否同意协议      },      loginLoading: false, // 登录的loding状态      /*  checked: false, // 是否同意协议 */      formRules: {        mobile: [{          required: true,          message: '手机号不能为空',          trigger: 'change'        },        { pattern: /^1[3|5|7|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }        ],        code: [{          required: true,          message: '验证码不能为空',          trigger: 'change'        },        { pattern: /^\d{6}$/, message: '请输入正确的验证码格式', trigger: 'change' }        ],        agree: [{          // 调用          validator: (rule, value, callback) => {            console.log(value)            if (value) {              callback()            } else {              callback(new Error('请同意用户协议'))            }          },          trigger: 'change'        }]      }    }  },  methods: {    onLogin () {      // 获取表单数据      // const user = this.user      // 触发表单验证 validate是异步      this.$refs['login-form'].validate((valid, err) => {        console.log(valid)        console.log(err)        // 如果        if (!valid) {          return        }        this.login()      })    },    login () {      // 开启loading      this.loginLoading = true      // 验证通过      // 请求直接封装      login(this.user).then(res => {        console.log(res)        this.$message({          message: '登录成功',          type: 'success'        })        this.loginLoading = false        // 跳转到首页        window.localStorage.setItem('user', JSON.stringify(res.data.data))        // 将接口返回的数据接收        this.$router.push({          name: 'home'        })      }).catch(err => {        console.log('登录失败', err)        this.$message.error({          message: '手机号或者验证码错误',          type: 'warning'        })        this.loginLoading = false      })    }  }}script><style scoped lang="less">.login-container{position: fixed;  left: 0;  top: 0;  right: 0;  bottom: 0;  display: flex;  justify-content: center;  align-items: center;  flex-direction: column;  background: url("./login_bg.jpg") no-repeat;  background-size: cover;  .login-head{    width: 300px;    height: 57px;    background:url("./logo_index.png") no-repeat;    margin-bottom: 30px;  }  .login-form{    background-color: #fff;    padding: 50px;    min-width: 300px;    .login-btn{      width: 100%;    }  }}style>

差不多这些了

服务启动

登入

目前节点token

记得Github提交代码呀

结束 继续保持 勉励篇