# lovefront

**Repository Path**: wyblovecoding/lovefront

## Basic Information

- **Project Name**: lovefront
- **Description**: 誓言上链项目的前端代码
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-15
- **Last Updated**: 2022-02-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, JavaScript

## README

# lovefront
----
## 项目介绍
    誓言上链的前端代码，目前只做了页面的基本样式

----
## Project setup
```
npm install 
```

### Compiles and hot-reloads for development
```
npm run serve / vue-cli-service serve
```

### Compiles and minifies for production
```
npm run build / vue-cli-service build
```

### Lints and fixes files
```
npm run lint / vue-cli-service lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).


----
## src结构（源码结构）
* /src/api: 封装向后端发起的http请求
    * admin: 跟管理员业务相关的请求
    * user: 跟用户业务相关的请求
* /src/assets: 项目静态资源
* /src/components: 项目页面核心组件
    * admin: 管理员相关核心组件
    * user: 用户相关核心组件
* /src/route: 基于vue-router的项目路由
* /src/static: 项目静态资源
    * css: 存放项目公共css
    * img: 存放项目的图片
* /src/store: 基于Vuex的项目全局存储
* /src/utils: 项目工具函数, 比如log、日期时间函数等文件
    * dateAndTime.js: 封装日期时间相关方法 
    * log.js: 封装输出方法
* /src/views: 项目公共组件, 比如固定的导航栏、404页面等
    * NotFound.vue: 404页面
* /src/APP.vue: 项目入口文件, 用于将项目全局存储加入到session中
* /src/main.js: 项目核心入口文件, 用于初始化Vue实例、导入包和插件等

----
## 前端路由
### 系统模块
* /index: 系统首页, 为用户和游客提供誓言列表功能, 为用户提供添加誓言功能和查看誓言详情功能
* /advice: 意见反馈页面, 为用户和游客提供意见反馈功能
* /login: 系统登录页面, 为用户提供系统登录功能
* /register: 系统注册页面, 为游客提供系统注册功能


### 管理员模块
* /admin: 管理员登录页面, 为管理员提供管理员登录功能
* /admin/contentReview: 内容审核机制页面, 为管理员提供屏蔽词添加、查看、修改和删除功能
* /admin/suggestion: 意见查看与处理页面, 为管理员提供意见查看、处理和删除功能

----
## 前端交互流程图 => 前端业务核心1
### 系统首页交互流程图

### 系统意见反馈交互流程图

### 系统登录交互流程图

### 系统注册交互流程图

### 管理员登录交互流程图

### 内容审核机制交互流程图

### 意见查看与处理交互流程图



----
## 前端组件分离 => 前端业务核心2
### 一、页面公共组件抽离到views中
* 系统首页导航栏
* 管理员导航栏
* 分页组件

### 二、项目全局css配置
* 1、/src/static/css/public.css代码理解并注释
* 2、main.js中导入上述css文件供全局使用
* 3、删除所有组件中的css代码测试上述全局css配置

### 三、store组件分离
    参考: https://vuex.vuejs.org/zh/guide/structure.html中的架构对
    store组件进行分离，并进行测试，确保分离后的全局存储可以正常使用

----
## 前端业务实现 => 前端业务核心3
### 一、页面移动适配 => 用户端页面适配
    elementUI如何实现移动适配? 肯定有通用的解决方案（套路） 查一下这个套路
    然后实现页面在PC端和移动端的完美切换展示

### 二、前端组件熟悉
    elementUI常用组件熟悉一下 组件是如何绑定数据、如何关联数据?
    清楚Vue的mvvm模式与前端组件数据绑定之间的联系

### 三、api请求封装
    待后端提供api接口后，在/src/api目录下写js代码向后端的api接口
    发起相应请求（get/post/put/delete等）提交数据或获取数据

### 四、前端流程控制
    基于上述交互流程图在/src/components实现核心的业务逻辑