# alarm-mgmt-vue

**Repository Path**: xiaobailongxx_lihanminxx/alarm-mgmt-vue

## Basic Information

- **Project Name**: alarm-mgmt-vue
- **Description**: 学习使用vuecli开始和管理一个项目，将这前写的告警、用户功能在这上面实现，做一个告警管理系统。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2021-04-08
- **Last Updated**: 2021-05-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<<<<<<< HEAD


# 背景

使用 vue-cli搭建项目并完成告警功能模块的开发。

主要功能：

* 可以增删改查告警历史
* 可以增删改查告警配置

技术栈：

* 后端使用之前已经用express搭好的接口
* 前端使用Vue + element

# 安装 



```cmd
$ git clone https://gitee.com/xiaobailongxx_lihanminxx/alarm-mgmt-vue.git
$ cd alarm-mgmt-vue
$ npm run serve
 
```

# Vue粗解

## 路由

访问 http://127.0.0.1:3000/alarm/list

这时候走到 route.js里找到设定好的路由alarm再找下在子路由 list。

![image-20210413091415333](C:\Users\Li Hanmin\AppData\Roaming\Typora\typora-user-images\image-20210413091415333.png)

这两个路由都有已经指定好的模块Alarm, AlarmList

```js

{
    path: '/alarm',
    meta: { title: 'Alarm' },
    component: Alarm,
    children: [{
            path: '',
            meta: { title: 'Alarm' },
            redirect: 'list'
        },
        ...
        {
            path: 'list',
            meta: { title: 'Alarm' },
            component: AlarmList,
            beforeEnter: (to, from, next) => {
                // console.log(this.$route)
                next()
            },
        },
        ...
    ]
},
```

这两个组件之前都有导入过，分别对应一个页面

```js
const Alarm = () =>
    import ('../views/Alarm.vue')
const AlarmList = () =>
    import ('../views/AlarmList.vue')
```

../views/Alarm.vue 里会放一个 <router-view/>标签，这个标签的作用就是用于显示子路由AlarmList的信息。

同样的Alarm.vue的信息之所以能展示是因为 app.vue里放了一个相同的标签，所以app.vue是所有页面的开始

```js
<template>
  <div class="alarm">
    <router-link to="/alarm/list">List</router-link> |
    <router-link to="/alarm/report">Report</router-link> |
    <router-link :to="{ path: '/alarm/config', query: { alarmId: 1 } }"
      >AlarmCfg</router-link
    >
    <button @click="btnClick">click</button>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: "Alarm",
  methods: {
    btnClick() {
      // console.log(this.$route);
    },
  },
};
</script>
```

../views/AlarmList.vue

```js
<template>
  <div class="alarm">
    <h3>可编辑表格</h3>
    <a href="#" @click="btnclick">AllAlarm</a> | <a href="#">Download</a> |
  </div>
</template>

<script>
export default {
  name: "AlarmList",
  data() {
    return {
      alarmId: 1,
      alarmName: "testalarm",
    };
  },
  methods: {
    btnclick() {
      console.log(this.alarmId);
    },
  },
};
</script>

```

app.vue

```js
<template>
  <div id="app">
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>
<style>
</style>

```



最终就会在页面上展示下面这样的

![image-20210413092306175](C:\Users\Li Hanmin\AppData\Roaming\Typora\typora-user-images\image-20210413092306175.png)



## slot-scope使用

使用 slot-scope 将子组件的数据传递给父组件

当子组件使用 :data绑定数据时，这个数据如果想在父组件里展示必须要使用 slot-scope

```js

<template>
  <div class="child">
    <h3>这里是子组件</h3>
    // 作用域插槽
    <slot :data="data"></slot>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      data: ["zhangsan", "lisi", "wanwu", "zhaoliu", "tianqi", "xiaoba"],
    };
  },
};
</script>
```

父组件时使用slot-scope将子组件的值传递给指定的变量，然后在就可以取出这个变量的数据 

```js
<template>
  <div class="father">
    <h3>这里是父组件</h3>

    <child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{{ item }}</li>
        </ul>
      </template>
    </child>

    <!--第四次使用：不使用其提供的数据, 作用域插槽退变成匿名插槽-->
    <child> 我就是模板 </child>
  </div>
</template>
<script>
import child from "@/views/TestChild.vue";
export default {
  components: {
    child,
  },
};
</script>
```

##  route-view和模块的区别

