WHCSRL 技术网

2万字,小白的零基础介绍,简历上的项目经历怎么写? (SpringBoot版本,推荐收藏)

立志存高远,笃行践初心 

三更灯火五更鸡,正是男儿读书时。 黑发不知勤学早,白首方悔读书迟。

立志,标定人生方向;奋斗,创造人生价值,二者相辅相成,互相促进。

大部分程序员的「 目标 」都是成为一名优秀的工程师,一名可以统览全局的「 架构师 」

哪吒社群专属社区

一个人的力量是有限的,报团取暖堪为良策。

🍅 社区入口: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 整合了所有的框架。

  1. 简化spring应用开发的一个框架;
  2. spring技术栈的一个大整合;
  3. 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

  1. package com.guor.eduservice.controller;
  2. import com.guor.commonutils.R;
  3. import com.guor.eduservice.entity.EduTeacher;
  4. import com.guor.eduservice.entity.vo.TeacherQuery;
  5. import com.guor.eduservice.service.EduTeacherService;
  6. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  7. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  8. import io.swagger.annotations.Api;
  9. import io.swagger.annotations.ApiOperation;
  10. import io.swagger.annotations.ApiParam;
  11. import org.springframework.beans.factory.annotation.Autowired;
  12. import org.springframework.util.StringUtils;
  13. import org.springframework.web.bind.annotation.*;
  14. import java.util.List;
  15. @Api(description="讲师管理")
  16. @RestController
  17. @RequestMapping("/eduservice/teacher")
  18. @CrossOrigin
  19. public class EduTeacherController {
  20. @Autowired
  21. private EduTeacherService teacherService;
  22. @ApiOperation(value = "所有讲师列表")
  23. @GetMapping("findAll")
  24. public R findAllTeacher(){
  25. List<EduTeacher> list = teacherService.list(null);
  26. return R.Ok().data("items",list);
  27. }
  28. @ApiOperation(value = "根据ID查询讲师")
  29. @GetMapping("findById{id}")
  30. public R findById(@ApiParam(name="id",value="讲师ID",required=true) @PathVariable String id){
  31. EduTeacher teacher = teacherService.getById(id);
  32. return R.Ok().data("items",teacher.getJson());
  33. }
  34. @ApiOperation(value = "根据ID删除讲师")
  35. //逻辑删除讲师的方法
  36. @DeleteMapping("{id}")
  37. public R removeTeacher(@ApiParam(name="id",value="讲师ID",required=true) @PathVariable String id){
  38. Boolean flag = teacherService.removeById(id);
  39. if(flag){
  40. return R.Ok();
  41. }else{
  42. return R.error();
  43. }
  44. }
  45. //分页
  46. @GetMapping("pageTeacher/{current}/{limit}")
  47. public R pageListTeacher(@PathVariable long current,@PathVariable long limit){
  48. //创建page对象
  49. Page<EduTeacher> pageTeacher = new Page<>(current,limit);
  50. //调用方法的时候,底层封装,把分页所有数据封装到pageTeacher中
  51. teacherService.page(pageTeacher,null);
  52. long total = pageTeacher.getTotal();
  53. List<EduTeacher> records = pageTeacher.getRecords();
  54. //Map map = new HashMap();
  55. //map.put("total",total);
  56. //map.put("rows",records);
  57. return R.Ok().data("total",total).data("rows",records);
  58. }
  59. @PostMapping("pageTeacherCondition/{current}/{limit}")
  60. public R pageTeacherCondition(@PathVariable long current,@PathVariable long limit,
  61. @RequestBody(required = false) TeacherQuery teacherQuery){
  62. //创建一个page对象
  63. Page<EduTeacher> pageTeacher = new Page<>(current,limit);
  64. QueryWrapper<EduTeacher> wrapper = new QueryWrapper<>();
  65. //多条件组合查询
  66. //动态SQL
  67. //判断条件值是否为空,不为空就拼接
  68. String name = teacherQuery.getName();
  69. Integer level = teacherQuery.getLevel();
  70. String begin = teacherQuery.getBegin();
  71. String end = teacherQuery.getEnd();
  72. if(!StringUtils.isEmpty(name)){
  73. wrapper.like("name",name);
  74. }
  75. if(!StringUtils.isEmpty(level)){
  76. wrapper.eq("level",level);
  77. }
  78. if(!StringUtils.isEmpty(begin)){
  79. wrapper.ge("gmt_create",begin);
  80. }
  81. if(!StringUtils.isEmpty(end)){
  82. wrapper.le("gmt_modified",end);
  83. }
  84. wrapper.orderByDesc("gmt_create");
  85. //wrapper.
  86. teacherService.page(pageTeacher,wrapper);
  87. long total = pageTeacher.getTotal();
  88. List<EduTeacher> records = pageTeacher.getRecords();
  89. return R.Ok().data("total",total).data("rows",records);
  90. }
  91. //添加讲师接口的方法
  92. @PostMapping("addTeacher")
  93. public R addTeacher(@RequestBody EduTeacher eduTeacher){
  94. boolean save = teacherService.save(eduTeacher);
  95. if(save){
  96. return R.Ok();
  97. }else {
  98. return R.error();
  99. }
  100. }
  101. @GetMapping("getTeacher/{id}")
  102. public R getTeacher(@PathVariable String id){
  103. EduTeacher byId = teacherService.getById(id);
  104. return R.Ok().data("teacher",byId);
  105. }
  106. @PostMapping("updateTeacher")
  107. public R updateTeacher(@RequestBody EduTeacher eduTeacher){
  108. boolean flag = teacherService.updateById(eduTeacher);
  109. if(flag){
  110. return R.Ok();
  111. }else {
  112. return R.error();
  113. }
  114. }
  115. }

