【易售小程序项目】后端部署、Uniapp项目Web部署

news2024/9/22 19:34:46

Uniapp项目Web打包部署

为什么不部署小程序

因为小程序部署审核比较严格，还需要备案，而且我现在还没有完全开发完成（研究生开学之后，基本没有时间开发了），到时候再摸索一下吧。之所以还没有开发完成我就部署，是因为我那弱小的服务器已经时日不多了/(ㄒoㄒ)/~~，再不部署就白买了

在这里插入图片描述
在这里插入图片描述

Web打包前对项目进行调整

客户端的开发是基于uniapp，uniapp的一个优点是支持跨平台，一次开发可以多端适配，即开发一次可以打包成小程序、网站、安卓等程序，但并没有想象的这么简单，不同平台之间支持的组件、功能还是有所差距的，如下图所示。因为之前的开发是根据微信小程序来开发的，如键盘呼出事件的处理、websocket的连接方式、页面的导航条都需要调整

在这里插入图片描述

网站、小程序切换

对项目调整让其可以适配网站的前提是不能丧失原有对小程序的适配，因此不能直接修改项目的代码来适配网站，而是增加代码来完成对网站的适配，再增加一个切换开关来控制，这样在打包之前就可以控制是打包为小程序还是网站程序

增加constant.js来控制常量

在这里插入图片描述

// 类型 0：小程序 1：网站
const softType = 1;
// socket的ip:端口
const socketUrl = '23.23.147.200:8085';
// const socketUrl = '10.23.17.164:8085';

export default {
	softType,
	socketUrl
}
将js绑定到main.js的全局变量中

在这里插入图片描述

import Constant from "@/constant/constant.js"
Vue.prototype.Constant = Constant

后面直接使用this.Constant.softType来获取常量的值即可

在这里插入图片描述

WebSocket差异

【连接差异】

/**
 * 创建websocket连接
 */
initWebsocket() {
	// console.log("this.socket:" + JSON.stringify(this.$socket))
	// this.$socket == null，刚刚进入首页，还没有建立过websocket连接
	// this.$socket.readyState==0 表示正在连接当中
	// this.$socket.readyState==1 表示处于连接状态
	// this.$socket.readyState==2 表示连接正在关闭
	// this.$socket.readyState==3 表示连接已经关闭

	let socket = null;
	if (this.Constant.softType == 0) {
		socket = this.$socket;
	} else if (this.Constant.softType == 1) {
		socket = this.$store.state.ws;
	}

	if (socket == null || (socket.readyState != 1 && socket.readyState != 0)) {
		// --if--小程序类型
		let socketUrl = this.Constant.socketUrl;
		// console.log("socketUrl:" + socketUrl)
		if (this.Constant.softType == 0) {
			this.$socket = uni.connectSocket({
				url: "ws://" + socketUrl + "/websocket/" + uni.getStorageSync("curUser")
					.userName,
				success(res) {
					console.log('WebSocket连接成功', res);
				},
			})
			// 监听WebSocket连接打开事件
			this.$socket.onOpen((res) => {
				console.log("websocket连接成功")
				Vue.prototype.$socket = this.$socket;
				// 连接成功，开启心跳
				this.headbeat();
			});
			// 连接异常
			this.$socket.onError((res) => {
				console.log("websocket连接出现异常");
				// 重连
				this.reconnect();
			})
			// 连接断开
			this.$socket.onClose((res) => {
				console.log("websocket连接关闭");
				// 重连
				this.reconnect();
			})
		} else if (this.Constant.softType == 1) {
			// --if--网站类型
			socket = new WebSocket("ws://" + socketUrl + "/websocket/" + uni.getStorageSync(
					"curUser")
				.userName);
			// 网站类型
			//监听WebSocket连接打开事件
			let _that = this;
			socket.onopen = function() {
				console.log("websocket连接成功")
				// Vue.prototype.Constant.WebSocket = socket;
				console.log("常量socket:" + JSON.stringify(socket));
				store.commit("SET_WS", socket);
				// console.log("Vue.prototype.$socket:" + Vue.prototype.WebSocket)
				// 连接成功，开启心跳
				_that.headbeat();
			};
			socket.onmessage = function(msg) {
				console.log("接收到socket服务器的数据====" + JSON.stringify(msg))
			};
			// 连接异常
			socket.onerror = function() {
				console.log("websocket连接出现异常");
				// 重连
				_that.reconnect();
			};
			// 连接断开
			socket.onclose = function() {
				console.log("websocket连接关闭");
				// 重连
				_that.reconnect();
			};
		}
	}
},

【发送消息差异】

