Java攻城獅社區首發，簡歷上的Spring Boot專案首選-有解無憂

立志存高遠，篤行踐初心

三更燈火五更雞，正是男兒讀書時，黑發不知勤學早，白首方悔讀書遲，

立志，標定人生方向；奮斗，創造人生價值，二者相輔相成，互相促進，

大部分程式員的「目標」都是成為一名優秀的工程師，一名可以統覽全域的「架構師」，

哪吒社群專屬社區

一個人的力量是有限的，報團取暖堪為良策，

🍅 社區入口：Java攻城獅

🍅 加入方式：掃描主頁左側二維碼，加入群聊，或加本人微信guo_rui_

🍅 社區初建，每周積分榜第一的小伙伴，贈送精美書籍一本，

🍅 粉絲專屬福利：包郵送書3本，如下書單四選一，

🍅 獲取方式：

1、參與文末投票，點贊，收藏即有機會獲得精美圖書一本；

2、評論區評論：獲取點贊最多者，獲取一本；

3、評論區評論：通過random函式，隨機抽取兩名；

【注意】想加入微信群聊，可以掃描主頁左側二維碼、私信與我、加本人微信guo_rui_

1、《Python網路編程從入門到精通》

2、《Python入門到人工智能實戰》

3、《人工智能數學基礎》

4、《Python資料分析與可視化從入門到精通》

很多小伙伴私下問我，沒有實際的開發經驗，自學成才、或者是培訓班出來的，簡歷上的專案經驗怎么寫？上一期做了一個簡單的小白零基礎入門，簡歷上的專案經驗該怎么寫？，效果還不錯，很多小伙伴問我，有沒有Spring Boot + Vue的整合教程啊？加個班吧，今天終于做好了，分享給大家，

立志存高遠，篤行踐初心

哪吒社群專屬社區

一、Spring Boot思維導圖

二、什么是Spring Boot

三、使用Spring Boot有什么好處

四、Spring Boot知識體系總結

五、Java程式員簡歷上的第二個專案

1、專案結構

2、EduTeacherController

3、前端講師串列

4、添加講師頁面

5、teacher.js

6、頁面效果展示

一、Spring Boot思維導圖

二、什么是Spring Boot

Spring Boot 是由 Pivotal 團隊提供的全新框架，其設計目的是用來簡化新 Spring 應用的初始搭建以及開發程序，該框架使用了特定的方式來進行配置，從而使開發人員不再需要定義樣板化的配置，用我的話來理解，就是 Spring Boot 其實不是什么新的框架，它默認配置了很多框架的使用方式，就像 Maven 整合了所有的 Jar 包，Spring Boot 整合了所有的框架，

簡化spring應用開發的一個框架；
spring技術堆疊的一個大整合；
J2EE開發的一站式解決方案；

三、使用Spring Boot有什么好處

其實就是簡單、快速、方便！

平時如果我們需要搭建一個Spring Web專案的時候需要怎么做呢？

配置web.xml，加載spring和springMVC
配置資料庫連接、配置spring事務
配置加載組態檔的讀取，開啟注解
配置日志檔案
...
配置完成之后部署Tomcat除錯
...
現在非常流行微服務，如果我這個專案僅僅只是需要發送一個郵件，如果我的專案僅僅是生產一個積分；我都需要這樣折騰一遍!

但是如果使用 Spring Boot 呢？

很簡單，我僅僅只需要非常少的幾個配置就可以迅速方便的搭建起來一套 Web 專案或者是構建一個微服務！

四、Spring Boot知識體系總結

Spring Boot常用注解（絕對經典）

Thymeleaf的基本語法

springboot整合mybatis

Spring Boot Jpa 的使用

springboot自定義starter

Spring Boot 如何測驗打包部署

實作熱部署

Spring Boot 常用注解介紹及使用

mybatis逆向工程

關于Spring Boot的東西實在是太多太多了，畢竟是現在的主流框架，這里就不一一列舉了，大家可以到到我的博客慢慢查找，

五、Java程式員簡歷上的第二個專案

第一個專案應該是SSM整合，第二個應該就是Spring Boot + Vue了，

1、專案結構

2、EduTeacherController

package com.guor.eduservice.controller;

import com.guor.commonutils.R;
import com.guor.eduservice.entity.EduTeacher;
import com.guor.eduservice.entity.vo.TeacherQuery;
import com.guor.eduservice.service.EduTeacherService;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import io.swagger.annotations.Api;
import io.swagger.annotations.ApiOperation;
import io.swagger.annotations.ApiParam;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.*;
import java.util.List;

