SSM+ElementUI综合练习

最新推荐文章于 2022-06-18 15:59:55 发布

虞铭轩、

最新推荐文章于 2022-06-18 15:59:55 发布

阅读量928

点赞数

分类专栏：学习文章标签： java SSM Elementui

本文链接：https://blog.csdn.net/java_pipixia/article/details/100067268

版权

本文介绍了SSM+ElementUI的综合练习，包括前后端分离的优势，前端环境搭建，ElementUI的使用，以及利用Mockjs和Easymock模拟接口数据，最后探讨了Ajax请求的优化方法，如axios的使用。

摘要由CSDN通过智能技术生成

文章目录

1 前后端分离

前后端分离并不只是开发模式，而是web应用的一种架构模式
前后端分离优势
①效率高
②专业的人做专业的事
③打造精益的团队
④代码的维护性比较好
前后端分类是一种架构模式,前后端人员先预定好接口,并行开发与测试.上线时进行分别部署.对开发人员能力要求高.对于小型公司或刚转型前后端分离模式公司,开发人员能力有限,采用是后端先行前后端分离开发模式.

2 搭建前端环境

Idea创建一个static web项目
根目录下执行vue命令
vue init webpack
运行项目
npm run dev
4、浏览器访问

3 ElementUI-基于vue前端ui框架

安装(注意：也可以下载下来导入也ok，和原来easyui一样使用就ok)
npm i element-ui -S
导入

import Vue from 'vue';
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI)

开始使用
以下组件详情见网页https://element.eleme.cn/2.0/#/zh-CN/component/icon
①Layout布局
②Container布局容器
③Button按钮
④Tree树形控件
⑤Pagination分页
⑥Alert警告
⑦Tabs标签页
⑧Dialog对话框
⑨Form
⑩Table

4 Elementui+Crud实现

4.1 页面布局

<template>
  <div>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-table
      :data="users"
      style="width: 100%"
      border
      height="450px"