Vue+SSM+Element-Ui实现前后端分离(1)

       前言：最近学习vue，就突发奇想，小菜鸟的我是时候锻炼锻炼自己。闲话不说，整起 <-_->

       整体规划：先搭建前端，接下来后端，最后整合。

一、创建vue项目

1、安装nodejs（ 傻瓜式安装即可）     官网：  http://nodejs.cn/download/

检查安装是否成功

      有问题可看 https://www.runoob.com/nodejs/nodejs-npm.html

2、安装淘宝镜像（由于npm在国外速度慢，直接用我们的）

　　cmd里直接运行 npm install -g cnpm --registry=https://registry.npm.taobao.org

  

3、使用cnpm安装vue

　　cmd里直接运行 cnpm install vue

  

4、全局安装vue脚手架工具

　　cmd里直接运行 cnpm install --global vue-cli

 　　5、创建vue项目

    cmd里直接运行 vue init webpack 项目

       

       

　　至此，vue项目创建完成。在你创建项目位置根目录运行：npm run dev 

　　

　　注意：如果在初始化创建项目时有错误,运行时 先 在你创建的 项目位置根目录 cnpm install，再 npm run dev

       

　　浏览器访问

       

       运行成功!!!!  接下来就可以写页面啦(这里我们用Element Ui)   教程：https://element.eleme.cn/#/zh-CN/component/layout

二、编写简单页面

　　1、cmd进入你的项目，安装Element Ui     cnpm install element-ui -S

        

 

　　安装完成后，在router/index.js或者main.js里引入

　　　　import ElementUI from 'element-ui';

　　　　  import 'element-ui/lib/theme-chalk/index.css';

　　　　  Vue.use(ElementUI);

         

 

　　这时候就可以开心的使用Element Ui组件库了

　　2、这里先模拟一个登陆功能（1.有表单校验，2、默认用户名wzz，密码521125，登陆成功跳到列表页,失败友情提示） 列表页旁边是代码结构图

　　效果如图

      

         

　　项目目录

        

　　 3、代码介绍：

　　 　　3.1、router/index.js （侧栏路由编码）

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

Vue.use(ElementUI);
Vue.use(Router)

let menu=[
  {
    path:'/user',
    name:'layoutYHGL',
    component:()=>import('@/views/layout/Layout'),
    meta:{
      title:'用户管理',
      icon:'el-icon-user',
      menu:true,
      funcNode:'1'
    },
    children:[
      {
        path:'/user/userList',
        name:'UserList',
        component:()=>import('@/views/user/UserList'),
        meta:{
          title:'用户列表',
          icon:'el-icon-notebook-2',
          menu:true,
          funcNode:'1-1'
        }
      },
      {
        path:'/user/addUser',
        name:'UserAdd',
        component:()=>import('@/views/user/UserAdd'),
        meta:{
          title:'用户添加',
          icon:'el-icon-circle-plus-outline',
          menu:true,
          funcNode:'1-2'
        }
      }
    ]
  },
  {
    path:'/role',
    redirect:'user/userList',
    meta:{
      title:'角色管理',
      icon:'el-icon-help',
      menu:true
    }
  },
  {
    path:'/sys',
    name:'layoutXTGL',
    component:()=>import('@/views/layout/Layout'),
    meta:{
      title:'系统管理',
      icon:'el-icon-setting',
      menu:true,
      funcNode:'2'
    },
    children:[
      {
        path:'/sys/sysLogList',
        name:'SysLogList',
        component:()=>import('@/views/sys/SysLogList'),
        meta:{
          title:'系统访问日志',
          icon:'el-icon-notebook-1',
          menu:true,
          funcNode:'2-1'
        }
      }
    ]
  },
  {
    path:'',
    redirect:'login',
    meta:{
      menu:false
    }
  },
  {
    path:'/login',
    name:'Login',
    component:()=>import('@/views/login/Login'),
    meta:{
      menu:false
    }
  }
]

export default new Router({
  routes:menu,
})

　　　　 3.2、layout/Layout.vue   (对侧栏信息的布局，使用了v-for，v-on ，v-if)

