# 石铁大漫研社迎新网站-手机网页端

**Repository Path**: shadowslark/stone-study-appWeb

## Basic Information

- **Project Name**: 石铁大漫研社迎新网站-手机网页端
- **Description**: 想了解该项目，请查看如何部署.md
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-03-04
- **Last Updated**: 2025-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 前提

如果想使用本项目，笔者希望你最少了解linux操作命令（以前有用过）、node.js、vue.js、uniapp（<s>这个好像不太需要，因为我也不太会</s>）、远程连接软件（例如finalshell、Xshell）。当然以上都不会的话会正确使用 www.baidu.com 也可以 : )



本项目使用node.js环境，基于vue3、uniapp编写，属于纯前端项目。后续拓展可以部署后端（比如常用的springboot/django），通过axios发送异步请求

## 关于项目的环境搭建与项目本机部署

#### node环境搭建

node部署教程参考csdn:[Node.js安装及环境配置超详细教程【Windows系统】_windows 安装nodejs-CSDN博客](https://blog.csdn.net/Nicolecocol/article/details/136788200)



我的node版本：

![2025-02-27-16-40-07-image.png](readmePic%2F2025-02-27-16-40-07-image.png)

建议和我保持一致，如果涉及多node版本建议提前安装使用nvm。

nvm部署教程：[window下安装并使用nvm（含卸载node、卸载nvm、全局安装npm）-CSDN博客](https://blog.csdn.net/HuangsTing/article/details/113857145)



#### HBuilderX与项目启动

下载HBuilderX，记好下载路径，在下载路径中打开HBuilderX.exe

在菜单栏的右上角选择“文件”--》“导入”--》“从本地目录导入”，选择对应文件夹（stone-study-appWeb）后点击选择文件夹，现在左侧目录如下图所示

![2025-02-27-16-34-37-image.png](readmePic%2F2025-02-27-16-34-37-image.png)

点击运行，选择运行到内置浏览器，如果缺少相关依赖，系统右下角会有对应提示，点击安装/继续之类的即可

![2025-02-27-16-35-10-image.png](readmePic%2F2025-02-27-16-35-10-image.png)

运行成功后效果类似下图

![2025-02-27-16-36-14-image.png](readmePic%2F2025-02-27-16-36-14-image.png)

本项目基于手机端，所以一般是使用的iphone678模式

![2025-02-27-16-36-42-image.png](readmePic%2F2025-02-27-16-36-42-image.png)

#### 项目概述与简单的快速修改

项目结构概述：本项目是一个非常非常简单的前端展示项目，如果你对前端技术有所了解可以看到这个项目的所有代码层几乎都集中在pages/index/index.vue，如果后续你想修改该代码，建议正规学习一下uniapp，推荐视频 https://www.bilibili.com/video/BV1Yg4y127Fp

笔者是后端javaer，所以前端写的既不美观又冗余，见谅 : )

![2025-02-27-16-43-26-image.png](readmePic%2F2025-02-27-16-43-26-image.png)

一些简单的快速修改：

1.图片从哪里来：cos即群友的cos照片，diary表示日常线下活动，mys表示群友吹水日常，mzhy即漫展合影照片，想要增改照片墙需先修改对应的照片位置

![2025-02-27-16-46-44-image.png](readmePic%2F2025-02-27-16-46-44-image.png)

2.在index.vue快速定位修改实现照片放入网站

打开编译器后按ctrl+F快捷键（？可能我设置了idea快捷键，其实不是这个。如果是这样那就在右上角的菜单栏点击查找再点击查找字符串（当前文件））在菜单处会弹出一个新的弹框

![2025-02-27-16-51-01-image.png](readmePic%2F2025-02-27-16-51-01-image.png)

输入aboutSlides，没错这里我偷懒了，没有标准命名，人是会变懒的 : (

aboutSlides是群友吹水日常

aboutSlides1是日常线下活动

aboutSlides2是cos照

aboutSlides3是漫展合影

想要新增只需要保持和文件内一致json格式即可

例如

{
image: '/static/mys/pic1.jpg',
title: '画画大触'
},





## 部署

### 1.测试版：内网穿透

推荐使用NATAPP(百度直接搜即可)

这个方法的问题是对外提供访问时，静态资源加载速度太慢，如果别人想访问这个网站要加载很久很久（非常久！）

### 2.实战版：阿里云/腾讯云等云服务器

简述：本项目通过将web发行到阿里云上，以nginx转发实现了对外公开。笔者这里使用finalshell实现的可视化远程操控阿里云服务器的linux系统

finalshell官网： https://www.hostbuf.com/

finalshell连接阿里云csdn参考： [阿里云服务器的购买与远程连接（ssh连接，使用finalshell软件）_finalshell购买-CSDN博客](https://blog.csdn.net/m0_46160970/article/details/109455472)

阿里云部署nginx教程参考： [如何在阿里云服务器快速搭建部署Nginx环境-阿里云开发者社区](https://developer.aliyun.com/article/1484837)

关于uniapp打包：HBuilderX中右上角菜单选择发行，发行到网站上

![2025-02-27-17-02-40-image.png](readmePic%2F2025-02-27-17-02-40-image.png)

网站域名输入你的阿里云服务器的公网域名

![2025-02-27-17-02-59-image.png](readmePic%2F2025-02-27-17-02-59-image.png)

发行完成后会在下方出现提示

![2025-02-27-17-03-55-image.png](readmePic%2F2025-02-27-17-03-55-image.png)

在文件夹中选择对应路径并返回上一级，将文件打包后通过finalshell传入阿里云服务器

![2025-02-27-17-04-24-image.png](readmePic%2F2025-02-27-17-04-24-image.png)

阿里云服务器先cd 到对应路径，例如我这里新建了一个test文件夹

就是先输入命令 cd /test进入test文件夹

![2025-02-27-17-06-10-image.png](readmePic%2F2025-02-27-17-06-10-image.png)


通过 unzip web.zip 实现解压，然后这里正常来说就可以在公网访问你的网站了（记得修改nginx的路由保证你的index.html被正确指向）



## 后记

如果有哪里不明白的欢迎来找我提问：天启（QQ：1790051360）