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="width: 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: 微軟雅黑;width: 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>

 

　　 至此，前端暫時結束。有不足之處，請廣大網友指正，謝謝<-_->