首先聊一聊，在前后端开发过程中小白会遇到哪些坑？在前后端开发过程中，前端主要是网页设计和数据渲染，前端永远是痛，主要痛在哪呢？
- 痛在包管理，
开发过前端的人都知道，在通过npm安装项目依赖时，有些包的版本会出现冲突，比如你的v-charts版本太高，它会导致项目中的vue、vue-router失效。 - 痛在UI设计
没有美感的人，干不好这活。我还记得大一的时候，在学完HTML、CSS、JavaScript之后，在设计页面，基本都是三部分，页头、内容区、尾栏，且不说页面简洁，呈现给用户的信息也很少。这时候就使用别人的页面，将一些不用的模块剥离出，想法很好，实现起来就难了，动一处伤及全身，页面不是bug就是页面样式失效，后来通过浏览器元素定位，来准确剥离模块，这才有了比较不错的页面。 - 痛在学的东西多
这一点，学习前端的小伙伴们应该深有体会，正所谓，没有最好的框架，只有最合适的应用场景。
再谈后端，随着spring生态的不断地完善，以及各种持久层框架的发展，接口的实现挺容易的，但随着网站需求、用户的增多，网站架构会不断升级，由之前的垂直应用架构过渡到分布式服务架构，甚至到流动计算架构。这些架构的背后肯定离不开技术的支持，所以SpringSecurity、SpringCloud是学习的重点，也是难点。
注意：在vue项目中，很多情况下添加包使用的是npm方式，建议在开发中不要使用npm install，来全局安装依赖。需要什么包，安装什么，不然的话，使用npm install全局安装，你不知道会下载多少包，我记得自己有一次删除node_module文件夹，里面包括2000+文件，删除花了将近10多分钟时间，所以建议不要使用npm install全局安装。
搭建vue环境
前提：已经安装了node环境
相关命令：
node -v 检查node版本
npm -v 检查npm版本npm
install -g cnpm --registry=https://registry.npm.taobao.org 换源加速插件下载
cnpm install vue 下载vue
vue -V 检查vue版本
vue init webpack fileName 通过vue指令初始化文件
.....
cnpm run dev 启动服务
Ctrl+C 关掉服务器了解目录结构
vue项目启动后调用顺序：
index.html---->main.js----->app.vue—>index.js----->components/组件
项目目录结构说明：
目录 | 说明 |
build | webpack的基本配置，webpack.base.conf.js（可以看一下代码） |
config | 构建配置目录，项目启动的端口号… |
node_modules | 依赖node的工具包，及node install xxx都在这里 |
src | 项目核心包 |
index.html | 入口页面 |
package.json | 项目下载包的信息，版本… |
src项目核心包,根据自己的情况完善该目录：
目录 | 说明 |
api | 项目的全部请求 |
asserts | 静态资源，css、js、img… |
pages | 页面 |
components | 公共组件目录 |
router | 前端路由 |
App.vue | 根组件 |
main.js | 入口js文件 |
axios请求处理
创建src/api/http.js文件（可选，根据自己的情况来创建）
- 设置请求的相应参数
import axios from 'axios';
axios.defaults.timeout=6000;//设置超时时间6s
axios.defaults.retry = 4;//请求次数
axios.defaults.retryDelay = 1000;//间隙
axios.defaults.withCredentials=true;//允许跨域
axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=utf-8';
axios.defaults.baseURL = 'http://localhost:8888';//基础url,后端地址- 设置响应拦截器
//响应拦截器
axios.interceptors.response.use(
response=>{ return response;},
error => { return Promise.reject(error);}
);- 封装get、post方法
目的：post、get方法，后面用的很多，可以封装起来，到时候直接传递参数来调用就可以了，减少页面代码量。
export function get(url, params = {}) {
return new Promise((resolve, reject) => {
axios.get(url, {
params: params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
export function post(url, data = {}) {
return new Promise((resolve, reject) => {
axios.post(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
})
}页面开发和路由映射
Vue + Vue Router 简化页面开发，通过 Vue.js，组件集成页面，加入 Vue Router ，将组件映射到路由上，让 Vue Router 知道去哪里渲染它们。
后端开发流程
前提：数据库已准备好
以springboot+mybatisplus技术栈为例：
预备知识：
springboot 参考文档：https://docs.spring.io/
mybatisplus 参考文档：https://mp.baomidou.com/guide/
创建springboot项目
建议使用IDEA的Spring Initializr引导程序来创建，一个字：快！！！
导入相关jar包
可以通过maven仓库来搜索,官网：https://mvnrepository.com
以最基本的为例
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.16</version>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid-spring-boot-starter</artifactId>
<version>1.2.6</version>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.3.1</version>
</dependency>创建application.yml，项目基础配置
spring:
datasource:
url: jdbc:mysql://localhost:3306/xxx?userUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=Asia/Shanghai
driver-class-name: com.mysql.cj.jdbc.Driver
type: com.alibaba.druid.pool.DruidDataSource
username: root
password: 123456
jackson:
date-format: yyyy-MM-dd
time-zone: GMT+8
servlet:
multipart:
max-file-size: 20MB
max-request-size: 20MB
server:
port: 8888
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
map-underscore-to-camel-case: trueAutoGenerator生成项目模块(可选，自行创建也中)
前提：引入mybatis-plus-generator、spring-boot-starter-freemarker依赖
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-generator</artifactId>
<version>3.5.0</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-freemarker</artifactId>
<version>2.5.3</version>
</dependency>参考代码：https://mp.baomidou.com/guide/generator.html
结果：生成Entity、Mapper、Mapper XML、Service、Controller 等各个模块。
注意：可以将每个生成的文件都检查看看，尤其涉及时间的字段，AutoGenerator会自动生成LocalTime类型，一般都需要改成Date类型。
创建配置类
目的：解决跨域问题、静态资源映射问题等（根据自己的需求更改）。那么什么是跨域呢？简单来说，由于前后端端口不一样，故通过跨域来解决前后端数据传输。
案例代码：
@Configuration
public class ApplicationConfig implements WebMvcConfigurer {
//1.解决跨域问题：放行哪些路径、原始域、请求方法、是否验证
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowedMethods("*")
.allowCredentials(true);
}
//2.处理静态资源映射问题,定位各种文件或图像地址
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
//path=file:xxx（根目录）/img/singerPic/
String path1="file:"+System.getProperty("user.dir")+System.getProperty("file.separator")
+ "img"+System.getProperty("file.separator")
+"singerPic"+System.getProperty("file.separator");//歌手图像地址
registry.addResourceHandler("/img/singerPic/**")
.addResourceLocations(path1);
}
}编写controller层（核心代码）
根据前端发起的请求，为前端响应JSON数据。
- Service CRUD接口：get查询单行 、remove删除 、list查询集合 等
- 泛型T为任意实体对象
- 对象Wrapper为条件构造器，可为null，无条件查询。
- 条件构造器wrapper，适用于复杂的SQL，支持链式。
参考文档：https://mp.baomidou.com/guide/wrapper.html#alleq
函数 | 说明 | 举例 |
eq、ne | = 、 ！= |
|
It 、Ie | < 、 <= | lt(“age”, 18) |
gt、ge | > 、 >= |
|
like、notLike | LIKE ‘%值%’ | like(“name”, “王”) |
isNotNull | 字段 IS NULL | isNotNull(“name”) |
between | BETWEEN 值1 AND 值2 | between(“age”, 18, 30) |
orderByDesc | 降序 | orderByDesc(“score”) |
注意：参数的第一个字段对应于数据库属性字段
示例代码：
//名字、邮箱不为空且年龄为大于12
QueryWrapper<User> wrapper = new QueryWrapper<>();
wrapper.isNotNull("name")
.isNotNull("email")
.ge("age",12);推荐：有些同学觉得使用函数来操作数据库可能有些迷，你可以在application.yml中配置日志，方法完成一次调用时，运行窗口会打印日志，你就可以通过日志来了解底层实现了。
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl总结
到这里，前端和后端框架都搭建好了，之后的话，根据需求编写代码，前端通过axios向后端发起get或post请求，后端向前端响应JSON数据，前端获取到JSON数据，通过vue语法，将数据渲染到到页面上，这样一个接口的前后端功能就完成了。
