分离式前后端的交互（超详细）

前言

近期首次进军微信小程序的开发，采用前后端分离的开发模式。

本篇主要探究前后端的交互过程，前后端框架由于是初次接触，了解的并不多，写的比较粗糙，仅供初学者参考。

软件环境：HBuilder、IDEA

前端框架：uni-app（uniapp是基于vue框架，所以如果你会vue的话，来学uniapp会很简单）

后端框架：SpringMVC

前端：

1.新建uni-app项目

        文件-新建-项目，选择uni-app，这里的模板选择最简单就行，一口吃不了个大胖子

创建完成后就是这个样子，（utils是我自己写的工具类，可忽略）：

说一下重要的文件或文件夹：

pages ：所有的页面存放目录
static ：静态资源目录，例如图片等
unpackage ：就是打包目录，在这里有各个平台的打包文件
App.vue ：是我们的根组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
main.js ：是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
manifest.json ：文件是应用的配置文件，用于指定应用的名称、图标、权限等。
pages.json ：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
uni.scss ：文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

2.向后端发送请求

下面打开pages里面的index.vue 在里面写访问后端的js：

<script>
	export default {//这一块是文件自带的
		data() {
			return {
				title: 'Hello world！'
			}
		},
		onLoad() {},
		methods: {}
	}
	
	 uni.request({
		url: 'http://localhost:8080/book/test?id=4', //http://localhost:端口号/后端路径
			data: {//参数
				type: 3,
				id:2,
			},
			header: {
				// 'Content-Type': 'application/x-www-form-urlencoded'
				 'Content-Type': 'application/json' //自定义请求头信息
			},
			method:'POST',//请求方式，必须为大写