ssm+elementUI综合练习01-elementUI+crud

1、前后端分离

1.1、什么叫做前后端分离？

    把项目的前端代码和后端代码进行分开运行，这种架构就叫做前后端分离。
前后端分离是一种架构设计。

• 开发阶段理解的前后端分离：前后端工程师约定好数据交互接口，实现并行开发和测试。
• 运行阶段理解的前后端分离：前端代码是单独运行一个服务，后端代码也是单独运行一个服务。

1.2、为什么要进行前后端分离？

• 责任分明，擅长的人做擅长的事
• 开发效率高
• 维护性较好
• 前后端分离成本高，一般用于大型项目和大型公司

2、搭建前端环境cli

见上一篇文章

3、elementUI

官方网址：https://element.eleme.cn/#/zh-CN

3.1、安装

 npm i element-ui -S

也可以下载到本地进行引入。

3.2、导入

//引入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

//使用elementui
Vue.use(ElementUI);

3.3、开始使用

3.3.1、Layout布局和button按钮

点router进入index.js
index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//新增加路由
import Elementui from '@/components/Elementui'

Vue.use(Router)
//新增加Elementui的path
export default new Router({
   
  routes: [
    {
   
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
   
      path: '/ele',
      name: 'Elementui',
      component: Elementui
    }
  ]
})

Element.vue

<template>
//必须有一个根标签
  <div>
  //布局
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark"></div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light"></div>
      </el-col>
    </el-row>
    <hr/>
	//按钮
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button plain>朴素按钮</el-button>
      <el-button round>圆角按钮</el-button>
      <el-button icon="el-icon-search" circle></el-button>
    </el-row>
  </div>
</template>

<script>
  export default {
   
    name: 'Elementui',
    data() {
   
      return {
   
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
  .el-row {
   
    margin-bottom: 20px;

  &
  :last-child {
   
    margin-bottom: 0;
  }

  }
  .el-col {
   
    border-radius: 4px;
  }

  .bg-purple-dark {
   
    background: #99a9bf;
  }

  .bg-purple {
   
    background: #d3dce6;
  }

  .bg-purple-light {
   
    background: #e5e9f2;
  }

  .grid-content {
   
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
   
    padding: 10px 0;
    background-color: #f9fafc;
  }