# sjhdlpbFront

**Repository Path**: dreamLP/sjhdlpbFront

## Basic Information

- **Project Name**: sjhdlpbFront
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-05-10
- **Last Updated**: 2021-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# template

> 此项目包含以下依赖:  
> `vue`, `vue-router`, `vuex`, `axios`, `js-cookie`, `bulma`, `vue-fontawesome`

## 项目结构

```structure
src/
├── apis/                 // 抽取出的与后台交互的 API 模块文件夹
|   └── delicacy.js       // API 模块样品
├── assets/               // 静态资源文件夹
├── components/           // 组件文件夹
|   ├── delicacy/         // 模态叠加层文件夹
|   |   ├── Create.vue    // 模态叠加层样品(创建)
|   |   ├── Detail.vue    // 模态叠加层样品(详情)
|   |   └── Modify.vue    // 模态叠加层样品(修改)
|   ├── Board.vue         // pc 端首页展示板
|   ├── NavBar.vue        // pc 端头部导航
|   ├── SideMenu.vue      // pc 端边侧菜单
|   └── TabBar.vue        // mobile 端底部导航
├── cookies/              // 抽取出的 cookie 操作模块文件夹
|   └── delicacy.js       // cookie 模块样品
├── store/                // vuex 文件夹
|   ├── modules/          // 数据操作模块文件夹
|   |   └── delicacy.js   // 数据操作模块样品
|   └── index.js          // vuex 入口文件，内涵 modules 绑定
├── validations/          // 数据验证模块文件夹
|   └── delicacy.js       // 数据验证模块样品
├── views/
|   ├── errors/           // 错误页面文件夹
|   |   └── NotFound.vue  // 404 not found
|   ├── home/             // mobile 和 pc 首页
|   ├── Delicacy.vue      // 列表页样品
|   ├── Function.vue      // mobile 端菜单列表
|   └── Home.vue          // 首页容器
├── App.vue               // 响应式根容器
├── main.js               // 程序主入口
└── router.js             // vue-router 路由文件
```

## 手册

添加模块简易流程为:  
`apis`  → `store/modules` → `views&components` → `router`
 
### 一、 api 接口

使用 [axios](https://github.com/axios/axios) http 功能包，与后台进行操作。

> 参考 `src/api/delicacy.js`

1. 引入并配置基础设置
 
    ```javascript
    import axios from "axios";
    
    const http = axios.create({
        baseURL: "http://example.com/delicacy", // 模块根路径
        headers: {
            "Content-Type": "application/json"  // http 请求格式
            ...                                 // oauth2 验证协议头亦添加再次
        }
    });
    ````

2. 为 api 模块写入基础 Restful API 请求

    ```javascript
    export default {
        getByPage(page, callback) {
            // 数据验证站位
            http.request({
                method: "GET",
                params: {
                    page: page
                }
            }).then(response => {
                let result = response.data;
                // 数据处理站位
                callback(result)
            })
        },
        getById(id, callback) {
            // 数据验证站位
            http.request({
                url: "/" + id,
                method: "GET"
            }).then(response => {
                let result = response.data;
                // 数据处理站位
                callback(result)
            })
        },
        create(data, callback) {
            // 数据验证站位
            http.request({
                method: "POST",
                data: data
            }).then(response => {
                let result = response.data;
                // 数据处理站位
                callback(result)
            })
        }
    }
    ```
    
3. 其它

    还可继续添加数据处理及数据验证功能，请参考样品 `src/apis/delicacy.js` 和 `src/validations/delicacy.js`。
    
### 二、 vuex 数据管理模块

使用 [vuex](https://github.com/vuejs/vuex) 数据管理功能包。

> 参考 `src/store/index.js` 和 `src/store/modules/delicacy.js`

1. 添加数据管理模块

    ```javascript
    import api from '../../apis/delicacy';

    // 模块内数据储存对象，类似于每个页面中的 data 和 props。
    const state = {
        all: []  // 储存模块内数据集
    };

    // 能直接通过 state 中获取的值，都在此对象内操作并返回。
    const getters = {
        getById: (state) => (id) => {
            // find() 方法，返回第一个符合条件的值。
            return state.all.find(item => item.id === id);
        }
    };

    // 同步数据操作对象。
    const mutations = {
        set(state, delicacies) {
            state.all = delicacies
        }
    };

    // 异步数据操作对象。
    const actions = {
        set({commit}) {
            api.getByPage(1, delicacies => {
                // commit() 方法中的字符串参数为 mutations 对象内的方法名。
                commit("set", delicacies)
            })
        }
    }
    ```

2. 把模块添加到 `src/store/index.js`，使其在初始化应用时被加载。

    ```javascript
    import Vue from 'vue';
    import Vuex from 'vuex';
    import example from './modules/example';

    Vue.use(Vuex);

    export default new Vuex.Store({
        modules: {
            ...
            example,
            ...
        }
    });
    ```
    
3. 其它

    数据操作模块内，也应添加数据验证，为数据验证做多重保险。参考 `src/store/modules/delicacy.js`。
    
### 三、页面和组件

使用 [bulma](https://github.com/jgthms/bulma) 轻 css 框架制作响应式页面。

> 参考 `src/views/Delicacy.vue` 和 `src/components/delicacy/*`

1. 列表页

    ```vue
    <template>
        <div class="container">
            <div class="columns is-multiline">
                <div class="column is-full-mobile is-one-third-tablet is-one-quarter-desktop" v-for="example in examples" :key="example.id">
                    <div class="card">
                        <header class="card-header">
                            <p class="card-header-title">{{example.title}}</p>
                        </header>
                        <div class="card-content">
                            <div class="content">
                                <p>{{example.content}}</p>
                            </div>
                        </div>
                        <footer class="card-footer">
                            <a class="card-footer-item">修改</a>
                            <a class="card-footer-item">分享</a>
                        </footer>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script>
        import {mapState} from "vuex";

        export default {
            name: "Example",
            computed: {
                // 使用计算属性，当数据管理模块中的数据发生改变时，界面也会跟着重新渲染。
                ...mapState({
                    examples: state => state.example.all
                })
            },
            created() {
                // 当页面创建完成时，异步从网络获取数据信息。
                // dispatch() 方法调用的是数据管理模块中的 actions 对象，参数是 `模块名/方法名`。
                this.$store.dispatch("example/set");
            }
        };
    </script>
    ```
    
2. 详情页、新建页和修改页

    请参考 `src/components/delicacy/*`。