工作日记（十二）：完整项目开发之完美解决测试时vue跨域与mounted不执行问题

2020.7.22

今日继续开发前端。

顺便一提，前端用的vue框架是：

 

vue-element-admin（elementUI）

 

今日前端需要与后端进行测试了（还不算正式联调，只在本地测试），因此解决了前后端分离时vue与本地项目端口不一致导致跨域无法访问的问题，具体如下：

一、完美解决测试时vue跨域问题(亲测可用)：

1.修改vue.config.js文件

将【项目/vue.config.js】文件中的devServer标签的内容改为：

devServer:{
  port: port,
  open: true,
  overlay: {
    warnings: false,
    errors: true
  },
  //配置代理
  proxy: {
    "/": {
          target: "http://127.0.0.1:8089", //本地后台路径
          changeOrigin: true
    }
  }

},

2.修改.env.development文件

将【项目/.env.development】文件中的VUE_APP_BASE_API改为：

#VUE_APP_BASE_API = 'dev-api'
VUE_APP_BASE_API = 'http://127.0.0.1:8089'

3.修改article.js文件

（1）在【项目/src/api/article.js】文件中新增测试用的模板请求方法，例如：

export function getListPost(query){
  return request({
    url: 'http://127.0.0.1:8089/list',
    method: 'post',
    data: query
  })
}

*注意，这个方法是【post】方法，使用【data】字段，发送的是json格式的数据（似乎被封装好了，自带contentType，大概）

（2）如果要用键值对的形式传参，可以这样写：

export function getListGet(query){
  return request({
    url: 'http://127.0.0.1:8089/list',
    method: 'get',
    params: query
  })
}

*注意，这个方法是【get】方法，使用【params】字段，发送的是正常的键值对格式的数据。

4.在后台Controller.java类上加注解@CrossOrigin

这个注解可以加在整个类上，相应的其中的方法就都支持跨域了。（注意不要提交svn，只是自测用的，生产上不用这个注解，应该）

5.开始测试

在前端使用刚才写好的getListPost（getListGet）方法，即可获取到本地启动的不同端口的后端数据了。

二、使用dialog显示其它页面时mounted只执行一次的问题

本人想实现一个效果，在第一个页面使用el-dialog展示第二个页面；当第二个页面出现时，便自动执行某个方法；

于是在第二个页面的mounted标签中写了需要自动执行的方法；

但是出现了mounted方法只执行一次的问题，只有首次dialog出现时执行一次，之后关闭并重新打卡dialog，mounted方法都不执行了；

这不符合需求。

因此通过百度发现，第一个页面的dialog标签外需要再嵌套一个div才可以，如下：

<div v-if="isShowDialog">
  <el-dialog :visible.sync="isShowDialog" append-to-body>
    <mypage @close="myfunction" />
  </el-dialog>
</div>

三、其余vue问题与解决办法

1.如果希望el-input标签变为只读模式（不能写，但是可以复制），可以用这段代码：

<el-input v-model="this.id" readOnly></el-input>

只要在标签内直接加【readOnly】就可以了，不需要在data中声明相应的变量。

2.有一个需求，要完成数据的"编辑"页与"详情"页；因此本人将这两个页合并为一个页面.vue了；区别就是el-input是否有readOnly，以及加了一些【v-if】决定隐藏与展示的标签。

3.vue中冒号【:】的用法：

有些标签中有【label】字段，例如：

<el-form-item label="名称">
  <el-input v-model="this.name"></el-input>
</el-form-item>

此时页面中会出现"名称"的标签；

如果想让这个标签的名字按照变量内容显示，可以这样写：

<el-form-item  :label="this.name">
  <el-input v-model="this.name"></el-input>
</el-form-item>

增加了冒号，vue就会按照变量的值显示这个标签的名称，对应的变量如下：

data: function(){
  return{
    name: "abc"
  };
},

大概就在这个位置写变量（分号；与逗号，是否需要请根据实际情况测试，多了的话似乎会报错）。

 

不只是label，其它标签好像也可以使用【:】来实现标签内容从变量的值中获取；这应该就是vue的方便之处吧。