3、前端讲师列表

  1. <template>
  2. <div>
  3. <el-form label-width="120px">
  4. <el-form-item label="讲师名称">
  5. <el-input v-model="teacher.name"/>
  6. </el-form-item>
  7. <el-form-item label="讲师排序">
  8. <el-input-number v-model="teacher.sort" controls-position="right" min="0"/>
  9. </el-form-item>
  10. <el-form-item label="讲师头衔">
  11. <el-select v-model="teacher.level" clearable placeholder="请选择">
  12. <!--
  13. 数据类型一定要和取出的json中的一致,否则没法回填
  14. 因此,这里value使用动态绑定的值,保证其数据类型是number
  15. -->
  16. <el-option :value="1" label="高级讲师"/>
  17. <el-option :value="2" label="首席讲师"/>
  18. </el-select>
  19. </el-form-item>
  20. <el-form-item label="讲师资历">
  21. <el-input v-model="teacher.career"/>
  22. </el-form-item>
  23. <el-form-item label="讲师简介">
  24. <el-input v-model="teacher.intro" :rows="10" type="textarea"/>
  25. </el-form-item>
  26. <!-- 讲师头像:TODO -->
  27. <!-- 讲师头像 -->
  28. <el-form-item label="讲师头像">
  29. <!-- 头衔缩略图 -->
  30. <pan-thumb :image="teacher.avatar"/>
  31. <!-- 文件上传按钮 -->
  32. <el-button type="primary" icon="el-icon-upload" @click="imagecropperShow=true">更换头像
  33. </el-button>
  34. <!--
  35. v-show:是否显示上传组件
  36. :key:类似于id,如果一个页面多个图片上传控件,可以做区分
  37. :url:后台上传的url地址
  38. @close:关闭上传组件
  39. @crop-upload-success:上传成功后的回调
  40. <input type="file" name="file"/>
  41. -->
  42. <image-cropper
  43. v-show="imagecropperShow"
  44. :width="300"
  45. :height="300"
  46. :key="imagecropperKey"
  47. :url="BASE_API+'/eduoss/fileoss'"
  48. field="file"
  49. @close="close"
  50. @crop-upload-success="cropSuccess"/>
  51. </el-form-item>
  52. <el-form-item>
  53. <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存</el-button>
  54. </el-form-item>
  55. </el-form>
  56. </div>
  57. </template>
  58. <script>
  59. import teacherApi from '@/api/edu/teacher.js'
  60. import ImageCropper from '@/components/ImageCropper'
  61. import PanThumb from '@/components/PanThumb'
  62. export default {
  63. data() {
  64. return {
  65. teacher: {
  66. name: '',
  67. sort: 0,
  68. level: 1,
  69. career: '',
  70. intro: '',
  71. avatar: ''
  72. },
  73. //上传弹框组件是否显示
  74. imagecropperShow:false,
  75. imagecropperKey:0,//上传组件key值
  76. BASE_API:process.env.BASE_API, //获取dev.env.js里面地址
  77. saveBtnDisabled:false // 保存按钮是否禁用,
  78. }
  79. },
  80. created(){
  81. this.init()
  82. },
  83. watch: { //监听
  84. $route(to, from) { //路由变化方式,路由发生变化,方法就会执行
  85. this.init()
  86. }
  87. },
  88. methods: {
  89. close() { //关闭上传弹框的方法
  90. this.imagecropperShow=false
  91. //上传组件初始化
  92. this.imagecropperKey = this.imagecropperKey+1
  93. },
  94. //上传成功方法
  95. cropSuccess(data) {
  96. this.imagecropperShow=false
  97. //上传之后接口返回图片地址
  98. this.teacher.avatar = data.url
  99. this.imagecropperKey = this.imagecropperKey+1
  100. },
  101. init() {
  102. //判断路径有id值,做修改
  103. if(this.$route.params && this.$route.params.id) {
  104. //从路径获取id值
  105. const id = this.$route.params.id
  106. //调用根据id查询的方法
  107. this.getInfo(id)
  108. } else { //路径没有id值,做添加
  109. //清空表单
  110. this.teacher = {}
  111. }
  112. },
  113. //根据讲师id查询的方法
  114. getInfo(id) {
  115. teacherApi.getTeacherInfo(id)
  116. .then(response => {
  117. this.teacher = response.data.teacher
  118. })
  119. },
  120. saveOrUpdate() {
  121. //根据teacher中是否有ID
  122. if(!this.teacher.id){
  123. this.saveTeacher();
  124. }else{
  125. this.updateTeacher();
  126. }
  127. },
  128. updateTeacher() {
  129. teacherApi.updateTeacherInfo(this.teacher)
  130. .then(response => {
  131. //提示信息
  132. this.$message({
  133. type: 'success',
  134. message: '修改成功!'
  135. });
  136. //回到列表页面,路由跳转
  137. this.$router.push({ path: '/teacher/table' })
  138. })
  139. },
  140. // 保存
  141. saveTeacher() {
  142. teacherApi.addTeacher(this.teacher)
  143. .then(response => {
  144. //提示信息
  145. this.$message({
  146. type: 'success',
  147. message: '添加成功!'
  148. });
  149. //回到列表页面,路由跳转
  150. this.$router.push({ path: '/teacher/table' })
  151. })
  152. }
  153. }
  154. }
  155. </script>