@Api(description="講師管理")
@RestController
@RequestMapping("/eduservice/teacher")
@CrossOrigin
public class EduTeacherController {
    @Autowired
    private EduTeacherService teacherService;

    @ApiOperation(value = "所有講師串列")
    @GetMapping("findAll")
    public R findAllTeacher(){
        List<EduTeacher> list = teacherService.list(null);
        return R.Ok().data("items",list);
    }

    @ApiOperation(value = "根據ID查詢講師")
    @GetMapping("findById{id}")
    public R findById(@ApiParam(name="id",value="講師ID",required=true) @PathVariable String id){
        EduTeacher teacher = teacherService.getById(id);
        return R.Ok().data("items",teacher.getJson());
    }

    @ApiOperation(value = "根據ID洗掉講師")
    //邏輯洗掉講師的方法
    @DeleteMapping("{id}")
    public R removeTeacher(@ApiParam(name="id",value="講師ID",required=true) @PathVariable String id){
        Boolean flag = teacherService.removeById(id);
        if(flag){
            return R.Ok();
        }else{
            return R.error();
        }
    }

    //分頁
    @GetMapping("pageTeacher/{current}/{limit}")
    public R pageListTeacher(@PathVariable long current,@PathVariable long limit){
        //創建page物件
        Page<EduTeacher> pageTeacher = new Page<>(current,limit);
        //呼叫方法的時候，底層封裝，把分頁所有資料封裝到pageTeacher中
        teacherService.page(pageTeacher,null);
        long total = pageTeacher.getTotal();
        List<EduTeacher> records = pageTeacher.getRecords();
        //Map map = new HashMap();
        //map.put("total",total);
        //map.put("rows",records);
        return R.Ok().data("total",total).data("rows",records);
    }

    @PostMapping("pageTeacherCondition/{current}/{limit}")
    public R pageTeacherCondition(@PathVariable long current,@PathVariable long limit,
                                  @RequestBody(required = false) TeacherQuery teacherQuery){
        //創建一個page物件
        Page<EduTeacher> pageTeacher = new Page<>(current,limit);
        QueryWrapper<EduTeacher> wrapper = new QueryWrapper<>();
        //多條件組合查詢
        //動態SQL
        //判斷條件值是否為空，不為空就拼接
        String name = teacherQuery.getName();
        Integer level = teacherQuery.getLevel();
        String begin = teacherQuery.getBegin();
        String end = teacherQuery.getEnd();
        if(!StringUtils.isEmpty(name)){
            wrapper.like("name",name);
        }
        if(!StringUtils.isEmpty(level)){
            wrapper.eq("level",level);
        }
        if(!StringUtils.isEmpty(begin)){
            wrapper.ge("gmt_create",begin);
        }
        if(!StringUtils.isEmpty(end)){
            wrapper.le("gmt_modified",end);
        }
        wrapper.orderByDesc("gmt_create");
        //wrapper.
        teacherService.page(pageTeacher,wrapper);
        long total = pageTeacher.getTotal();
        List<EduTeacher> records = pageTeacher.getRecords();
        return R.Ok().data("total",total).data("rows",records);
    }

    //添加講師介面的方法
    @PostMapping("addTeacher")
    public R addTeacher(@RequestBody EduTeacher eduTeacher){
        boolean save = teacherService.save(eduTeacher);
        if(save){
            return R.Ok();
        }else {
            return R.error();
        }
    }

    @GetMapping("getTeacher/{id}")
    public R getTeacher(@PathVariable String id){
        EduTeacher byId = teacherService.getById(id);
        return R.Ok().data("teacher",byId);
    }

    @PostMapping("updateTeacher")
    public R updateTeacher(@RequestBody EduTeacher eduTeacher){
        boolean flag = teacherService.updateById(eduTeacher);
        if(flag){
            return R.Ok();
        }else {
            return R.error();
        }
    }
}

3、前端講師串列

