vue2 项目25

app.js:

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

<style lang="less">
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

[v-cloak]{
    display: none;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  width: 100%;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>

　　mylogin:

<template>
  <div id="login">
    <div class="middle">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="50px" class="demo-ruleForm">
        <el-form-item prop="email" label="邮箱" :rules="[
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ]">
          <el-input v-model.trim="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model.trim="ruleForm.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else {
        if (this.ruleForm.checkPass !== '') {
          this.$refs.ruleForm.validateField('checkPass');
        }
        callback();
      }
    };
    return {
      ruleForm: {
        pass: '',
        email: ''
      },
      rules: {
        pass: [
          { validator: validatePass, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      console.log(formName);
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(valid);
          if (this.ruleForm.email === '111@qq.com' && this.ruleForm.pass === '123') {
             // 登录成功
            // 1. 存储 token
            localStorage.setItem('token', 'Bearer xxxx')
            // 2. 跳转到后台主页
            this.$router.push('/home')
          } else {
            alert('error submit!!');
            localStorage.removeItem('token')
          }
        } else {
          alert('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style lang="less" scoped>
#login {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
  position: absolute;
  top: 50%;
  left: 48.9%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  padding: 0 20px;
  max-width: 100%;
}
.middle{
  width: 40%;
  margin: auto;
  .demo-ruleForm{
    margin: 25%;
    margin-top: 50%;
  }
}
</style>

　　HomeView:

<template>
  <div class="home">
    <Header></Header>
    <div class="Side">
      <Side></Side>
      <div class="side-router">
        <router-view></router-view>
      </div>
    </div>

  </div>
</template>

<script>
import Header from '../components/Header.vue'
import Side from '../components/Side.vue'
export default {
  components: {
    Header, Side
  }
}
</script>
<style lang="less" scoped>
.home{
  height: 100%;
  display: flex;
  flex-direction: column;
}
.Side{
  height: 100%;
  display: flex;
  .side-router{
    padding: 15px;
    flex: 1;
  }
}
</style>

　　路由--index:

import Vue from 'vue'
import VueRouter from 'vue-router'
import myLogin from '../views/myLogin.vue'
import pathArr from '@/router/pathArr.js'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    // 登录的路由规则
    { path: '/login', component: myLogin },
    {
      path: '/home',
      name: 'home',
      component: () => import('../views/HomeView.vue'),
      redirect: '/home/users',
      children: [
        { path: 'users', name: 'users', component: () => import('../components/side/MyUsers.vue') },
        { path: 'rights', component: () => import('../components/side/MyRights.vue') },
        { path: 'goods', component: () => import('../components/side/MyGoods.vue') },
        { path: 'orders', component: () => import('../components/side/MyOrders.vue') },
        { path: 'settings', component: () => import('../components/side/MySettings.vue') },
        // 用户详情页
        { path: 'userinfo/:id', component: () => import('../components/side/user/info.vue'), props: true }
      ]
    }

  ]
})

// 全局前置守卫
router.beforeEach(function (to, from, next) {
  if (pathArr.indexOf(to.path) !== -1) {
    const token = localStorage.getItem('token')
    if (token) {
      next()
    } else {
      next('/login')
    }
  } else {
    next()
  }
})

export default router

　　patharr.js：

export default ['/home', '/home/users', '/home/rights', '/home/goods', '/home/settings', '/home/orders']

　　组件页面：

　　MyUsers：

<template>
  <div>
    <template>
      <el-table :data="tableData" height="100%" border style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column label="操作" prop="id">
          <!-- 获取id prop="id"-->
          <template slot-scope="scope">
            <!-- 传递id scope.row.id-->
            <div @click.prevent="operation(scope.row.id)">
              详情
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </div>
</template>

<script>
export default {
  name: 'MyUser',
  data() {
    return {
      tableData: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 4,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 5,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 6,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 7,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }]
    }
  },
  methods: {
    gotoDetail(id) {
      //   /home/userinfo/1
      //   /home/userinfo/2
      //   /home/userinfo/3
      this.$router.push('/home/userinfo/' + id)
    },
    operation(id) {
      // console.log('ok');
      this.$router.push('/home/userinfo/' + id)
    }
  }
}
</script>

