利用SpringBoot和Vue实现前后端分离（附源码）

/**

• Created by Kak on 2020/9/4.

*/

public interface StudentService {

public List findAllService();

public void updateStudentService(Student student);

public Student addStudentService(Student student);

public void deleteStudentService(int id);

}

3.7 编写StudentServiceImpl

---

在service/impl下

package com.sx.kak.service.impl;

import com.sx.kak.mapper.StudentMapper;

import com.sx.kak.po.Student;

import com.sx.kak.service.StudentService;

import lombok.extern.slf4j.Slf4j;

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

import org.springframework.stereotype.Service;

import java.util.List;

/**

• Created by Kak on 2020/9/4.

*/

@Service

@Slf4j

public class StudentServiceImpl implements StudentService{

@Autowired(required = false)

private StudentMapper studentMapper;

@Override

public List findAllService() {

try {

List allStudent = studentMapper.findAllStudent();

return allStudent;

}catch (Exception ex) {

log.info(ex.getMessage());

}

return null;

}

@Override

public void updateStudentService(Student student) {

try {

studentMapper.updateStudent(student);

}catch (Exception ex){

log.info(ex.getMessage());

}

}

@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)”>删除

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
olumn prop=“age” label=“学生年龄”>

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

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

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-JIQGMQN6-1715091761503)]

[外链图片转存中…(img-sd1dQlY7-1715091761503)]

[外链图片转存中…(img-3jccX5OJ-1715091761503)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！