微信小程序前后端分离怎么实现

Posted 2023-03-22

微信小程序前后端分离的主要实现方式是将前端和后端的代码逻辑分开，前端负责展示和交互，后端负责数据处理和逻辑控制。下面简单介绍一下微信小程序前后端分离实现的一些关键步骤：

1. 前端代码开发：使用微信小程序开发者工具或其他工具，开发出前端的界面、功能、逻辑代码等。

2. 后端接口开发：后端负责提供API接口，承担数据处理和逻辑控制等任务。采用RESTful API 或GraphQL API 形式提供前端需要的数据接口。

3. 前后端接口对接：在前端代码中，需要对后端提供的接口进行调用，获取数据进行展示，完成前后端交互。

4. 服务端部署：将后端代码部署到服务器上，在服务器上运行后端代码，使得前端发起请求后能够得到正确的数据返回。

5. 网络安全和数据安全：在前端和后端的实现过程中，需要注意网络安全和数据安全的问题，保证通信过程中的安全以及数据的保密性和完整性。

以上是微信小程序前后端分离实现的一些关键步骤，需要注意的是，该过程需要前端和后端开发人员进行密切协作，并进行适当的测试和调整，以保证整体的实现效果和性能。 参考技术A 微信小程序前后端分离可以通过以下步骤来实现：

1. 前端使用框架如Vue、React等，通过AJAX或fetch等方式向后端发送请求，获取数据并展示。

2. 后端使用RESTful API接口提供服务，将数据以JSON格式返回给前端。后端可选用Node.js、Spring Boot、Django等框架实现。

3. 在小程序中使用wx.request() API来发送请求和接收响应。前端需要处理好请求参数、请求头、请求体等内容，并对响应进行解析和处理。

4. 部署方面，可以将前端部署到静态文件服务器上，将后端部署到云服务平台，例如阿里云、腾讯云等。

5. 安全性方面，需要注意前端的安全问题，尤其是防止XSS攻击；同时也要注意后端的安全问题，如SQL注入、身份验证等。

总之，微信小程序前后端分离需要前后端协同开发，具有良好的接口设计和文档说明，以及严格的安全措施，才能实现高效、稳定和安全的应用 参考技术B 微信小程序前后端分离可以通过Restful API接口实现。首先，前端页面由小程序框架进行搭建，并定义数据结构，接口请求，以及用户交互等；其次，后端项目服务器端部署实现RESTful API接口，提供各种功能的支持和操作；最后，小程序客户端和服务器端建立联系，实现前后端分离，从而实现小程序前后端分离开发。 参考技术C 微信小程序前后端分离实现的主要原理是：利用微信内置的javascript SDK，使微信小程序前端与后端实现了无缝连接，从而实现了前后端分离的效果。

前端代码通过微信小程序提供的JavaScript SDK接口，可以实现和后端API的交互，来获取所需的数据，从而实现小程序功能的展示和操作。

后端API是一段独立的服务程序，使用HTTP协议向前端发送JSON格式的响应数据，后端API可以实现前端所需要的各种数据处理，比如查询数据库，处理数据等。

通过前后端分离，微信小程序可以更快速地实现业务开发，前端可以更加专注于页面的展示和操作，而后端可以完成对数据的处理，从而提高了小程序开发的效率和用户体验。 参考技术D 微信小程序前后端分离的实现，主要是通过前后端分离的技术，来实现微信小程序的前端和后端的分离。

前端部分主要是实现前端框架，例如Vue，React，Angular等，实现前端页面的展示，框架中提供了很多组件，可以快速开发页面，框架中也有很多API，可以实现页面的交互，和数据的获取。

后端部分，主要是实现数据的存储，通过后端语言，例如Node.js，php，Python等，实现服务器的搭建，实现数据库的创建和数据的存储，以及实现接口的设计，从而实现前端数据的获取。

实现微信小程序前后端分离，需要前端和后端开发人员配合，前端人员实现页面的搭建和交互，后端实现数据的存储和接口的设计，两者配合完成微信小程序前后端分离的实现。

若依前后端分离发布富文本框内容 | uni-app微信小程序展示富文本框内容

微信小程序端引入富文本样式
富文本提交图片json error

一、展示示例：

1.PC端前端发布界面

可以设置文字大小，居中，可以插入图片，设置图片大小，居中。

2.小程序端展示

二、基于若依框架踩坑和实现

1.数据库字段设计

2.利用若依框架代码生成

在定义的富文本框字段【显示类型】需要选择【富文本控件】

3.富文本框添加图片踩坑

3.1

**遇到问题：**生成代码后会在添加列表的弹框中出现富文本框，但是在富文本中上传图片的时候会显示json错误，无法上传图片包括富文本下面上传封面图片的时候也会出现无法上传图片的情况。
解决方法：
在application.yml文件中把不做仿xss攻击的路径加上
来源：
富文本提交图片json error

3.2

遇到问题：
富文本下面上传封面图片的时候会出现无法上传图片的情况，图片闪一下就消失了。
解决办法：
把此文件中的这一段注释掉即可。

3.3

