Vue2----后台管理系统

Vue3

后台管理系统可能用到的依赖：element-ui  vue-router@3 axios   less   less-loader先下载这些吧

使用命令npm i   element-ui  vue-router@3   axios   less   less-loader；也可使用yarn add 命令下载

注意：vue3使用的是element-plus，vue2使用的是element ui ，vue3使用的路由是最新版，如果是vue2需要指定版本

之后的步骤和   Vue3--后台管理系统--第一章   一样，根据第一章写完之后在继续下面的步骤：

创建文件夹router------文件index.js

index.js-----在main.js中导入-----import router from '@/router'

import Vue from 'vue'
import App from './App.vue'
import '@/styles/index.css'
import router from '@/router'
// 导入ElementUI
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUI);
// 创建根Vue实例
new Vue({
  router,
  // 渲染App组件作为根组件
  render: h => h(App)
}).$mount('#app')

App.vue

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: "App",
  components: {},
};
</script>

<style>
</style>

创建文件夹layout------文件index.vue

分析：首先一个后台管理系统是可以被分为两个页面：系统内页面和系统外页面

 系统外页面就是系统的登录页面，系统内页面就是登录进去之后的页面

其次系统内页面又可以进行细分，分为三大模块：头部、内容区、侧边栏

其中内容区是动态变化的一个区域

// 导入Vue和vue-router
import Vue from 'vue'
import VueRouter from 'vue-router'

// 导入组件
import LoginPage from '@/views/login/index.vue'
import Layout from '@/views/layout/index.vue'

// 使用vue-router插件
Vue.use(VueRouter)

// 定义路由
// 后台管理系统分为系统内的页面和系统外的页面
const routes = [
    // 系统外的登录页面
    { path: '/', redirect: "/login" },
    { path: '/login', component: LoginPage },
    // 系统内的页面-----登录进去之后的页面
    // 系统内的页面内容分为三部分----头部、内容区、侧边栏
    // 首页
    {
        path: "/dashboard",
        name: "Dashboard",
        hidden: true,
        component: Layout,
        meta: {
            title: '控制台',
        },
        children: [
            {
                path: 'homepage',
                name: 'Homepage',
                meta: {
                    title: "首页",
                },
                component: () => import('@/views/dashboard/index.vue'),
            }
        ]
    },
]

// 创建路由实例
const router = new VueRouter({
    routes
})

export default router

写静态的登录页面：

html：

<template>
  <div class="login">
    <div class="content">
      <div class="login_swiper"></div>
      <div class="login_input">
        <h1>好谷商城</h1>
        <el-input
          class="elInput"
          v-model="name"
          prefix-icon="el-icon-user"
          placeholder="请输入用户名"
        ></el-input>
        <el-input
          class="elInput"
          v-model="password"
          prefix-icon="el-icon-user"
          show-password
          placeholder="请输入密码"
        ></el-input>
        <div class="verify">
          <el-input prefix-icon="el-icon-user" placeholder="验证码"></el-input>
          <div class="captcha">
            11
            <img src="" alt="" />
          </div>
        </div>
        <el-button class="btn" @click="Tologin" type="primary" round
          >登录</el-button
        >
      </div>
    </div>
    <el-alert
      class="alert"
      v-if="show"
      :title="title"
      type="success"
      effect="dark"
    >
    </el-alert>
  </div>
</template>

js：

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { userLogin } from "@/api/LoginAndIndex";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  name: "index", //ComponentName和文件名保持一致
  //这里存放数据
  data() {
    return {
      name: "",
      password: "",
      title: "你",
      show: false,
    };
  },
  computed: {}, //监听属性 类似于data概念
  watch: {}, //监控data中的数据变化
  methods: {
    // 点击登录时在调用登录接口
    Tologin() {
      this.userLoginFun();
    },
    userLoginFun() {
      userLogin({
        name: this.name,
        pwd: this.password,
      }).then((res) => {
        console.log("res", res.data);
        // 获取服务器返回的 token
        const token = res.data.token;
        // 将 token 存储到本地 localStorage 中
        localStorage.setItem("token", token);
        this.show = true; //不管成不成功都进行--提示消息进行显示
        this.title = res.data.msg;
        if (res.data.status == true) {
          // 认证成功跳转到首页
          this.$router.push({ path: "/dashboard" });
        }
      });
    },
  }, //方法集合
  beforeCreate() {}, //生命周期 - 创建之前
  created() {}, //生命周期 - 创建完成（可以访问当前this实例）
  beforeMount() {}, //生命周期 - 挂载之前
  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  deactivated() {}, //如果页面有keep-alive缓存功能，当组件被移除时，触发钩子函数deactivated
};
</script>

less：

<style lang='less' scoped>
.login {
  position: relative;
  height: 100vh;
  background-color: #e1edff;
  .content {
    display: flex;
    margin: 0 auto;
    position: relative;
    top: 30%;
    width: 929px;
    height: 576px;
    background-color: #ffffff;
    border-radius: 6px;
    .login_swiper {
      width: 431px;
      height: 576px;
      background-color: #2665fa;
    }
    .login_input {
      display: flex;
      flex-direction: column;
      justify-content: center;
      margin: 0 auto;
      h1 {
        color: #1766b6;
        font-weight: 400;
        text-align: center;
      }
      .elInput {
        margin-top: 20px;
      }
      .verify {
        margin-top: 20px;
        display: flex;
        align-items: center;
        .captcha {
          margin-left: 10px;
          width: 110px;
          height: 37px;
          border: 1px solid #ddd;
        }
      }
      .btn {
        margin-top: 20px;
        width: 344px;
        height: 36px;
      }
    }
  }
  .alert {
    position: absolute;
    top: 25%;
    left: 55%;
    width: 230px;
    height: 35px;
  }
}
</style>