Springboot+mybatisplus代码自动生成+Vue简单的CRUD

Main类自动生成后端代码

public class Main {
    public static void main(String[] args) {
        //创建generator对象
        AutoGenerator autoGenerator = new AutoGenerator();
        //数据源
        DataSourceConfig dataSourceConfig = new DataSourceConfig();
        dataSourceConfig.setDbType(DbType.MYSQL);
        dataSourceConfig.setUrl("jdbc:mysql://localhost:3306/mbtest?useUnicode=true&characterEncoding=UTF-8&serverTimezone=UTC");
        dataSourceConfig.setUsername("root");
        dataSourceConfig.setPassword("hsp");
        dataSourceConfig.setDriverName("com.mysql.cj.jdbc.Driver");
        autoGenerator.setDataSource(dataSourceConfig);
        //全局配置
        GlobalConfig globalConfig = new GlobalConfig();
        //当前项目的绝对路径
        globalConfig.setOutputDir(System.getProperty("user.dir")+"/src/main/java");
        globalConfig.setOpen(false);
        globalConfig.setAuthor("hc");
        //去掉默认生成接口名字的I
        globalConfig.setServiceName("%sService");
        autoGenerator.setGlobalConfig(globalConfig);
        //包信息
        PackageConfig packageConfig = new PackageConfig();
        packageConfig.setParent("com.example.mybatisplus2");
//        packageConfig.setModuleName("generator");
        packageConfig.setController("controller");
        packageConfig.setService("service");
        packageConfig.setServiceImpl("service.impl");
        packageConfig.setMapper("mapper");
        packageConfig.setEntity("entity");
        autoGenerator.setPackageInfo(packageConfig);
        //配置策略
        StrategyConfig strategyConfig = new StrategyConfig();
        strategyConfig.setEntityLombokModel(true);
        strategyConfig.setRestControllerStyle(true);
        //生成部分数据库里面的表对应的实体类
        strategyConfig.setInclude("user","product");
        strategyConfig.setNaming(NamingStrategy.underline_to_camel);
        strategyConfig.setColumnNaming(NamingStrategy.underline_to_camel);
        autoGenerator.setStrategy(strategyConfig);

        autoGenerator.execute();

    }
}

写Controller记得要加@CrossOrigin注释

@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {
    @Autowired
    private UserService userService;
    @GetMapping("/index")
    public ModelAndView index(){
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("index");
        modelAndView.addObject("list",userService.list());
        return modelAndView;
    }
    @GetMapping("/list")
    public List<User> list(){
        return this.userService.list();
    }
    @GetMapping("/findById/{id}")
    public User findById(@PathVariable("id")Integer id){
        return this.userService.getById(id);
    }
    @DeleteMapping("/delete/{id}")
    public boolean delete(@PathVariable("id")Integer id){
        return this.userService.removeById(id);
    }
    @PostMapping("/add")
    public boolean add(@RequestBody User user){
        return this.userService.save(user);
    }
    @PutMapping("/update")
    public boolean update(@RequestBody User user){
        return this.userService.updateById(user);
    }


}

其他信息:MybatisPlus SpringBoot代码自动生成-CSDN博客

前端:

记得安装Elementui和axios插件

配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Test from "@/views/Test";
import Index from "../views/index"
import Update from "@/views/Update";
import Add from "@/views/Add";
Vue.use(VueRouter)

const routes = [
  {
    path: '/add',
    name: 'Add',
    component: Add
  },
  {
    path: '/update',
    name: 'Update',
    component: Update
  },
  {
    path: '/index',
    name: 'Index',
    component: Index
  },
  {
    path: '/test',
    name: 'Test',
    component: Test
  },
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

index.vue

<template>
  <div>
  <template>
    <el-table
        :data="tableData"
        border
        style="width: 800px">
      <el-table-column
          fixed
          prop="id"
          label="id"
          width="150">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="150">
      </el-table-column>
      <el-table-column
          prop="age"
          label="年龄"
          width="150">
      </el-table-column>

      <el-table-column
          fixed="right"
          label="操作"
          width="200">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </template>
    <br>
    <br>
    <br>
    <el-row>
      <el-button type="success" style="float: left" round @click="handleAdd()">添加数据</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name:"index",
  methods: {
    handleDelete(row) {
      let _this = this
      this.$confirm('是否删除' + row.name + '?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.delete('http://localhost:8888/user/delete/' + row.id).then(function (resp) {
          if (resp.data) {
            location.reload()
          }
        })

      }).catch(() => {

      });
    },
    handleEdit(rows){
      this.$router.push('/update?id='+rows.id)
    },
    handleAdd(){
      this.$router.push('/add')
    }
  },





  created() {
    let _this = this
    axios.get('http://localhost:8888/user/list').then(function (resp){
      console.log(resp.data)
      _this.tableData = resp.data;
    })
  },
  data() {
    return {
      tableData: []
    }
  }
  }
</script>

<style scoped>

</style>

Add.vue

<template>
  <div style="width: 300px">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="编号" prop="id" >
        <el-input v-model="form.id"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>


  </div>
</template>

<script>
export default {
  name: "Add",
  data(){
    return{
      form:{
        id:'',
        name:'',
        age:''
      }
    }
  },
  methods:{
    onSubmit(forName){
      let _this = this
      console.log(this.form)
      axios.post("http://localhost:8888/user/add",this.form).then(function (resp){
        if(resp){
          _this.$router.push('/index')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>

update.vue

<template>
<div style="width: 300px">
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="编号" prop="id" >
      <el-input v-model="form.id" readonly></el-input>
    </el-form-item>
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name"></el-input>
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input v-model="form.age"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>


</div>
</template>

<script>
export default {
  name: "update",
  created() {
    let _this = this
    axios.get("http://localhost:8888/user/findById/"+this.$route.query.id).then(function (resp){
      console.log(resp.data)
      _this.form = resp.data
    })
  },
  data(){
    return{
      form:{
        id:'',
        name:'',
        age:''
      }
    }
  },
  methods:{
    onSubmit(forName){
      let _this = this
        console.log(this.form)
        axios.put("http://localhost:8888/user/update",this.form).then(function (resp){
          if(resp){
            _this.$router.push('/index')
          }
        })
    }
  }
}
</script>

<style scoped>

</style>