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

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.youkuaiyun.com/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)”>删除

<el-button @click=“dialogFormVisible = false”>取 消

<el-button type=“primary” @click=“updateStudent()”>确 定

<el-button type=“primary” @click=“addView()”>添加学生信息

<el-button @click=“dialogFormVisible1 = false”>取 消

<el-button type=“primary” @click=“addStudent()”>确 定