**遇到问题：**富文本框中的图片插入后过大，没办法改变大小
**解决办法：**通过阅读博客【若依(ruoyi)前后端分离 quill-editor 实现图片上传拖拽修改图片大小】解决
若依(ruoyi)前后端分离 quill-editor 实现图片上传拖拽修改图片大小

具体解决方法：
步骤1：在vue.config.js 文件中添加 一下内容
var webpack = require('webpack');
plugins: [ new webpack.ProvidePlugin( 'window.Quill': 'quill/dist/quill.js', 'Quill': 'quill/dist/quill.js' ), ]

步骤2：
在terminal终端命令行输入：

npm install quill-image-drop-module --save
npm i quill-image-resize-module --save 
npm install quill-image-extend-module --save

步骤3：在一下内容按照图片位置放在指定位置

import  ImageDrop  from 'quill-image-drop-module'
Quill.register('modules/imageDrop', ImageDrop);
import  ImageExtend  from 'quill-image-extend-module'
// quill-image-resize-module该插件是用于控制上传的图片的大小
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageExtend);
Quill.register('modules/imageResize', ImageResize);

imageDrop: true,      //图片拖拽
          imageResize: // 图片缩放比例
            displayStyles:
              backgroundColor:'black',
              border:'none',
              color:'white'
            ,
            modules:['Resize','DisplaySize', 'Toolbar'] // Resize 允许缩放， DisplaySize 缩放时显示像素 Toolbar 显示工具栏
          ,

以上亲测可用。

4.基于uni-app的微信小程序端展示富文本框

4.1首先用.js文件从后端获取数据

export function listHealthyLife(query) 
  return request(
    url: '/system/healthyLife/list',
    method: 'get',
    params: query
  )

4.2新建页面，不要忘记在page.json中注册
新建列表页面：

<template>
  <view class="page">
    <view class="box_1">
      <view class="list_1">
        <view class="list-items_1-0" v-for="(item, key) in listHealthyLife" :key="key"  @click="showDetails(item.imageText)">
          <view class="group_6-0">
			  <image class="image_2-0" :src="item.homePage" mode="aspectFill"></image>
            <!-- <img src="D:\\ruoyi\\uploadPath\\upload\\2022\\06\\21\\11.jpg" class="image_2-0"></img> -->
            <view class="text-wrapper_3-0">
              <text lines="1" class="text_4-0">item.title</text>
              <text lines="1" class="text_5-0">item.updateTime</text>
            </view>
          </view>
        </view>
        <uni-pagination style="margin-top: 50rpx;" v-show="total>0" :total="total" :current="current" :pageSize="pageSize" @change="handlePage">
        </uni-pagination>
      </view>
    </view>
  </view>
</template>
<script>
	import listHealthyLife from "@/api/system/healthyLife.js"
export default 
  data() 
    return 
      constants: ,
	  listHealthyLife: [],
	  // 分页参数
	  total: 0,
	  current: 1,
	  pageSize: 7,
    ;
  ,
  created()   
  this.getList();
  ,
  methods: 
	  getList() 
	  	listHealthyLife(pageNum: this.current, pageSize: this.pageSize).then(response => 
	  		this.listHealthyLife = response.rows;
	  		this.total = response.total;
	  		console.log(this.total)
	  	);
	  ,
	  	  // 触发跳转
	  	  showDetails(index) 
	  		uni.navigateTo(
	  		url: '/pages/jiankangshenghuo/details?detail='+encodeURIComponent(JSON.stringify(index))
	  		);
		  // 分页点击事件
		  handlePage(params) 
		  	console.log(params)  //可以打印看看params
		  	this.current = params.current;
		  	this.getList() // 点击的时候去请求查询列表
		  ,
  
;
</script>

新建详情页面：

<template>
	<view class="page">
		<view class="friendsCircle-content">
			<rich-text :nodes="article" class="ql-editor"></rich-text>
		</view>
	</view>
</template>
<script>
	import '@/components/quillCSS/quill.bubble.css'
	import '@/components/quillCSS/quill.core.css'
	import '@/components/quillCSS/quill.snow.css'
	export default 
		components: 
		    uParse  //注册组件
		  ,
		data() 
		  return 
			      article:'',
		  ;
		,
	onLoad: function (option)  //option为object类型，会序列化上个页面传递的参数
		 this.article=JSON.parse(decodeURIComponent(option.detail));
		 console.log(this.article)
		,
		methods:
		
	
</script>

**遇到问题：**但是此时，会有的富文本样式显示不出来的情况，所以需要再修改一下
解决办法：
步骤1：
在ruoyi-ui中找到quill源文件，在dist目录下可以看到
quill.bubble.css
quill.core.css
quill.snow.css
以上三个文件，把这三个文件复制到一个文件夹中，打开这三个文件把所有带*号的部分都删除
步骤2：
在微信小程序详情页面应用这三个文件

/*Vue-Quill-Editor样式*/
@import 'mdui/quill.bubble.css';
@import 'mdui/quill.core.css';
@import 'mdui/quill.snow.css';

步骤3：
在小程序富文本中加入 class=“ql-editor”，如下：

<rich-text :nodes="article" class="ql-editor"></rich-text>

再次运行即可。

参考
Vue-Quill-Editor编辑器的富文本，在uniapp开发的小程序显示错误