0基础搭建前后端分离项目：实现菜单与界面左右布局

一、后端依赖

📄 pom.xml

复制代码

<dependencies>
    <!-- Web -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>

    <!-- MyBatis -->
    <dependency>
        <groupId>org.mybatis.spring.boot</groupId>
        <artifactId>mybatis-spring-boot-starter</artifactId>
        <version>2.3.1</version>
    </dependency>

    <!-- MySQL -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-j</artifactId>
        <scope>runtime</scope>
    </dependency>

    <!-- JWT -->
    <dependency>
        <groupId>io.jsonwebtoken</groupId>
        <artifactId>jjwt</artifactId>
        <version>0.11.5</version>
    </dependency>

    <dependency>
        <groupId>org.projectlombok</groupId>
        <artifactId>lombok</artifactId>
    </dependency>
</dependencies>

二、application.yml（启用 MyBatis）

📄 application.yml

复制代码

server:
  port: 8080

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/erp_console?useSSL=false&serverTimezone=UTC
    username: root
    password: root

mybatis:
  mapper-locations: classpath:mapper/*.xml
  type-aliases-package: com.erp.console.entity
  configuration:
    map-underscore-to-camel-case: true

三、实体类（Entity）

📄 com.erp.console.entity.SysUser.java

复制代码

@Data
public class SysUser {
    private Long id;
    private String username;
    private String password;
    private String nickname;
    private String deptName;
    private String roleName;
}

四、Mapper 接口（MyBatis 原生）

📄 com.erp.console.mapper.SysUserMapper.java

复制代码

@Mapper
public interface SysUserMapper {

    SysUser selectByUsernameAndPassword(@Param("username") String username,
                                        @Param("password") String password);
}

五、Mapper XML（核心）

📁 resources/mapper/SysUserMapper.xml

复制代码

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.erp.console.mapper.SysUserMapper">

    <select id="selectByUsernameAndPassword" resultType="SysUser">
        SELECT
            id,
            username,
            password,
            nickname,
            dept_name AS deptName,
            role_name AS roleName
        FROM sys_user
        WHERE username = #{username}
          AND password = #{password}
    </select>

</mapper>

六、Service 层（调用 MyBatis）

📄 SysUserService.java

复制代码

public interface SysUserService {
    SysUser login(String username, String password);
}

📄 SysUserServiceImpl.java

复制代码

@Service
public class SysUserServiceImpl implements SysUserService {

    @Autowired
    private SysUserMapper sysUserMapper;

    @Override
    public SysUser login(String username, String password) {
        return sysUserMapper.selectByUsernameAndPassword(username, password);
    }
}

七、登录接口（不变）

📄 AuthController.java

复制代码

@RestController
@RequestMapping("/auth")
public class AuthController {

    @Autowired
    private SysUserService userService;

    @PostMapping("/login")
    public R<String> login(@RequestParam String username,
                           @RequestParam String password) {

        SysUser user = userService.login(username, password);
        if (user == null) {
            return R.fail("用户名或密码错误");
        }

        String token = JwtUtil.generateToken(user.getId().toString());
        return R.ok(token);
    }
}

八、控制台首页（MyBatis 版）

📄 DashboardMapper.java

复制代码

@Mapper
public interface DashboardMapper {

    int countTodayOrder();

    BigDecimal sumMonthSales();
}

📄 DashboardMapper.xml

复制代码

<mapper namespace="com.erp.console.mapper.DashboardMapper">

    <select id="countTodayOrder" resultType="int">
        SELECT COUNT(*) FROM erp_order WHERE DATE(create_time) = CURDATE()
    </select>

    <select id="sumMonthSales" resultType="java.math.BigDecimal">
        SELECT SUM(total_amount)
        FROM erp_order
        WHERE MONTH(create_time) = MONTH(NOW())
    </select>

</mapper>

📄 DashboardServiceImpl.java

复制代码

@Service
public class DashboardServiceImpl {

    @Autowired
    private DashboardMapper dashboardMapper;

    public Map<String, Object> overview() {
        Map<String, Object> map = new HashMap<>();
        map.put("orderToday", dashboardMapper.countTodayOrder());
        map.put("salesMonth", dashboardMapper.sumMonthSales());
        return map;
    }
}

九、前端代码（Vue + Element）

1️⃣ 安装依赖

复制代码

npm install vue element-ui axios

2️⃣ main.js

📄 src/main.js

复制代码

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
new Vue({ render: h => h(App) }).$mount('#app')

3️⃣ Axios 封装

📄 src/utils/request.js

复制代码

import axios from 'axios'

const service = axios.create({
  baseURL: 'http://localhost:8080',
  timeout: 5000
})

service.interceptors.request.use(config => {
  config.headers['Authorization'] = localStorage.getItem('token')
  return config
})

export default service

4️⃣ 登录页

📄 src/views/login/index.vue

复制代码

<template>
  <el-form @submit.native.prevent="login">
    <el-form-item label="用户名">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input type="password" v-model="form.password" />
    </el-form-item>
    <el-button type="primary" @click="login">登录</el-button>
  </el-form>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      form: { username: '', password: '' }
    }
  },
  methods: {
    async login() {
      const res = await request.post('/auth/login', null, {
        params: this.form
      })
      localStorage.setItem('token', res.data)
      this.$router.push('/dashboard')
    }
  }
}
</script>

5️⃣ 控制台首页（你要的内容）

📄 src/views/dashboard/index.vue

复制代码

<template>
  <div>
    <h2>欢迎回来，{{ userInfo.nickname }}</h2>

    <el-row :gutter="20">
      <el-col :span="6" v-for="(val, key) in overview" :key="key">
        <el-card>{{ key }}：{{ val }}</el-card>
      </el-col>
    </el-row>

    <el-card style="margin-top:20px">
      <div>快捷入口</div>
      <el-button @click="$router.push('/purchase')">采购订单</el-button>
      <el-button @click="$router.push('/sale')">销售出库</el-button>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  data() {
    return {
      userInfo: { nickname: '管理员' },
      overview: {}
    }
  },
  mounted() {
    this.load()
  },
  methods: {
    async load() {
      const res = await request.get('/dashboard/overview')
      this.overview = res.data
    }
  }
}
</script>

6️⃣ 路由

📄 src/router/index.js

复制代码

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    { path: '/login', component: () => import('@/views/login/index') },
    { path: '/dashboard', component: () => import('@/views/dashboard/index') }
  ]
})

十、数据库 SQL（最小）

复制代码

CREATE DATABASE erp_console;
USE erp_console;

CREATE TABLE sys_user (
  id BIGINT PRIMARY KEY AUTO_INCREMENT,
  username VARCHAR(50),
  password VARCHAR(50),
  nickname VARCHAR(50),
  dept_name VARCHAR(50),
  role_name VARCHAR(50)
);

INSERT INTO sys_user VALUES (1,'admin','123456','管理员','总部','超级管理员');

十一、你现在拥有的完整能力 ✅

能力	状态
Spring Boot	✅
原生 MyBatis	✅
Mapper XML	✅
控制台首页	✅
登录 + JWT	✅
ERP 可扩展	✅