4、添加讲师页面

  1. <template>
  2. <div class="app-container">
  3. <!--查询表单-->
  4. <el-form :inline="true" class="demo-form-inline">
  5. <el-form-item>
  6. <el-input v-model="teacherQuery.name" placeholder="讲师名"/>
  7. </el-form-item>
  8. <el-form-item>
  9. <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
  10. <el-option :value="1" label="高级讲师"/>
  11. <el-option :value="2" label="首席讲师"/>
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item label="添加时间">
  15. <el-date-picker
  16. v-model="teacherQuery.begin"
  17. type="datetime"
  18. placeholder="选择开始时间"
  19. value-format="yyyy-MM-dd HH:mm:ss"
  20. default-time="00:00:00"
  21. />
  22. </el-form-item>
  23. <el-form-item>
  24. <el-date-picker
  25. v-model="teacherQuery.end"
  26. type="datetime"
  27. placeholder="选择截止时间"
  28. value-format="yyyy-MM-dd HH:mm:ss"
  29. default-time="00:00:00"
  30. />
  31. </el-form-item>
  32. <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
  33. <el-button type="default" @click="resetData()">清空</el-button>
  34. </el-form>
  35. <!-- 表格 -->
  36. <el-table
  37. :data="list"
  38. border
  39. fit
  40. highlight-current-row>
  41. <el-table-column
  42. label="序号"
  43. width="70"
  44. align="center">
  45. <template slot-scope="scope">
  46. {{ (page - 1) * limit + scope.$index + 1 }}
  47. </template>
  48. </el-table-column>
  49. <el-table-column prop="name" label="名称" width="80" />
  50. <el-table-column label="头衔" width="80">
  51. <template slot-scope="scope">
  52. {{ scope.row.level===1?'高级讲师':'首席讲师' }}
  53. </template>
  54. </el-table-column>
  55. <el-table-column prop="intro" label="资历" />
  56. <el-table-column prop="gmtCreate" label="添加时间" width="160"/>
  57. <el-table-column prop="sort" label="排序" width="60" />
  58. <el-table-column label="操作" width="200" align="center">
  59. <template slot-scope="scope">
  60. <router-link :to="'/teacher/edit/'+scope.row.id">
  61. <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
  62. </router-link>
  63. <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
  64. </template>
  65. </el-table-column>
  66. </el-table>
  67. <!-- 分页 -->
  68. <el-pagination
  69. :current-page="page"
  70. :page-size="limit"
  71. :total="total"
  72. style="padding: 30px 0; text-align: center;"
  73. layout="total, prev, pager, next, jumper"
  74. @current-change="getList"
  75. />
  76. </div>
  77. </template>
  78. <script>
  79. //引入teacher.js
  80. import teacher from '@/api/edu/teacher.js'
  81. export default {
  82. data() { //定义变量
  83. return {
  84. list:null,
  85. page:1,
  86. limit:10,
  87. total:0,
  88. teacherQuery:{}
  89. }
  90. },
  91. created() {//调用方法
  92. this.getList()
  93. },
  94. methods: {//定义方法
  95. //讲师列表的方法
  96. getList(page =1){
  97. this.page = page
  98. teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
  99. .then(response => {//请求成功
  100. //response接收返回的数据
  101. this.list = response.data.rows
  102. this.total = response.data.total
  103. console.log(this.list)
  104. console.log(this.total)
  105. })
  106. .catch(error => {//请求失败
  107. console.log(error)
  108. })
  109. },
  110. resetData() {
  111. this.teacherQuery = {}
  112. this.getList()
  113. },
  114. removeDataById(id) {
  115. // debugger
  116. // console.log(memberId)
  117. this.$confirm('此操作将永久删除讲师记录, 是否继续?', '提示', {
  118. confirmButtonText: '确定',
  119. cancelButtonText: '取消',
  120. type: 'warning'
  121. }).then(() => {
  122. teacher.deleteTeacherId(id)
  123. .then(response =>{
  124. this.$message({
  125. type: 'success',
  126. message: '删除成功!'
  127. });
  128. this.getList()
  129. })
  130. })
  131. }
  132. }
  133. }
  134. </script>

