前后端分离项目开发，助你打通任督二脉

约定不等于承诺〃 2022-08-31 01:59 123阅读 0赞

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

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

# 环境准备 #

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

首先下载node.js，来到官网：[https://nodejs.org/zh-cn/download/releases/][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][https_github.com_PanJiaChen_vue-admin-template]  
![image.png][image.png 1]  
将项目下载或者克隆下来，下载完成后解压就可以得到一个现成的后台管理系统，打开cmd窗口，将路径切换到该项目下，执行指令：

npm i

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

npm run dev

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

# 脚手架项目介绍 #

如果你是初次接触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][image.png 5]  
代码如下：

<!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>
        
      </body>
    </html>

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

在项目的根目录下即可找到App组件：  
![image.png][image.png 6]  
代码如下：

<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][image.png 7]  
这个文件里的内容非常多，这里截取部分进行分析：

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][image.png 8]  
这里再说说这行代码吧：

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

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

<template>
    <div>
      学生信息
      </div>
    </template>
    
    <script>
      export default {
        name: "index"
      }
    </script>
    
    <style scoped>
    </style>

看看效果如何：  
![image.png][image.png 10]  
这样一个菜单项就定义出来了，接下来就是对右侧页面的编写了，右侧我们使用一个表格来实现学生的信息展示，来到Element-UI的官网：[https://element.eleme.cn/\#/zh-CN/component/installation][https_element.eleme.cn_zh-CN_component_installation]  
找到表格内容：  
![image.png][image.png 11]  
将表格内容的代码复制粘贴到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][image.png 12]  
表格有了，接下来就是准备数据了。

# 学生信息-后端开发 #

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

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][http_localhost_8080_getStudents] ：  
![image.png][image.png 13]  
到这里后端的开发也就完成了。

# 学生信息-前后端整合 #

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

首先修改前端项目根目录下的.env.development文件：  
![image.png][image.png 14]  
将文件中的VUE\_APP\_BASE\_API的配置值修改为我们后端应用的地址：

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

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

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

接下来正式开始编写代码，首先编写数据接口，在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][image.png 22]这是前后端分离项目中十分常见的跨域问题，这里我先用一种比较简便的方式解决它，就是在后端项目的Controller上添加@CrossOrigin注解：

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

重启后端项目，查看页面效果：  
![image.png][image.png 23]

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

[https_nodejs.org_zh-cn_download_releases]: https://nodejs.org/zh-cn/download/releases/
[image.png]: /images/20220829/1d9fef43a27e4e6bbd8dc98852cdc88c.png
[https_github.com_PanJiaChen_vue-admin-template]: https://github.com/PanJiaChen/vue-admin-template
[image.png 1]: /images/20220829/59c8b2da1d6848c09de30ac8e81ed012.png
[image.png 2]: /images/20220829/30ce8f03c2c744c099e2f4f29482e8ec.png
[image.png 3]: /images/20220829/a2aab13c08de4935a073950613fc958b.png
[image.png 4]: /images/20220829/994da25d9709464a857098754ca3dec3.png
[image.png 5]: /images/20220829/d998073d877648d9bbbd9ebf5c93874a.png
[image.png 6]: /images/20220829/265464ba3f9d45bca441c3392823cc35.png
[image.png 7]: /images/20220829/2534ae36a1bc41129cfbcc20f38b01b6.png
[image.png 8]: /images/20220829/423b2829200f4d82b859c5338166e8a0.png
[image.png 9]: /images/20220829/bc02df32d2d14455acf76397690c3fa7.png
[image.png 10]: /images/20220829/2b697050d45c4a3dbdb56ff45b71d160.png
[https_element.eleme.cn_zh-CN_component_installation]: https://element.eleme.cn/#/zh-CN/component/installation
[image.png 11]: /images/20220829/dfca2d7fbede45de8c4cb0057d70545e.png
[image.png 12]: /images/20220829/963c1eb0ba9444ae8ea1370599b763c0.png
[http_localhost_8080_getStudents]: http://localhost:8080/getStudents
[image.png 13]: /images/20220829/9040365f818649428ee9ecaf1e821268.png
[image.png 14]: /images/20220829/d8c751cbc1564ce0ab96c7dbbece9529.png
[image.png 15]: /images/20220829/84a9debcda454804872dcca342c0d768.png
[image.png 16]: /images/20220829/56351a40bc7a4bae9b10923615ceb97f.png
[image.png 17]: /images/20220829/5fcdada2e55f42f1a858d34322340c0d.png
[image.png 18]: /images/20220829/670325875bb8465daea2430870db8210.png
[image.png 19]: /images/20220829/1483ae29d8004ce6849ac05b1bdff64f.png
[image.png 20]: /images/20220829/f7281727f1fa4adf82455e01c60285d8.png
[image.png 21]: /images/20220829/3292ad4367b34db78f78d99e196222a9.png
[image.png 22]: /images/20220829/ca0e29a5334a43bf96c13c2beafce909.png
[image.png 23]: /images/20220829/ee9729ead97d46e39bc9c37ac0635eaa.png