/**
 * 发送消息
 */
send() {
	if (this.messageInput != '') {
		let message = {
			from: this.me.userName,
			to: this.you.username,
			text: this.messageInput
		}
		// console.log("this.socket.send:" + this.$socket)
		// 将组装好的json发送给服务端，由服务端进行转发
		if (this.Constant.softType == 0) {
			this.$socket.send({
				data: JSON.stringify(message)
			});
		} else if (this.Constant.softType == 1) {
			// 网站类型
			let socket = this.$store.state.ws;
			socket.send(JSON.stringify(message));
		}
		this.total++;
		let newMessage = {
			// code: this.messageList.length,
			type: 1,
			content: this.messageInput
		};
		this.messageList.push(newMessage);
		this.messageInput = '';
		this.toBottom();
	}
},

【接收消息差异】

/**
 * 接收消息
 */
receiveMessage() {
	if (this.Constant.softType == 0) {
		this.$socket.onMessage((response) => {
			// console.log("接收消息：" + response.data);
			let message = JSON.parse(response.data);
			let newMessage = {
				// code: this.messageList.length,
				type: 0,
				content: message.text
			};
			this.messageList.push(newMessage);
			this.total++;
			// 让scroll-view自动滚动到最新的数据那里
			this.toBottom();
		})
	} else if (this.Constant.softType == 1) {
		// 网站类型
		let socket = this.$store.state.ws;
		let _that = this;
		socket.onmessage = function(response) {
			console.log("接收消息：" + response.data);
			let message = JSON.parse(response.data);
			let newMessage = {
				// code: this.messageList.length,
				type: 0,
				content: message.text
			};
			_that.messageList.push(newMessage);
			this.total++;
			// 让scroll-view自动滚动到最新的数据那里
			_that.toBottom();
		};
	}
},

监听键盘呼出

在这里插入图片描述
在这里插入图片描述

onReady() {
	// 监听键盘高度变化，以便设置输入框的高度(适用于小程序，不适用于网站)
	uni.onKeyboardHeightChange(res => {
		if (this.Constant.softType == 0) {
			let keyBoardHeight = res.height;
			this.chatSuitable(keyBoardHeight);
		}
	})
},

methods: {
	/**
	 * 键盘呼出（适用于网站）
	 */
	keyboardUp(value, height) {
		if (this.Constant.softType == 1) {
			this.chatSuitable(height);
		}
	},
	/**
	 * 键盘呼出时，聊天框自适应缩短
	 */
	chatSuitable(keyBoardHeight) {
		this.scrollViewHeight = `calc(100vh - 20px - 44px - ${keyBoardHeight}px)`;
		this.scrollToView = '';
		setTimeout(() => {
			this.scrollToView = 'message' + this.messageList[this
				.messageList.length - 1].id;
		}, 150)
	},
}

导航条

使用安卓手机打开网页时，上面已经有导航标题了，因此可以隐藏掉小程序的标题，不然重复的标题显得多余。

在这里插入图片描述

uniapp自带的标题无法直接使用代码来隐藏，uniapp只提供了设置导航栏的颜色和内容的方法（可能是我没有找到）

在这里插入图片描述
因此我只能想到直接修改配置文件pages.json的方式，通过设置navigationStyle为custom来实现，当需要切换成小程序来打包时，可以通过将custom替换为default来实现

在这里插入图片描述

打包

uniapp项目的打包h5程序较为简单，首先修改配置文件的运行的基础路径修改为./，作用是将程序运行的基础路径设为当前路径，而不是默认的根目录，使得程序在不同的环境中更加灵活，可以更方便地进行部署和迁移

在这里插入图片描述
修改完成之后，使用菜单栏下面的发行操作即可完成打包
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

部署

打包成功之后，将这两个文件拖入到服务器的文件夹中即可部署，我部署的方式使用宝塔面板，具体步骤可以学习SpringBoot+Vue 前后端分离 微服务项目 打包部署全流程（原始部署/宝塔部署）的前端部署下面的宝塔部署。

在这里插入图片描述
在这里插入图片描述

后端项目打包部署

后端项目基于若依管理系统进行开发

打包前准备

创建两个配置文件来分别存储开发环境和生产环境的配置，application.yml可以用来存储开发环境和生产环境的公共配置，例如mysql、redis、rabbitmq这些中间件，开发时可能是使用的本地电脑进行开发，部署时使用的是云服务器，因为开发环境和生产环境中中间件的ip和端口有所不同，因此使用两个文件来进行区分，方便切换

