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的方便之处吧。