手把手搭建前后端开发框架

快速搭建前后端开发框架

初入江湖，请多多指教

首先聊一聊，在前后端开发过程中小白会遇到哪些坑？在前后端开发过程中，前端主要是网页设计和数据渲染，前端永远是痛，主要痛在哪呢？

• 痛在包管理，

  开发过前端的人都知道，在通过npm安装项目依赖时，有些包的版本会出现冲突，比如你的v-charts版本太高，它会导致项目中的vue、vue-router失效。

• 痛在UI设计

  没有美感的人，干不好这活。我还记得大一的时候，在学完HTML、CSS、JavaScript之后，在设计页面，基本都是三部分，页头、内容区、尾栏，且不说页面简洁，呈现给用户的信息也很少。这时候就使用别人的页面，将一些不用的模块剥离出，想法很好，实现起来就难了，动一处伤及全身，页面不是bug就是页面样式失效，后来通过浏览器元素定位，来准确剥离模块，这才有了比较不错的页面。

• 痛在学的东西多
  这一点，学习前端的小伙伴们应该深有体会，正所谓，没有最好的框架，只有最合适的应用场景。

再谈后端，随着spring生态的不断地完善，以及各种持久层框架的发展，接口的实现挺容易的，但随着网站需求、用户的增多，网站架构会不断升级，由之前的垂直应用架构过渡到分布式服务架构，甚至到流动计算架构。这些架构的背后肯定离不开技术的支持，所以SpringSecurity、SpringCloud是学习的重点，也是难点。

前端开发流程

以下内容以：vue+axios+elementUI+vcharts技术栈为例

预备知识

• vue 参考文档：https://cn.vuejs.org/v2/guide/

• axios 参考文档：http://www.axios-js.com/zh-cn/docs/

• elementUI 参考文档：https://element.eleme.io/#/zh-CN

• vcharts 参考文档：https://v-charts.js.org/#/

注意：在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.projectlombokgroupId>
			<artifactId>lombokartifactId>
			<optional>trueoptional>
dependency>
<dependency>
			<groupId>mysqlgroupId>
			<artifactId>mysql-connector-javaartifactId>
			<version>8.0.16version>
dependency>
<dependency>
			<groupId>com.alibabagroupId>
			<artifactId>druid-spring-boot-starterartifactId>
			<version>1.2.6version>
dependency>
<dependency>
			<groupId>com.baomidougroupId>
			<artifactId>mybatis-plus-boot-starterartifactId>
			<version>3.4.3.1version>
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: true

AutoGenerator生成项目模块(可选，自行创建也中)

前提：引入mybatis-plus-generator、spring-boot-starter-freemarker依赖

<dependency>
    <groupId>com.baomidougroupId>
    <artifactId>mybatis-plus-generatorartifactId>
    <version>3.5.0version>
dependency>
<dependency>
    <groupId>org.springframework.bootgroupId>
    <artifactId>spring-boot-starter-freemarkerartifactId>
    <version>2.5.3version>
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	= 、 ！=	eq("name", "老王")—>name = '老王'
  It 、Ie	< 、 <=	lt(“age”, 18)--->age < 18
  gt、ge	> 、 >=	ge("age", 18)—>age >= 18
  like、notLike	LIKE ‘%值%’	like(“name”, “王”)--->name like ‘%王%’
  isNotNull	字段 IS NULL	isNotNull(“name”)--->name is not null
  between	BETWEEN 值1 AND 值2	between(“age”, 18, 30)--->age between 18 and 30
  orderByDesc	降序	orderByDesc(“score”)--->order by Score DESC

  注意：参数的第一个字段对应于数据库属性字段

  示例代码：

  //名字、邮箱不为空且年龄为大于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语法，将数据渲染到到页面上，这样一个接口的前后端功能就完成了。

---

能力有限，文章不足之处，愿您留下足迹，我会在第一时间进行纠正…