在这里插入图片描述
在application.yml中可以指定使用dev还是prod文件，当然，在打包之前并不需要对其进行修改，因为在运行jar包的时候还可以二次指定jar包运行的端口、使用的内存、使用的配置文件……，如java -Xmx256M -Xms256M -jar sss-enterprise-0.0.1-SNAPSHOT.jar --server.port=6002 --spring.profiles.active=prod

在这里插入图片描述

打包

打包直接使用maven工具里面的clean和install命令即可，因为若依管理系统已经在pom.xml中内置了打包配置

在这里插入图片描述
在这里插入图片描述

部署

本文使用的是若依的单机版本，并非微服务版本，因此只需要在服务器中启动admin的jar包即可，具体的操作步骤可以学习SpringBoot+Vue 前后端分离 微服务项目 打包部署全流程（原始部署/宝塔部署）

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1144055.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【计算机网络】应用层——HTTPS协议

【计算机网络】应用层——HTTPS协议

目录 HTTPS协议加密对称加密非对称加密 数据摘要（数据指纹）HTTPS安全问题对称加密非对称加密 证书客户端认证查看客户端证书 解决数据安全问题（引入证书） HTTPS协议 HTTP 协议内容都是按照⽂本的⽅式明⽂传输的. 这就导致在传输过…
阅读更多...
Promise 对象与 Promises/A+ 规范

Promise 对象与 Promises/A+ 规范

目录 前言 什么是 Promise 对象？ Promises/A 规范是什么？ 逻辑 示例 用法 结论 参考资料 前言 在现代JavaScript编程中，Promise对象是一种用于处理异步操作的重要工具。它们被广泛用于处理网络请求、文件读取、定时任务等异步操作。本…
阅读更多...
学习笔记---更进一步的双向链表专题~~

学习笔记---更进一步的双向链表专题~~

目录 1. 双向链表的结构🦊 2. 实现双向链表🐝 2.1 要实现的目标🎯 2.2 创建初始化🦋 2.2.1 List.h 2.2.2 List.c 2.2.3 test.c 2.2.4 代码测试运行 2.3 尾插打印头插🪼 思路分析 2.3.1 List.h 2.3.2 List.…
阅读更多...
一张图系列 - “kv cache“

一张图系列 - “kv cache“

我觉得回答这个问题需要知道3个知识点： 1、multi-head-attention是如何计算的？attention的数学公式？ kv cache是如何存储和传递的？ 2、kv cache 的原理步骤是什么？为什么降低了消耗？ 3、kv cache 代码模…
阅读更多...
Matlab神经网络工具箱——一个例子搞定神经网络算法

Matlab神经网络工具箱——一个例子搞定神经网络算法

本文用到的数据来自于matlab神经网络 数据的文件提取码以及链接会放在评论区 分析数据 这里大致是整个数据的样子，下面来分析数据： ①整个数据一共有401个输入，这里体现的也就是有401种吸光度 ②前五十组数据，既有输入也有输出&a…
阅读更多...
2023阿里云双十一服务器优惠价格87元/年，你敢信吗？

2023阿里云双十一服务器优惠价格87元/年，你敢信吗？

2023阿里云双十一服务器优惠价格87元/年，你敢信吗？确实是87元一年，轻量应用服务器2核2G3M带宽，不限制月流量，自带50GB系统盘。活动阿里云服务器网：aliyunfuwuqi.com/go/1111 阿里云轻量应用服务器2核2G3M带…
阅读更多...
逆向第一课---安装ADB工具，并使用夜神模拟器连接

逆向第一课---安装ADB工具，并使用夜神模拟器连接

1、安装ADB 如果安装了Android SDK可以直接去android_sdk/platform-tools/目录下使用ADB命令。 如果没有安装Android SDK，需要先通过下面的地址下载ADB https://adbdownload.com/ 根据自己的系统点击下载，我这里使用Windows系统，所以下载Wi…
阅读更多...
电商接口api数据比价接口推荐

电商接口api数据比价接口推荐

当前，受诸多因素的影响，经济下行，在日趋激烈的市场竞争中，很多企业也都面临着越来越大的生存压力，企业的盈利空间也逐渐被压缩。因此，越来越多的企业在控制成本方面更下功夫，这也就对企业采购提…
阅读更多...
SiC器件概念

SiC器件概念

来源：A SiC Trench MOSFET concept offering improved channel mobility and high reliability SiC MOSFET设计挑战 虽然碳化硅的使用由于是一种宽带隙材料而具有许多优点，但与硅也存在一些值得注意的差异，这导致在制造基于4H-SiC多晶型的Si…
阅读更多...
ASO优化之如何提高在本地搜索时的可见度

ASO优化之如何提高在本地搜索时的可见度

