Oracle數(shù)據(jù)庫(kù)連接，axios，cors，vue重名驗(yàn)證，下拉框聯(lián)動(dòng)，生命周期函數(shù)【詩(shī)書畫唱】
目錄：
知識(shí)積淀
mockjs中'@province'//隨機(jī)產(chǎn)生省份名稱
關(guān)于@click="msg='NO';" 的個(gè)人解析：這句代碼的意思是點(diǎn)擊后，執(zhí)行雙引號(hào)里面的代碼，讓msg這個(gè)變量被賦值為‘NO’。@click="msg='NO';"和v-on:click="msg='NO';"的效果基本等價(jià)。個(gè)人理解@或v-on:為后面的click等事件被執(zhí)行，觸發(fā)后會(huì)執(zhí)行雙引號(hào)里面的代碼，，相當(dāng)于給這個(gè)代碼綁定了事件。如果代碼是Hbuilder中的new Vue中的methods中的一個(gè)函數(shù)的名字，那么就是觸發(fā)時(shí)候后會(huì)執(zhí)行其函數(shù)，相當(dāng)于給這個(gè)函數(shù)綁定了事件。
單詞
hook
例子
例子1：用代碼和注釋說明生命周期函數(shù)的作用，什么時(shí)候用，用的時(shí)候怎么用（含個(gè)人控制變量法，逐個(gè)演示等的詳細(xì)解析）
例子2：在Vscode中實(shí)現(xiàn)省市下拉框聯(lián)動(dòng)的效果【暫時(shí)不要求完全正確的省市等的對(duì)應(yīng)關(guān)系,因?yàn)槭》萦昧?span id="s0sssss00s" class="color-pink-04">mockjs生成隨機(jī)的省份，暫時(shí)實(shí)現(xiàn)pid?%?2?==?1（就是第一下拉框的省份的編號(hào)為奇數(shù)就讓聯(lián)動(dòng)的第二級(jí)的下拉框顯示一些自定義城市等等】
如果想創(chuàng)建新頁(yè)面，那么就要在src目錄下創(chuàng)建page文件夾，里面寫的是頁(yè)面級(jí)別的組件(一般vue中“跳轉(zhuǎn)界面”，本質(zhì)上是切換page文件夾下的頁(yè)面級(jí)別的組件）
City.vue
Prov.vue
index.vue
index.js
provMock.js
作業(yè)
例子3：1、VUE+axios實(shí)現(xiàn)重名驗(yàn)證（用上Oracle數(shù)據(jù)庫(kù)）
重名驗(yàn)證（注冊(cè)等時(shí)用）的Oracle數(shù)據(jù)庫(kù)部分
chong_ming_yan_zheng.vue
index.js
ora.js（這里要寫cors的跨域訪問代碼，不然在前臺(tái)獲取后臺(tái)傳到一個(gè)網(wǎng)頁(yè)的數(shù)據(jù)時(shí)會(huì)出現(xiàn)跨域訪問的錯(cuò)誤。我弄了挺久才解決和發(fā)現(xiàn)。求三連！同時(shí)提醒下mockjs代替數(shù)據(jù)庫(kù)時(shí)記得，用axios獲取數(shù)據(jù)時(shí)不要忘了import寫了mockjs的代碼的文件，不然訪問不到！“血”的教訓(xùn)！好吧，也沒有那么夸張，就是浪費(fèi)我很多本來做別的事的時(shí)間）
/*記得如果要用axios等等前臺(tái)獲取數(shù)據(jù)等等寫上跨域訪問的cors的代碼和用res.end(JSON.stringify(newData)); 而不是res.write(JSON.stringify(newData)); ，個(gè)人猜想write可能只能顯示數(shù)據(jù)到網(wǎng)頁(yè)上不可以讓前臺(tái)獲取這個(gè)網(wǎng)頁(yè)的數(shù)據(jù)（總之我之前就是獲取不了），而end既可以顯示數(shù)據(jù)到網(wǎng)頁(yè)也可以讓前臺(tái)獲取這個(gè)網(wǎng)頁(yè)的數(shù)據(jù)。*/
如果想用mockjsj就要用chong_ming_yan_zheng_mock.js
例子4：2、VUE+axios實(shí)現(xiàn)下拉框聯(lián)動(dòng)
單頁(yè)面上實(shí)現(xiàn)。后臺(tái)最好連上數(shù)據(jù)庫(kù)。
City.vue
Prov.vue
index.vue
index.js
ora2.js
下拉框：下拉框聯(lián)動(dòng)的Oracle的數(shù)據(jù)庫(kù)的SQL語句部分（適合二級(jí)和三級(jí)下拉框聯(lián)動(dòng)）
避雷指南
知識(shí)積淀
生命周期函數(shù)：又叫鉤子函數(shù)（hook）
第一種類型：創(chuàng)建時(shí)運(yùn)行的函數(shù)，在整個(gè)生命周期中只會(huì)運(yùn)行一次
第二種類型：在整個(gè)生命周期可以運(yùn)行0次，無數(shù)次
第三種類型：銷毀時(shí)運(yùn)行的函數(shù)，在整個(gè)生命周期中也只會(huì)運(yùn)行一次
mockjs中'@province'//隨機(jī)產(chǎn)生省份名稱
關(guān)于@click="msg='NO';" 的個(gè)人解析：這句代碼的意思是點(diǎn)擊后，執(zhí)行雙引號(hào)里面的代碼，讓msg這個(gè)變量被賦值為‘NO’。@click="msg='NO';"和v-on:click="msg='NO';"的效果基本等價(jià)。個(gè)人理解@或v-on:為后面的click等事件被執(zhí)行，觸發(fā)后會(huì)執(zhí)行雙引號(hào)里面的代碼，，相當(dāng)于給這個(gè)代碼綁定了事件。如果代碼是Hbuilder中的new Vue中的methods中的一個(gè)函數(shù)的名字，那么就是觸發(fā)時(shí)候后會(huì)執(zhí)行其函數(shù)，相當(dāng)于給這個(gè)函數(shù)綁定了事件。
單詞
hook
例子
例子1：用代碼和注釋說明生命周期函數(shù)的作用，什么時(shí)候用，用的時(shí)候怎么用（含個(gè)人控制變量法，逐個(gè)演示等的詳細(xì)解析）
生命周期函數(shù).html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/vue.js" ></script>
</head>
<body>
<div id="app">
<input type="button" value="修改msg"
@click="msg='NO';" />
<h1 id="h">{{msg}}</h1>
</div>
<script>
new Vue({
el: '#app',
data: {
msg: 'OK'
},
methods: {
test(){
console.log('執(zhí)行test方法');
}
},
beforeCreate(){//當(dāng)組件被完全創(chuàng)建出來之前執(zhí)行
//在這個(gè)方法中，如果嘗試訪問data中的屬性
//和調(diào)用methods中的方法
//console.log(this.msg);//undefined
//this.test();//報(bào)錯(cuò)，沒有這個(gè)方法
},
created(){//當(dāng)組件被創(chuàng)建好以后，但是沒有被掛載前執(zhí)行
//在這個(gè)方法中，data和methods中的屬性和方法都可以訪問到了
//console.log(this.msg);
//this.test();
},
beforeMount(){//當(dāng)組件已經(jīng)被解析完成并且已經(jīng)放到內(nèi)存中時(shí)
//如果Html代碼中有{{}}存在時(shí)，并沒有被替換成值（個(gè)人理解：也就是說{{}}等等沒有效果，沒有完全被解析出來，沒有被完全渲染成功）
//console.log(document.getElementById('app').innerHTML);
},
mounted(){//當(dāng)組件已經(jīng)被真實(shí)地掛載到頁(yè)面中時(shí)執(zhí)行
//html代碼中{{}}部分的值已經(jīng)被替換了（個(gè)人理解：也就是說{{}}等等有效果，有完全被解析出來，被完全渲染成功）
//console.log(document.getElementById('app').innerHTML);
},
beforeUpdate(){//當(dāng)組件的數(shù)據(jù)更新，但是Html頁(yè)面沒有更新時(shí)執(zhí)行（個(gè)人理解：更新的數(shù)據(jù)拿到了，但HTML頁(yè)面沒有顯示出更新的痕跡)
// console.log('h1標(biāo)簽中的內(nèi)容：'?
// ? ? + document.getElementById('h').innerHTML);
// console.log(this.msg);
},
updated(){//當(dāng)組件的數(shù)據(jù)更新，而且Html頁(yè)面也跟著更新的時(shí)候執(zhí)行
（個(gè)人理解：更新的數(shù)據(jù)拿到了，HTML頁(yè)面也顯示出更新的痕跡)
// console.log('h1標(biāo)簽中的內(nèi)容：'?
// ? ? + document.getElementById('h').innerHTML);
// console.log(this.msg);
}
});
</script>
</body>
</html>
beforeUpdate(){//當(dāng)組件的數(shù)據(jù)更新，但是Html頁(yè)面沒有更新時(shí)執(zhí)行
console.log('h1標(biāo)簽中的內(nèi)容(用innerHTML獲取Html頁(yè)面的內(nèi)容沒有更新)：'?
? ? + document.getElementById('h').innerHTML);
console.log("組件的數(shù)據(jù)更新:"+this.msg);
},
例子2：在Vscode中實(shí)現(xiàn)省市下拉框聯(lián)動(dòng)的效果【暫時(shí)不要求完全正確的省市等的對(duì)應(yīng)關(guān)系,因?yàn)槭》萦昧?span id="s0sssss00s" class="color-pink-04">mockjs生成隨機(jī)的省份，暫時(shí)實(shí)現(xiàn)pid?%?2?==?1（就是第一下拉框的省份的編號(hào)為奇數(shù)就讓聯(lián)動(dòng)的第二級(jí)的下拉框顯示一些自定義城市等等）】
如果想創(chuàng)建新頁(yè)面，那么就要在src目錄下創(chuàng)建page文件夾，里面寫的是頁(yè)面級(jí)別的組件(一般vue中“跳轉(zhuǎn)界面”，本質(zhì)上是切換page文件夾下的頁(yè)面級(jí)別的組件）
City.vue
<template>
??<select>
??????<option?v-for="ct?in?dataCity"?:value="ct.id"
??????????:key="ct.id">
??????????{{ct.name}}
??????</option>
??</select>
</template>
<script>
export?default?{
????name:?'City',//通過import語句導(dǎo)出時(shí)的名字
????props:?['dataCity']
}
</script>
Prov.vue
<template>
????<select?class="ft"?@change="getData"?v-model="pid">
????????<option?v-for="pv?in?list"?:value="pv.id"?
????????????:key="pv.id">
????????????{{pv.name}}
????????</option>
????</select>
</template>
<script>
import?axios?from?'axios';
import?'../provMock';
export?default?{
????created(){
????????//獲取省份下拉框中的數(shù)據(jù)
????????axios.get('/prv').then(res?=>?{
????????????//console.log(res.data.provs);
????????????this.list?=?res.data.provs;
????????});
????},
????data(){
????????return?{
????????????list:?[],
????????????pid:?''//選中的省份下拉框中的id
????????};
????},
????methods:?{
????????getData(){
????????????console.log('獲取選中的省份Id值是：'?+?this.pid);
????????????//通過代碼觸發(fā)自定義事件sendData
????????????this.$emit('sendData',this.pid);
????????}
????}
}
</script>
<style?scoped>
????select?{
????????width:200px;
????????height:?30px;
????????margin-top:?5px;
????????margin-bottom:?5px;
????????margin-left:?10px;
????}
</style>
index.vue
<template>
????<div>
????????<h1>首頁(yè)</h1>
????????<!--?自定義了prov組件的sendData事件?-->
????????<prov?@sendData="updateCityList"?/>
????????<city?:data-city="clist"?/>
????</div>
</template>
<script>
import?Prov?from?'../components/Prov';
import?City?from?'../components/City';
export?default?{
????data(){
????????return?{
????????????clist:?null
????????};
????},
????components:?{
????????Prov,
????????City
????},
????methods:?{
????????updateCityList(pid){
????????????console.log('傳過來的省份id是：'?+?pid);
????????????//根據(jù)pid查詢數(shù)據(jù)庫(kù)所有選中省份的城市
????????????//把pid傳到后臺(tái)去
????????????//?let?params?=?new?URLSearchParams();
????????????//?params.append('pid',?pid);?
????????????//?//提交axios請(qǐng)求
????????????//?axios.post('',params).then(res?=>?{
????????????//?????this.clist?=?res;
????????????//?});
????????????if(pid?%?2?==?1)?{
????????????????this.clist?=?[
????????????????????{id:?1,name:?'長(zhǎng)沙'},
????????????????????{id:?2,name:?'株洲'},
????????????????????{id:?3,name:?'湘潭'}
????????????????];
????????????}?else?{
????????????????this.clist?=?[
????????????????????{id:?4,name:?'宜春'},
????????????????????{id:?5,name:?'贛州'},
????????????????????{id:?6,name:?'南昌'}
????????????????];
????????????}
????????}
????}
}
</script>
index.js
import?Vue?from?'vue'
import?Router?from?'vue-router'
import?HelloWorld?from?'@/components/HelloWorld'
//自己加入的必須加載和要使用組件的代碼?START
//一般我一些代碼都不刪除，只注釋掉
//?import?Select1?from?'@/components/Select1'
import?index?from?'@/page/index'
//自己加入的必須加載和要使用組件的代碼?END
Vue.use(Router)
export?default?new?Router({
??routes:?[
??
??//?{//http://localhost:8080/#/Select1
??//???path:?'/Select1',
??//???name:?'Select1',//路由跳轉(zhuǎn)時(shí)使用
??//???component:?Select1
??//?},
???{//http://localhost:8080/#/index
????path:?'/index',
????name:?'index',//路由跳轉(zhuǎn)時(shí)使用
????component:?index
??}
????//自己加的代碼?END
??]
})
//解決重復(fù)點(diǎn)擊路由，界面跳轉(zhuǎn)等時(shí)報(bào)錯(cuò)的代碼?START
const?originalPush?=?Router.prototype.push
Router.prototype.push?=?function?push?(location)?{
??return?originalPush.call(this,?location).catch(err?=>?err)
}
//解決重復(fù)點(diǎn)擊路由，界面跳轉(zhuǎn)等時(shí)報(bào)錯(cuò)的代碼?END
provMock.js
//src/provMock.js
import?Mock?from?'mockjs';
Mock.mock('/prv',{
????"provs|5-10":[{
????????'id|+1':?1,????//?屬性值自動(dòng)加?1，初始值為1,
????????'name':?'@province'//隨機(jī)產(chǎn)生省份名稱
????}]
});
運(yùn)行
訪問
http://localhost:8080/#/index
作業(yè)
例子3：1、VUE+axios實(shí)現(xiàn)重名驗(yàn)證（用上Oracle數(shù)據(jù)庫(kù)）
重名驗(yàn)證（注冊(cè)等時(shí)用）的Oracle數(shù)據(jù)庫(kù)部分
?--drop table Userinfo? ? ? ? ? ? ? ??
create table Userinfo(
? ? id number primary key,
? ? act varchar2(30) not null,
? ?pwd varchar2(30) not null,
? ?birth date
);
--drop sequence seq_Userinfo
create sequence seq_Userinfo
start with 1? ? ? ?--起始值是1
increment by 1? ? ?--增長(zhǎng)的值? ?
maxvalue 999999999 --序列號(hào)的最大值
minvalue 1? ? ? ? ?--序列號(hào)的最小值
nocycle? ? ? ? ? ? --是否循環(huán)
cache 10;? ? ? ? ? --預(yù)存
insert into Userinfo values(seq_Userinfo.nextval,'黑黑','pwd1',to_date('2020-06-06','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'紅紅','pwd2',to_date('2020-06-07','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'藍(lán)藍(lán)','pwd3',to_date('2020-06-08','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'666','pwd4',to_date('2020-06-06','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'999','pwd5',to_date('2020-06-10','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'888','pwd6',to_date('2020-06-11','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'詩(shī)書畫唱','pwd4',to_date('2020-06-06','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'三連','pwd5',to_date('2020-06-10','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'關(guān)注','pwd6',to_date('2020-06-11','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'詩(shī)書畫唱1','pwd4',to_date('2020-06-06','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'詩(shī)書畫唱2','pwd4',to_date('2020-06-06','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'詩(shī)書畫唱3','pwd4',to_date('2020-06-06','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'詩(shī)書畫唱4','pwd4',to_date('2020-06-06','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'詩(shī)書畫唱5','pwd4',to_date('2020-06-06','yyyy-mm-dd'));
--select * from Userinfo?
select * from userinfo WHERE act like '%詩(shī)%'
--rows=5,page=2
--end = rows * page=10
--start = (page - 1) * rows + 1=6
--start表示>=號(hào)后面的值，end表示<=號(hào)后面的值
?select * from
(select p1.*,rownum r1 from Userinfo p1
where rownum <= 10)
where r1 >=6? and act like '%詩(shī)%'
【這個(gè)不是條件查詢后的分頁(yè)查詢，而是分頁(yè)查詢后的條件查詢】
select * from (select t.*,rownum rn from
?(select * from userinfo WHERE act like '%詩(shī)%' ) t?
?where rownum <= 10) where rn >= 6?
【這個(gè)是條件查詢后的分頁(yè)查詢，是常用的，如果組合查詢后的數(shù)據(jù)很少，比如只有1條，
就難看出效果】
開啟Oracle的服務(wù)
chong_ming_yan_zheng.vue
<template>
??<div>
????<h1>我的重名驗(yàn)證的注冊(cè)頁(yè)面</h1>
????<!--?界面跳轉(zhuǎn)方法1:?-->
????<input
??????type="text"
??????v-model="username"
??????placeholder="請(qǐng)輸入賬號(hào)"
??????@input="f()"
????/>
????<!--?<input?type="password"?v-model="password"?placeholder="請(qǐng)輸入密碼"?/>
????<input?type="button"?value="登錄"?/>?-->
????<input?v-model="ti_shi"?type="text"?disabled?/>
????<!--?<h2>{{?this.$route.params.state?}}</h2>?-->
??</div>
</template>
<script>
import?axios?from?"axios";
//導(dǎo)入chong_ming_yan_zheng_mock.js(如果要用mockjs，就必須寫這句代碼):
import?"../chong_ming_yan_zheng_mock";
export?default?{
??created()?{
????axios.get("http://localhost:8081").then((res)?=>?{
??????console.log(666);
????});
??},
??data()?{
????return?{
??????username:?"",
??????ti_shi:?"",
????};
??},
??//?componentDidMount(){
??//??//請(qǐng)求后臺(tái)數(shù)據(jù)
??//??axios.get('http://localhost:8081/')
??//??.then(res?=>?{
??//??//res就是后臺(tái)請(qǐng)求的數(shù)據(jù)
??//??//console.log(res.data);
??//??this.setState({
??//??myDate:?res.data
??//??});
??//??console.log(res);
??//??});
??//??},
??methods:?{
????f:?function?()?{
??????//mockjs的重名驗(yàn)證??START
??????//?axios.get("/chong_ming_yan_zheng_mock").then(
??????//???(res)?=>?{
??????//?????console.log(res.data.arr);
??????//?????console.log(this.username);
??????//?????console.log(this.password);
??????//?????console.log(this.username?==?"詩(shī)書畫唱");
??????//?????console.log(this.password?==?"666666");
??????//?????res.data.arr.map((o)?=>?{
??????//???????if?(this.username?!=?o.name)?{
??????//?????????this.ti_shi?=?"沒有重名";
??????//???????}?else?if?(this.username?==?o.name)?{
??????//?????????this.ti_shi?=?"重名了";
??????//???????}
??????//?????});
??????//???}
??????//?);
??????//mockjs的重名驗(yàn)證??END
??????//Oracle數(shù)據(jù)庫(kù)連接的重名驗(yàn)證??START
??????axios.get("http://localhost:8081").then((res)?=>?{
????????//?console.log(res.data);
????????//?console.log(this.username);
????????//?console.log(this.username?==?"詩(shī)書畫唱");
????????
?/*這里必須用上i之類的，
??如果直接判斷會(huì)出問題（比如就算有一次判斷為重名，顯示重名，
后面如果有一次判斷不重名就又會(huì)顯示不重名），這樣是不對(duì)的。*/
????????let?i?=?1;
????????res.data.map((o)?=>?{
??????????console.log(this.username?==?o.act);
??????????if?(
????????????this.username?!=?o.act?&&
????????????this.username?!=?""?&&
????????????this.username?!=?null
??????????)?{
????????????i?=?i?*?2;
????????????//?console.log(typeof?o.act);
????????????//?console.log(typeof?'黑黑');
????????????//??console.log(o.act==666);
????????????//?console.log(o.act);
??????????}?else?if?(this.username?==?o.act)?{
????????????i?=?i?*?0;
??????????}
??????????if?(i?==?1)?{
????????????this.ti_shi?=?"你還沒有輸入用戶名！";
??????????}
??????????if?(i?%?2?==?0?&&?i?!==?0)?{
????????????this.ti_shi?=?"沒有重名";
??????????}
??????????if?(i?==?0)?{
????????????this.ti_shi?=?"重名了";
??????????}
????????});
????????
??????});
??????//Oracle數(shù)據(jù)庫(kù)連接的重名驗(yàn)證??END
????},
??},
};
</script>
index.js
import?Vue?from?'vue'
import?Router?from?'vue-router'
import?HelloWorld?from?'@/components/HelloWorld'
//自己加入的必須加載和要使用組件的代碼?START
//一般我一些代碼都不刪除，只注釋掉
//?import?Select1?from?'@/components/Select1'
import?index?from?'@/page/index'
//chong_ming_yan_zheng:重名驗(yàn)證
import?chong_ming_yan_zheng?from?'@/components/chong_ming_yan_zheng'
//自己加入的必須加載和要使用組件的代碼?END
Vue.use(Router)
export?default?new?Router({
??routes:?[
??
??//?{//http://localhost:8080/#/Select1
??//???path:?'/Select1',
??//???name:?'Select1',//路由跳轉(zhuǎn)時(shí)使用
??//???component:?Select1
??//?},
???{//http://localhost:8080/#/index
????path:?'/index',
????name:?'index',//路由跳轉(zhuǎn)時(shí)使用
????component:?index
??},
{//http://localhost:8080/#/chong_ming_yan_zheng
??path:?'/chong_ming_yan_zheng',
??name:?'chong_ming_yan_zheng',//路由跳轉(zhuǎn)時(shí)使用
??component:?chong_ming_yan_zheng
},
????//自己加的代碼?END
??]
})
//解決重復(fù)點(diǎn)擊路由，界面跳轉(zhuǎn)等時(shí)報(bào)錯(cuò)的代碼?START
const?originalPush?=?Router.prototype.push
Router.prototype.push?=?function?push?(location)?{
??return?originalPush.call(this,?location).catch(err?=>?err)
}
//解決重復(fù)點(diǎn)擊路由，界面跳轉(zhuǎn)等時(shí)報(bào)錯(cuò)的代碼?END
ora.js（這里要寫cors的跨域訪問代碼，不然在前臺(tái)獲取后臺(tái)傳到一個(gè)網(wǎng)頁(yè)的數(shù)據(jù)時(shí)會(huì)出現(xiàn)跨域訪問的錯(cuò)誤。我弄了挺久才解決和發(fā)現(xiàn)。求三連！同時(shí)提醒下mockjs代替數(shù)據(jù)庫(kù)時(shí)記得，用axios獲取數(shù)據(jù)時(shí)不要忘了import寫了mockjs的代碼的文件，不然訪問不到！“血”的教訓(xùn)！好吧，也沒有那么夸張，就是浪費(fèi)我很多本來做別的事的時(shí)間）
let?http?=?require('http');
let?url?=?require('url');
//npm?install?oracledb?-g
let?oracledb?=?require('oracledb');
http.createServer(function(req,res){
????//參數(shù)解析
????let?ps?=?url.parse(req.url,true).query;
????//數(shù)據(jù)庫(kù)連接
????const?conf?=?{
????????user:?'X',//用戶名
????????password:?'sshcPwd',//密碼
????????connectString:?'127.0.0.1:1521/orcl'//連接字符串
????};
????oracledb.getConnection(conf,function(err,conn){
????????if(err)?{
????????????console.log(err.message);
????????????return;
????????}
?????//?查詢所有（可以封裝成一個(gè)方法后調(diào)用）?START：
????????conn.execute('select?*?from?userinfo',function(err,rs){
????????????if(err)?{
????????????????console.log(err.message);
????????????????return;
????????????}
????????????//打印所有的數(shù)據(jù)
????????????let?data?=?rs.rows;
????????????//?for(let?record?of?data)?{
????????????//?????//打印每行記錄
????????????//?????//console.log(record[1]);
????????????//?????let?[id,act,pwd,birth]?=?record;
????????????//?????let?o?=?{id,act,pwd,birth};
????????????//?????console.log(o);
????????????//?}
????????????let?newData?=?data.map(ay?=>?{
????????????????let?[id,act,pwd,birth]?=?ay;
????????????????return?{id,act,pwd,birth};
????????????});
????????????//?console.log("查詢所有的數(shù)據(jù)："+newData);這樣寫可能打印不出數(shù)據(jù)。
//?????????????console.log("查詢所有的數(shù)據(jù)：");
//?????????????console.log(newData);
//????/*?res.end是把數(shù)據(jù)顯示在網(wǎng)頁(yè)上的方法?*/
//?????//處理中文亂碼?START
//?????res.writeHead(200,{'Context-Type':'text/html'});
//?????res.write('<head><meta?charset="utf-8"/></head>');
//?????????//處理中文亂碼?END
//解決跨域訪問的方式一：cors
res.setHeader("Access-Control-Allow-Origin",?"*");
res.setHeader("Access-Control-Allow-Headers",?"Content-Type");
//發(fā)送的數(shù)據(jù)的格式必須是一個(gè)JSON字符串，
//如果發(fā)送的數(shù)據(jù)不是JSON字符串，那么這次調(diào)用就會(huì)失敗
res.setHeader("content-type",?"application/json");
//?//傳送數(shù)據(jù)到前臺(tái)頁(yè)面去
//?res.end('{"act":"詩(shī)書畫唱","pwd":666}');
/*記得如果要用axios等等前臺(tái)獲取數(shù)據(jù)等等寫上跨域訪問的cors的代碼和用res.end(JSON.stringify(newData)); 而不是res.write(JSON.stringify(newData)); ，個(gè)人猜想write可能只能顯示數(shù)據(jù)到網(wǎng)頁(yè)上不可以讓前臺(tái)獲取這個(gè)網(wǎng)頁(yè)的數(shù)據(jù)（總之我之前就是獲取不了），而end既可以顯示數(shù)據(jù)到網(wǎng)頁(yè)也可以讓前臺(tái)獲取這個(gè)網(wǎng)頁(yè)的數(shù)據(jù)。*/
res.end(JSON.stringify(newData));?
????????//?console.log(JSON.stringify(result));
????/*??res.end(JSON.stringify(result));?
????使用這段代碼時(shí)render函數(shù)會(huì)執(zhí)行兩次?，所以我暫時(shí)不用?。?*/?
????????});
????????????//?查詢所有?END
??//新增?START：
????//??let?sql?=?'insert?into?userinfo?values(seq_userinfo.nextval,:1,:2,:3)';
????//??conn.execute(sql,['詩(shī)書畫唱好帥！','帥到想給他三連！',new?Date()],{autoCommit:true},function(err,rs){
????//?????????if(err)?{
????//?????????????console.log(err.message);
????//?????????????return;
????//?????????}
????//?????????let?count?=?rs.rowsAffected;
????//?????????console.log('插入了'?+?count?+?'條數(shù)據(jù)');
????//?????});
??//新增?END
????});
}).listen(8081);
console.log('服務(wù)器啟動(dòng)成功，網(wǎng)頁(yè)上輸入http://localhost:8081的訪問路徑就可以控制臺(tái)打印數(shù)據(jù)等等')
//?//serv.js
//?//引入http模塊
//?let?http?=?require('http');
//?//引入url模塊
//?let?url?=?require('url');
//?//創(chuàng)建一個(gè)后臺(tái)服務(wù)
//?http.createServer(function(req,res){
//??//解決跨域訪問的方式一：cors
//??res.setHeader("Access-Control-Allow-Origin",?"*");
//??res.setHeader("Access-Control-Allow-Headers",?"Content-Type");
//??//發(fā)送的數(shù)據(jù)的格式必須是一個(gè)JSON字符串，
//??//如果發(fā)送的數(shù)據(jù)不是JSON字符串，那么這次調(diào)用就會(huì)失敗
//??res.setHeader("content-type",?"application/json");
//??//傳送數(shù)據(jù)到前臺(tái)頁(yè)面去
//??res.end('{"act":"詩(shī)書畫唱","pwd":666}');
//?}).listen(8081);
//?console.log('訪問地址：http://127.0.0.1:8081');
D:\vscodeProject\my_project_oracle_or_mysql
npm run dev
http://localhost:8080/#/chong_ming_yan_zheng
如果想用mockjsj就要用chong_ming_yan_zheng_mock.js
:
import?Mock?from?'mockjs';
Mock.mock('/chong_ming_yan_zheng_mock',?{
????"arr|2-3":?[{???????
????????'id|+1':?5,???
????????//?'name':?'@cname',
????????'name|1':?['詩(shī)書畫唱','SSHC'],
????}]
});
例子4：2、VUE+axios實(shí)現(xiàn)下拉框聯(lián)動(dòng)
單頁(yè)面上實(shí)現(xiàn)。后臺(tái)最好連上數(shù)據(jù)庫(kù)。
City.vue
<template>
??<select?>
??????<option?v-for="ct?in?dataCity"?:value="ct.id"??
??????????:key="ct.id">
?????????
??????????{{ct.name}}
????????
??????</option>
??</select>
</template>
<script>
export?default?{
????name:?'City',//通過import語句導(dǎo)出時(shí)的名字
????props:?['dataCity']
}
</script>
Prov.vue
<template>
????<!--?mockjs時(shí)的寫法?START
????????
????????
????????<select?class="ft"?@change="getData"?v-model="pid">
????????<option?v-for="pv?in?list"?:value="pv.id"?
????????????:key="pv.id">
????????????{{pv.name}}
????????</option>
????</select>?
????mockjs時(shí)的寫法?END-->
<!--?Oracle連接數(shù)據(jù)庫(kù)時(shí)的寫法?START?-->
?????<select?class="ft"?@change="getData"?v-model="pid">
????????<option?v-for="pv?in?list"?:value="pv.id"?
????????????:key="pv.id">
?????????????{{pv.name}}
??????????????<!--?{{pv.pid==0?pv.name:""}}?-->
?????????????<!--?<div?v-if="pv.pid==0">
?{{pv.name}}
?????????????</div>?-->
????????????????
????????</option>
????</select>
????<!--?Oracle連接數(shù)據(jù)庫(kù)時(shí)的寫法?END?-->
</template>
<script>
import?axios?from?'axios';
import?'../provMock';
export?default?{
????created(){
//?????????//mockjs獲取省份下拉框中的數(shù)據(jù)的方法??START
????????
//?????????axios.get('/prv').then(res?=>?{
//?????????????//console.log(res.data.provs);
//?????????????this.list?=?res.data.provs;
//?});
//?????????//mockjs獲取省份下拉框中的數(shù)據(jù)的方法???END
?//Oracle數(shù)據(jù)庫(kù)獲取省份下拉框中的數(shù)據(jù)的方法??START
????????
????????axios.get('http://localhost:8081').then(res?=>?{
?????????console.log(res.data);
?????????//this.list是數(shù)組
?????????
????????????this.list?=?res.data.filter(o=>
????????????????{return??o.pid==0}
????????????);
});
?//Oracle數(shù)據(jù)庫(kù)獲取省份下拉框中的數(shù)據(jù)的方法???END
????},
????data(){
????????return?{
????????????list:?[],
????????????pid:?''
//這里的pid對(duì)應(yīng)的是選中的省份下拉框中的id,不是數(shù)據(jù)庫(kù)中的pid，當(dāng)然也可以pid統(tǒng)一改成id
????????};
????},
????methods:?{
????????getData(){
????????????//mockjs的部分?START
????????//?????console.log('獲取選中的省份Id值是：'?+?this.pid);
????????//?????//通過代碼觸發(fā)自定義事件sendData,子組件傳數(shù)據(jù)到父組件中
????????//???this.$emit('sendData',this.pid);
??//mockjs的部分?END
//Oracle數(shù)據(jù)庫(kù)的部分（這里的pid對(duì)應(yīng)數(shù)據(jù)庫(kù)的id）?START
????????????console.log('獲取選中的省份Id值是：'?+?this.pid);
????????????//通過代碼觸發(fā)自定義事件sendData,子組件傳數(shù)據(jù)到父組件中
??????????this.$emit('sendData',this.pid);
??????????//Oracle數(shù)據(jù)庫(kù)的部分?END
????????}
????}
}
</script>
<style?scoped>
????select?{
????????width:200px;
????????height:?30px;
????????margin-top:?5px;
????????margin-bottom:?5px;
????????margin-left:?10px;
????}
</style>
index.vue
<template>
??<div>
????<h1>首頁(yè)</h1>
????<!--?自定義了prov組件的sendData事件?-->
????<prov?@sendData="updateCityList"?/>
????<city?:data-city="clist"?/>
??</div>
</template>
<script>
import?Prov?from?"../components/Prov";
import?City?from?"../components/City";
import?axios?from?"axios";
export?default?{
??data()?{
????return?{
??????clist:?null,
????};
??},
??components:?{
????Prov,
????City,
??},
??methods:?{
????//mockjs的部分?START
????//?updateCityList(pid){
????//?????console.log('傳過來的省份id是：'?+?pid);
????//mockjs的部分?END
????//Oracle數(shù)據(jù)庫(kù)的部分?START
????updateCityList(id)?{
??????console.log("傳過來的省份id是："?+?id);
??????//Oracle數(shù)據(jù)庫(kù)的部分?END
??????//根據(jù)pid查詢數(shù)據(jù)庫(kù)所有選中省份的城市
??????//把pid傳到后臺(tái)去
??????//?let?params?=?new?URLSearchParams();
??????//?params.append('pid',?pid);
??????//?//提交axios請(qǐng)求
??????//?axios.post('',params).then(res?=>?{
??????//?????this.clist?=?res;
??????//?});
??????//mockjs時(shí)的部分??START
??????//?if(pid?%?2?==?1)?{
??????//?????this.clist?=?[
??????//?????????{id:?1,name:?'長(zhǎng)沙'},
??????//?????????{id:?2,name:?'株洲'},
??????//?????????{id:?3,name:?'湘潭'}
??????//?????];
??????//?}?else?{
??????//?????this.clist?=?[
??????//?????????{id:?4,name:?'宜春'},
??????//?????????{id:?5,name:?'贛州'},
??????//?????????{id:?6,name:?'南昌'}
??????//?????];
??????//?}
??????//mockjs時(shí)的部分??END
??????//Oracle數(shù)據(jù)庫(kù)部分?START
??????axios.get("http://localhost:8081").then((res)?=>?{
????????console.log(res.data);
????????console.log(id);
????????this.list?=?res.data;
????????//?this.clist?=?res.data.map((o)?=>?{
????????//???return?o.pid?==?id???o?:?"";
????????//?});
?this.clist?=?res.data.filter((o)?=>?{
??????????return?o.pid?==?id?;
????????});
????????
??????});
??????//Oracle數(shù)據(jù)庫(kù)部分?END
????},
??},
};
</script>
index.js
import?Vue?from?'vue'
import?Router?from?'vue-router'
import?HelloWorld?from?'@/components/HelloWorld'
//自己加入的必須加載和要使用組件的代碼?START
//一般我一些代碼都不刪除，只注釋掉
//?import?Select1?from?'@/components/Select1'
import?index?from?'@/page/index'
//chong_ming_yan_zheng:重名驗(yàn)證
import?chong_ming_yan_zheng?from?'@/components/chong_ming_yan_zheng'
//自己加入的必須加載和要使用組件的代碼?END
Vue.use(Router)
export?default?new?Router({
??routes:?[
??
??//?{//http://localhost:8080/#/Select1
??//???path:?'/Select1',
??//???name:?'Select1',//路由跳轉(zhuǎn)時(shí)使用
??//???component:?Select1
??//?},
???{//http://localhost:8080/#/index
????path:?'/index',
????name:?'index',//路由跳轉(zhuǎn)時(shí)使用
????component:?index
??},
{//http://localhost:8080/#/chong_ming_yan_zheng
??path:?'/chong_ming_yan_zheng',
??name:?'chong_ming_yan_zheng',//路由跳轉(zhuǎn)時(shí)使用
??component:?chong_ming_yan_zheng
},
????//自己加的代碼?END
??]
})
//解決重復(fù)點(diǎn)擊路由，界面跳轉(zhuǎn)等時(shí)報(bào)錯(cuò)的代碼?START
const?originalPush?=?Router.prototype.push
Router.prototype.push?=?function?push?(location)?{
??return?originalPush.call(this,?location).catch(err?=>?err)
}
//解決重復(fù)點(diǎn)擊路由，界面跳轉(zhuǎn)等時(shí)報(bào)錯(cuò)的代碼?END
ora2.js
let?http?=?require('http');
let?url?=?require('url');
//npm?install?oracledb?-g
let?oracledb?=?require('oracledb');
http.createServer(function(req,res){
????//參數(shù)解析
????let?ps?=?url.parse(req.url,true).query;
????//數(shù)據(jù)庫(kù)連接
????const?conf?=?{
????????user:?'X',//用戶名
????????password:?'sshcPwd',//密碼
????????connectString:?'127.0.0.1:1521/orcl'//連接字符串
????};
????oracledb.getConnection(conf,function(err,conn){
????????if(err)?{
????????????console.log(err.message);
????????????return;
????????}
?????//?查詢所有（可以封裝成一個(gè)方法后調(diào)用）?START：
????????conn.execute('select?*?from?addr',function(err,rs){
????????????if(err)?{
????????????????console.log(err.message);
????????????????return;
????????????}
????????????//打印所有的數(shù)據(jù)
????????????let?data?=?rs.rows;
?????
????????????let?newData?=?data.map(ay?=>?{
????????????????let?[id,pid,name]?=?ay;
????????????????return?{id,pid,name};
????????????});
????
//解決跨域訪問的方式一：cors
res.setHeader("Access-Control-Allow-Origin",?"*");
res.setHeader("Access-Control-Allow-Headers",?"Content-Type");
//發(fā)送的數(shù)據(jù)的格式必須是一個(gè)JSON字符串，
//如果發(fā)送的數(shù)據(jù)不是JSON字符串，那么這次調(diào)用就會(huì)失敗
res.setHeader("content-type",?"application/json");
//?//傳送數(shù)據(jù)到前臺(tái)頁(yè)面去
//?res.end('{"act":"詩(shī)書畫唱","pwd":666}');
res.end(JSON.stringify(newData));?
????????//?console.log(JSON.stringify(result));
????/*??res.end(JSON.stringify(result));?
????使用這段代碼時(shí)render函數(shù)會(huì)執(zhí)行兩次?，所以我暫時(shí)不用?。?*/?
????????});
???????????
????});
}).listen(8081);
console.log('服務(wù)器啟動(dòng)成功，網(wǎng)頁(yè)上輸入http://localhost:8081的訪問路徑就可以控制臺(tái)打印數(shù)據(jù)等等')
下拉框：下拉框聯(lián)動(dòng)的Oracle的數(shù)據(jù)庫(kù)的SQL語句部分（適合二級(jí)和三級(jí)下拉框聯(lián)動(dòng)）
select * from addr
--drop table addr
create table addr (
? ? id number primary key,
? ? pid number,
? ? name varchar2(20)
);
【下拉框聯(lián)動(dòng)就是根據(jù)“id和pid（個(gè)人理解pid為place地方的編號(hào)）相等
的2個(gè)name之間是父子關(guān)系的name。（比如父級(jí)name是省，子級(jí)name是市）。
按照下面的邏輯，可以弄出任意級(jí)別的下拉框聯(lián)動(dòng)
】
【pid為0的name為省名】
insert into addr values('1', '0', '湖南');
insert into addr values('2', '0', '江西');
insert into addr values('3', '0', '湖北');
insert into addr values('4', '0', '廣東');
insert into addr values('5', '0', '福建');
【pid為1的name為湖南?。╥d=1的name）中的城市名】
insert into addr values('6', '1', '長(zhǎng)沙');
insert into addr values('7', '1', '湘潭');
insert into addr values('8', '1', '婁底');
insert into addr values('9', '1', '株洲');
insert into addr values('10', '2', '宜春');
insert into addr values('11', '2', '萍鄉(xiāng)');
insert into addr values('12', '2', '南昌');
insert into addr values('13', '3', '武漢');
insert into addr values('14', '3', '黃岡');
insert into addr values('15', '3', '孝感');
insert into addr values('18', '4', '廣州');
insert into addr values('19', '4', '深圳');
insert into addr values('16', '5', '廈門');
insert into addr values('17', '5', '福州');
【pid為6的name為id為6的name（省名）中的區(qū)名】
insert into addr values('20', '6', '芙蓉區(qū)');
insert into addr values('21', '6', '天心區(qū)');
insert into addr values('22', '7', '雨湖區(qū)');
insert into addr values('23', '7', '岳塘區(qū)');
運(yùn)行
http://localhost:8081/
http://localhost:8080/#/index
避雷指南
報(bào)npm ERR! code ENOENTnpm ERR! syscall opennpm ERR! 的錯(cuò)的原因是你打開的vue文件夾打開錯(cuò)了
Uncaught (in promise) Error: Request failed with status code 404
mock中數(shù)組中隨機(jī)選一個(gè)對(duì)象：
?'name|1':?['詩(shī)書畫唱','SSHC']
