# edu_wx **Repository Path**: yimeng99/edu_wx ## Basic Information - **Project Name**: edu_wx - **Description**: 教务系统微信前端版本 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-05-08 - **Last Updated**: 2024-05-13 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # jwxt-app #### 项目简介 湖北民族大学教务系统——移动端 #### 框架简介 框架名称：vue-h5-template，若对框架不熟悉，可以进入框架官网查看 基于 vue3 + pinia + vite + （nutui or varlet or vant） + sass + viewport 适配方案 + axios 封装，构建手机端模板脚手架 框架详细的文档请[点击](https://sunniejs.github.io/vue-h5-template/)查看 #### 项目启动 + 需要提前安装好node环境，项目开发时候使用的是node16.17.0版本，其他版本若有冲突需要更换node版本，建议使用nxm版本管理器。 ![image-20230611231545460](C:\Users\15694\AppData\Roaming\Typora\typora-user-images\image-20230611231545460.png) + ~~包安装 ： npm/cnpm install （rar压缩包自带）~~ + 启动项目：npm run dev ![image-20230611231613131](C:\Users\15694\AppData\Roaming\Typora\typora-user-images\image-20230611231613131.png) #### 软件注意 + 软件架构说明：项目中参杂vue3的Composition API，ts语法，看不懂可以先浅浅学习，需要具备的重点技术包括不限于：vue3、vuex、axios、ts、vue代理配置等知识 + 其次注意项目用的代理，rar包里面所有的代理请求目前是指向的线上环境，若进行会影响系统数据的功能调试，建议代理改到测试环境，代理的配置地方在最后线上发布环节有介绍 + 建议代码中的算法能正常跑就不要轻易改算法，主要以功能扩展为主 #### 项目主要结构说明 ![image-20230612000545515](C:\Users\15694\AppData\Roaming\Typora\typora-user-images\image-20230612000545515.png) + dist： build打包生成文件，放到服务器上的 + public：vue中动态加载的图片文件不会自动打包到dist中，这里暂放需要动态加载的图片，build打包完成后直接放到dist下 + src + api：网络请求接口api + image： 图片资源 + layout： + router： 项目路由控制 + store： vuex数据状态管理器 + utils：主要是一个axios网络请求工具 ![image-20230611233158088](C:\Users\15694\AppData\Roaming\Typora\typora-user-images\image-20230611233158088.png) + views： 各个功能的页面（home主页） ![image-20230611233256917](C:\Users\15694\AppData\Roaming\Typora\typora-user-images\image-20230611233256917.png) #### 项目发布上线说明： + 1、配置线上环境代理： 在项目根目录的vite.config.ts文件中，修改三个代理地址为如下图片状态 ![image-20230611233755290](C:\Users\15694\AppData\Roaming\Typora\typora-user-images\image-20230611233755290.png) + 2、npm run build并等待生成打包文件 + 3、将需要动态加载的图片资源放在dist下 动态加载指使用双向绑定动态变化的图片url资源，这些资源打包的时候可能检测不到，导致上线之后，对应的图片子资源无法加载 + 3、将dist文件部署到线上，并进行上线之后的测试线上使用效果，在测试时候要注意想达到在微信中的使用效果需要在微信微服务体能测试的登录页面中复制全部url，我们需要好的是url中的token串 + 首先，进入微信微服务-教务系统，点一下个人中心tab，然后点两下返回，会看到登录界面，此时复制url并发送给电脑 ![image-20230611235431549](C:\Users\15694\AppData\Roaming\Typora\typora-user-images\image-20230611235431549.png) + 接着，我们把url的`?account=........`这一段拷贝出来 + 最后：如下放在ip:port后面就可以正常的测试、调试了，如下使用的本地环境进行的演示 ![image-20230611234539993](C:\Users\15694\AppData\Roaming\Typora\typora-user-images\image-20230611234539993.png) ### 调试环境 ~~~ windows nginx (powershell) 启动 start ./nginx 停止 ./nginx -s stop 在 nginx 中要配置 /jwfilepath 的虚拟目录，用于放 微信logo 和 体测上传的文件 学生照片路径 ~~~