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,

})

index.js

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

 1 <template>

 2   <el-container style="height: 100%;">

 3     <!-- 头部 -->

 4     <el-header style="text-align: right; font-size: 12px;background-color: whitesmoke;">

 5       <el-dropdown>

 6         <i class="el-icon-setting" style="margin-right: 15px"></i>

 7         <el-dropdown-menu slot="dropdown">

 8           <el-dropdown-item>查看</el-dropdown-item>

 9           <el-dropdown-item>新增</el-dropdown-item>

10           <el-dropdown-item>删除</el-dropdown-item>

11         </el-dropdown-menu>

12       </el-dropdown>

13       <span>王小虎</span>

14     </el-header>

15     <el-container>

16       <!-- 左侧栏 -->

17       <el-aside width="200px">

18         <el-menu>

19           <!--如果菜单(menu)是true 循环侧栏路由列表  -->

20           <template v-for="item in menuData" v-if="item.meta.menu">

21             <!-- 这里必须设置index,相当唯一标识这个菜单标签，否则菜单列表点击后随意展开 -->

22             <el-submenu :index="item.meta.funcNode">

23               <template slot="title"><i :class="item.meta.icon"></i>{{item.meta.title}}</template>

24               <!-- 如果菜单有孩子菜单，则循环孩子菜单 -->

25               <template v-for="itemC in item.children" v-if="item.children">

26                 <el-menu-item :index="itemC.meta.funcNode" @click="clickMenu(itemC)"><i :class="itemC.meta.icon"></i>{{itemC.meta.title}}</el-menu-item>

27               </template>

28             </el-submenu>

29           </template>

30         </el-menu>

31       </el-aside>

32       <!-- 内容渲染 -->

33       <el-main style="background-color: white;">

34         <router-view/>

35       </el-main>

36     </el-container>

37   </el-container>

38 </template>

39

40 <script>

41   export default {

42     data() {

43       return {

44         /*

45          获取挂载的routes

46         （$router相当于一个全局的路由器对象，里面含有很多属性和子对象 ）

47         （options是一个对象，有成员：1、data函数成员  2、methods对象成员  3、模板template    4、挂载元素el

48         5、生命周期钩子   6、props属性声明   7、computed计算成员    8、watch监视成员）

49         */

50         menuData: this.$router.options.routes

51       }

52     },

53     methods: {

54       clickMenu(item){

55         this.$router.push({path:item.path})     //跳转的路由对象

56         //this.$router.push({name:item.name})    通过name跳转

57       }

58     }

59   }

60 </script>

61

62 <style>

63   .el-header {

64     background-color: #B3C0D1;

65     color: #333;

66     line-height: 60px;

67   }

68

69   .el-aside,

70   .el-menu,

71   .el-submenu,

72   .el-menu-item {

73     background-color: rgb(238, 241, 246);

74   }

75

76   body {

77     margin: 0px;

78   }

79 </style>

Layout.vue

　　　　 3.3、App.vue

 1 <template>

 2   <div id="app">

 3     <router-view/>

 4   </div>

 5 </template>

 6

 7 <script>

 8 export default {

 9   name: 'App'

10 }

11 </script>

12

13 <style>

14 #app{}

15 </style>

App.vue

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

 1 <!DOCTYPE html>

 2 <html>

 3   <head>

 4     <meta charset="utf-8">

 5     <meta name="viewport" content="width=device-width,initial-scale=1.0">

 6     <title>myproject</title>

 7   </head>

 8   <body>

 9     <div id="app"></div>

10     <!-- built files will be auto injected -->

11   </body>

12   <style>

13     html,body,#app{

14       height: 100%;

15     }

16   </style>

17 </html>

index.html

　　　　3.5、login/Login.vue

  1 <template>

  2   <div class="box">

  3     <div id="login" style="width: 320px;height: 300px;text-align: center;">

  4       <el-form :model="loginForm" ref="loginForm" :rules="rules">

  5         <el-form-item>

  6           <span style="color: white;font-family: 楷体;font-size: 26px;">用&nbsp;户&nbsp;登&nbsp;录&nbsp;</span>

  7         </el-form-item>

  8         <el-form-item prop="userName">

  9           <el-input type="text" v-model="loginForm.userName" placeholder="用户名">

 10             <template slot="prepend"><i class="el-icon-user" style="font-size: 20px; color: white;"></i></template>

 11           </el-input>

 12         </el-form-item>

 13         <el-form-item prop="password">

 14           <el-input type="text" v-model="loginForm.password" placeholder="密码" show-password>

 15             <template slot="prepend"><i class="el-icon-lock" style="font-size: 20px;color: white;"></i></template>

 16           </el-input>

 17         </el-form-item>

 18         <el-form-item>

 19           <el-button type="primary" size="medium" :loading="loading" style="font-size: 20px;font-family: 微软雅黑;width: 320px;"

 20             @click="clickLogin">登&nbsp;&nbsp;&nbsp;录</el-button>

 21         </el-form-item>

 22       </el-form>

 23     </div>

 24   </div>

 25 </template>

 26

 27 <script>

 28   export default {

 29     data() {

 30       var validateUserName = (rule, value, callback) => {

 31         if (value.length === 0) {

 32           return callback(new Error('请输入用户名'))

 33         } else {

 34           callback()

 35         }

 36       }

 37       var validatePassword = (rule, value, callback) => {

 38         if (value.length === 0) {

 39           callback(new Error('请输入密码'))

 40         } else if (value.length < 3) {

 41           callback(new Error('密码不能小于3位'))

 42         } else {

 43           callback()

 44         }

 45       }

 46       return {

 47         loginForm: {

 48           userName: '',

 49           password: ''

 50         },

 51         loading: false,   //登陆加载效果

 52         rules: {

 53           userName: [{

 54             required: true,

 55             trigger: 'blur',

 56             validator: validateUserName

 57           }],

 58           password: [{

 59             required: true,

 60             trigger: 'blur',

 61             validator: validatePassword

 62           }]

 63         }

 64       }

 65     },

 66     methods: {

 67       clickLogin() {

 68         this.$refs.loginForm.validate(valid => {

 69           if (valid) {

 70             this.loading = true

 71             setTimeout(() => {

 72               if (this.loginForm.userName === 'wzz' && this.loginForm.password === '521125') {

 73                 this.$router.push({

 74                   name: 'layoutYHGL'

 75                 });

 76               } else {

 77                 this.$notify({

 78                   title: '登录提示',

 79                   message: '用户名或密码错误',

 80                   position: 'bottom-right',

 81                   type: 'error'

 82                 });

 83                 this.loading=false;

 84               }

 85             }, 3000);

 86           } else {

 87             return false;

 88           }

 89         })

 90

 91       }

 92     }

 93   }

 94 </script>

 95

 96 <style scoped="scoped">

 97   .box {

 98     display: flex;

 99     height: 100%;

100     justify-content: center;

101     align-items: center;

102   }

103 </style>

104 <style>

105   .el-input-group__prepend {

106     padding: 0px 15px;

107     background-color: #CCCCCC;

108     border: 1 solid #72767B;

109   }

110

111   body {

112     background-color: #72767B;

113     margin: 0px;

114   }

115 </style>

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

1 <template>

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

3 </template>

4

5 <script>

6 </script>

7

8 <style>

9 </style>

UserAdd.vue

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

巴特西

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

最新文章

热门文章