route-view是用显示子页的内容，所以app.vue里要放一个route-view，因为其他的全部是它的子页。

模块就是你想什么时候用就直接导入放在那里，这样来讲模块其实更灵活。





## vue 父子通信



父传子用需要在调用子模板时，在标签属性上把父的数据绑定上去。

```js
  <AddAlarmRecord
   :SonIsAddFormShow="PapaIsAddFormShow"
  \></AddAlarmRecord>
```

父模板里data里有定义好的 PapaIsAddFormShow 

   data() {    let list = [];    return {     statusOptionValue: this.$store.state.statusOptionValue,     alarmlist: list,     PapaIsAddFormShow: true,     input2: "Opend",     statusOptions: this.$store.state.statusOptionValue,    };   },  

 然后在子模板中通过prpos里设置参数来接这个绑定的值 

```js

export default {
 name: "AddAlarmRecord",
 props: ["SonHideAddForm"],
 data() {
  return {
  …
}
```

*注意**:* *爸爸绑定在哪个变量上，**propos**里的要放一样的名字，不然接不住。*

这个时候就可以在子模板里随便使用了，用this.SonHideAddForm就可以直接访问。

 =================

 **但是**如果你想在子模板里直接修改父传过来的变量，不好意思，给你个报错。

 void mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "secondlist"

 ### 方法一：

**父组件：**

想要通过子改父，这个东西得父同意且做好准备，所以在上面父调子的时候，需要再绑定一个动作SonHideAddForm，这个函数专门用来接收子传递过来的修改请求，并将已经定义好的函数给这个绑定动作。

```html
 <AddAlarmRecord     
 :SonIsAddFormShow="PapaIsAddFormShow"     @SonHideAddForm="PapaHideAddForm"    
 ></AddAlarmRecord>  
```

父组件里定义好了，val是准备接子组件传过东西
```js
  PapaHideAddForm(val) {
   this.PapaIsAddFormShow = val;
  },
```