<template>
    <div>
        <el-form label-width="120px">
            <el-form-item label="講師名稱">
                <el-input v-model="teacher.name"/>
            </el-form-item>
            <el-form-item label="講師排序">
                <el-input-number v-model="teacher.sort" controls-position="right" min="0"/>
            </el-form-item>
            <el-form-item label="講師頭銜">
                <el-select v-model="teacher.level" clearable placeholder="請選擇">
                <!--
                    資料型別一定要和取出的json中的一致，否則沒法回填
                    因此，這里value使用動態系結的值，保證其資料型別是number
                -->
                <el-option :value="1" label="高級講師"/>
                <el-option :value="2" label="首席講師"/>
                </el-select>
            </el-form-item>
            <el-form-item label="講師資歷">
                <el-input v-model="teacher.career"/>
            </el-form-item>
            <el-form-item label="講師簡介">
                <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
            </el-form-item>
 
            <!-- 講師頭像：TODO -->
            <!-- 講師頭像 -->
            <el-form-item label="講師頭像">
 
                <!-- 頭銜縮略圖 -->
                <pan-thumb :image="teacher.avatar"/>
                <!-- 檔案上傳按鈕 -->
                <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更換頭像
                </el-button>
 
                <!--
                  v-show：是否顯示上傳組件
                  :key：類似于id，如果一個頁面多個圖片上傳控制元件，可以做區分
                  :url：后臺上傳的url地址
                  @close：關閉上傳組件
                  @crop-upload-success：上傳成功后的回呼 
                  <input type="file" name="file"/>
                -->
                <image-cropper
                              v-show="imagecropperShow"
                              :width="300"
                              :height="300"
                              :key="imagecropperKey"
                              :url="BASE_API+'/eduoss/fileoss'"
                              field="file"
                              @close="close"
                              @crop-upload-success="cropSuccess"/>
            </el-form-item>
 
            <el-form-item>
                <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import teacherApi from '@/api/edu/teacher.js'
import ImageCropper from '@/components/ImageCropper'
import PanThumb from '@/components/PanThumb'
export default {
  data() {
    return {
      teacher: {
        name: '',
        sort: 0,
        level: 1,
        career: '',
        intro: '',
        avatar: ''
      },
      //上傳彈框組件是否顯示
      imagecropperShow:false,
      imagecropperKey:0,//上傳組件key值
      BASE_API:process.env.BASE_API, //獲取dev.env.js里面地址
      saveBtnDisabled:false  // 保存按鈕是否禁用,
    }
  },
  created(){
    this.init()
  },
  watch: {  //監聽
    $route(to, from) { //路由變化方式，路由發生變化，方法就會執行
      this.init()
    }
  },
  methods: {
    close() { //關閉上傳彈框的方法
        this.imagecropperShow=false
        //上傳組件初始化
        this.imagecropperKey = this.imagecropperKey+1
    },
    //上傳成功方法
    cropSuccess(data) {
      this.imagecropperShow=false
      //上傳之后介面回傳圖片地址
      this.teacher.avatar = data.url
      this.imagecropperKey = this.imagecropperKey+1
    },
    init() {
      //判斷路徑有id值,做修改
      if(this.$route.params && this.$route.params.id) {
          //從路徑獲取id值
          const id = this.$route.params.id
          //呼叫根據id查詢的方法
          this.getInfo(id)
      } else { //路徑沒有id值，做添加
        //清空表單
        this.teacher = {}
      }
    },
    //根據講師id查詢的方法
    getInfo(id) {
      teacherApi.getTeacherInfo(id)
        .then(response => {
          this.teacher = response.data.teacher
        })
    },
    saveOrUpdate() {
      //根據teacher中是否有ID
      if(!this.teacher.id){
        this.saveTeacher();
      }else{
          this.updateTeacher();
      }
    },
    updateTeacher() {
      teacherApi.updateTeacherInfo(this.teacher)
      .then(response => {
            //提示資訊
            this.$message({
                type: 'success',
                message: '修改成功!'
            });
            //回到串列頁面，路由跳轉
            this.$router.push({ path: '/teacher/table' })
      })
    },
    // 保存
    saveTeacher() {
        teacherApi.addTeacher(this.teacher)
        .then(response => {
            //提示資訊
            this.$message({
                type: 'success',
                message: '添加成功!'
            });
            //回到串列頁面，路由跳轉
            this.$router.push({ path: '/teacher/table' })
        })
    }
  }
}
</script>

4、添加講師頁面