<template>
  <el-container style="height: 100%;">
    <!-- 头部 -->
    <el-header style="text-align: right; font-size: 12px;background-color: whitesmoke;">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>查看</el-dropdown-item>
          <el-dropdown-item>新增</el-dropdown-item>
          <el-dropdown-item>删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>王小虎</span>
    </el-header>
    <el-container>
      <!-- 左侧栏 -->
      <el-aside width="200px">
        <el-menu>
          <!--如果菜单(menu)是true 循环侧栏路由列表  -->
          <template v-for="item in menuData" v-if="item.meta.menu">
            <!-- 这里必须设置index,相当唯一标识这个菜单标签，否则菜单列表点击后随意展开 -->
            <el-submenu :index="item.meta.funcNode">
              <template slot="title"><i :class="item.meta.icon"></i>{{item.meta.title}}</template>
              <!-- 如果菜单有孩子菜单，则循环孩子菜单 -->
              <template v-for="itemC in item.children" v-if="item.children">
                <el-menu-item :index="itemC.meta.funcNode" @click="clickMenu(itemC)"><i :class="itemC.meta.icon"></i>{{itemC.meta.title}}</el-menu-item>
              </template>
            </el-submenu>
          </template>
        </el-menu>
      </el-aside>
      <!-- 内容渲染 -->
      <el-main style="background-color: white;">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    data() {
      return {
        /*
         获取挂载的routes
        （$router相当于一个全局的路由器对象，里面含有很多属性和子对象 ）
        （options是一个对象，有成员：1、data函数成员  2、methods对象成员  3、模板template    4、挂载元素el
        5、生命周期钩子   6、props属性声明   7、computed计算成员    8、watch监视成员）
        */
        menuData: this.$router.options.routes
      }
    },
    methods: {
      clickMenu(item){
        this.$router.push({path:item.path})     //跳转的路由对象
        //this.$router.push({name:item.name})    通过name跳转
      }
    }
  }
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside,
  .el-menu,
  .el-submenu,
  .el-menu-item {
    background-color: rgb(238, 241, 246);
  }

  body {
    margin: 0px;
  }
</style>

　　　　 3.3、App.vue   

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

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

<style>
#app{}
</style>

               3.4、index.html     (主要是对html，body样式设置height:100%，为解决子模块设置height:100%无效)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>myproject</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <style>
    html,body,#app{
      height: 100%;
    }
  </style>
</html>

 　　　　3.5、login/Login.vue

<template>
  <div class="box">
    <div id="login" style=" 320px;height: 300px;text-align: center;">
      <el-form :model="loginForm" ref="loginForm" :rules="rules">
        <el-form-item>
          <span style="color: white;font-family: 楷体;font-size: 26px;">用&nbsp;户&nbsp;登&nbsp;录&nbsp;</span>
        </el-form-item>
        <el-form-item prop="userName">
          <el-input type="text" v-model="loginForm.userName" placeholder="用户名">
            <template slot="prepend"><i class="el-icon-user" style="font-size: 20px; color: white;"></i></template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input type="text" v-model="loginForm.password" placeholder="密码" show-password>
            <template slot="prepend"><i class="el-icon-lock" style="font-size: 20px;color: white;"></i></template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" :loading="loading" style="font-size: 20px;font-family: 微软雅黑; 320px;"
            @click="clickLogin">登&nbsp;&nbsp;&nbsp;录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      var validateUserName = (rule, value, callback) => {
        if (value.length === 0) {
          return callback(new Error('请输入用户名'))
        } else {
          callback()
        }
      }
      var validatePassword = (rule, value, callback) => {
        if (value.length === 0) {
          callback(new Error('请输入密码'))
        } else if (value.length < 3) {
          callback(new Error('密码不能小于3位'))
        } else {
          callback()
        }
      }
      return {
        loginForm: {
          userName: '',
          password: ''
        },
        loading: false,   //登陆加载效果
        rules: {
          userName: [{
            required: true,
            trigger: 'blur',
            validator: validateUserName
          }],
          password: [{
            required: true,
            trigger: 'blur',
            validator: validatePassword
          }]
        }
      }
    },
    methods: {
      clickLogin() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            this.loading = true
            setTimeout(() => {
              if (this.loginForm.userName === 'wzz' && this.loginForm.password === '521125') {
                this.$router.push({
                  name: 'layoutYHGL'
                });
              } else {
                this.$notify({
                  title: '登录提示',
                  message: '用户名或密码错误',
                  position: 'bottom-right',
                  type: 'error'
                });
                this.loading=false;
              }
            }, 3000);
          } else {
            return false;
          }
        })

      }
    }
  }
</script>

<style scoped="scoped">
  .box {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  }
</style>
<style>
  .el-input-group__prepend {
    padding: 0px 15px;
    background-color: #CCCCCC;
    border: 1 solid #72767B;
  }

  body {
    background-color: #72767B;
    margin: 0px;
  }
</style>

　　　　 3.6、sys/SysLogList.vue，user/UserAdd.vue，user/UserList.vue    (这几个就是加了一个各自的<h3></h3>标签)  如下

<template>
  <div><h3>用户添加</h3></div>
</template>

<script>
</script>

<style>
</style>

　　 至此，前端暂时结束。有不足之处，请广大网友指正，谢谢<-_->