本篇文章我们来实现一个简单的前后端分离功能——学生系统,前端采用Vue+ElementUI,后端采用SpringBoot+MyBatis。

文章里不会介绍相应的技术内容,而是阐述整个前后端开发的流程

环境准备

在正式开始开发之前,我们先来准备一下开发环境,为了避免一些错误的发生,请保持与我的环境版本一致。

首先下载node.js,来到官网:https://nodejs.org/zh-cn/download/releases/
image.png
下载14.15.0的安装包,下载完成后一路next即可安装成功,安装成功后验证一下,打开cmd窗口,执行命令:

node -v

若是输出了版本号则表示安装成功,接着配置一下淘宝镜像,它可以加速依赖的下载:

npm config set registry https://registry.npm.taobao.org

本次项目我们使用vue-element-admin脚手架作为基础框架进行开发,所以需要下载它,来到GitHub:
https://github.com/PanJiaChen/vue-admin-template
image.png
将项目下载或者克隆下来,下载完成后解压就可以得到一个现成的后台管理系统,打开cmd窗口,将路径切换到该项目下,执行指令:

npm i

npm就会帮助我们下载项目需要用到的依赖,等待其下载完成:
image.png
出现警告是正常的,没有出错就行,现在我们就可以启动这个项目了,执行指令:

npm run dev

image.png
直接点击登录按钮就可以进入后台了:
image.png
目前这个后台还是个空壳子,接下来的任务就是来实现它。

脚手架项目介绍

如果你是初次接触Vue的脚手架项目,在看到项目中如此多的文件时,一定会手足无措吧,没关系,我们就先来分析一下项目结构。

对于Vue的脚手架项目,它有一个入口文件main.js:

import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import '@/styles/index.scss' // global css
import App from './App'
import store from './store'
import router from './router'
import '@/icons' // icon
import '@/permission' // permission control

if (process.env.NODE_ENV === 'production') {
  const { mockXHR } = require('../mock')
  mockXHR()
}
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui,按如下方式声明
// Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

该文件内容非常简单,前面的11行都是引入一些模块和组件,我们无需关心,重点看23~27行,这5行中,创建了一个Vue的实例,并将其绑定到了id为app的DOM元素上,并使用render属性进行渲染,所以它的作用就是将App组件的内容渲染到id为app的DOM元素上,那么找找id为app的DOM元素在哪呢?

在public目录下的index.html中即可找到它的身影:
image.png
代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

有必要解释一下,Vue的脚手架一般都是SPA(Single Page Application)项目,即:单页面应用程序。
所以整个项目中只有这么一个页面,而页面的变化就是由这个id为app的div实现的;在main.js中,它将App组件渲染到了这个div中,所以页面的内容实际上是由App组件决定的。

在项目的根目录下即可找到App组件:
image.png
代码如下:

<template>
<div id="app">
  <router-view />
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

一个Vue的组件由三部分组成,template、script和style,其中template用于展示页面内容,这里只写了一个标签,route-view是路由标签,它将根据路由规则来决定具体展示的内容是什么,所以查看一下路由的规则。

在router目录下有一个index.js,它就是用来配置路由规则的:
image.png
这个文件里的内容非常多,这里截取部分进行分析:

export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard' }
               }]
  }
]

path用于指定路由规则,component指定组件,Vue会监听地址栏的地址变化,当地址栏变为/login时,Vue便会使用component中配置的组件替换掉刚才的路由标签route-view。

学生信息-前端开发

刚才简单地介绍了一下Vue的脚手架项目,接下来我们就来实现一个学生信息的管理,首先添加路由规则:

{
    path: '/student',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'Student',
        component: () => import('@/views/student/index'),
        meta: {title: '学生信息', icon: 'form'}
      }
    ]
  },

将其放到router目录下index.js中的constantRoutes属性里即可:
image.png
这里再说说这行代码吧:

component: () => import('@/views/student/index')

它的作用是引入一个组件用于显示当前路由匹配的内容,@表示src目录,所以我们需要在src/views目录下新建一个student目录,并在student目录下新建index.vue文件:
image.png
index.vue内容如下:

<template>
<div>
  学生信息
  </div>
</template>

<script>
  export default {
    name: "index"
  }
</script>

<style scoped>
</style>

看看效果如何:
image.png
这样一个菜单项就定义出来了,接下来就是对右侧页面的编写了,右侧我们使用一个表格来实现学生的信息展示,来到Element-UI的官网:https://element.eleme.cn/#/zh-CN/component/installation
找到表格内容:
image.png
将表格内容的代码复制粘贴到student目录下的index.vue中即可:

<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%">
      <el-table-column
        prop="id"
        label="学号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="学生姓名">
      </el-table-column>
      <el-table-column
        prop="project"
        label="专业">
      </el-table-column>
      <el-table-column
        prop="class"
        label="班级">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
}
</script>

<style scoped>

</style>

看看页面效果:
image.png
表格有了,接下来就是准备数据了。

学生信息-后端开发

在数据库中创建一张学生信息表:

create database class_system;

use class_system;

create table student(
	id varchar(10) primary key not null,
	name varchar(50) not null,
	project varchar(50) not null,
	class varchar(50) not null
);

这里的班级应该创建一张班级表并建立外键关联,这里为了方便开发,就设置成了字符类型,添加几条测试数据:

insert into student value ('1809100001','张三','计算机科学与技术','18计算机1班');
insert into student value ('1809100002','李四','计算机科学与技术','18计算机1班');
insert into student value ('1809100003','王五','计算机科学与技术','18计算机2班');

