Java最新利用SpringBoot和Vue实现前后端分离（附源码），mybatis企业必问面试题

线程、数据库、算法、JVM、分布式、微服务、框架、Spring相关知识

一线互联网P7面试集锦+各种大厂面试集锦

学习笔记以及面试真题解析

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

}

}

@Override

public Student addStudentService(Student student) {

try{

studentMapper.addStudent(student);

return student;

}catch (Exception ex){

log.info(ex.getMessage());

}

return null;

}

@Override

public void deleteStudentService(int id) {

try{

studentMapper.deleteStudent(id);

}catch (Exception ex){

log.info(ex.getMessage());

}

}

}

3.8 编写ActionResult

---

用于响应状态

package com.sx.kak.vo;

import lombok.AllArgsConstructor;

import lombok.Data;

import lombok.NoArgsConstructor;

/**

• 封装统一的前端响应对象

• Created by Kak on 2020/9/4.

*/

@Data

@AllArgsConstructor

@NoArgsConstructor

public class ActionResult {

private int statusCode;//响应状态码

private String msg;//响应的短消息

private Object data;//响应携带的数据

}

3.9 编写StudentController

---

业务控制层

• 加入@CrossOrigin ：标识接受跨域处理

package com.sx.kak.controller;

import com.sx.kak.po.Student;

import com.sx.kak.service.StudentService;

import com.sx.kak.vo.ActionResult;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.web.bind.annotation.*;

import java.util.List;

/**

• Created by Kak on 2020/9/4.

*/

@RestController

@RequestMapping(“/api”)

public class StudentController {

@Autowired(required = false)

private StudentService studentService;

@CrossOrigin //标识接受跨域处理

@RequestMapping(value=“/studentList” ,method= RequestMethod.GET)

public ActionResult findAllStu(){

ActionResult actionResult = new ActionResult();

List allService = studentService.findAllService();

actionResult.setStatusCode(200);

actionResult.setData(allService);

return actionResult;

}

//修改学生信息

@CrossOrigin

@RequestMapping(value = “/updateStudent”,method = RequestMethod.PUT)

public ActionResult updateStu(@RequestBody Student student){

studentService.updateStudentService(student);

ActionResult actionResult = new ActionResult();

actionResult.setStatusCode(200);

actionResult.setMsg(“Update Success!!!”);

return actionResult;

}

//添加学生信息

@CrossOrigin

@RequestMapping(value=“/addStudent” ,method= RequestMethod.POST)

public ActionResult addStu(@RequestBody Student student){

Student student1 = studentService.addStudentService(student);

ActionResult result = new ActionResult();

result.setStatusCode(200);

result.setMsg(“add Success!!!”);

result.setData(student1);

return result;

}

//删除学生信息

@CrossOrigin

@RequestMapping(value = “/deleteStudent”,method = RequestMethod.GET)

public ActionResult deleteStu(@RequestParam(“id”) int id){

studentService.deleteStudentService(id);

ActionResult actionResult = new ActionResult();

actionResult.setStatusCode(200);

actionResult.setMsg(“Update Success!!!”);

return actionResult;

}

}

4. 前台实现

===========================================================================

环境搭建：

Vue基础：https://blog.csdn.net/weixin_42601136/article/details/108297010

添加axios

cnpm install axios --save

4.1 main.js

---

引用ElementUI的组件，引用axios并设置基础的url

// The Vue build version to load with the import command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

import ElementUI from ‘element-ui’

import ‘element-ui/lib/theme-chalk/index.css’

//引用axios，设置基础的url

var axios = require(‘axios’)

axios.defaults.baseURL = ‘http://localhost:8088/api’

//绑定到全局

Vue.prototype.$axios = axios

Vue.config.productionTip = false

Vue.use(ElementUI)

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: ‘#app’,

router,

components: { App },

template: ‘’

})

4.2 index.js

---

添加路由

import Vue from ‘vue’

import Router from ‘vue-router’

import IndexView from ‘@/view/index’

import MainView from ‘@/view/admin/main’

import LoginView from ‘@/view/login’

import WelcomeView from ‘@/view/admin/welcome’

import StudentView from ‘@/view/admin/student’

Vue.use(Router)

export default new Router({

routes: [

{//前台首页

path: ‘/’,

name: ‘IndexView’,

component: IndexView

},

{//后台主页面

path:“/main”,

component:MainView,

children:[

{path:“/”,component:WelcomeView},

{path:“/showStudent”,component:StudentView}

]

},

{//登录页

path:“/login”,

component:LoginView,

}

]

})

4.3 index.vue

---

访问的默认页面

搜索

登录

学生管理系统

©kak.com 京ICP证XXXXX号，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试

4.4 login.vue

---

点击登录触发的页面

登录页面

<el-button type=“primary” @click=“submitForm(‘ruleForm2’)”>提交

<el-button @click=“resetForm(‘ruleForm2’)”>重置

回到首页

4.5 main.vue

---

登录成功后的页面，与欢迎页面一起展示

导航一

学生信息

选项2

选项3

选项4

选项4-1

导航二

选项1

选项2

选项3

选项4

选项4-1

导航三

选项1

选项2

选项3

选项4

选项4-1

查看

新增

删除

kak

4.6 welcome.vue

---

欢迎页面，加载主页面时默认的页面

4.7 student.vue

---

与后台进行跨域访问，实现增删改查

<el-button size=“mini” @click=“handleEdit(scope.$index, scope.row)”>修改

<el-button size=“mini” type=“danger” @click=“handleDelete(scope.$index, scope.row)”>删除

最后

这份《“java高分面试指南”-25分类227页1000+题50w+字解析》同样可分享给有需要的朋友，感兴趣的伙伴们可挑战一下自我，在不看答案解析的情况，测试测试自己的解题水平，这样也能达到事半功倍的效果！（好东西要大家一起看才香）

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取

<el-button size=“mini” @click=“handleEdit(scope.$index, scope.row)”>修改

<el-button size=“mini” type=“danger” @click=“handleDelete(scope.$index, scope.row)”>删除

最后

这份《“java高分面试指南”-25分类227页1000+题50w+字解析》同样可分享给有需要的朋友，感兴趣的伙伴们可挑战一下自我，在不看答案解析的情况，测试测试自己的解题水平，这样也能达到事半功倍的效果！（好东西要大家一起看才香）

[外链图片转存中…(img-G6bkfw3k-1715426656751)]

[外链图片转存中…(img-fthznDNL-1715426656751)]

本文已被CODING开源项目：【一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码】收录

需要这份系统化的资料的朋友，可以点击这里获取