# 社情民意管理系统frontend

**Repository Path**: olderbird/scapofront

## Basic Information

- **Project Name**: 社情民意管理系统frontend
- **Description**: 毕设之社情民意管理系统前台部分
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-04-15
- **Last Updated**: 2021-06-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 社情民意管理平台前端
引入vue插件moment

编写utils
```js
export function formatDate (date, fmt) {
    if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
    }
    let o = {
        'M+': date.getMonth() + 1,
        'd+': date.getDate(),
        'h+': date.getHours(),
        'm+': date.getMinutes(),
        's+': date.getSeconds()
    };
    for (let k in o) {
        if (new RegExp(`(${k})`).test(fmt)) {
            let str = o[k] + '';
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
        }
    }
    return fmt;
}

function padLeftZero (str) {
    return ('00' + str).substr(str.length);
}
```
页面中filters
```vue
    filters: {
    formatDate(time) {
      let date = new Date(time)
      return formatDate(date, 'yyyy-MM-dd')
    }
}
```
调用
```html
<mt-cell title="开始时间" :value="startDate | formatDate"></mt-cell>
```


## vue
## vuex
## vue-router
vue-router是Vue.js官方的路由管理器，它和 Vue.js 的核心深度集成，让构建单页应用变得易如反掌。包含的功能有：
+ 嵌套的路由/视图表
+ 模块化的、基于组件的路由配置
+ 路由参数、查询、通配符
+ 基于 Vue.js 过度平台的视图过度效果
+ 细粒度的导航控制
+ 带有自动激活的css class 连接
+ H5 历史模式或 hash 模式，在IE9中宏自动降级
+ 自定义的滚动条行为

我们是将菜单放在`Vuex`中，类似于放在内存里。而且我们现在是一个浏览器的应用。如果这时候用户在当前页面按了刷新按钮（F5），路由数据可能就被初始化的数据`routes:[]`覆盖。可能会出现菜单丢失的情况。如何解决菜单丢失的问题？这就是路由导航守卫的作用。
```js
router.beforeEach((to,from,next)=>{
  // 判断用户是否登录
  if (window.sessionStorage.getItem('tokenStr')) {
      initMenu(router,store);
      next();
  } else {
    // 判断是不是登录页
    next();
  }
});
```
>to:即将要进入的目标路由对象  
from：从当前导航要离开的路由（例如选项1到选项2：from‘选项1’to‘选项2’）  
next：如果没有next，就不会跳到下一个路由（参数：false-中断当前跳转）

## 中国地区选择器
>https://www.npmjs.com/package/element-china-area-data