<style lang="less" scoped>

</style>

　　MySettings：

<template>
  <h4 class="text-center">系统设置</h4>
</template>

<script>
export default {
  name: 'MySettings'
}
</script>

<style lang="less" scoped>
</style>

　　MyRights：

<template>
  <h4 class="text-center">权限管理</h4>
</template>

<script>
export default {
  name: 'MyRights'
}
</script>

<style lang="less" scoped>
</style>

　　MyOrders：

<template>
  <h4 class="text-center">订单管理</h4>
</template>

<script>
export default {
  name: 'MyOrders'
}
</script>

<style lang="less" scoped>
</style>

　　MyGoods：

<template>
  <h4 class="text-center">商品管理</h4>
</template>

<script>
export default {
  name: 'MyGoods'
}
</script>

<style lang="less" scoped>
</style>

　　Header：

<template>
    <div class="header">
        <div class="header_com">
            <el-row>
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                        <el-image style="width: 50px; height: 50px; display:flex;margin-top: 5px;" :src="url">
                        </el-image>
                        <p>后台管理系统</p>
                    </div>
                </el-col>
                <el-col :span="12">
                    <div class="grid-content bg-purple-light" @click="Logout">退出登录</div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
        }
    },
    methods: {
        Logout() {
            localStorage.removeItem('token')
            this.$router.push('/login')
        }
    }
}
</script>

<style lang="less" scoped>
.header {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #545c64;

    .header_com {
        width: 90%;
        margin: auto;
        line-height: 60px;

        .bg-purple {
            display: flex;

            p {
                padding-left: 20px;
                line-height: 30px;
                color: #fff;
            }
        }

        .bg-purple-light {
            display: flex;
            justify-content: flex-end;
            color: #fff;
        }
    }
}
</style>

　　Side：

<template>
    <div class="side">
        <el-row class="tac">
            <el-col :span="12">
                <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                    background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                    <router-link to="/home/users">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-user-solid"></i>
                                用户管理
                            </template>
                            <el-menu-item-group>
                                <template slot="title">分组一</template>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="1-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="1-4-1">选项1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                    </router-link>
                    <router-link to="/home/rights">
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            权限管理
                        </el-menu-item>
                    </router-link>
                    <router-link to="/home/goods">
                        <el-menu-item index="3">
                            <i class="el-icon-document"></i>
                            商品管理
                        </el-menu-item>
                    </router-link>
                    <router-link to="/home/orders">
                        <el-menu-item index="4">
                            <i class="el-icon-edit-outline"></i>
                            订单管理
                        </el-menu-item>
                    </router-link>
                    <router-link to="/home/settings">
                        <el-menu-item index="5">
                            <i class="el-icon-setting"></i>
                            系统设置
                        </el-menu-item>
                    </router-link>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
}

</script>

<style lang="less" scoped>
a {
    text-decoration: none;
}

.side {
    width: 220px;
    height: 100%;
    background: #545c64;

    .el-menu {
        border-right: none
    }
}

.el-menu-vertical-demo {
    width: 218px;
}
</style>

　　info：

<template>
  <div>
    <h4 class="text-center">用户详情页 ———————— {{ id }}</h4>
    <button @click="$router.back()">后退</button>
  </div>
</template>

<script>
export default {
  name: 'Myinfo',
  props: ['id']
}
</script>

<style lang="less" scoped>

</style>

　　main：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

　　.eslintrc.js：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: '@babel/eslint-parser'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 在方法的形参()之前，是否加上空格
    "space-before-function-paren": ["warn", "never"],
    // 组件名字检测
    "vue/multi-word-component-names": "off",
    // 关闭空格检测
    "indent": 0,
    'semi':0
  }
}