微信小程序开发前后端分离（小程序和java 怎么前后端分离）
本篇文章给大家谈谈微信小程序开发前后端分离，以及小程序和java 怎么前后端分离对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。
本文目录一览：
- 1、微信小程序开发需要什么技能跟技术？
- 2、微信小程序可以自学设计开发吗？
- 3、开源微信小程序--借书系统
- 4、微信小程序开发需要安装什么软件，搭建什么环境？
- 5、推荐 9 个 yyds 前后端分离项目
- 6、SpringMVC前后端分离交互传参详细教程-
微信小程序开发需要什么技能跟技术？
微信小程序开发需要掌握的技术如下：
1、WXML语言，上面说了，类似于 Html语言
WXML(WeiXin Markup
Language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构
2、要学习Javascrip作为 后台代码编写语言
3、要学习PHP作为 服务器代码编写语言 (你也可以选择其他语言)
4、要学习WXSS(为了适应广大的前端开发者，WXSS 具有 CSS 大 部分特性, WXSS 对CSS 进行了扩充以及修改.)
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式
与 CSS 相比，WXSS 扩展的特性有：尺寸单位和样式导入
5、学习微信小程序的一系列组件的使用
框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发
6、学习微信特有的API
框架提供丰富的微信原生API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等
wx.on 开头的 API 是监听某个事件发生的API接口，接受一个 CALLBACK 函数作为参数。当该事件触发时，会调用 CALLBACK 函数。
7、要学习WXS
WXS(WeiXin Script)是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构，这个语言类似于 Javascript。
微信小程序可以自学设计开发吗？
自学搭建微信小程序，我们需要准备以下内容：
在微信开放平台，注册申请一个微信小程序，点击这里前往
2.注册好之后，登录账号，在页面的：开发》开发管理》开发设置 获取小程序的appid
3.然后下载微信小程序的开发者工具，下载位置在页面的：开发》开发工具》开发者工具 进行下载。小程序开发教程
4.新建小程序项目，打开微信小程序开发者工具之后，新建项目，这里要输入一个appid，这里就填写上面我们注册的微信小程序，获取到的Appid填入即可，选择不使用云服务。
5.这样就建好了小程序的初始化状态，初始化是官方提供的demo代码，这样就可以在这个基础上进行界面开发了，这里就不细讲小程序如何开发了，有兴趣的可以看着文档写个demo练练手，这里面涉及到一个要点，就是前后端交付，目前小程序是前端，那么后端呢？
6.后端就很多了，看你自己熟悉什么语言，就用什么语言做后端接口，以前的网站大多都是前后端不分离的，现在几乎都是前后端分离，这里分不分离有什么区别呢？不分离的话，界面渲染都是在服务器端完成的，分离的话是在客户端完成的，相比而言，前后端分离是更好的选择，这样前后端分工开发，效率更高，降低维护成本，分工更加明确，后端注重逻辑，前端注重界面渲染和逻辑处理就好，而微信小程序也是完全的前后端分离框架，说远了， 说远了， 回来继续讲，后端的话，我一般使用Java、Pyhton、PHP这三种语言中选其一，目前用Java、Python多一些，看个人喜好还有系统的稳定要求等来定论就好，这里就不演示后端逻辑了，注意的一点是，微信小程序要求后端必须是支持https的，https的话就需要SSL安全证书，这个证书呢，一般买域名都有送的免费的，这里建议使用阿里云或者腾讯云等，当然，根据你自己喜欢去选择就好。有不懂的可以百度一下
开源微信小程序--借书系统
发现了一个很不错的微信小程序源码。
weapp-library：提供在线借书功能的开源小程序项目。连接读者与图书馆，实现图书借阅线上化。界面风格良好，功能完整。具有注册登录、图书搜索、书单系统、订单管理等功能。这是一个完整的小程序项目，包括了前后端的开发，并且撰写了完善的文档，适合初学者学习。
文档真的是很完善，可以看出作者是真的费心了。
在线借书平台小程序——我的——组件展示
本项目采用三层架构，从上至下分为界面层、业务逻辑层(Controller)、数据访问层(Eloquent\Model)。通过 Slim 框架完全实现 前后端分离 ，前后端通过HTTPS协议进行通信，传输数据格式为JSON。业务逻辑层提供了RESTful风格的API。
源码地址：
微信小程序开发需要安装什么软件，搭建什么环境？
意思是你只有一些前端的基础，会一些html,前端页面的东西。现在做项目都是前后端分离的，你在前端页面上用js写一些页面逻辑，页面特效啥的，可以不用后端逻辑参与的代码。还有一些逻辑是需要后端服务器上来执行的，比如存取数据啊，隐私性的逻辑啊，复杂逻辑什么的，这些都是后端逻辑。这些代码是放在后端服务器上的，这服务器你可以租也可以用自己的电脑，有公网IP就行。然后一般现在对于这个后端服务器，是有个域名指向到这个IP上的，便于记忆嘛，其实域名跟IP一样的，都是指向某个后端的服务器，就是让你的前端页面可以访问这个后端的服务器，获取到数据，或者执行什么操作。如果你是个简单的小程序，根本都不用存取数据，也没有什么复杂的逻辑，就只要实现一点简单的功能，前端逻辑就行了，那你就不需要什么后端的。如果是复杂的小程序，那是需要后端代码的。
你说的开发工具是微信开发工具，这个是用来写前端代码的，微信官方提供的，你可以自己去微信官方下。你不需要公众号的，你需要去微信开发平台申请一个小程序，你用那工具的时候需要填。
用不用数据库，这都是根据你自己项目需要来的，你觉得这数据随便放到一个txt文档或者xml文档里存着就行，那就不用数据库了。数据库存放数据也是对项目复杂程度来说的，并不是说所有的小程序都要数据库。数据库也就是个数据的管理工具，对数据操作，数据查询速度什么额有优化，意思就是能方便的管理数据，能快速的找到数据。其实你用txt存数据一样能做到，只是没那么方便，检索数据也慢。
推荐 9 个 yyds 前后端分离项目
前后端分离是现在主流的架构设计模式，它初衷是用「单一职责」原则把代码质量提上去从而达到节省人力和减少沟通时的信息损失的目的。
本文推荐九个前后端分离的开源项目，都是采用最流行的技术栈。本文推荐的开源项目已经收录到 Awesome GitHub Repo。
Awesome GitHub Repo 是逛逛 GitHub 创建的开源项目，会收集整理 GitHub 上高质量、有趣的开源项目，并将他们进行归类。
该开源项目集不是简单的按照编程语言来分类，而是按照更有趣的分类方式，比如：有趣项目、沙雕项目、实战项目、学习项目、实用工具等等。
本期推荐的开源项目是：
1. 前后端分离博客系统
2. 前后端分离考试系统
3. 基于 TypeScript 的聊天室项目
4. 人力资源管理开源项目
5. 一个可以用来练手的前后端分离项目
6. 学之思开源考试系统
7. 前后端分离的后台管理系统
8. 前后端管理平台一站式脚手架
9. 一个系列项目：NiceFish（美人鱼）
01 前后端分离博客系统
这是一款基于 Spring Boot = Vue 的前后端分离的博客系统，后端采用技术栈：Spring Boot、Spring Security、jjwt、MyBatis、PageHelper、Redis、commonmark-java、ip2region、quartz、yauaa。
前端核心框架：Vue2.x、Vue Router、Vuex；Vue 项目基于 @vue/cli4.x 构建。JS 依赖及参考的 CSS：axios、moment、nprogress、v-viewer、prismjs、APlayer、MetingJS、lodash、mavonEditor、echarts、tocbot、iCSS
02 前后端分离考试系统
该项目是一个前后端分离的在线考试系统。后端使用 Spring Boot，前端使用 VUE 和 Element-UI 组件库配合完成开发。
03 基于 TypeScript 的聊天室项目
该项目是一个聊天室，采用全 TypeScript 开发，目前聊天室已经具备完整的聊天功能，有兴趣的朋友可以自行 fork 去开发。
技术选型：Typescript、Vue2.6.x、Socket/io、Vuex、Nestjs、Typeorm、ES6+、SASS(SCSS)。
04 人力资源管理系统
微人事是一个前后端分离的人力资源管理系统，项目采用 Spring Boot + Vue 开发。首先，不同的用户在登录成功之后，根据不同的角色，会看到不同的系统菜单，完整菜单如下：
每个用户的角色是由系统管理员进行分配的，系统管理员给用户分配角色的页面如下：
系统管理员也可以管理不同角色可以操作的资源，页面如下：
后端技术栈：Spring Boot、Spring Security、MyBatis、MySQL、Redis、RabbitMQ、Spring Cache、WebSocket
前端技术栈：Vue、ElementUI、axios、vue-router、Vuex、WebSocket、vue-cli4
05 前后端分离练手项目
一个基于 Spring Boot + Vue 开发的前后端分离博客项目，带有超级详细开发文档和讲解视频。还未接触过 Vue 开发或者前后端分离的同学可以学起来。
06 开源考试系统
学之思开源考试系统是一款 Java + Vue 的前后端分离的考试系统。主要优点是开发、部署简单快捷、界面设计友好、代码结构清晰。
支持 Web 端和微信小程序，能覆盖到 PC 机和手机等设备。支持多种部署方式：集成部署、前后端分离部署、Docker 部署。
07 后台管理系统
一个基于 Spring Boot 2.1.0 、 Spring Boot Jpa、 JWT、Spring Security、Redis、Vue 的前后端分离的后台管理系统。
项目采用分模块开发方式， 权限控制采用 RBAC，支持数据字典与数据权限管理，支持一键生成前后端代码，支持动态路由。
体验地址：
账号密码：admin / 123456
08 前后端管理平台一站式脚手架
本项目基于Spring Cloud 和Ant Design Pro实现前后端管理平台一站式脚手架，便于快速开发企业级应用。我们的愿景是 基于CopyPaste技术，实现面向GoogleBaidu编程，让码农搬砖不累，做更好的良民。
预览地址：；用户名和密码：admin
浏览器输入 localhost:8000 后会自动跳转到登录页
输入用户名和密码 admin/admin后,跳转到首页
Cookie中JWT Token
监控服务 localhost:8001效果(如果启动了monitor服务，用户名和密码为admin/admin)
移动端效果
09 美人鱼
NiceFish（美人鱼） 是一个系列项目，目标是示范前后端分离的开发模式：前端浏览器、移动端、Electron 环境中的各种开发模式；后端有两个版本：SpringBoot 版本和 SpringCloud 版本。
历史 推荐的开源项目已经收录到 GitHub 项目，欢迎 Star：
SpringMVC前后端分离交互传参详细教程-
温故而知新，本文为一时兴起写出，如有错误还请指正
本文后台基于SpringBoot2.5.6编写，前端基于Vue2 + axios和微信小程序JS版分别编写进行联调测试，用于理解前后端分离式开发的交互流程，如果没用过axios可以点我看之前的帖子
如果你没有学过SpringBoot也不要紧，把他看做成SpringMVC即可，写法完全一致（其实我不说你也发现不了）
本文主要讲前后端交互流程，力求帮助新人快速入门前后端分离式开发，不会讲关于环境搭建部分的内容
在文章开头快速的过一遍SpringMVC接收参数的几种方式，一定要记住这几种方式，看不懂或不理解都没关系，后续会结合前端代码过一遍，这里就不过多解释了，直接上代码
细心的人应该留意到了，最后使用变量接收参数的时候只接收了 username 这一个值，并没有接收 password ，作为扩展在这里解释一下， 不看也可以，看了不理解也没关系，知道这个事儿就够了，以后接触多了就理解了
如果请求参数放在了请求体中，只有参数列表第一个变量能接收到值，这里需要站在Servlet的角度来看：
可以看到请求体内容是存到了 InputStream 输入流对象中，想要知道请求体中的内容是什么必须读流中的数据，读取到数据后会将值给第一个变量，而流中的数据读取一次之后就没了，当第二个变量读流时发现流已经被关闭了，自然就接收不到
SpringMVC回顾到此为止，只需要记住那三种方式即可，在前后端交互之前先在Controller中写个测试接口
这个接口对应的是GET类型的请求，这里直接在浏览器地址栏访问测试一下：
这里推荐一个Chrome浏览器的插件 JSONView ，它可以对浏览器显示的JSON数据进行格式化显示，推荐的同时也提个醒，安装需谨慎，如果JSON数据量太大的话页面会很卡
之前已经写好一个GET请求的测试接口了，这里就在前端写代码访问一下试试看
代码已经写完了，接下来打开页面试一下能不能调通：
可以看到请求代码报错了，查看报错信息找到重点关键词 CORS ，表示该请求属于 跨域请求
什么是跨域请求？跨域请求主要体现在跨域两个字上，当发起请求的客户端和接收请求的服务端他们的【协议、域名、端口号】有任意一项不一致的情况都属于跨域请求，拿刚刚访问的地址举例，VUE页面运行在9000端口上，后台接口运行在8080端口上，端口号没有对上所以该请求为跨域请求
如果在调试的时候仔细一点就会发现，虽然前端提示请求报错了，但是后端还是接收到请求了，那为什么会报错呢？是因为后端返回数据后，浏览器接收到响应结果发现该请求跨域，然后给我们提示错误信息，也就是说问题在浏览器这里
怎样才能让浏览器允许该请求呢？我们需要在后端动点手脚，在返回结果的时候设置允许前端访问即可
首先配置一个过滤器，配置过滤器有很多种实现的方法，我这里是实现Filter接口
过滤器创建完成了，回来看前端提示的报错信息为 Access-Control-Allow-Origin ，意思是允许访问的地址中并不包含当前VUE的地址，那么我们就在响应结果时将VUE的地址追加上
添加完成后重启项目后台就会发现请求已经成功并且拿到了返回值
再次进行测试，将后台的GetMapping修改为PostMapping，修改前端请求代码后重新发起请求进行测试
可以看到POST请求还是提示跨域请求，对应的错误信息则是 Access-Control-Allow-Headers ，也就是说请求头中包含了不被允许的信息，这里图省事儿用 * 通配符把所有请求头都放行
这样处理之后，请求就可以正常访问啦
路径占位参数，就是将参数作为请求路径的一部分，例如你现在正在看的这篇博客使用的就是路径占位传参
这种传参方法很简单，就不细讲了，可以效仿他这种方法写个测试案例
这里需要注意区分【路径占位传参】和【路径传参】两个概念，不要记混
什么是路径传参？发起一个请求 ;b=2 ，在路径 ? 后面的都属于路径传参，路径传参就是将参数以明文方式拼接在请求地址后面
路径传参使用【正常接收参数】中的实例代码即可接收到值
除了自己手动拼接请求参数之外，axios在config中提供了params属性，也可以实现该功能
表单类型参数，就是通过form表单提交的参数，通常用在例如HTML、JSP页面的form标签上，但如果是前后端分离的话就不能使用form表单提交了，这里可以手动创建表单对象进行传值
需要注意，GET请求一般只用于路径传参，其他类型传参需要使用POST或其他类型的请求
表单类型参数也是【正常接收参数】中的实例代码接收值
小程序删除了FormData对象，不能发起表单类型参数的请求，如果非要写的话可以试着使用 wx.uploadFile 实现，这里就不尝试了
请求体传参，是在发起请求时将参数放在请求体中
表单类型参数需要使用上面【请求体接收参数】中的实例代码接收值
axios如果发起的为POST类型请求，默认会将参数放在请求体中，这里直接写即可
小程序代码也是一样的，当发起的时POST类型的请求时，默认会把参数放在请求体中
在实际开发中大概率不用写前端代码，只负责编写后台接口，但怎样才能知道前端请求是什么类型参数？
关于这点可以通过浏览器开发者工具的【网络】面板可以看出来，网络面板打开时会录制网页发起的所有请求
路径占位传参就不解释了，没啥好说的，这里介绍一下路径传参、表单传参和请求体传参
编写好路径传参的请求代码后切换到网络面板，点击发起请求：
编写好请求体传参的请求代码后切换到网络面板，点击发起请求：
编写好表单类型传参的请求代码后切换到网络面板，点击发起请求：
掌握了前后端交互的流程就可以正常开发网站了，这里推荐后端返回一套规定好的模板数据，否则某些情况可能会比较难处理，例如这个查询用户列表的接口：
该接口乍一看没毛病，拿到用户列表数据后返回给前端用于渲染，合情合理，可是如果后端业务逻辑有BUG可能会导致前端接收到的结果为空，这种情况下前端就需要判断，如果接收到的值为空，就提示请求出错，问题貌似已经解决，但是如果表中本来就没有任何数据的话有应该怎么处理
上述的就是最常见的一种比较头疼的情况，所以针对这种情况最好指定一套标准的返回模板进行处理
根据刚刚的举例来看，返回结果中应该有一个标识来判断该请求是否执行成功，如果执行失败的话还应该返回失败原因，响应给前端的数据会被转换为JSON数据，使用Map集合来返回最合适不过了
在后台接口编写完成后，一般情况下我们都需要进行测试，GET请求还好，浏览器直接就访问呢了，如果是POST请求还要去写前端代码就很烦，这里介绍一款接口调试工具ApiPost
你可能没听过ApiPost，但是你大概率听说过Postman，他们的用法几乎一致，且ApiPost是国人开发的免费的接口调试工具，界面中文很友好
这里也可以看出来，form表单传参其实也算在了请求体里面，只不过使用的是 multipart/form-data 类型的参数而已，而之前提到的请求体传参对应的就是 application/json
关于微信小程序开发前后端分离和小程序和java 怎么前后端分离的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。
