# In XUPT **Repository Path**: headsking/In-XUPT ## Basic Information - **Project Name**: In XUPT - **Description**: 在西邮项目前端代码，开发阶段请提交至dev分支！ - **Primary Language**: JavaScript - **License**: Not specified - **Default Branch**: develop - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 2 - **Created**: 2022-04-25 - **Last Updated**: 2022-04-25 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 在西邮项目项目文档（前端） ## 一、项目介绍 * 本项目是由西安邮电大学AllSpark工作室推出的在西邮app，是一款致力于方便在校学生生活交流的信息发布和工具类应用。 * 核心技术： * uniapp开发框架 * 图片缓存 * 消息本地存储 * jwt身份验证 * 已经实现的功能： * 登录页 * 登录（密码登录，短信登录） * 注册 * 修改密码 * 新鲜事页 * 帖子发布 * 帖子浏览 * 帖子点赞，收藏，投币 * 官方认证 * 消息页 * 分类展示消息 * 消息跳转至详情 * 我的页 * 个人信息展示 * 个人信息修改 * 账号密码设置 * 意见反馈 * 个人动态和收藏展示 * 关注及粉丝关注 * 搜索页 * 搜索历史、热搜 * 分类搜索 * 结果高亮 * 结果分页 * 帖子/文章详情页 * 添加/删除评论的实时刷新 * 评论的排序 * 帖子/文章/评论的点赞、投币、举报、删除 * 帖子/文章的收藏 * 圈子 * 创建圈子 * 圈子公告 * 圈内发帖 * 查看圈子成员 * 关注圈子 * 百宝箱 * 食堂（后台接口未对接好） * 社群汇总 * 社团集合 * 实验室 ## 二、项目架构 * 项目架构主要分为三个部分： * 组件目录(components) * 页面文件( pages ) * 公用方法和样式(common) * 入口文件和打包配置 ``` |-- In-XUPT #项目根目录 |-- components #组件目录 |-- com #公共组件 |-- BadBehaviorsAndProduct.vue #不良记录及产品介绍公用组件 |-- ErrorPage.vue #加载错误页面组件 |-- FansAndFollow.vue #关注和粉丝组件 |-- Level.vue #等级显示组件 |-- ReportAndDelete.vue #举报或删除帖子组件 |-- message #消息通知页组件 |-- AtMessages.vue #提到了我 组件 |-- Praise.vue #动态消息 组件 |-- ReplyBox.vue #评论/回复 组件 |-- SystemNotice.vue #系统通知 组件 |-- plugins #使用的第三方插件组件 |-- jyf-parser #富文本解析组件 |-- uni-fab #新鲜事页加号组件 |-- uni-nav-bar #餐厅页面顶部栏组件 |-- uni-popup #文章编辑页弹出框组件 |-- wyb-popup #帖子编辑页弹出框组件 |-- uni-load-more.vue #上拉加载更多组件 |-- postDetail #消息详情组件 |-- AcademicDetail.vue #文章详情组件 |-- CommentBox.vue #评论组件 |-- CommentEdit.vue #评论编辑组件 |-- summary #摘要组件 |-- AcademicSummary.vue #文章摘要组件 |-- ActivitiesSummary.vue #活动摘要组件 |-- CommunitySummary.vue #圈子摘要组件 |-- Notice.vue #公告栏组件 |-- NoticeSummary.vue #公告摘要组件 |-- PostingSummary.vue #帖子摘要组件（用于新鲜事页、圈子详情页） |-- PostingsSummary.vue #帖子摘要组件（用于个人信息详情页） |-- toolBox #百宝箱中组件 |-- SideList.vue #餐厅页侧边栏组件 |-- Tissue.vue #社团集合中社团摘要组件 |-- WindowContent.vue #餐厅窗口详情组件 |-- pages #页面文件 |-- Academic #文章详情页（历史遗留问题，原来叫学术页） |-- AcademicEdit #文章编辑页 |-- AccountSetting #账号设置页 |-- Activities #活动页 |-- BadBehavior #不良记录页 |-- ClubCollection #社团集合页 |-- CoinMall #硬币商城页（未开发） |-- Collections #收藏页 |-- Community #圈子页 |-- CommunityCollection #社群汇总页 |-- CommunityMembers #圈子成员列表页 |-- CourseList #课程表页（未开发） |-- CreatCommunity #创建圈子页 |-- EachCommunity #圈子详情页 |-- ExpTopList #经验榜页（未开发） |-- FansAndFollow #粉丝和关注页 |-- FeedBack #反馈页 |-- Interest #新鲜事页 |-- Live #动态页 |-- Login #登录页 |-- Messages #消息通知页 |-- Mine #我的页 |-- MyInformation #个人资料页 |-- NoticeEdit #公告编辑页 |-- NoticeList #公告列表页 |-- OthersInformation #他人信息详情页 |-- Posting #帖子详情页 |-- PostingEdit #帖子编辑页 |-- Product #产品介绍页 |-- Restaurant #餐厅页 |-- Search #搜索页 |-- SpareClassroom #空教室页（未开发） |-- Theme #主题设置页（未开发） |-- Tools #百宝箱页 |-- common #公用js文件css文件，图标库等 |-- checkappupdate.js #检查更新函数（第三方组件） |-- config.js #全局配置文件 |-- in-xupt-function.js #公用函数文件 |-- g-style.less #全局公用样式文件 |-- iconfont.css #图标库样式文件 |-- iconfont.ttf #图标字体ttf文件 |-- static #静态资源文件目录 |-- App.vue #全局vue入口文件 |-- pages.json #全局页面配置文件 |-- vue.config.js #打包配置文件 |-- unpackage #不打包的资源目录 |-- .gitignore #不提交到库中的文件配置 ``` ## 三、开发者使用指南 ### 3.1 全局样式和字体图标 * 我们将==全局的样式==放在common目录下的g-style文件中，文件中带有`g-`开头的样式都是在需求文件中规定的全局样式。==字体图标==放在common目录下的iconfont.css文件中。 * **全局样式规定说明**： * `@g-background`：全屏背景色 * `@g-blue`：蓝色字体颜色，如标签中使用的颜色等 * `@g-pink`：主题颜色 * `@g-gray`：灰色字体 * `@gray-line`：灰色线条 * 后续如果需要添加新的全局样式，请使用相同的命名格式。 * 除此之外还保留了uniapp提供的一些基本样式。 * **全局样式的使用**： * 将style的lang属性设置成less，全局的样式文件中的样式可以被直接使用 * 只需要在页面或者组件中像使用css变量一样使用即可，例如：`background-color: @g-background` * **字体图标的使用**： * 已经在App.vue中引用了iconfont.css文件了，所以可以在项目的其他位置直接使用iconfont图标。 * 具体来说是创建一个text标签添加class，比如说我要使用图标1，则可以创建如下标签：``。 * 查图标序号的方法：对照下图，找到图标的十六进制码，在iconfont.css中寻找对应的类名，例如图标1对应的十六进制码是`&#e603`则在iconfont中找content为`"\e603"`的类名，其类名为`inxupttubiao1`，text的类名就应该是这个，同时务必记得将`inxupt`这个公共类名加上 ![image-20201118093806828](https://zaixiyou.oss-cn-beijing.aliyuncs.com/others/icons.png) * 字体图标的添加，请联系项目前端负责人添加新的字体图标，因为更新字体图标需要在阿里图标库进行更新，对应要更新ttf文件。 ### 3.2 全局公用函数 #### 3.2.1 公用函数的使用方法 * 现有的公用函数都封装在了common目录下的in-xupt-functions.js文件中了，当需要使用的时候请在页面或者组件的script标签下引入。例如我要使用请求方法，则添加如下代码`import { _ajax } from '../../common/in-xupt-functions.js'`，其中的路径请使用相对路径。在方法中调用`_ajax`方法即可，使用和`axios`即可 #### 3.2.2 函数说明 * `_ajax(options, fromInterest)` * 函数功能：向后台请求数据，并自动带上token，当没有token或者token过期的时候会根据后台返回的状态码进行相应的提示。 * `options`：必选参数，其中配置了请求的方法、url、post的requestBody。 * `fromInterest`：选填参数，表明了是否从新鲜事页发出的请求，如果是从新鲜事页发出的请求，则在后台返回的状态码`res.data.status`为110或109（即提示未登录或token过期时），不弹窗提示。 * `insertData(index, datas, that)` * 函数功能：打开对应的数据库，向数据库中写入数据。 * `index`：必选参数，需要打开的数据库在数据库列表中的索引。 * `datas`：必选参数，需要插入数据库的数据。 * `that`：必选参数，函数执行的上下文。 * `opdb(dbName, path)` * 函数功能：在操作数据库之前，先打开数据库的操作。 * `dbName`：必选参数，需要打开的数据库的名称。 * `path`：必选参数，数据库的路径。 * `solveNum(num)` * 函数功能：格式化显示点赞、投币、收藏、评论数量。 * `num`：必选参数，需要格式化的数字。 * `solveTime(time)` * 函数功能：格式化显示日期。 * `time`：必选参数，输入的时间戳 。 ### 3.3 其他函数及配置 * 还有一个`checkappupdate.js`文件，它是用来检查app的更新使用的。关于它的参数说明，在文件的开头中有描述。 * `config.js`文件描述了app使用的接口，里面有两个BaseUrl，可以用来切换生产或开发环境。 * 在`PCC.js`文件中定义了点赞投币收藏的函数，可以在页面中引入pcc, `import { pcc } from '../../common/pcc.js`即可