Oracle数据库连接，axios，cors，vue重名验证，下拉框联动，生命周期函数【诗书画唱】
目录：
知识积淀
mockjs中'@province'//随机产生省份名称
关于@click="msg='NO';" 的个人解析：这句代码的意思是点击后，执行双引号里面的代码，让msg这个变量被赋值为‘NO’。@click="msg='NO';"和v-on:click="msg='NO';"的效果基本等价。个人理解@或v-on:为后面的click等事件被执行，触发后会执行双引号里面的代码，，相当于给这个代码绑定了事件。如果代码是Hbuilder中的new Vue中的methods中的一个函数的名字，那么就是触发时候后会执行其函数，相当于给这个函数绑定了事件。
单词
hook
例子
例子1：用代码和注释说明生命周期函数的作用，什么时候用，用的时候怎么用（含个人控制变量法，逐个演示等的详细解析）
例子2：在Vscode中实现省市下拉框联动的效果【暂时不要求完全正确的省市等的对应关系,因为省份用了mockjs生成随机的省份，暂时实现pid % 2 == 1（就是第一下拉框的省份的编号为奇数就让联动的第二级的下拉框显示一些自定义城市等等】
如果想创建新页面，那么就要在src目录下创建page文件夹，里面写的是页面级别的组件(一般vue中“跳转界面”，本质上是切换page文件夹下的页面级别的组件）
City.vue
Prov.vue
index.vue
index.js
provMock.js
作业
例子3：1、VUE+axios实现重名验证（用上Oracle数据库）
重名验证（注册等时用）的Oracle数据库部分
chong_ming_yan_zheng.vue
index.js
ora.js（这里要写cors的跨域访问代码，不然在前台获取后台传到一个网页的数据时会出现跨域访问的错误。我弄了挺久才解决和发现。求三连！同时提醒下mockjs代替数据库时记得，用axios获取数据时不要忘了import写了mockjs的代码的文件，不然访问不到！“血”的教训！好吧，也没有那么夸张，就是浪费我很多本来做别的事的时间）
/*记得如果要用axios等等前台获取数据等等写上跨域访问的cors的代码和用res.end(JSON.stringify(newData)); 而不是res.write(JSON.stringify(newData)); ，个人猜想write可能只能显示数据到网页上不可以让前台获取这个网页的数据（总之我之前就是获取不了），而end既可以显示数据到网页也可以让前台获取这个网页的数据。*/
如果想用mockjsj就要用chong_ming_yan_zheng_mock.js
例子4：2、VUE+axios实现下拉框联动
单页面上实现。后台最好连上数据库。
City.vue
Prov.vue
index.vue
index.js
ora2.js
下拉框：下拉框联动的Oracle的数据库的SQL语句部分（适合二级和三级下拉框联动）
避雷指南
知识积淀
生命周期函数：又叫钩子函数（hook）
第一种类型：创建时运行的函数，在整个生命周期中只会运行一次
第二种类型：在整个生命周期可以运行0次，无数次
第三种类型：销毁时运行的函数，在整个生命周期中也只会运行一次
mockjs中'@province'//随机产生省份名称
关于@click="msg='NO';" 的个人解析：这句代码的意思是点击后，执行双引号里面的代码，让msg这个变量被赋值为‘NO’。@click="msg='NO';"和v-on:click="msg='NO';"的效果基本等价。个人理解@或v-on:为后面的click等事件被执行，触发后会执行双引号里面的代码，，相当于给这个代码绑定了事件。如果代码是Hbuilder中的new Vue中的methods中的一个函数的名字，那么就是触发时候后会执行其函数，相当于给这个函数绑定了事件。
单词
hook
例子
例子1：用代码和注释说明生命周期函数的作用，什么时候用，用的时候怎么用（含个人控制变量法，逐个演示等的详细解析）
生命周期函数.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('执行test方法');
}
},
beforeCreate(){//当组件被完全创建出来之前执行
//在这个方法中，如果尝试访问data中的属性
//和调用methods中的方法
//console.log(this.msg);//undefined
//this.test();//报错，没有这个方法
},
created(){//当组件被创建好以后，但是没有被挂载前执行
//在这个方法中，data和methods中的属性和方法都可以访问到了
//console.log(this.msg);
//this.test();
},
beforeMount(){//当组件已经被解析完成并且已经放到内存中时
//如果Html代码中有{{}}存在时，并没有被替换成值（个人理解：也就是说{{}}等等没有效果，没有完全被解析出来，没有被完全渲染成功）
//console.log(document.getElementById('app').innerHTML);
},
mounted(){//当组件已经被真实地挂载到页面中时执行
//html代码中{{}}部分的值已经被替换了（个人理解：也就是说{{}}等等有效果，有完全被解析出来，被完全渲染成功）
//console.log(document.getElementById('app').innerHTML);
},
beforeUpdate(){//当组件的数据更新，但是Html页面没有更新时执行（个人理解：更新的数据拿到了，但HTML页面没有显示出更新的痕迹)
// console.log('h1标签中的内容：'
// + document.getElementById('h').innerHTML);
// console.log(this.msg);
},
updated(){//当组件的数据更新，而且Html页面也跟着更新的时候执行
（个人理解：更新的数据拿到了，HTML页面也显示出更新的痕迹)
// console.log('h1标签中的内容：'
// + document.getElementById('h').innerHTML);
// console.log(this.msg);
}
});
</script>
</body>
</html>
beforeUpdate(){//当组件的数据更新，但是Html页面没有更新时执行
console.log('h1标签中的内容(用innerHTML获取Html页面的内容没有更新)：'
+ document.getElementById('h').innerHTML);
console.log("组件的数据更新:"+this.msg);
},
例子2：在Vscode中实现省市下拉框联动的效果【暂时不要求完全正确的省市等的对应关系,因为省份用了mockjs生成随机的省份，暂时实现pid % 2 == 1（就是第一下拉框的省份的编号为奇数就让联动的第二级的下拉框显示一些自定义城市等等）】
如果想创建新页面，那么就要在src目录下创建page文件夹，里面写的是页面级别的组件(一般vue中“跳转界面”，本质上是切换page文件夹下的页面级别的组件）
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语句导出时的名字
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(){
//获取省份下拉框中的数据
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);
//通过代码触发自定义事件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>首页</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);
//根据pid查询数据库所有选中省份的城市
//把pid传到后台去
// let params = new URLSearchParams();
// params.append('pid', pid);
// //提交axios请求
// axios.post('',params).then(res => {
// this.clist = res;
// });
if(pid % 2 == 1) {
this.clist = [
{id: 1,name: '长沙'},
{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',//路由跳转时使用
// component: Select1
// },
{//http://localhost:8080/#/index
path: '/index',
name: 'index',//路由跳转时使用
component: index
}
//自己加的代码 END
]
})
//解决重复点击路由，界面跳转等时报错的代码 START
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
//解决重复点击路由，界面跳转等时报错的代码 END
provMock.js
//src/provMock.js
import Mock from 'mockjs';
Mock.mock('/prv',{
"provs|5-10":[{
'id|+1': 1, // 属性值自动加 1，初始值为1,
'name': '@province'//随机产生省份名称
}]
});
运行
访问
http://localhost:8080/#/index
作业
例子3：1、VUE+axios实现重名验证（用上Oracle数据库）
重名验证（注册等时用）的Oracle数据库部分
--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 --增长的值
maxvalue 999999999 --序列号的最大值
minvalue 1 --序列号的最小值
nocycle --是否循环
cache 10; --预存
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,'蓝蓝','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,'诗书画唱','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,'关注','pwd6',to_date('2020-06-11','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'诗书画唱1','pwd4',to_date('2020-06-06','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'诗书画唱2','pwd4',to_date('2020-06-06','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'诗书画唱3','pwd4',to_date('2020-06-06','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'诗书画唱4','pwd4',to_date('2020-06-06','yyyy-mm-dd'));
insert into Userinfo values(seq_Userinfo.nextval,'诗书画唱5','pwd4',to_date('2020-06-06','yyyy-mm-dd'));
--select * from Userinfo
select * from userinfo WHERE act like '%诗%'
--rows=5,page=2
--end = rows * page=10
--start = (page - 1) * rows + 1=6
--start表示>=号后面的值，end表示<=号后面的值
select * from
(select p1.*,rownum r1 from Userinfo p1
where rownum <= 10)
where r1 >=6 and act like '%诗%'
【这个不是条件查询后的分页查询，而是分页查询后的条件查询】
select * from (select t.*,rownum rn from
(select * from userinfo WHERE act like '%诗%' ) t
where rownum <= 10) where rn >= 6
【这个是条件查询后的分页查询，是常用的，如果组合查询后的数据很少，比如只有1条，
就难看出效果】
开启Oracle的服务
chong_ming_yan_zheng.vue
<template>
<div>
<h1>我的重名验证的注册页面</h1>
<!-- 界面跳转方法1: -->
<input
type="text"
v-model="username"
placeholder="请输入账号"
@input="f()"
/>
<!-- <input type="password" v-model="password" placeholder="请输入密码" />
<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";
//导入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(){
// //请求后台数据
// axios.get('http://localhost:8081/')
// .then(res => {
// //res就是后台请求的数据
// //console.log(res.data);
// this.setState({
// myDate: res.data
// });
// console.log(res);
// });
// },
methods: {
f: function () {
//mockjs的重名验证 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 == "诗书画唱");
// 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的重名验证 END
//Oracle数据库连接的重名验证 START
axios.get("http://localhost:8081").then((res) => {
// console.log(res.data);
// console.log(this.username);
// console.log(this.username == "诗书画唱");
/*这里必须用上i之类的，
如果直接判断会出问题（比如就算有一次判断为重名，显示重名，
后面如果有一次判断不重名就又会显示不重名），这样是不对的。*/
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数据库连接的重名验证 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:重名验证
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',//路由跳转时使用
// component: Select1
// },
{//http://localhost:8080/#/index
path: '/index',
name: 'index',//路由跳转时使用
component: index
},
{//http://localhost:8080/#/chong_ming_yan_zheng
path: '/chong_ming_yan_zheng',
name: 'chong_ming_yan_zheng',//路由跳转时使用
component: chong_ming_yan_zheng
},
//自己加的代码 END
]
})
//解决重复点击路由，界面跳转等时报错的代码 START
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
//解决重复点击路由，界面跳转等时报错的代码 END
ora.js（这里要写cors的跨域访问代码，不然在前台获取后台传到一个网页的数据时会出现跨域访问的错误。我弄了挺久才解决和发现。求三连！同时提醒下mockjs代替数据库时记得，用axios获取数据时不要忘了import写了mockjs的代码的文件，不然访问不到！“血”的教训！好吧，也没有那么夸张，就是浪费我很多本来做别的事的时间）
let http = require('http');
let url = require('url');
//npm install oracledb -g
let oracledb = require('oracledb');
http.createServer(function(req,res){
//参数解析
let ps = url.parse(req.url,true).query;
//数据库连接
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;
}
// 查询所有（可以封装成一个方法后调用） START：
conn.execute('select * from userinfo',function(err,rs){
if(err) {
console.log(err.message);
return;
}
//打印所有的数据
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("查询所有的数据："+newData);这样写可能打印不出数据。
// console.log("查询所有的数据：");
// console.log(newData);
// /* res.end是把数据显示在网页上的方法 */
// //处理中文乱码 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");
//发送的数据的格式必须是一个JSON字符串，
//如果发送的数据不是JSON字符串，那么这次调用就会失败
res.setHeader("content-type", "application/json");
// //传送数据到前台页面去
// res.end('{"act":"诗书画唱","pwd":666}');
/*记得如果要用axios等等前台获取数据等等写上跨域访问的cors的代码和用res.end(JSON.stringify(newData)); 而不是res.write(JSON.stringify(newData)); ，个人猜想write可能只能显示数据到网页上不可以让前台获取这个网页的数据（总之我之前就是获取不了），而end既可以显示数据到网页也可以让前台获取这个网页的数据。*/
res.end(JSON.stringify(newData));
// console.log(JSON.stringify(result));
/* res.end(JSON.stringify(result));
使用这段代码时render函数会执行两次 ，所以我暂时不用 。 */
});
// 查询所有 END
//新增 START：
// let sql = 'insert into userinfo values(seq_userinfo.nextval,:1,:2,:3)';
// conn.execute(sql,['诗书画唱好帅！','帅到想给他三连！',new Date()],{autoCommit:true},function(err,rs){
// if(err) {
// console.log(err.message);
// return;
// }
// let count = rs.rowsAffected;
// console.log('插入了' + count + '条数据');
// });
//新增 END
});
}).listen(8081);
console.log('服务器启动成功，网页上输入http://localhost:8081的访问路径就可以控制台打印数据等等')
// //serv.js
// //引入http模块
// let http = require('http');
// //引入url模块
// let url = require('url');
// //创建一个后台服务
// http.createServer(function(req,res){
// //解决跨域访问的方式一：cors
// res.setHeader("Access-Control-Allow-Origin", "*");
// res.setHeader("Access-Control-Allow-Headers", "Content-Type");
// //发送的数据的格式必须是一个JSON字符串，
// //如果发送的数据不是JSON字符串，那么这次调用就会失败
// res.setHeader("content-type", "application/json");
// //传送数据到前台页面去
// res.end('{"act":"诗书画唱","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': ['诗书画唱','SSHC'],
}]
});
例子4：2、VUE+axios实现下拉框联动
单页面上实现。后台最好连上数据库。
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语句导出时的名字
props: ['dataCity']
}
</script>
Prov.vue
<template>
<!-- mockjs时的写法 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时的写法 END-->
<!-- Oracle连接数据库时的写法 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连接数据库时的写法 END -->
</template>
<script>
import axios from 'axios';
import '../provMock';
export default {
created(){
// //mockjs获取省份下拉框中的数据的方法 START
// axios.get('/prv').then(res => {
// //console.log(res.data.provs);
// this.list = res.data.provs;
// });
// //mockjs获取省份下拉框中的数据的方法 END
//Oracle数据库获取省份下拉框中的数据的方法 START
axios.get('http://localhost:8081').then(res => {
console.log(res.data);
//this.list是数组
this.list = res.data.filter(o=>
{return o.pid==0}
);
});
//Oracle数据库获取省份下拉框中的数据的方法 END
},
data(){
return {
list: [],
pid: ''
//这里的pid对应的是选中的省份下拉框中的id,不是数据库中的pid，当然也可以pid统一改成id
};
},
methods: {
getData(){
//mockjs的部分 START
// console.log('获取选中的省份Id值是：' + this.pid);
// //通过代码触发自定义事件sendData,子组件传数据到父组件中
// this.$emit('sendData',this.pid);
//mockjs的部分 END
//Oracle数据库的部分（这里的pid对应数据库的id） START
console.log('获取选中的省份Id值是：' + this.pid);
//通过代码触发自定义事件sendData,子组件传数据到父组件中
this.$emit('sendData',this.pid);
//Oracle数据库的部分 END
}
}
}
</script>
<style scoped>
select {
width:200px;
height: 30px;
margin-top: 5px;
margin-bottom: 5px;
margin-left: 10px;
}
</style>
index.vue
<template>
<div>
<h1>首页</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数据库的部分 START
updateCityList(id) {
console.log("传过来的省份id是：" + id);
//Oracle数据库的部分 END
//根据pid查询数据库所有选中省份的城市
//把pid传到后台去
// let params = new URLSearchParams();
// params.append('pid', pid);
// //提交axios请求
// axios.post('',params).then(res => {
// this.clist = res;
// });
//mockjs时的部分 START
// if(pid % 2 == 1) {
// this.clist = [
// {id: 1,name: '长沙'},
// {id: 2,name: '株洲'},
// {id: 3,name: '湘潭'}
// ];
// } else {
// this.clist = [
// {id: 4,name: '宜春'},
// {id: 5,name: '赣州'},
// {id: 6,name: '南昌'}
// ];
// }
//mockjs时的部分 END
//Oracle数据库部分 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数据库部分 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:重名验证
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',//路由跳转时使用
// component: Select1
// },
{//http://localhost:8080/#/index
path: '/index',
name: 'index',//路由跳转时使用
component: index
},
{//http://localhost:8080/#/chong_ming_yan_zheng
path: '/chong_ming_yan_zheng',
name: 'chong_ming_yan_zheng',//路由跳转时使用
component: chong_ming_yan_zheng
},
//自己加的代码 END
]
})
//解决重复点击路由，界面跳转等时报错的代码 START
const originalPush = Router.prototype.push
Router.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
//解决重复点击路由，界面跳转等时报错的代码 END
ora2.js
let http = require('http');
let url = require('url');
//npm install oracledb -g
let oracledb = require('oracledb');
http.createServer(function(req,res){
//参数解析
let ps = url.parse(req.url,true).query;
//数据库连接
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;
}
// 查询所有（可以封装成一个方法后调用） START：
conn.execute('select * from addr',function(err,rs){
if(err) {
console.log(err.message);
return;
}
//打印所有的数据
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");
//发送的数据的格式必须是一个JSON字符串，
//如果发送的数据不是JSON字符串，那么这次调用就会失败
res.setHeader("content-type", "application/json");
// //传送数据到前台页面去
// res.end('{"act":"诗书画唱","pwd":666}');
res.end(JSON.stringify(newData));
// console.log(JSON.stringify(result));
/* res.end(JSON.stringify(result));
使用这段代码时render函数会执行两次 ，所以我暂时不用 。 */
});
});
}).listen(8081);
console.log('服务器启动成功，网页上输入http://localhost:8081的访问路径就可以控制台打印数据等等')
下拉框：下拉框联动的Oracle的数据库的SQL语句部分（适合二级和三级下拉框联动）
select * from addr
--drop table addr
create table addr (
id number primary key,
pid number,
name varchar2(20)
);
【下拉框联动就是根据“id和pid（个人理解pid为place地方的编号）相等
的2个name之间是父子关系的name。（比如父级name是省，子级name是市）。
按照下面的逻辑，可以弄出任意级别的下拉框联动
】
【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为湖南省（id=1的name）中的城市名】
insert into addr values('6', '1', '长沙');
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', '萍乡');
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（省名）中的区名】
insert into addr values('20', '6', '芙蓉区');
insert into addr values('21', '6', '天心区');
insert into addr values('22', '7', '雨湖区');
insert into addr values('23', '7', '岳塘区');
运行
http://localhost:8081/
http://localhost:8080/#/index
避雷指南
报npm ERR! code ENOENTnpm ERR! syscall opennpm ERR! 的错的原因是你打开的vue文件夹打开错了
Uncaught (in promise) Error: Request failed with status code 404
mock中数组中随机选一个对象：
'name|1': ['诗书画唱','SSHC']
