• HM后台(一)


    一,项目初始化

    1.vue脚手架图形化配置

    在控制面板输入vue ui, 创建- 桌面(项目本地存放路径)-在此创建新项目-输入项目名(英文)
    -初始化git仓库-手动配置项目(babel,router,vuex,linter,使用配置文件)-
    不选择历史路由(history),standardconofig, -lint on save-

    2.

    配置element-ui
    插件- vue-cli-plugin-element, 安装
    配置插件,按需引入,
    配置axios,
    依赖,axios,安装,运行依赖

    二,登录/退出功能

    三,登录页面的样式

    1.新建login.vue组件,

    <style lang="less" scoped
    scoped,为当前组件的样式生效,不加,就是全局的样式

    配置login路由

    import Login from '@/views/Login'
    const routes = [
      {
        path: '/login',
        component: Login
      },
      {
        path: '/',
        redirect: '/login'
      }
    ]
    
    const router = new VueRouter({
      routes
    })

    在app.vue组件中

    <template>
      <div id="app">
        <router-view></router-view>
      </div>
    </template>

    2.让登录组件的颜色样式铺满网页

    assets文件夹中新建css-global.css, 全局样式表

    在main.js中导入

    // 导入全局样式
    import './assets/css/global.css'
    html,
    body,
    #app{
      height: 100%;
      margin: 0;
      padding: 0;
    }

    3.登录组件的样式编写

    3.1,在main.js文件中导入阿里巴巴字体图标库,下载到本地

    aimport './assets/fonts/iconfont.css'
    <template>
      <div class="login-container">
        <div class="login-box">
          <div class="avatar-box">
            <img src="../assets/logo.png" alt="" />
          </div>
    
          <!-- 登录表单 -->
          <el-form
            label-width="0px"
            class="login-form"
            style="100%"
            :model="loginForm"
          >
            <el-form-item>
              <el-input
                v-model="loginForm.username"
                prefix-icon="iconfont icon-user"
              ></el-input>
            </el-form-item>
    
            <el-form-item>
              <el-input
                v-model="loginForm.password"
                type="password"
                prefix-icon="iconfont icon-3702mima"
              ></el-input>
            </el-form-item>
            <el-form-item class="login-btn">
              <el-button type="primary" size="middle">登录</el-button>
              <el-button type="warning" size="middle">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: "Login",
      data() {
        return {
          loginForm: {
            username: "",
            password: ""
          }
        };
      }
    };
    </script>
    
    <style scoped lang="less">
    .login-container {
      background-color: #2b4b6b;
      height: 100%;
      position: relative;
    
      .login-box {
         450px;
        height: 300px;
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    
        .avatar-box {
           130px;
          height: 130px;
          border: 1px solid #eee;
          border-radius: 50%;
          background: #fff;
          position: absolute;
          left: 50%;
          transform: translate(-50%, -50%);
          padding: 10px;
          box-shadow: 0 0 10px #abc;
    
          img {
            height: 100%;
            border-radius: 50%;
            background: #eee;
          }
        }
    
        .login-form {
          position: absolute;
          bottom: 0px;
          padding: 0 10px;
          box-sizing: border-box;
    
          .login-btn {
            display: flex;
            justify-content: flex-end;
          }
        }
      }
    }
    </style>

    4.登录组件的表单数据验证

     <el-form
            label-width="0px"
            class="login-form"
            style="100%"
            :model="loginForm"
            :rules="loginFormRules"
          >
            <el-form-item prop="username">
              <el-input
                v-model="loginForm.username"
                prefix-icon="iconfont icon-user"
              ></el-input>
            </el-form-item>
    
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                prefix-icon="iconfont icon-3702mima"
              ></el-input>
    loginFormRules: {
            username: [
              { required: true, message: "请输入登录名称", trigger: "blur" },
              { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
            ],
    
            password: [
              { required: true, message: "请输入登录密码", trigger: "blur" },
              { min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
            ]
          }

    5.表单重置按钮的功能

    点击重置按钮,对表单的输入框重置,以及校验重置初始值

    <el-form
            label-width="0px"
            class="login-form"
            style="100%"
            :model="loginForm"
            :rules="loginFormRules"
            ref="loginFormRef"
          >
    <el-button type="warning" size="middle" @click="reset"
                >重置</el-button>
    reset() {
          // 点击重置按钮,输入框数据消失
          this.$refs.loginFormRef.resetFields();
          // console.log(this)
        }

    6.点击登录按钮,进行表单的预验证

     6.1,在main.js引入axios,配置接口

    import axios from 'axios'
    // 配置请求的跟路径
    axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
    Vue.prototype.$http = axios
     <el-form-item class="login-btn">
              <el-button type="primary" size="middle" @click="login"
                >登录</el-button
              >
    login() {
          this.$refs.loginFormRef.validate(async valid => {
            if (!valid) return
            const { data: res } = await this.$http.post('login', this.loginForm)
            if (res.meta.status !== 200) return this.$message.error('登录失败!')
            this.$message.success('登录成功')
            // 1. 将登录成功之后的 token,保存到客户端的 sessionStorage 中
            //   1.1 项目中出了登录之外的其他API接口,必须在登录之后才能访问
            //   1.2 token 只应在当前网站打开期间生效,所以将 token 保存在 sessionStorage 中
            window.sessionStorage.setItem('token', res.data.token)
            // 2. 通过编程式导航跳转到后台主页,路由地址是 /home
            this.$router.push('/home')
          })
        }

    7.路由导航守卫控制访问权限

    7.1,如果用户没有登录,但是直接通过URL访问特定页面,需要重新导航到登录页面

     在路由配置文件中配置路由守卫, 判断路劲,在判断是否登录(token值)

    ,const router = new VueRouter({
      routes
    })
    
    // 挂载路由导航守卫
    router.beforeEach((to, from, next) => {
      // to 将要访问的路径
      // from 代表从哪个路径跳转而来
      // next 是一个函数,表示放行
      //     next()  放行    next('/login')  强制跳转
    
      if (to.path === '/login') return next()
      // 获取token
      const tokenStr = window.sessionStorage.getItem('token')
      if (!tokenStr) return next('/login')
      next()
    })

    8.退出功能

    基于 token 的方式实现退出比较简单,只需要销毁本地的 token 即可。这样,后续的请求就不会携带 token ,必须重新登录生成一个新的 token 之后才可以访问页面。

    <el-button type="info" @click="logout">退出</el-button>
    logout() {
          window.sessionStorage.clear()
          this.$router.push('/login')
        }
  • 相关阅读:
    为经典版eclipse增加web and JavaEE插件
    类型之间进行隐式和显示转换&创建使用枚举&创建使用结构类型&创建使用数组&;如何处理字符串值
    VS2013秘钥
    VS2013快捷键大全
    2016年4月20日开会学习
    随机验证码.ashx
    关于代码开发的一些心得
    C#list泛型的定义,作用,用法
    String,StringBuffer与StringBuilder的区别??
    C# DataTable的详细用法
  • 原文地址:https://www.cnblogs.com/fsg6/p/14255390.html
Copyright © 2020-2023  润新知