目录
使用SpringBoot+Vue+ElementUI+UniAPP技术组合开发小微企业ERP系统，可以按以下步骤快速实现：
一、系统架构设计
1、技术分层
后端：Spring Boot + MyBatis Plus + MySQL
Web端：Vue3 + Element Plus + Axios
移动端：UniAPP + uView UI
接口规范：RESTful API + JWT鉴权
2、开发环境
JDK17 + Maven
Node.js 18+ + Vue CLI
HBuilder X（UniAPP开发工具）
二、快速开发实践
1、后端搭建（Spring Boot）
// 1. 使用Spring Initializr快速生成项目
// 选择依赖：Web, JPA, Security, Lombok
// 2. 核心配置示例
@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.csrf().disable()
.authorizeRequests()
.antMatchers("/api/auth/**").permitAll()
.anyRequest().authenticated()
.and()
.addFilterBefore(jwtFilter(), UsernamePasswordAuthenticationFilter.class);
}
}
// 3. 使用MyBatis Plus快速生成CRUD
public interface GoodsMapper extends BaseMapper<Goods> {
// 自动继承基础CRUD方法
}2、前端管理端（Vue+ElementUI）
<!-- 快速构建表单页面 -->
<template>
<el-form :model="goodsForm" label-width="120px">
<el-form-item label="商品名称">
<el-input v-model="goodsForm.name"></el-input>
</el-form-item>
<el-form-item label="库存预警值">
<el-input-number v-model="goodsForm.stockAlert"></el-input-number>
</el-form-item>
</el-form>
</template>
<script setup>
// 使用Composition API
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
const goodsForm = reactive({
name: '',
stockAlert: 10
})
</script>3、移动端开发（UniAPP）
// 库存查询页面
export default {
data() {
return {
inventoryList: []
}
},
onLoad() {
uni.request({
url: 'https://api.yourdomain.com/inventory',
success: (res) => {
this.inventoryList = res.data
}
})
}
}三、关键集成方案
1、统一接口处理
// api.js
import axios from 'axios'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
timeout: 5000
})
// 请求拦截（JWT处理）
service.interceptors.request.use(config => {
config.headers['Authorization'] = getToken()
return config
})
// 响应拦截
service.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 200) {
ElMessage.error(res.message)
return Promise.reject(res)
}
return res
}
)2、跨平台适配方案
// 使用uni-app的条件编译
// #ifdef H5
const baseUrl = 'https://h5.yourdomain.com'
// #endif
// #ifdef MP-WEIXIN
const baseUrl = 'https://wx.yourdomain.com'
// #endif四、典型业务实现
1、进销存核心流程
// 采购入库业务逻辑
@Service
@Transactional
public class PurchaseService {
@Autowired
private InventoryService inventoryService;
public void confirmPurchase(PurchaseOrder order) {
// 1. 更新订单状态
order.setStatus(OrderStatus.CONFIRMED);
purchaseMapper.updateById(order);
// 2. 更新库存
inventoryService.updateStock(
order.getGoodsId(),
order.getQuantity(),
StockOperationType.PURCHASE
);
}
}2、数据可视化方案
<template>
<div class="dashboard">
<el-row :gutter="20">
<el-col :span="12">
<v-chart :option="salesChart"/>
</el-col>
<el-col :span="12">
<v-chart :option="inventoryChart"/>
</el-col>
</el-row>
</div>
</template>
<script setup>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import { GridComponent, TitleComponent } from 'echarts/components'
import VChart from 'vue-echarts'
use([CanvasRenderer, LineChart, PieChart, GridComponent, TitleComponent])
// 销售趋势图表配置
const salesChart = reactive({
xAxis: { type: 'category', data: [] },
yAxis: { type: 'value' },
series: [{ type: 'line', data: [] }]
})
// 库存分布图表配置
const inventoryChart = reactive({
series: [{
type: 'pie',
data: []
}]
})
</script>五、效率提升技巧
代码生成策略
使用
mybatis-plus-generator自动生成Controller/Service/Mapper代码配置Velocity模板定制生成代码结构
通用组件封装
<!-- 通用搜索组件 -->
<template>
<el-form inline>
<el-form-item v-for="item in searchItems" :key="item.prop">
<el-input
v-if="item.type === 'input'"
v-model="searchData[item.prop]"
:placeholder="item.label"
/>
<el-date-picker
v-else-if="item.type === 'date'"
v-model="searchData[item.prop]"
type="daterange"
/>
</el-form-item>
</el-form>
</template>3.移动端优化方案
// 使用uni-app的缓存策略
const getCachedData = async (key) => {
try {
const value = await uni.getStorage({ key })
if (value) return value.data
const freshData = await fetchData()
uni.setStorage({ key, data: freshData })
return freshData
} catch (e) {
console.error('Cache error:', e)
}
}六、部署方案
1、容器化部署
# Spring Boot Dockerfile
FROM openjdk:17-jdk-alpine
VOLUME /tmp
COPY target/*.jar app.jar
ENTRYPOINT ["java","-jar","/app.jar"]2、Nginx配置
# 前端部署配置
server {
listen 80;
server_name erp.yourdomain.com;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend-server;
proxy_set_header X-Real-IP $remote_addr;
}
}这套技术组合的优势在于：
Spring Boot提供稳健的后端服务
Vue+ElementUI快速构建管理界面
UniAPP实现一次开发多端发布
组件库丰富，开发效率高
社区资源丰富，遇到问题容易找到解决方案
建议开发时优先实现MVP版本（最小可行产品），核心功能包含：
基础商品管理
采购销售流程
库存预警功能
基础财务报表
移动端数据看板
后续可根据实际需求逐步迭代扩展功能模块。注意做好权限控制和数据验证，保障企业数据安全。