5、teacher.js

  1. import request from '@/utils/request'
  2. export default{
  3. //1 讲师列表(条件查询分页)
  4. getTeacherListPage(current,limit,teacherQuery) {
  5. return request({
  6. url: `/eduservice/teacher/pageTeacherCondition/${current}/${limit}`,
  7. method: 'post',
  8. //后端用RequestBody,JSON传递
  9. //data表示把对象转换成json进行传递到接口里面
  10. data: teacherQuery
  11. })
  12. },
  13. deleteTeacherId(id){
  14. return request({
  15. url: `/eduservice/teacher/${id}`,
  16. method: 'delete'
  17. })
  18. },
  19. addTeacher(teacher){
  20. return request({
  21. url: `/eduservice/teacher/addTeacher`,
  22. method: 'post',
  23. data: teacher
  24. })
  25. },
  26. getTeacherInfo(id){
  27. return request({
  28. url: `/eduservice/teacher/getTeacher/${id}`,
  29. method: 'get'
  30. })
  31. },
  32. updateTeacherInfo(teacher){
  33. return request({
  34. url: '/eduservice/teacher/updateTeacher',
  35. method: 'post',
  36. data: teacher
  37. })
  38. }
  39. }

以上为SpringBoot + Vue实现CRUD的主要代码!

6、页面效果展示

 

🏀 Java学习路线思维导图:Java学习路线思维导图

🏀 Java学习路线配套文章:搬砖工逆袭Java架构师

🏀 Java经典面试题大全:10万字208道Java经典面试题总结(附答案)

🏀 简介:Java领域优质创作者🏆、CSDN哪吒公众号作者✌ 、Java架构师奋斗者💪

🏀 扫描主页左侧二维码,加入群聊,一起学习、一起进步 

🏀 欢迎点赞 👍 收藏 ⭐留言 📝  

Java学习路线、Java学习交流
微信名片
推荐阅读