创建一个SpringBoot应用,并引入相关的依赖:

<dependency>
  <groupId>com.baomidou</groupId>
  <artifactId>mybatis-plus-boot-starter</artifactId>
  <version>3.4.2</version>
</dependency>
<dependency>
  <groupId>org.projectlombok</groupId>
  <artifactId>lombok</artifactId>
  <version>1.18.10</version>
  <scope>provided</scope>
</dependency>
<dependency>
  <groupId>mysql</groupId>
  <artifactId>mysql-connector-java</artifactId>
  <version>5.1.35</version>
</dependency>
<dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-web</artifactId>
</dependency>

创建实体类:

@Data
public class Student {

    private String id;
    private String name;
    private String project;
    // 数据库中班级的字段名为class,在Java中class与关键字冲突,所以使用@TableField注解标注一下属性和字段名的对应关系
    @TableField("class")
    private String theClass;
}

编写Mapper接口:

@Mapper
public interface StudentMapper extends BaseMapper<Student> {
}

编写Service接口:

public interface StudentService{
    
    List<Student> findAll();
}

编写Service接口的实现类:

@Service
public class StudentServiceImpl implements StudentService {

    @Autowired
    private StudentMapper studentMapper;

    @Override
    public List<Student> findAll() {
        return studentMapper.selectList(null);
    }
}

最后在application.yml中配置一下数据库的相关信息:

spring:
  datasource:
    driver-class-name: com.mysql.jdbc.Driver
    username: root
    password: 123456
    url: jdbc:mysql:///class_system

测试一下方法是否有用:

@SpringBootTest
class ClasssystemApplicationTests {

    @Autowired
    private StudentService studentService;

    @Test
    void contextLoads() {
        List<Student> students = studentService.findAll();
        students.forEach(System.out::println);
    }
}

运行结果:

Student(id=1809100001, name=张三, project=计算机科学与技术, theClass=18计算机1)
Student(id=1809100002, name=李四, project=计算机科学与技术, theClass=18计算机1)
Student(id=1809100003, name=王五, project=计算机科学与技术, theClass=18计算机2)

为了方便前后端的联系,这里简单封装一下响应结果:

@Data
public class R {

    private Integer code;
    private Map<String, Object> data = new HashMap<>();

    private R() {
    }

    public static R ok() {
        R r = new R();
        r.setCode(200);
        return r;
    }

    public static R error() {
        R r = new R();
        r.setCode(500);
        return r;
    }

    public R data(String key, Object value) {
        this.data.put(key, value);
        return this;
    }
}

接下来就可以编写Controller了:

@RestController
public class StudentController {

    @Autowired
    private StudentService studentService;

    @GetMapping("/getStudents")
    public R getStudents(){
        List<Student> students = studentService.findAll();
        return R.ok().data("students",students);
    }
}

启动SpringBoot应用,检查一下返回结果是否正确,访问 http://localhost:8080/getStudents
image.png
到这里后端的开发也就完成了。

学生信息-前后端整合

到目前为止,我们实现了前端的页面显示,后端的接口开发, 接下来就是将数据接口运用到前端项目中。

首先修改前端项目根目录下的.env.development文件:
image.png
将文件中的VUE_APP_BASE_API的配置值修改为我们后端应用的地址:

# base api
VUE_APP_BASE_API = 'http://localhost:8080'

但这会导致前端项目的登录功能无法正常工作:
image.png
这是因为前端项目是用Mock.js自己写的一个服务端实现的登录,而当我们修改了BASE_API后,请求的路径就被篡改了,所以修改根目录下mock目录中的mock-server.js文件:
image.png
修改第37行的内容:
image.png
还需要修改src下api下的user.js文件:
image.png
在该文件的三个函数中都添加如下内容:
image.png
完成后重启前端项目,就可以登录到后台了。

最后修改src下utils下的request.js文件:
image.png
修改第49行的内容:
image.png
这样前端项目就能正确收到后端项目的响应了。

接下来正式开始编写代码,首先编写数据接口,在src/api目录下新建student.js文件:

import request from '@/utils/request'

export default{
  list(){
    return request({
      url:'/getStudents', // 接口地址
      method:'get')
    }
  }
}

然后在student下的index.vue中调用它:

<template>
  <div>
    <el-table
      :data="list"
      stripe
      style="width: 100%">
      <el-table-column
        prop="id"
        label="学号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="学生姓名">
      </el-table-column>
      <el-table-column
        prop="project"
        label="专业">
      </el-table-column>
      <el-table-column
        prop="theClass"
        label="班级">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import studentApi from '@/api/student.js' // 引入Api文件

export default {
  data(){
    return{
      list:[]
    }
  },
  // 生命周期钩子
  created(){
    this.fetchData()
    console.log(this.list)
  },
  methods:{
    fetchData(){
        studentApi.list().then(response=>{
          this.list = response.data.students
        })
    }
  }
}
</script>

<style scoped>

</style>

此时查看页面效果,发现了新的问题:
image.png这是前后端分离项目中十分常见的跨域问题,这里我先用一种比较简便的方式解决它,就是在后端项目的Controller上添加@CrossOrigin注解:

@RestController
@CrossOrigin
public class StudentController {
	......
}

重启后端项目,查看页面效果:
image.png

到这里一个完整的前后端分离功能就完成了,不知道现在大家对前后端分离的开发流程是否熟悉了呢?

Logo

前往低代码交流专区

更多推荐