**子组件：**
定义函数通过$emit去通过父组件执行函数 SonHideAddForm ，并将第二个参数做为值传递过去。
  hideAddForm() {     //这个SonHideAddForm是父组件绑定的名字，要相同也要加引号     // 第二个就是传过的的参数了     this.$emit("SonHideAddForm", false);    },  

设置触发
<el-button @click="hideAddForm">Cancel</el-button>
但是这个也有个问题，还没有做到双向绑定，当父组件里的值修改了，子不会再感知到了。 

### 方法二：还是使用vuex吧



# 功能模块

## 封装axios成API

封装AXIOS成request D:\vue\alarm\alarm-mgmt-vue\src\network\request.js

```js
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
const service = axios.create({
    baseURL: 'http://127.0.0.1:3000', // url = base url + request url
    timeout: 5000 // request timeout
})

service.interceptors.request.use(
    config => {
        config.headers['Content-Type']  =  'application/x-www-form-urlencoded;charset=UTF-8'
        return config
    },
    error => {
        console.log(error) // for debug
        return Promise.reject(error)
    }
)

service.interceptors.response.use(
    response => {
        const res = response.data
        return res
    },
    error => {
        console.log('err' + error) // for debug
        Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

export default service
```

封装成API D:\vue\alarm\alarm-mgmt-vue\src\api\alarm.js

```js
import request from '@/network/request'

export function fetchAlarmHis(query) {
    return request({
        url: '/alarm/getAlarmHis',
        method: 'get',
        params: query
    })
}

```

调用D:\vue\alarm\alarm-mgmt-vue\src\components\content\AlarmRecord.vue

```js
export default {
  name: "AlarmRecord",
  data() {
    const list = {};
    return {
         alarmlist: list,
    };
  },
  created() {
    fetchAlarmHis().then((response) => {
      this.alarmlist = response.data;
      console.log("this.alarmlist :>> ", this.alarmlist);
      console.log(" response :>> ", response);
    });
  },
};
```



## API测试

* 导入API
* 将API展示提供测试按钮
* 点击调用测试函数同时传递API实体，指的对应的函数 
* 在data里提前定议好参数，如果没有参数的填空，执行前先取参数

```js

<template>
  <div>
    api result test <button @click="btnclick">test</button>
    <ul>
      <li v-for="(item, key) in apiList" :key="key">
        <button @click="apitest(key, item)">apiTest</button> {{ key }}
      </li>
    </ul>

    <hr />
    <div>
      <p>
        {{ apiRes }}
      </p>
    </div>
  </div>
</template>

<script>
import {
  fetchAlarmHis,
  fetchList,
  fetchAlarmByID,
  fetchPv,
  createAlarm,
  updateAlarm,
  removeRecord,
} from "@/api/alarm.js";
export default {
  data() {
    return {
      test: "wo shi test",
      apiPara: {
        fetchAlarmHis: "",
        fetchList: "",
        fetchAlarmByID: "2",
        fetchPv: "",
        createAlarm: "",
        updateAlarm: "",
        removeRecord: "",
      },
      apiList: {
        fetchAlarmHis: fetchAlarmHis,
        fetchList: fetchList,
        fetchAlarmByID: fetchAlarmByID,
        fetchPv: fetchPv,
        createAlarm: createAlarm,
        updateAlarm: updateAlarm,
        removeRecord: removeRecord,
      },
      apiRes: {},
    };
  },
  methods: {
    btnclick() {
      // fetchAlarmHis().then((res) => (this.apiRes = res));
      console.log("test :>> ", this.apiList[1]);
    },
    apitest(apiName, apiBody) {
      console.log("start test API :>> ", apiName);
      // get the parameter
      console.log("this.apiPara :>> ", this.apiPara);
      let para = this.apiPara[apiName];
      console.log("API parameter:>> ", para);
      // execute api
      if (para === "") {
        apiBody().then((res) => (this.apiRes = res));
      } else {
        apiBody(para).then((res) => (this.apiRes = res));
      }
    },
  },
};
</script>

<style>
</style>
```



# FAQ

## url #模式改为成history模式

route/index.js里将mode设置为history，

修改前url里会有个#

http://localhost:8081/#/user

修改后没有

http://localhost:8081/user

```js
const router = new VueRouter({
    routes,
    mode: 'history'
})
```



## vue页面从url获取参数

app.vue

```js
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about" tag="button" replace>About</router-link> |
      <router-link to="/alarm">Alarm</router-link> |
      <router-link :to="'/user/' + userId">User</router-link> |
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return { userId: "123" };
  },
};
</script>
```



index.js 

```js
    {
        path: '/user/:userId',
        name: 'User',
        component: User
    }
```



user.vue

```js
<h3>i'm as user {{ this.$route.params.userId }}</h3>
```

##  引用通过props传递参数给模板

在模板上面设置一个参数path，是放在props里，props相当于是标签的属性，比如class id这些，绑定点击时将路由到这个path

navbarItem.vue

```js
<template>
  <div class="navitem" @click="navbarItemClick">
    <div v-if="!isActive">
      <slot name="item-icon"></slot>
    </div>
    <div v-else>
      <slot name="item-icon-active"></slot>
    </div>
    <div><slot name="item-text"></slot></div>
  </div>
</template>

<script>
export default {
  name: "navbarItem",
  props: { path: String },
...
  methods: {
    navbarItemClick() {
      // console.log("this.path :>> ", this.path);
      this.$router.replace(this.path);
    },
  },
};
</script>
```

在引用的时候怎么将path传过去？ 只需要在模块的标签里加复制语句即可

src\App.vue

```js
      <navbarItem path="/home">
     ...
      </navbarItem>
```



## vue-cli4怎么起别名

现在的vue-cli4上是没有vue.config.js这个文件的，需要在src的同级目录下新建一下

vue.config.js

```js

const path = require('path');        //引入path模块
function resolve(dir){
    return path.join(__dirname,dir)  //path.join(__dirname)设置绝对路径
}
module.exports={
    chainWebpack:(config)=>{
        config.resolve.alias
            //set第一个参数：设置的别名，第二个参数：设置的路径
            .set('@',resolve('./src'))
            .set('assets',resolve('./src/assets'))
            .set('components',resolve('./src/components'))
            .set('views',resolve('./src/views'))
    }
}
```



配置完成后需要重启项目，是退出后重新运行 npm run serve





## 报错Uncaught (in promise) 













=======
# vue-vuecli

#### 介绍
学习使用vuecli开始和管理一个项目，将这前写的告警、用户功能在这上面实现，做一个告警管理系统。

#### 软件架构
软件架构说明


#### 安装教程

1.  xxxx
2.  xxxx
3.  xxxx

#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)
>>>>>>> bf1f70463515c126a653edbe0a3b698ea65a527c