<template>
    <div class="app-container">
         <!--查詢表單-->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="teacherQuery.name" placeholder="講師名"/>
            </el-form-item>
 
            <el-form-item>
                <el-select v-model="teacherQuery.level" clearable placeholder="講師頭銜">
                    <el-option :value="1" label="高級講師"/>
                    <el-option :value="2" label="首席講師"/>
                </el-select>
            </el-form-item>
 
            <el-form-item label="添加時間">
                <el-date-picker
                    v-model="teacherQuery.begin"
                    type="datetime"
                    placeholder="選擇開始時間"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    default-time="00:00:00"
                />
            </el-form-item>
            <el-form-item>
                <el-date-picker
                    v-model="teacherQuery.end"
                    type="datetime"
                    placeholder="選擇截止時間"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    default-time="00:00:00"
                />
            </el-form-item>
            
            <el-button type="primary" icon="el-icon-search" @click="getList()">查詢</el-button>
            <el-button type="default" @click="resetData()">清空</el-button>
        </el-form>
        <!-- 表格 -->
        <el-table
            :data="list"
            border
            fit
            highlight-current-row>
 
            <el-table-column
                label="序號"
                width="70"
                align="center">
                <template slot-scope="scope">
                    {{ (page - 1) * limit + scope.$index + 1 }}
                </template>
            </el-table-column>
 
            <el-table-column prop="name" label="名稱" width="80" />
            
            <el-table-column label="頭銜" width="80">
                <template slot-scope="scope">
                    {{ scope.row.level===1?'高級講師':'首席講師' }}
                </template>
            </el-table-column>
 
            <el-table-column prop="intro" label="資歷" />
 
            <el-table-column prop="gmtCreate" label="添加時間" width="160"/>
 
            <el-table-column prop="sort" label="排序" width="60" />
 
            <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                <router-link :to="'/teacher/edit/'+scope.row.id">
                    <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                </router-link>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">洗掉</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分頁 -->
        <el-pagination
            :current-page="page"
            :page-size="limit"
            :total="total"
            style="padding: 30px 0; text-align: center;"
            layout="total, prev, pager, next, jumper"
            @current-change="getList"
        /> 
    </div>
</template>
<script>
//引入teacher.js
import teacher from '@/api/edu/teacher.js'
export default {
    data() { //定義變數
        return {
            list:null,
            page:1,
            limit:10,
            total:0,
            teacherQuery:{}    
        }
    },
    created() {//呼叫方法
        this.getList()
    },
    methods: {//定義方法
        //講師串列的方法
        getList(page =1){
            this.page = page
            teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
                .then(response => {//請求成功
                    //response接識訓傳的資料
                    this.list = response.data.rows
                    this.total = response.data.total
                    console.log(this.list)
                    console.log(this.total)
                })
                .catch(error => {//請求失敗
                    console.log(error)
                })
        },
        resetData() {
            this.teacherQuery = {}
            this.getList()
        },
        removeDataById(id) {
            // debugger
            // console.log(memberId)
            this.$confirm('此操作將永久洗掉講師記錄, 是否繼續?', '提示', {
                confirmButtonText: '確定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                teacher.deleteTeacherId(id)
                    .then(response =>{
                    this.$message({
                        type: 'success',
                        message: '洗掉成功!'
                    });
                    this.getList()
                })
            })
        }
    }
}
</script>

5、teacher.js

import request from '@/utils/request'
 
export default{
    //1 講師串列（條件查詢分頁）
    getTeacherListPage(current,limit,teacherQuery) {
        return request({
          url: `/eduservice/teacher/pageTeacherCondition/${current}/${limit}`,
          method: 'post',
          //后端用RequestBody，JSON傳遞
          //data表示把物件轉換成json進行傳遞到介面里面
          data: teacherQuery
        })
    },
    deleteTeacherId(id){
        return request({
            url: `/eduservice/teacher/${id}`,
            method: 'delete'
          })
    },
    addTeacher(teacher){
        return request({
            url: `/eduservice/teacher/addTeacher`,
            method: 'post',
            data: teacher
        })
    },
    getTeacherInfo(id){
        return request({
            url: `/eduservice/teacher/getTeacher/${id}`,
            method: 'get'
        })
    },
    updateTeacherInfo(teacher){
        return request({
            url: '/eduservice/teacher/updateTeacher',
            method: 'post',
            data: teacher
        })
    }
}

以上為SpringBoot + Vue實作CRUD的主要代碼！

6、頁面效果展示

🏀 Java學習路線思維導圖：Java學習路線思維導圖

🏀 Java學習路線配套文章：搬磚工逆襲Java架構師

🏀 Java經典面試題大全：10萬字208道Java經典面試題總結(附答案)

🏀 簡介：Java領域優質創作者🏆、CSDN哪吒公眾號作者? 、Java架構師奮斗者💪

🏀 掃描主頁左側二維碼，加入群聊，一起學習、一起進步

🏀 歡迎點贊 👍 收藏 ?留言 📝

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/324150.html

標籤：java

上一篇：自定義例外未通過SpringBoot中的Advice控制

下一篇：EXCELVBAVlookup多個作業表