SSM+ElementUI综合练习

关注

VIP免费原创最新推荐文章于 2026-09-27 11:35:32 发布 1k 阅读 AI 写同款· GEO 优化 ›

ssm+elementUI模块开发 ssm+elementUI模块开发一、创建Maven版本ssm项目二、项目抽取公共内容三、多模块搭建一、创建Maven版本ssm项目创建maven项目创建结构 pom.xml导包 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:... 阅读详情

文章目录

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"