应用本地化是让我们的应用安装量、转化率实现增长的最佳策略之一。通过本地化，可以让我们的应用程序匹配更广泛的受众，甚至可以使其对不同国家/地区的用户更具吸引力。 1、如何使用搜索优化进行本地搜索？ 本地化实际上是应用搜索优化的一部分…
阅读更多...
公司电脑如何限制安装软件

公司电脑如何限制安装软件

公司电脑如何限制安装软件 安企神终端管理系统下载使用 在企业环境中，电脑已经成为企业中必不可少的办公工具，确保员工的生产力和公司的信息安全是至关重要的。为了实现这一目标，公司可能会限制员工在某些情况下安装软件或者由管理员来为终…
阅读更多...
Linux——文件权限属性和权限管理

Linux——文件权限属性和权限管理

文件权限属性和权限管理 本章思维导图： 注：本章思维导图对应的Xmid文件和.png文件都以传到“资源” 文章目录 文件权限属性和权限管理1. sudo提权和sudoers文件1.1 sudo提权和成为root的区别 2. 权限2.1 Linux群体2.1.1 为什么要有所属组2.1.2 修改文件…
阅读更多...
拥抱AI-ChatGPT:人类新纪元

拥抱AI-ChatGPT:人类新纪元

最近大模型通用智能应用持续发酵，各大科技公司都陆续推出了基于通用大模型的智能应用产品，典型的如OpenAI的ChatGPT、微软的BingChat、百度的文心一言、360的智脑、阿里的通义千问等。当然最火的要属于ChatGPT了，从去年年底推出到现在已经有很…
阅读更多...
模型工具实现数据库批量追加到空的数据库

模型工具实现数据库批量追加到空的数据库

一. 下载： http://dt1.8tupian.net/2/29913a50b1000.pg3二. 介绍：许多时候我们的作业数据库需要批量追加到标准的汇交数据库，手动一个层一个层的追加比较麻烦，本工具实现将空间图层和属性数据自动追加到标准空库。
阅读更多...
【psychopy】【脑与认知科学】认知过程中的面孔识别加工

【psychopy】【脑与认知科学】认知过程中的面孔识别加工

目录 实验描述 实验思路 python实现 实验描述 现有的文献认为，人们对倒置的面孔、模糊的面孔等可能会出现加工时长增加、准确率下降的问题，现请你设计一个相关实验，判断不同的面孔是否会出现上述现象。请按照认知科学要求，画…
阅读更多...
详细介绍如何使用 NeRF 进行 3D 体积渲染-附源码下载

详细介绍如何使用 NeRF 进行 3D 体积渲染-附源码下载

介绍 在此示例中，我们展示了 Ben Mildenhall 等人的研究论文 NeRF：将场景表示为用于视图合成的神经辐射场的最小实现 。等人。作者提出了一种巧妙的方法，通过神经网络对体积场景函数进行建模来合成场景的新颖视图。 为了帮助您直观地理解这一点，让我们从以下问题开始： 是…
阅读更多...
1819_ChibiOS的互斥信号与条件变量

1819_ChibiOS的互斥信号与条件变量

全部学习汇总： GreyZhang/g_ChibiOS: I found a new RTOS called ChibiOS and it seems interesting! (github.com) 1. 关于会吃信号与条件变量的全局配置提供了4个配置信息，分别是互斥信号的使能、互斥信号的递归支持、条件变量的使能、条件变量的超时使…
阅读更多...
jQuery图像查看插件Zoom.js

jQuery图像查看插件Zoom.js

效果图 图片点击放大，再次点击或者滚动窗口或者按 ESC 键即可恢复原始大小，非常流畅，使用方法也非常简单，引入zoom.js和zoom.css文件之后，对图片添加data-action"zoom"属性即可。 使用方法 1，将…
阅读更多...
【网络】详解http协议

【网络】详解http协议

目录 一、认识URLurlencode和urldecode 二、HTTP协议HTTP协议格式HTTP的方法HTTP的状态码HTTP常见Header 一、认识URL URL叫做统一资源定位符，也就是我们平时俗称的网址，是因特网的万维网服务程序上用于指定信息位置的表示方法。 urlencode和urldecode …
阅读更多...
21.10 Python 使用CRC32校验文件

21.10 Python 使用CRC32校验文件

CRC文件校验是一种用于验证文件完整性的方法，通过计算文件的CRC值并与预先计算的CRC校验值进行比较，来判断文件是否发生变化，此类功能可以用于验证一个目录中是否有文件发生变化，如果发生变化则我们可以将变化打印输出&#xff0c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023