正文

JeecgBoot项目轻松上手，实战案例教你高效开发！

/0 浏览量
0816

引言

JeecgBoot是一款基于Spring Boot 2、MyBatis、Ant Design Vue等主流框架的快速开发平台，旨在帮助开发者快速构建企业级应用。它提供了丰富的组件和插件，极大地简化了开发流程，提高了开发效率。本文将带领大家轻松上手JeecgBoot，并通过实战案例展示如何高效地进行开发。

一、JeecgBoot简介

1.1 什么是JeecgBoot？

JeecgBoot是一个全栈式框架，集成了前后端、数据库、代码生成、模板引擎等功能，能够帮助开发者快速搭建企业级应用。它采用模块化设计，便于扩展和维护。

1.2 JeecgBoot的特点

  • 快速开发：提供丰富的组件和插件，简化开发流程。
  • 低代码开发：通过可视化配置，减少代码编写量。
  • 跨平台：支持多种数据库和前端框架。
  • 易扩展：模块化设计，便于扩展和维护。

二、JeecgBoot环境搭建

2.1 安装Java环境

首先，确保您的计算机已安装Java环境。JeecgBoot项目需要Java 1.8及以上版本。

2.2 安装Node.js和npm

JeecgBoot项目需要Node.js和npm来编译前端代码。可以从Node.js官网下载并安装。

2.3 创建JeecgBoot项目

  1. 打开命令行窗口，进入您希望创建项目的目录。
  2. 执行以下命令创建项目：
npm install -g @jeecg-boot/jeecg-cli
jeecg-cli init myproject
  1. 进入项目目录，执行以下命令启动项目：
npm run dev

三、JeecgBoot实战案例

3.1 创建用户管理模块

  1. 在项目中的src/main/java/com/jeecg目录下创建一个名为User的包。
  2. 在User包下创建User.java类，并添加以下代码：
package com.jeecg;

import com.baomidou.mybatisplus.annotation.TableName;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import java.io.Serializable;

@TableName("sys_user")
public class User implements Serializable {

    private static final long serialVersionUID = 1L;

    @TableId(type = IdType.AUTO)
    private Long id;

    private String username;

    private String password;

    // 省略其他属性、构造方法、getters和setters
}
  1. 在src/main/java/com/jeecg目录下创建一个名为UserMapper的接口，并添加以下代码：
package com.jeecg;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.jeecg.entity.User;

public interface UserMapper extends BaseMapper<User> {
}
  1. 在src/main/java/com/jeecg目录下创建一个名为UserController的控制器，并添加以下代码：
package com.jeecg;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.IService;

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @GetMapping
    public Page<User> list(@RequestParam(name="pageNo", defaultValue="1") int pageNo,
                           @RequestParam(name="pageSize", defaultValue="10") int pageSize,
                           User user) {
        Page<User> page = new Page<>(pageNo, pageSize);
        return userService.page(page, Wrappers.query(user));
    }

    // 省略其他方法
}
  1. 在src/main/java/com/jeecg目录下创建一个名为UserService的服务，并添加以下代码：
package com.jeecg;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import org.springframework.stereotype.Service;

@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
    // 省略实现方法
}
  1. 在src/main/java/com/jeecg目录下创建一个名为UserMapper.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.jeecg.UserMapper">
    <!-- 省略SQL映射 -->
</mapper>
  1. 在src/main/resources/static/js/ant-design-vue-jeecg/jeecg-boot/index.js文件中，添加以下代码：
import Vue from 'vue';
import Jeecg from '@jeecg/jeecg-boot';
import User from '@/views/user/User.vue';

Vue.use(Jeecg);
Vue.component('User', User);

new Vue({
    el: '#app',
    render: h => h(User)
});
  1. 在src/main/resources/static/views/user/User.vue文件中，添加以下代码：
<template>
  <a-card>
    <a-form
      ref="form"
      :model="form"
      :rules="rules"
      @submit.prevent="handleSubmit"
    >
      <a-form-item label="用户名" prop="username">
        <a-input v-model="form.username" />
      </a-form-item>
      <a-form-item label="密码" prop="password">
        <a-input-password v-model="form.password" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit">提交</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('提交成功！');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>

3.2 运行用户管理模块

  1. 打开浏览器，访问http://localhost:8080/user。
  2. 输入用户名和密码，点击提交按钮。

四、总结

通过本文，我们了解了JeecgBoot的基本概念、特点以及如何搭建项目。实战案例展示了如何创建用户管理模块，包括Java后端和Vue前端。希望本文能帮助您快速上手JeecgBoot，提高开发效率。

-- 展开阅读全文 --