1.vpm安装步骤（自行安装node.js），项目根目录下安装模块使用 cnpm 代替npm 速度较快
2.创建，发布Vue项目
创建vue项目，到文件路径下，打开图形化界面命令，例如：D盘下
vue ui
成功之后，自动打开网址，例如：http://localhost:8000/
手动创建vue项目
发布Vue项目，在项目根目录下执行命令
npm vue serve 或者 npm vue dev (根据package.json执行)
发布成功之后会显示相应的文件地址，访问即可
3.下载模块，以axios为例
在项目目录下执行下载命令
cnpm install axios --save
引入及使用组件或模块
引入iview组件
import iViewfrom 'iview'
Vue.use(iView)
4.vue前端用axios方式与后台数据进行交互
教程链接：https://www.runoob.com/vue2/vuejs-ajax-axios.html
下面以get方式查询id=1的数据为例，发送请求：
export default{
name: 'app',
components: {
Button,
Input1,
Table
},
data(){
return{
value : ''
}
},
methods:{
clickFunc: function(){
var id = this.$refs.inputText.value;
// axios({
// methods:'post',
// url:'http://localhost:8088/commodityController/selectSingle',
// data:id
// })
axios.get('http://localhost:8088/commodityController/selectSingle/'+id)
.then(function (response) {
window.console.log(response);
})
.catch(function (error) {
window.console.log(error);
});
},
}
}
后台代码:
@GetMapping(value = {"/selectSingle/{id}","/selectSingle"})
public CommodityDTO selectSingle(@PathVariable(required = false) Integer id) {
System.out.println("selectSingle"+id);
return iCommodityService.selectSingle(id);
}
5.获取后台数据并渲染到前台页面
axios.get('http://localhost:8088/commodityController/selectSingle/'+id)
.then((response)=> {
window.console.log(response);
var resdata = response.data; //resdata 为响应数据
this.$set(this.data1,0,{ //set 使用set方法
id: resdata.id,
name: resdata.name,
price: resdata.price
})
})
.catch((error)=> {
alert(error);
window.console.log(error);
});
注*：可能遇到的问题
set方法：https://blog.csdn.net/panyang01/article/details/76665448
数据绑定问题：https://blog.csdn.net/weixin_30809333/article/details/94931980
组件信息传递参考链接：https://blog.csdn.net/Alva112358/article/details/93732001
https://www.jb51.net/article/114588.htm
效果图如下：
6.vue传值问题，组件传值问题。
1. 通过 props 传值.（父组件向子组件传值）
单文件组件Diglog:
<template>
<div id="alert-dialog">
<div>
<h3> 确定要查询为：{{ diglogTitle }} 的数据吗？ </h3>
<Button v-model="btnOK" @click="bcancel">取消</Button>
<Button v-model="btnCancel" type="primary" @click="bok">确定</Button>
</div>
</div>
</template>
<script>
export default{
name:'Diglog',
props:{
diglogContent:{
type:String,
default:' '
},
diglogTitle:{
type:String,
default:'标题'
}
},
data(){
return{
modal1: false
}
},
methods:{
bok:function(){
this.$emit('on-ok');
},
bcancel:function(){
this.$emit('on-cancel');
}
}
}
-------------------------------------------------------------------------
输入框组件 Input，按钮组件Button，点击Button后将Input中的值传入Diglog组件中：
<template>
<div id="app">
<div id="search">
<Input id="input" v-model="value" ref="inputText" placeholder="请输入..."/>
<Button id="btn" type="info" @click="chaxunClick" >查询</Button>
<Diglog v-if="diglog1" diglog-title="diglog-title" :diglogContent='diglogContent' v-model="diglog1"></Diglog>
</div>
</div>
</template>
<script>
import axios from 'axios'
import Diglog from './components/Diglog.vue'
export default{
name: 'app',
components: {
Diglog
},
data(){
return{
value:'',
diglog1: false,
diglogContent:''
}
},
methods:{
chaxunClick:function(){
this.diglog1 = true;
this.diglogContent = this.$refs.inputText.value;
}
}
}
</script>
效果图：
2.事件传递 （子组件传递给父组件）
子组件：
<template>
<div id="alert-dialog">
<div>
<input v-model="id" @change="inputChange"/>input
</div>
</div>
</template>
<script>
export default{
name:'Diglog',
props:{
},
data(){
return{
id:''
}
},
methods:{
inputChange:function(){
this.$emit("transmit-id",this.id);
}
}
}
</script>
父组件中部分代码：
<Diglog @transmit-id="transmit" v-if="diglog1" diglog-title="diglog-title" :diglogContent='diglogContent' v-model="diglog1" @on-ok="ok" @on-cancel="cancel"></Diglog>
transmit(msg){
alert("子组件向父组件传递信息"+msg);
this.value = msg;
}
组件传值参考博客地址：https://blog.csdn.net/zhanghl150426/article/details/90665423
