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

2023-11-08 05:59

本文主要是介绍【易售小程序项目】后端部署、Uniapp项目Web部署,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • Uniapp项目Web打包部署
    • 为什么不部署小程序
    • Web打包前对项目进行调整
      • 网站、小程序切换
        • 增加constant.js来控制常量
        • 将js绑定到main.js的全局变量中
      • WebSocket差异
      • 监听键盘呼出
      • 导航条
      • 打包
      • 部署
  • 后端项目打包部署
    • 打包前准备
    • 打包
    • 部署

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的方式,通过设置navigationStylecustom来实现,当需要切换成小程序来打包时,可以通过将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工具里面的cleaninstall命令即可,因为若依管理系统已经在pom.xml中内置了打包配置

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

部署

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

在这里插入图片描述

这篇关于【易售小程序项目】后端部署、Uniapp项目Web部署的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/368213

相关文章

闲置电脑也能活出第二春?鲁大师AiNAS让你动动手指就能轻松部署

对于大多数人而言,在这个“数据爆炸”的时代或多或少都遇到过存储告急的情况,这使得“存储焦虑”不再是个别现象,而将会是随着软件的不断臃肿而越来越普遍的情况。从不少手机厂商都开始将存储上限提升至1TB可以见得,我们似乎正处在互联网信息飞速增长的阶段,对于存储的需求也将会不断扩大。对于苹果用户而言,这一问题愈发严峻,毕竟512GB和1TB版本的iPhone可不是人人都消费得起的,因此成熟的外置存储方案开

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来,一站式有声阅读平台听书系统 🌟&nbsp;开篇:遇见未来,从“智听”开始 在这个快节奏的时代,你是否渴望在忙碌的间隙,找到一片属于自己的宁静角落?是否梦想着能随时随地,沉浸在知识的海洋,或是故事的奇幻世界里?今天,就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统,它正悄悄改变着我们的阅读方式,让未来触手可及! 📚&nbsp;第一站:海量资源,应有尽有 走进“智听

阿里开源语音识别SenseVoiceWindows环境部署

SenseVoice介绍 SenseVoice 专注于高精度多语言语音识别、情感辨识和音频事件检测多语言识别: 采用超过 40 万小时数据训练,支持超过 50 种语言,识别效果上优于 Whisper 模型。富文本识别:具备优秀的情感识别,能够在测试数据上达到和超过目前最佳情感识别模型的效果。支持声音事件检测能力,支持音乐、掌声、笑声、哭声、咳嗽、喷嚏等多种常见人机交互事件进行检测。高效推

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用,主要通过Java EE(Enterprise Edition)平台来实现。  主要特点和技术包括: 1. Servlets和JSP:     Servlets 是Java编写的服务器端程序,用于处理客户端请求和生成动态网页内容。     JSP(JavaServer Pages)

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点:弱密码字典爆破 四种方法:   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩,我们先查看源代码

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

EMLOG程序单页友链和标签增加美化

单页友联效果图: 标签页面效果图: 源码介绍 EMLOG单页友情链接和TAG标签,友链单页文件代码main{width: 58%;是设置宽度 自己把设置成与您的网站宽度一样,如果自适应就填写100%,TAG文件不用修改 安装方法:把Links.php和tag.php上传到网站根目录即可,访问 域名/Links.php、域名/tag.php 所有模板适用,代码就不粘贴出来,已经打