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

2023-11-22 10:20
文章标签 分离 项目 开发 二脉 通任督

本文主要是介绍前后端分离项目开发，助你打通任督二脉，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

本篇文章我们来实现一个简单的前后端分离功能——学生系统，前端采用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 controlif (process.env.NODE_ENV === 'production') {const { mockXHR } = require('../mock')mockXHR()
}
Vue.use(ElementUI, { locale })
// 如果想要中文版 element-ui，按如下方式声明
// Vue.use(ElementUI)Vue.config.productionTip = falsenew 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"stripestyle="width: 100%"><el-table-columnprop="id"label="学号"></el-table-column><el-table-columnprop="name"label="学生姓名"></el-table-column><el-table-columnprop="project"label="专业"></el-table-column><el-table-columnprop="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 {@Autowiredprivate StudentMapper studentMapper;@Overridepublic List<Student> findAll() {return studentMapper.selectList(null);}
}

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

spring:datasource:driver-class-name: com.mysql.jdbc.Driverusername: rootpassword: 123456url: jdbc:mysql:///class_system

测试一下方法是否有用：

@SpringBootTest
class ClasssystemApplicationTests {@Autowiredprivate StudentService studentService;@Testvoid 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 {@Autowiredprivate 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"stripestyle="width: 100%"><el-table-columnprop="id"label="学号"></el-table-column><el-table-columnprop="name"label="学生姓名"></el-table-column><el-table-columnprop="project"label="专业"></el-table-column><el-table-columnprop="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

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

这篇关于前后端分离项目开发，助你打通任督二脉的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/409455。

相关文章

Django开发时如何避免频繁发送短信验证码（python图文代码）

Django开发时如何避免频繁发送短信验证码（python图文代码）

《Django开发时如何避免频繁发送短信验证码（python图文代码）》Django开发时,为防止频繁发送验证码,后端需用Redis限制请求频率,结合管道技术提升效率,通过生产者消费者模式解耦业务逻辑... 目录避免频繁发送 验证码1. www.chinasem.cn避免频繁发送 验证码逻辑分析2. 避免频繁
阅读更多...
精选20个好玩又实用的的Python实战项目(有图文代码)

精选20个好玩又实用的的Python实战项目(有图文代码)

《精选20个好玩又实用的的Python实战项目(有图文代码)》文章介绍了20个实用Python项目,涵盖游戏开发、工具应用、图像处理、机器学习等,使用Tkinter、PIL、OpenCV、Kivy等库... 目录① 猜字游戏② 闹钟③ 骰子模拟器④ 二维码⑤ 语言检测⑥ 加密和解密⑦ URL缩短⑧ 音乐播放
阅读更多...
Spring Boot集成/输出/日志级别控制/持久化开发实践

Spring Boot集成/输出/日志级别控制/持久化开发实践

《SpringBoot集成/输出/日志级别控制/持久化开发实践》SpringBoot默认集成Logback,支持灵活日志级别配置（INFO/DEBUG等）,输出包含时间戳、级别、类名等信息,并可通过... 目录一、日志概述1.1、Spring Boot日志简介1.2、日志框架与默认配置1.3、日志的核心作用
阅读更多...
Springboot项目启动失败提示找不到dao类的解决

Springboot项目启动失败提示找不到dao类的解决

《Springboot项目启动失败提示找不到dao类的解决》SpringBoot启动失败,因ProductServiceImpl未正确注入ProductDao,原因：Dao未注册为Bean,解决：在启... 目录错误描述原因解决方法总结***************************APPLICA编
阅读更多...
PyQt5 GUI 开发的基础知识

PyQt5 GUI 开发的基础知识

《PyQt5GUI开发的基础知识》Qt是一个跨平台的C++图形用户界面开发框架,支持GUI和非GUI程序开发,本文介绍了使用PyQt5进行界面开发的基础知识,包括创建简单窗口、常用控件、窗口属性设... 目录简介第一个PyQt程序最常用的三个功能模块控件QPushButton（按钮）控件QLable（纯文本
阅读更多...
在IntelliJ IDEA中高效运行与调试Spring Boot项目的实战步骤

在IntelliJ IDEA中高效运行与调试Spring Boot项目的实战步骤

《在IntelliJIDEA中高效运行与调试SpringBoot项目的实战步骤》本章详解SpringBoot项目导入IntelliJIDEA的流程,教授运行与调试技巧,包括断点设置与变量查看,奠定... 目录引言：为良驹配上好鞍一、为何选择IntelliJ IDEA？二、实战：导入并运行你的第一个项目步骤1
阅读更多...
在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

在MySQL中实现冷热数据分离的方法及使用场景底层原理解析

《在MySQL中实现冷热数据分离的方法及使用场景底层原理解析》MySQL冷热数据分离通过分表/分区策略、数据归档和索引优化,将频繁访问的热数据与冷数据分开存储,提升查询效率并降低存储成本,适用于高并发... 目录实现冷热数据分离1. 分表策略2. 使用分区表3. 数据归档与迁移在mysql中实现冷热数据分
阅读更多...
基于Python开发一个图像水印批量添加工具

基于Python开发一个图像水印批量添加工具

《基于Python开发一个图像水印批量添加工具》在当今数字化内容爆炸式增长的时代,图像版权保护已成为创作者和企业的核心需求,本方案将详细介绍一个基于PythonPIL库的工业级图像水印解决方案,有需要... 目录一、系统架构设计1.1 整体处理流程1.2 类结构设计（扩展版本）二、核心算法深入解析2.1 自
阅读更多...
IntelliJ IDEA2025创建SpringBoot项目的实现步骤

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.
阅读更多...
Knife4j+Axios+Redis前后端分离架构下的 API 管理与会话方案(最新推荐)

Knife4j+Axios+Redis前后端分离架构下的 API 管理与会话方案(最新推荐)

《Knife4j+Axios+Redis前后端分离架构下的API管理与会话方案(最新推荐)》本文主要介绍了Swagger与Knife4j的配置要点、前后端对接方法以及分布式Session实现原理,... 目录一、Swagger 与 Knife4j 的深度理解及配置要点Knife4j 配置关键要点1.Spri
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2