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
