JavaWeb24.Bootstrap01

回顾:JavaWeb23.Ajax的使用

目录

使用Ajax实现省市联动功能

使用Ajax以及Bootsrtap实现无刷新分页功能


使用Ajax实现省市联动功能

创建省市表

create sequence seq_region;
create sequence seq_goods;
 
select * from bs_region order by id asc;
 
commit;
--省表
create table bs_region
(
    id   number      NOT NULL PRIMARY KEY,
    name varchar(32) NOT NULL,
    rid  int         NOT NULL
);
 
--省
insert into bs_region
values (seq_region.nextval, '北京市', 0);
insert into bs_region
values (seq_region.nextval, '天津市', 0);
insert into bs_region
values (seq_region.nextval, '上海市', 0);
insert into bs_region
values (seq_region.nextval, '重庆市', 0);
insert into bs_region
values (seq_region.nextval, '河北省', 0);
insert into bs_region
values (seq_region.nextval, '山西省', 0);
insert into bs_region
values (seq_region.nextval, '台湾省', 0);
insert into bs_region
values (seq_region.nextval, '辽宁省', 0);
insert into bs_region
values (seq_region.nextval, '吉林省', 0);
insert into bs_region
values (seq_region.nextval, '黑龙江省', 0);
insert into bs_region
values (seq_region.nextval, '江苏省', 0);
insert into bs_region
values (seq_region.nextval, '浙江省', 0);
insert into bs_region
values (seq_region.nextval, '安徽省', 0);
insert into bs_region
values (seq_region.nextval, '福建省', 0);
insert into bs_region
values (seq_region.nextval, '江西省', 0);
insert into bs_region
values (seq_region.nextval, '山东省', 0);
insert into bs_region
values (seq_region.nextval, '河南省', 0);
insert into bs_region
values (seq_region.nextval, '湖北省', 0);
insert into bs_region
values (seq_region.nextval, '湖南省', 0);
insert into bs_region
values (seq_region.nextval, '广东省', 0);
insert into bs_region
values (seq_region.nextval, '甘肃省', 0);
insert into bs_region
values (seq_region.nextval, '四川省', 0);
insert into bs_region
values (seq_region.nextval, '贵州省', 0);
insert into bs_region
values (seq_region.nextval, '海南省', 0);
insert into bs_region
values (seq_region.nextval, '云南省', 0);
insert into bs_region
values (seq_region.nextval, '青海省', 0);
insert into bs_region
values (seq_region.nextval, '陕西省', 0);
insert into bs_region
values (seq_region.nextval, '广西壮族自治区', 0);
insert into bs_region
values (seq_region.nextval, '西藏自治区', 0);
insert into bs_region
values (seq_region.nextval, '宁夏回族自治区', 0);
insert into bs_region
values (seq_region.nextval, '新疆维吾尔自治区', 0);
insert into bs_region
values (seq_region.nextval, '内蒙古自治区', 0);
insert into bs_region
values (seq_region.nextval, '澳门特别行政区', 0);
insert into bs_region
values (seq_region.nextval, '香港特别行政区', 0);
 
--插入各个省的城市数据
--4个直辖市  ;
insert into bs_region
values (seq_region.nextval, '北京市', 1);
insert into bs_region
values (seq_region.nextval, '天津市', 2);
insert into bs_region
values (seq_region.nextval, '上海市', 3);
insert into bs_region
values (seq_region.nextval, '重庆市', 4);
--5河北省(2005年辖:11个地级市,36个市辖区、22个县级市、108个县、6个自治县)  ;
insert into bs_region
values (seq_region.nextval, '石家庄市', 5);
insert into bs_region
values (seq_region.nextval, '唐山市', 5);
insert into bs_region
values (seq_region.nextval, '秦皇岛市', 5);
insert into bs_region
values (seq_region.nextval, '邯郸市', 5);
insert into bs_region
values (seq_region.nextval, '邢台市', 5);
insert into bs_region
values (seq_region.nextval, '保定市', 5);
insert into bs_region
values (seq_region.nextval, '张家口市', 5);
insert into bs_region
values (seq_region.nextval, '承德市', 5);
insert into bs_region
values (seq_region.nextval, '沧州市', 5);
insert into bs_region
values (seq_region.nextval, '廊坊市', 5);
insert into bs_region
values (seq_region.nextval, '衡水市', 5);
--6山西省11个城市  ;
insert into bs_region
values (seq_region.nextval, '太原市', 6);
insert into bs_region
values (seq_region.nextval, '大同市', 6);
insert into bs_region
values (seq_region.nextval, '阳泉市', 6);
insert into bs_region
values (seq_region.nextval, '长治市', 6);
insert into bs_region
values (seq_region.nextval, '晋城市', 6);
insert into bs_region
values (seq_region.nextval, '朔州市', 6);
insert into bs_region
values (seq_region.nextval, '晋中市', 6);
insert into bs_region
values (seq_region.nextval, '运城市', 6);
insert into bs_region
values (seq_region.nextval, '忻州市', 6);
insert into bs_region
values (seq_region.nextval, '临汾市', 6);
insert into bs_region
values (seq_region.nextval, '吕梁市', 6);
 
insert into bs_region
values (seq_region.nextval, '台北市', 7);
insert into bs_region
values (seq_region.nextval, '高雄市', 7);
insert into bs_region
values (seq_region.nextval, '基隆市', 7);
insert into bs_region
values (seq_region.nextval, '台中市', 7);
insert into bs_region
values (seq_region.nextval, '台南市', 7);
insert into bs_region
values (seq_region.nextval, '新竹市', 7);
insert into bs_region
values (seq_region.nextval, '嘉义市', 7);
insert into bs_region
values (seq_region.nextval, '台北县', 7);
insert into bs_region
values (seq_region.nextval, '宜兰县', 7);
insert into bs_region
values (seq_region.nextval, '桃园县', 7);
insert into bs_region
values (seq_region.nextval, '新竹县', 7);
insert into bs_region
values (seq_region.nextval, '苗栗县', 7);
insert into bs_region
values (seq_region.nextval, '台中县', 7);
insert into bs_region
values (seq_region.nextval, '彰化县', 7);
insert into bs_region
values (seq_region.nextval, '南投县', 7);
insert into bs_region
values (seq_region.nextval, '云林县', 7);
insert into bs_region
values (seq_region.nextval, '嘉义县', 7);
insert into bs_region
values (seq_region.nextval, '台南县', 7);
insert into bs_region
values (seq_region.nextval, '高雄县', 7);
insert into bs_region
values (seq_region.nextval, '屏东县', 7);
insert into bs_region
values (seq_region.nextval, '澎湖县', 7);
insert into bs_region
values (seq_region.nextval, '台东县', 7);
insert into bs_region
values (seq_region.nextval, '花莲县', 7);
 
insert into bs_region
values (seq_region.nextval, '沈阳市', 8);
insert into bs_region
values (seq_region.nextval, '大连市', 8);
insert into bs_region
values (seq_region.nextval, '鞍山市', 8);
insert into bs_region
values (seq_region.nextval, '抚顺市', 8);
insert into bs_region
values (seq_region.nextval, '本溪市', 8);
insert into bs_region
values (seq_region.nextval, '丹东市', 8);
insert into bs_region
values (seq_region.nextval, '锦州市', 8);
insert into bs_region
values (seq_region.nextval, '营口市', 8);
insert into bs_region
values (seq_region.nextval, '阜新市', 8);
insert into bs_region
values (seq_region.nextval, '辽阳市', 8);
insert into bs_region
values (seq_region.nextval, '盘锦市', 8);
insert into bs_region
values (seq_region.nextval, '铁岭市', 8);
insert into bs_region
values (seq_region.nextval, '朝阳市', 8);
insert into bs_region
values (seq_region.nextval, '葫芦岛市', 8);
 
insert into bs_region
values (seq_region.nextval, '长春市', 9);
insert into bs_region
values (seq_region.nextval, '吉林市', 9);
insert into bs_region
values (seq_region.nextval, '四平市', 9);
insert into bs_region
values (seq_region.nextval, '辽源市', 9);
insert into bs_region
values (seq_region.nextval, '通化市', 9);
insert into bs_region
values (seq_region.nextval, '白山市', 9);
insert into bs_region
values (seq_region.nextval, '松原市', 9);
insert into bs_region
values (seq_region.nextval, '白城市', 9);
insert into bs_region
values (seq_region.nextval, '延边朝鲜族自治州', 9);
 
insert into bs_region
values (seq_region.nextval, '哈尔滨市', 10);
insert into bs_region
values (seq_region.nextval, '齐齐哈尔市', 10);
insert into bs_region
values (seq_region.nextval, '鹤 岗 市', 10);
insert into bs_region
values (seq_region.nextval, '双鸭山市', 10);
insert into bs_region
values (seq_region.nextval, '鸡 西 市', 10);
insert into bs_region
values (seq_region.nextval, '大 庆 市', 10);
insert into bs_region
values (seq_region.nextval, '伊 春 市', 10);
insert into bs_region
values (seq_region.nextval, '牡丹江市', 10);
insert into bs_region
values (seq_region.nextval, '佳木斯市', 10);
insert into bs_region
values (seq_region.nextval, '七台河市', 10);
insert into bs_region
values (seq_region.nextval, '黑 河 市', 10);
insert into bs_region
values (seq_region.nextval, '绥 化 市', 10);
insert into bs_region
values (seq_region.nextval, '大兴安岭地区', 10);
 
insert into bs_region
values (seq_region.nextval, '南京市', 11);
insert into bs_region
values (seq_region.nextval, '无锡市', 11);
insert into bs_region
values (seq_region.nextval, '徐州市', 11);
insert into bs_region
values (seq_region.nextval, '常州市', 11);
insert into bs_region
values (seq_region.nextval, '苏州市', 11);
insert into bs_region
values (seq_region.nextval, '南通市', 11);
insert into bs_region
values (seq_region.nextval, '连云港市', 11);
insert into bs_region
values (seq_region.nextval, '淮安市', 11);
insert into bs_region
values (seq_region.nextval, '盐城市', 11);
insert into bs_region
values (seq_region.nextval, '扬州市', 11);
insert into bs_region
values (seq_region.nextval, '镇江市', 11);
insert into bs_region
values (seq_region.nextval, '泰州市', 11);
insert into bs_region
values (seq_region.nextval, '宿迁市', 11);
 
insert into bs_region
values (seq_region.nextval, '杭州市', 12);
insert into bs_region
values (seq_region.nextval, '宁波市', 12);
insert into bs_region
values (seq_region.nextval, '温州市', 12);
insert into bs_region
values (seq_region.nextval, '嘉兴市', 12);
insert into bs_region
values (seq_region.nextval, '湖州市', 12);
insert into bs_region
values (seq_region.nextval, '绍兴市', 12);
insert into bs_region
values (seq_region.nextval, '金华市', 12);
insert into bs_region
values (seq_region.nextval, '衢州市', 12);
insert into bs_region
values (seq_region.nextval, '舟山市', 12);
insert into bs_region
values (seq_region.nextval, '台州市', 12);
insert into bs_region
values (seq_region.nextval, '丽水市', 12);
 
insert into bs_region
values (seq_region.nextval, '合肥市', 13);
insert into bs_region
values (seq_region.nextval, '芜湖市', 13);
insert into bs_region
values (seq_region.nextval, '蚌埠市', 13);
insert into bs_region
values (seq_region.nextval, '淮南市', 13);
insert into bs_region
values (seq_region.nextval, '马鞍山市', 13);
insert into bs_region
values (seq_region.nextval, '淮北市', 13);
insert into bs_region
values (seq_region.nextval, '铜陵市', 13);
insert into bs_region
values (seq_region.nextval, '安庆市', 13);
insert into bs_region
values (seq_region.nextval, '黄山市', 13);
insert into bs_region
values (seq_region.nextval, '滁州市', 13);
insert into bs_region
values (seq_region.nextval, '阜阳市', 13);
insert into bs_region
values (seq_region.nextval, '宿州市', 13);
insert into bs_region
values (seq_region.nextval, '巢湖市', 13);
insert into bs_region
values (seq_region.nextval, '六安市', 13);
insert into bs_region
values (seq_region.nextval, '亳州市', 13);
insert into bs_region
values (seq_region.nextval, '池州市', 13);
insert into bs_region
values (seq_region.nextval, '宣城市', 13);
 
insert into bs_region
values (seq_region.nextval, '福州市', 14);
insert into bs_region
values (seq_region.nextval, '厦门市', 14);
insert into bs_region
values (seq_region.nextval, '莆田市', 14);
insert into bs_region
values (seq_region.nextval, '三明市', 14);
insert into bs_region
values (seq_region.nextval, '泉州市', 14);
insert into bs_region
values (seq_region.nextval, '漳州市', 14);
insert into bs_region
values (seq_region.nextval, '南平市', 14);
insert into bs_region
values (seq_region.nextval, '龙岩市', 14);
insert into bs_region
values (seq_region.nextval, '宁德市', 14);
 
insert into bs_region
values (seq_region.nextval, '南昌市', 15);
insert into bs_region
values (seq_region.nextval, '景德镇市', 15);
insert into bs_region
values (seq_region.nextval, '萍乡市', 15);
insert into bs_region
values (seq_region.nextval, '九江市', 15);
insert into bs_region
values (seq_region.nextval, '新余市', 15);
insert into bs_region
values (seq_region.nextval, '鹰潭市', 15);
insert into bs_region
values (seq_region.nextval, '赣州市', 15);
insert into bs_region
values (seq_region.nextval, '吉安市', 15);
insert into bs_region
values (seq_region.nextval, '宜春市', 15);
insert into bs_region
values (seq_region.nextval, '抚州市', 15);
insert into bs_region
values (seq_region.nextval, '上饶市', 15);
 
insert into bs_region
values (seq_region.nextval, '济南市', 16);
insert into bs_region
values (seq_region.nextval, '青岛市', 16);
insert into bs_region
values (seq_region.nextval, '淄博市', 16);
insert into bs_region
values (seq_region.nextval, '枣庄市', 16);
insert into bs_region
values (seq_region.nextval, '东营市', 16);
insert into bs_region
values (seq_region.nextval, '烟台市', 16);
insert into bs_region
values (seq_region.nextval, '潍坊市', 16);
insert into bs_region
values (seq_region.nextval, '济宁市', 16);
insert into bs_region
values (seq_region.nextval, '泰安市', 16);
insert into bs_region
values (seq_region.nextval, '威海市', 16);
insert into bs_region
values (seq_region.nextval, '日照市', 16);
insert into bs_region
values (seq_region.nextval, '莱芜市', 16);
insert into bs_region
values (seq_region.nextval, '临沂市', 16);
insert into bs_region
values (seq_region.nextval, '德州市', 16);
insert into bs_region
values (seq_region.nextval, '聊城市', 16);
insert into bs_region
values (seq_region.nextval, '滨州市', 16);
insert into bs_region
values (seq_region.nextval, '菏泽市', 16);
 
insert into bs_region
values (seq_region.nextval, '郑州市', 17);
insert into bs_region
values (seq_region.nextval, '开封市', 17);
insert into bs_region
values (seq_region.nextval, '洛阳市', 17);
insert into bs_region
values (seq_region.nextval, '平顶山市', 17);
insert into bs_region
values (seq_region.nextval, '安阳市', 17);
insert into bs_region
values (seq_region.nextval, '鹤壁市', 17);
insert into bs_region
values (seq_region.nextval, '新乡市', 17);
insert into bs_region
values (seq_region.nextval, '焦作市', 17);
insert into bs_region
values (seq_region.nextval, '濮阳市', 17);
insert into bs_region
values (seq_region.nextval, '许昌市', 17);
insert into bs_region
values (seq_region.nextval, '漯河市', 17);
insert into bs_region
values (seq_region.nextval, '三门峡市', 17);
insert into bs_region
values (seq_region.nextval, '南阳市', 17);
insert into bs_region
values (seq_region.nextval, '商丘市', 17);
insert into bs_region
values (seq_region.nextval, '信阳市', 17);
insert into bs_region
values (seq_region.nextval, '周口市', 17);
insert into bs_region
values (seq_region.nextval, '驻马店市', 17);
insert into bs_region
values (seq_region.nextval, '济源市', 17);
 
insert into bs_region
values (seq_region.nextval, '武汉市', 18);
insert into bs_region
values (seq_region.nextval, '黄石市', 18);
insert into bs_region
values (seq_region.nextval, '十堰市', 18);
insert into bs_region
values (seq_region.nextval, '荆州市', 18);
insert into bs_region
values (seq_region.nextval, '宜昌市', 18);
insert into bs_region
values (seq_region.nextval, '襄樊市', 18);
insert into bs_region
values (seq_region.nextval, '鄂州市', 18);
insert into bs_region
values (seq_region.nextval, '荆门市', 18);
insert into bs_region
values (seq_region.nextval, '孝感市', 18);
insert into bs_region
values (seq_region.nextval, '黄冈市', 18);
insert into bs_region
values (seq_region.nextval, '咸宁市', 18);
insert into bs_region
values (seq_region.nextval, '随州市', 18);
insert into bs_region
values (seq_region.nextval, '仙桃市', 18);
insert into bs_region
values (seq_region.nextval, '天门市', 18);
insert into bs_region
values (seq_region.nextval, '潜江市', 18);
insert into bs_region
values (seq_region.nextval, '神农架林区', 18);
insert into bs_region
values (seq_region.nextval, '恩施土家族苗族自治州', 18);
 
insert into bs_region
values (seq_region.nextval, '长沙市', 19);
insert into bs_region
values (seq_region.nextval, '株洲市', 19);
insert into bs_region
values (seq_region.nextval, '湘潭市', 19);
insert into bs_region
values (seq_region.nextval, '衡阳市', 19);
insert into bs_region
values (seq_region.nextval, '邵阳市', 19);
insert into bs_region
values (seq_region.nextval, '岳阳市', 19);
insert into bs_region
values (seq_region.nextval, '常德市', 19);
insert into bs_region
values (seq_region.nextval, '张家界市', 19);
insert into bs_region
values (seq_region.nextval, '益阳市', 19);
insert into bs_region
values (seq_region.nextval, '郴州市', 19);
insert into bs_region
values (seq_region.nextval, '永州市', 19);
insert into bs_region
values (seq_region.nextval, '怀化市', 19);
insert into bs_region
values (seq_region.nextval, '娄底市', 19);
insert into bs_region
values (seq_region.nextval, '湘西土家族苗族自治州', 19);
 
insert into bs_region
values (seq_region.nextval, '广州市', 20);
insert into bs_region
values (seq_region.nextval, '深圳市', 20);
insert into bs_region
values (seq_region.nextval, '珠海市', 20);
insert into bs_region
values (seq_region.nextval, '汕头市', 20);
insert into bs_region
values (seq_region.nextval, '韶关市', 20);
insert into bs_region
values (seq_region.nextval, '佛山市', 20);
insert into bs_region
values (seq_region.nextval, '江门市', 20);
insert into bs_region
values (seq_region.nextval, '湛江市', 20);
insert into bs_region
values (seq_region.nextval, '茂名市', 20);
insert into bs_region
values (seq_region.nextval, '肇庆市', 20);
insert into bs_region
values (seq_region.nextval, '惠州市', 20);
insert into bs_region
values (seq_region.nextval, '梅州市', 20);
insert into bs_region
values (seq_region.nextval, '汕尾市', 20);
insert into bs_region
values (seq_region.nextval, '河源市', 20);
insert into bs_region
values (seq_region.nextval, '阳江市', 20);
insert into bs_region
values (seq_region.nextval, '清远市', 20);
insert into bs_region
values (seq_region.nextval, '东莞市', 20);
insert into bs_region
values (seq_region.nextval, '中山市', 20);
insert into bs_region
values (seq_region.nextval, '潮州市', 20);
insert into bs_region
values (seq_region.nextval, '揭阳市', 20);
insert into bs_region
values (seq_region.nextval, '云浮市', 20);
 
insert into bs_region
values (seq_region.nextval, '兰州市', 21);
insert into bs_region
values (seq_region.nextval, '金昌市', 21);
insert into bs_region
values (seq_region.nextval, '白银市', 21);
insert into bs_region
values (seq_region.nextval, '天水市', 21);
insert into bs_region
values (seq_region.nextval, '嘉峪关市', 21);
insert into bs_region
values (seq_region.nextval, '武威市', 21);
insert into bs_region
values (seq_region.nextval, '张掖市', 21);
insert into bs_region
values (seq_region.nextval, '平凉市', 21);
insert into bs_region
values (seq_region.nextval, '酒泉市', 21);
insert into bs_region
values (seq_region.nextval, '庆阳市', 21);
insert into bs_region
values (seq_region.nextval, '定西市', 21);
insert into bs_region
values (seq_region.nextval, '陇南市', 21);
insert into bs_region
values (seq_region.nextval, '临夏回族自治州', 21);
insert into bs_region
values (seq_region.nextval, '甘南藏族自治州', 21);
 
insert into bs_region
values (seq_region.nextval, '成都市', 22);
insert into bs_region
values (seq_region.nextval, '自贡市', 22);
insert into bs_region
values (seq_region.nextval, '攀枝花市', 22);
insert into bs_region
values (seq_region.nextval, '泸州市', 22);
insert into bs_region
values (seq_region.nextval, '德阳市', 22);
insert into bs_region
values (seq_region.nextval, '绵阳市', 22);
insert into bs_region
values (seq_region.nextval, '广元市', 22);
insert into bs_region
values (seq_region.nextval, '遂宁市', 22);
insert into bs_region
values (seq_region.nextval, '内江市', 22);
insert into bs_region
values (seq_region.nextval, '乐山市', 22);
insert into bs_region
values (seq_region.nextval, '南充市', 22);
insert into bs_region
values (seq_region.nextval, '眉山市', 22);
insert into bs_region
values (seq_region.nextval, '宜宾市', 22);
insert into bs_region
values (seq_region.nextval, '广安市', 22);
insert into bs_region
values (seq_region.nextval, '达州市', 22);
insert into bs_region
values (seq_region.nextval, '雅安市', 22);
insert into bs_region
values (seq_region.nextval, '巴中市', 22);
insert into bs_region
values (seq_region.nextval, '资阳市', 22);
insert into bs_region
values (seq_region.nextval, '阿坝藏族羌族自治州', 22);
insert into bs_region
values (seq_region.nextval, '甘孜藏族自治州', 22);
insert into bs_region
values (seq_region.nextval, '凉山彝族自治州', 22);
 
insert into bs_region
values (seq_region.nextval, '贵阳市', 23);
insert into bs_region
values (seq_region.nextval, '六盘水市', 23);
insert into bs_region
values (seq_region.nextval, '遵义市', 23);
insert into bs_region
values (seq_region.nextval, '安顺市', 23);
insert into bs_region
values (seq_region.nextval, '铜仁地区', 23);
insert into bs_region
values (seq_region.nextval, '毕节地区', 23);
insert into bs_region
values (seq_region.nextval, '黔西南布依族苗族自治州', 23);
insert into bs_region
values (seq_region.nextval, '黔东南苗族侗族自治州', 23);
insert into bs_region
values (seq_region.nextval, '黔南布依族苗族自治州', 23);
 
insert into bs_region
values (seq_region.nextval, '海口市', 24);
insert into bs_region
values (seq_region.nextval, '三亚市', 24);
insert into bs_region
values (seq_region.nextval, '五指山市', 24);
insert into bs_region
values (seq_region.nextval, '琼海市', 24);
insert into bs_region
values (seq_region.nextval, '儋州市', 24);
insert into bs_region
values (seq_region.nextval, '文昌市', 24);
insert into bs_region
values (seq_region.nextval, '万宁市', 24);
insert into bs_region
values (seq_region.nextval, '东方市', 24);
insert into bs_region
values (seq_region.nextval, '澄迈县', 24);
insert into bs_region
values (seq_region.nextval, '定安县', 24);
insert into bs_region
values (seq_region.nextval, '屯昌县', 24);
insert into bs_region
values (seq_region.nextval, '临高县', 24);
insert into bs_region
values (seq_region.nextval, '白沙黎族自治县', 24);
insert into bs_region
values (seq_region.nextval, '昌江黎族自治县', 24);
insert into bs_region
values (seq_region.nextval, '乐东黎族自治县', 24);
insert into bs_region
values (seq_region.nextval, '陵水黎族自治县', 24);
insert into bs_region
values (seq_region.nextval, '保亭黎族苗族自治县', 24);
insert into bs_region
values (seq_region.nextval, '琼中黎族苗族自治县', 24);
 
insert into bs_region
values (seq_region.nextval, '昆明市', 25);
insert into bs_region
values (seq_region.nextval, '曲靖市', 25);
insert into bs_region
values (seq_region.nextval, '玉溪市', 25);
insert into bs_region
values (seq_region.nextval, '保山市', 25);
insert into bs_region
values (seq_region.nextval, '昭通市', 25);
insert into bs_region
values (seq_region.nextval, '丽江市', 25);
insert into bs_region
values (seq_region.nextval, '思茅市', 25);
insert into bs_region
values (seq_region.nextval, '临沧市', 25);
insert into bs_region
values (seq_region.nextval, '文山壮族苗族自治州', 25);
insert into bs_region
values (seq_region.nextval, '红河哈尼族彝族自治州', 25);
insert into bs_region
values (seq_region.nextval, '西双版纳傣族自治州', 25);
insert into bs_region
values (seq_region.nextval, '楚雄彝族自治州', 25);
insert into bs_region
values (seq_region.nextval, '大理白族自治州', 25);
insert into bs_region
values (seq_region.nextval, '德宏傣族景颇族自治州', 25);
insert into bs_region
values (seq_region.nextval, '怒江傈傈族自治州', 25);
insert into bs_region
values (seq_region.nextval, '迪庆藏族自治州', 25);
 
insert into bs_region
values (seq_region.nextval, '西宁市', 26);
insert into bs_region
values (seq_region.nextval, '海东地区', 26);
insert into bs_region
values (seq_region.nextval, '海北藏族自治州', 26);
insert into bs_region
values (seq_region.nextval, '黄南藏族自治州', 26);
insert into bs_region
values (seq_region.nextval, '海南藏族自治州', 26);
insert into bs_region
values (seq_region.nextval, '果洛藏族自治州', 26);
insert into bs_region
values (seq_region.nextval, '玉树藏族自治州', 26);
insert into bs_region
values (seq_region.nextval, '海西蒙古族藏族自治州', 26);
 
insert into bs_region
values (seq_region.nextval, '西安市', 27);
insert into bs_region
values (seq_region.nextval, '铜川市', 27);
insert into bs_region
values (seq_region.nextval, '宝鸡市', 27);
insert into bs_region
values (seq_region.nextval, '咸阳市', 27);
insert into bs_region
values (seq_region.nextval, '渭南市', 27);
insert into bs_region
values (seq_region.nextval, '延安市', 27);
insert into bs_region
values (seq_region.nextval, '汉中市', 27);
insert into bs_region
values (seq_region.nextval, '榆林市', 27);
insert into bs_region
values (seq_region.nextval, '安康市', 27);
insert into bs_region
values (seq_region.nextval, '商洛市', 27);
 
insert into bs_region
values (seq_region.nextval, '南宁市', 28);
insert into bs_region
values (seq_region.nextval, '柳州市', 28);
insert into bs_region
values (seq_region.nextval, '桂林市', 28);
insert into bs_region
values (seq_region.nextval, '梧州市', 28);
insert into bs_region
values (seq_region.nextval, '北海市', 28);
insert into bs_region
values (seq_region.nextval, '防城港市', 28);
insert into bs_region
values (seq_region.nextval, '钦州市', 28);
insert into bs_region
values (seq_region.nextval, '贵港市', 28);
insert into bs_region
values (seq_region.nextval, '玉林市', 28);
insert into bs_region
values (seq_region.nextval, '百色市', 28);
insert into bs_region
values (seq_region.nextval, '贺州市', 28);
insert into bs_region
values (seq_region.nextval, '河池市', 28);
insert into bs_region
values (seq_region.nextval, '来宾市', 28);
insert into bs_region
values (seq_region.nextval, '崇左市', 28);
 
insert into bs_region
values (seq_region.nextval, '拉萨市', 29);
insert into bs_region
values (seq_region.nextval, '那曲地区', 29);
insert into bs_region
values (seq_region.nextval, '昌都地区', 29);
insert into bs_region
values (seq_region.nextval, '山南地区', 29);
insert into bs_region
values (seq_region.nextval, '日喀则地区', 29);
insert into bs_region
values (seq_region.nextval, '阿里地区', 29);
insert into bs_region
values (seq_region.nextval, '林芝地区', 29);
--30宁夏回族自治区  ;
insert into bs_region
values (seq_region.nextval, '银川市', 30);
insert into bs_region
values (seq_region.nextval, '石嘴山市', 30);
insert into bs_region
values (seq_region.nextval, '吴忠市', 30);
insert into bs_region
values (seq_region.nextval, '固原市', 30);
insert into bs_region
values (seq_region.nextval, '中卫市', 30);
 
insert into bs_region
values (seq_region.nextval, '乌鲁木齐市', 31);
insert into bs_region
values (seq_region.nextval, '克拉玛依市', 31);
insert into bs_region
values (seq_region.nextval, '石河子市 ', 31);
insert into bs_region
values (seq_region.nextval, '阿拉尔市', 31);
insert into bs_region
values (seq_region.nextval, '图木舒克市', 31);
insert into bs_region
values (seq_region.nextval, '五家渠市', 31);
insert into bs_region
values (seq_region.nextval, '吐鲁番市', 31);
insert into bs_region
values (seq_region.nextval, '阿克苏市', 31);
insert into bs_region
values (seq_region.nextval, '喀什市', 31);
insert into bs_region
values (seq_region.nextval, '哈密市', 31);
insert into bs_region
values (seq_region.nextval, '和田市', 31);
insert into bs_region
values (seq_region.nextval, '阿图什市', 31);
insert into bs_region
values (seq_region.nextval, '库尔勒市', 31);
insert into bs_region
values (seq_region.nextval, '昌吉市 ', 31);
insert into bs_region
values (seq_region.nextval, '阜康市', 31);
insert into bs_region
values (seq_region.nextval, '米泉市', 31);
insert into bs_region
values (seq_region.nextval, '博乐市', 31);
insert into bs_region
values (seq_region.nextval, '伊宁市', 31);
insert into bs_region
values (seq_region.nextval, '奎屯市', 31);
insert into bs_region
values (seq_region.nextval, '塔城市', 31);
insert into bs_region
values (seq_region.nextval, '乌苏市', 31);
insert into bs_region
values (seq_region.nextval, '阿勒泰市', 31);
 
insert into bs_region
values (seq_region.nextval, '呼和浩特市', 32);
insert into bs_region
values (seq_region.nextval, '包头市', 32);
insert into bs_region
values (seq_region.nextval, '乌海市', 32);
insert into bs_region
values (seq_region.nextval, '赤峰市', 32);
insert into bs_region
values (seq_region.nextval, '通辽市', 32);
insert into bs_region
values (seq_region.nextval, '鄂尔多斯市', 32);
insert into bs_region
values (seq_region.nextval, '呼伦贝尔市', 32);
insert into bs_region
values (seq_region.nextval, '巴彦淖尔市', 32);
insert into bs_region
values (seq_region.nextval, '乌兰察布市', 32);
insert into bs_region
values (seq_region.nextval, '锡林郭勒盟', 32);
insert into bs_region
values (seq_region.nextval, '兴安盟', 32);
insert into bs_region
values (seq_region.nextval, '阿拉善盟', 32);
 
insert into bs_region
values (seq_region.nextval, '澳门特别行政区', 33);
 
insert into bs_region
values (seq_region.nextval, '香港特别行政区', 34);
 
commit;

实体类

package com.pojo;

public class Region {

    private Integer id;
    private String name;
    private Integer rid;
    
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public Integer getRid() {
		return rid;
	}
	public void setRid(Integer rid) {
		this.rid = rid;
	}
	
	public Region() {
		// TODO Auto-generated constructor stub
	}
	public Region(Integer id, String name, Integer rid) {
		super();
		this.id = id;
		this.name = name;
		this.rid = rid;
	}
	
	@Override
	public String toString() {
		return "Region [id=" + id + ", name=" + name + ", rid=" + rid + "]";
	}
}

dao层代码

package com.dao;

import java.util.List;

import com.pojo.Region;

public interface IRegionDao {

	List<Region> list(Integer rid);
	
}
package com.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.dao.IRegionDao;
import com.pojo.Region;
import com.util.DBHelper;

public class RegionDaoImpl implements IRegionDao{
	
    private Connection con;
    private PreparedStatement ps;
    private ResultSet rs;

	public List<Region> list(Integer rid) {
		List<Region> list=new ArrayList<>();
        try {
            con=DBHelper.getCon();
            ps=con.prepareStatement("select * from BS_REGION where rid=?");
            ps.setInt(1,rid);
            rs= ps.executeQuery();
            while(rs.next()){
                Region region=new Region();
                region.setId(rs.getInt(1));
                region.setName(rs.getString(2));
                region.setRid(rs.getInt(3));
                list.add(region);
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            DBHelper.close(con,ps,rs);
        }
        return list;
	}
	
}

biz层代码

package com.biz;

import java.util.List;

import com.pojo.Region;

public interface IRegionBiz {

    List<Region> list(Integer rid);

}
package com.biz.impl;

import java.util.List;

import com.biz.IRegionBiz;
import com.dao.IRegionDao;
import com.dao.impl.RegionDaoImpl;
import com.pojo.Region;

public class RegionBizImpl implements IRegionBiz{
	
	private IRegionDao regionDao=new RegionDaoImpl();

	public List<Region> list(Integer rid) {
		return regionDao.list(rid);
	}
	
}

Servlet

package com.servlet;

import com.biz.IRegionBiz;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.biz.impl.RegionBizImpl;
import com.pojo.Region;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet("/region.do")
public class RegionServlet extends HttpServlet {

    private IRegionBiz regionBiz=new RegionBizImpl();
    private ObjectMapper mapper=new ObjectMapper();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //你先得拿到rid
        Integer rid = Integer.parseInt(req.getParameter("rid"));
        //根据rid查询对应的结果
        List<Region> list = regionBiz.list(rid);
        //设置响应格式的编码
        resp.setCharacterEncoding("utf-8");
        //丢出去,通过响应对象丢出去
        PrintWriter out = resp.getWriter();
        //应该不是普通字符串,是json字符串
        String json = mapper.writeValueAsString(list);
        out.println(json);
    }

}

界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>省市联动</title>
    <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<select id="province" οnchange="changeCity()"></select>
<select id="city"></select>
<script>
    let province=$("#province")
    let city=$("#city")

    function changeCity(){
        $.get('region.do',{rid:province.val()},(resp)=>{
            //清空原来的内容
            city.empty()
            //遍历数组  循环添加内容
            for(let r of resp){
                city.append("<option value='"+r.id+"'>"+r.name+"</option>")
            }
        },"json")
    }

    //jquery的加载事件
    $(()=>{
        //显示省份
        $.get('region.do',{rid:0},(resp)=>{
            //清空原来的内容
            province.empty()
            //遍历数组  循环添加内容
            for(let r of resp){
                province.append("<option value='"+r.id+"'>"+r.name+"</option>")
            }
            //省份遍历成功了
            //接下来遍历城市
            changeCity()
        },"json")
    })
</script>
</body>
</html>

使用Ajax以及Bootsrtap实现无刷新分页功能

Oracle

create table bs_GOODS
(
    ID       NUMBER                                      not null primary key,
    NAME     VARCHAR2(20)                                not null,
    DESCRIBE VARCHAR2(100) default '此商品暂时没有介绍'           not null,
    PRICE    NUMBER                                      not null,
    stock    number        default 0                     not null,
    cover    varchar2(200) default '/images/default.jpg' not null
);
 
comment on table bs_GOODS is '商品表';
comment on column bs_GOODS.ID is '商品编号';
comment on column bs_GOODS.NAME is '商品名称';
comment on column bs_GOODS.DESCRIBE is '商品描述';
comment on column bs_GOODS.PRICE is '商品价格';
comment on column bs_GOODS.stock is '商品库存';
comment on column bs_GOODS.cover is '商品封面';
 
select seq_goods.nextval from dual;
 
insert into bs_GOODS
values (seq_goods.nextval, '珍珠奶茶', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '芋泥奶茶', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '柠檬水', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '葡萄养乐多', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '雪王咖啡', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '双炫弹筒', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '草莓大圣诞', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '蜜桃四季春', '冰冰好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '满杯百香果', '冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '红豆奶茶', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '西米奶茶', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '手打鲜橙', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '芝士奶盖绿茶', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '芝士奶盖红茶', '冰冰很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '黄桃大圣诞', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '招牌烧仙草', '很好喝', 99, 100,'a');
into bs_GOODS
values (seq_goods.nextval, '黄桃大圣诞', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '招牌烧仙草', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '巧克力大圣诞', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '招牌豆花', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '摩天脆脆', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '杨枝甘露', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '双拼摇摇奶昔', '很好喝', 99, 100,'a');
insert into bs_GOODS
values (seq_goods.nextval, '柠檬红茶', '很好喝', 99, 100,'a');
 
select * from bs_GOODS;
select * from ( select a.*,ROWNUM rid from BS_GOODS a ) b where rid between 1 and 3;
commit;

GoodsVO.java商品临时类

package com.pojo;

import java.util.List;

public class GoodsVo {
	
    private List<Goods> list;
    private Integer total;
    
	public List<Goods> getList() {
		return list;
	}
	public void setList(List<Goods> list) {
		this.list = list;
	}
	public Integer getTotal() {
		return total;
	}
	public void setTotal(Integer total) {
		this.total = total;
	}
	
    public GoodsVo() {
		// TODO Auto-generated constructor stub
	}
	public GoodsVo(List<Goods> list, Integer total) {
		super();
		this.list = list;
		this.total = total;
	}
	
	@Override
	public String toString() {
		return "GoodsVO [list=" + list + ", total=" + total + "]";
	}
}

Goods.java

package com.pojo;

public class Goods {

    private Integer id;
    private String name;
    private String describe;
    private Integer price;
    private Integer stock;
    private String cover;
    
	public Integer getId() {
		return id;
	}
	public void setId(Integer id) {
		this.id = id;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getDescribe() {
		return describe;
	}
	public void setDescribe(String describe) {
		this.describe = describe;
	}
	public Integer getPrice() {
		return price;
	}
	public void setPrice(Integer price) {
		this.price = price;
	}
	public Integer getStock() {
		return stock;
	}
	public void setStock(Integer stock) {
		this.stock = stock;
	}
	public String getCover() {
		return cover;
	}
	public void setCover(String cover) {
		this.cover = cover;
	}
	
	public Goods() {
		// TODO Auto-generated constructor stub
	}
	public Goods(Integer id, String name, String describe, Integer price, Integer stock, String cover) {
		super();
		this.id = id;
		this.name = name;
		this.describe = describe;
		this.price = price;
		this.stock = stock;
		this.cover = cover;
	}
	
	@Override
	public String toString() {
		return "Goods [id=" + id + ", name=" + name + ", describe=" + describe + ", price=" + price + ", stock=" + stock
				+ ", cover=" + cover + "]";
	}
}

biz层

package com.biz;

import java.util.List;

import com.pojo.Goods;

public interface IGoodsBiz {

    List<Goods> list(Integer page, Integer size);

    public Integer total();
	
}
package com.biz.impl;

import java.util.List;

import com.biz.IGoodsBiz;
import com.dao.IGoodsDao;
import com.dao.impl.GoodsDaoImpl;
import com.pojo.Goods;

public class GoodsBizImpl implements IGoodsBiz{
	
	private IGoodsDao goodsDao=new GoodsDaoImpl();

	@Override
	public List<Goods> list(Integer page, Integer size) {
		return goodsDao.list(page, size);
	}
	
	@Override
	public Integer total() {
		return goodsDao.total();
	}
}

dao层

package com.dao;

import java.util.List;

import com.pojo.Goods;

public interface IGoodsDao {
	
    List<Goods> list(Integer page, Integer size);

    public Integer total();

}
package com.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
import java.util.List;

import com.dao.IGoodsDao;
import com.pojo.Goods;
import com.util.DBHelper;

public class GoodsDaoImpl implements IGoodsDao{
	
    private Connection con;
    private PreparedStatement ps;
    private ResultSet rs;

	@Override
	public List<Goods> list(Integer page, Integer size) {
		List<Goods> list=new ArrayList<>();
        int begin=(page-1)*size+1;
        int end=page*size;
        try {
            con=DBHelper.getCon();
            ps=con.prepareStatement("select * from (" +
                    "    select a.*,ROWNUM rid from BS_GOODS a" +
                    ") temp where rid between ? and ?");
            ps.setInt(1,begin);
            ps.setInt(2,end);
            rs= ps.executeQuery();
            while(rs.next()){
                Goods goods=new Goods();
                goods.setId(rs.getInt(1));
                goods.setName(rs.getString(2));
                goods.setDescribe(rs.getString(3));
                goods.setPrice(rs.getInt(4));
                goods.setStock(rs.getInt(5));
                goods.setCover(rs.getString(6));
                list.add(goods);
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            DBHelper.close(con,ps,rs);
        }
        return list;
	}
	
	@Override
	public Integer total() {
		try {
            con=DBHelper.getCon();
            ps=con.prepareStatement("select count(1) from bs_goods");
            rs= ps.executeQuery();
            if(rs.next()){
                return rs.getInt(1);
            }
        }catch (Exception e){
            e.printStackTrace();
        }finally {
            DBHelper.close(con,ps,rs);
        }
        return 0;
	}
}

servlet

package com.servlet;

import com.biz.IGoodsBiz;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.biz.impl.GoodsBizImpl;
import com.pojo.Goods;
import com.pojo.GoodsVo;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

@WebServlet("/goods.do")
public class GoodsServlet extends HttpServlet {

    private IGoodsBiz goodsBiz = new GoodsBizImpl();
    private ObjectMapper mapper = new ObjectMapper();

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //先拿到请求的页数和行数
        int size = 3;
        int page = 1;
        String obj = req.getParameter("page");
        if (obj != null) {
            page = Integer.parseInt(obj);
        }
        //拿到数据库的数据
        List<Goods> list = goodsBiz.list(page, size);
        //拿到数据库的总条数
        int total = goodsBiz.total();
        //根据size计算最大的页数
        total = (int) Math.ceil(total * 1.0 / size);
        //封装Vo对象
        GoodsVo gv = new GoodsVo(list, total);
        //通过响应丢出去
        resp.setCharacterEncoding("utf-8");
        PrintWriter out = resp.getWriter();
        out.println(mapper.writeValueAsString(gv));
    }

}

主页

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>无刷新分页</title>
    <script src="js/jquery-3.3.1.js"></script>
    <!-- Bootstrap CSS -->
    <link href="bootstrap-5.0.0-beta3-dist/css/bootstrap.css" rel="stylesheet">
    <!-- Bootstrap JS -->
    <script src="bootstrap-5.0.0-beta3-dist/js/bootstrap.js"></script>
    <style>
        .container {
            padding-top: 30px;
        }
    </style>
</head>
<body class="container">
<table class="table table-dark table-striped">
    <tr>
        <th>商品编号</th>
        <th>商品名字</th>
        <th>商品描述</th>
        <th>商品价格</th>
        <th>商品库存</th>
        <th>商品封面</th>
        <th>商品操作</th>
    </tr>
</table>
<nav>
    <ul id="pagination" class="pagination pagination-lg">
    </ul>
</nav>
<script>
    let page=1;//初始第一页
    let total=1;//初始化最大有一页

    function changePage(p){
        page=p;
        $.ajax({
            url: "goods.do",
            data: {page},
            type: "post",
            dataType: "json",
            success(resp) {
                let table = $("table")
                //清除表格数据
                table.find("tr").has("td").empty()
                //生成表格数据
                for (let g of resp.list) {
                    table.append(`<tr>
                            <td>`+g.id+`</td>
                            <td>`+g.name+`</td>
                            <td>`+g.describe+`</td>
                            <td>`+g.price+`</td>
                            <td>`+g.stock+`</td>
                            <td>`+g.cover+`</td>
                            <td></td>
                        </tr>
                        `)
                }
                //生成分页条 【只有总条数发生改变】
                if(total!==resp.total){
                    total=resp.total;
                    let pagination=$("#pagination")
                    pagination.empty();
                    for (let i = 1; i <= total; i++) {
                        pagination.append(
                            '<li class="page-item"><button οnclick="changePage('+i+')" class="page-link">'+i+'</button></li>'
                        )
                    }
                }
                //选中对应的分页
                let item=$(".page-item").eq(page-1)
                //自己添加
                item.addClass("active")
                //兄弟移除
                item.siblings().removeClass("active")
            }
        })
    }
    
    //页面加载函数
    $(() => {
        changePage(1);
    })
</script>
</body>
</html>

你要尽全力保护你的梦想。那些嘲笑你梦想的人,他们注定失败,他们想把你变成和他们一样。我坚信,只要心中有梦想,我就会与众不同。你也是。

使用Bootstrap框架实现一个登录界面涉及HTML、CSS以及Bootstrap提供的组件。Bootstrap是一个流行的前端框架,它允许开发者快速地设计响应式和移动优先的网站。以下是一个简单的Bootstrap登录界面实现步骤: 1. 引入Bootstrap CSS和JS文件:你需要在你的HTML文件中引入Bootstrap的CSS和JS文件,以确保你的界面使用Bootstrap的样式和组件。 ```html <!DOCTYPE html> <html lang="zh-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>登录界面</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <h2 class="text-center mt-5">登录</h2> <form> <div class="form-group"> <label for="username">用户名:</label> <input type="text" class="form-control" id="username" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="password">密码:</label> <input type="password" class="form-control" id="password" placeholder="请输入密码"> </div> <button type="submit" class="btn btn-primary btn-block">登录</button> </form> </div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html> ``` 2. 创建表单:在`<form>`标签内部,使用Bootstrap的类和组件来创建用户名和密码输入框。例如,使用`.form-group`包裹`<label>`和`<input>`来创建表单控件组,使用`.form-control`类来让输入框响应Bootstrap的样式。 3. 添加按钮:为提交按钮添加`.btn`和`.btn-primary`类,这样按钮就会继承Bootstrap定义的蓝色样式,并且保证在不同的设备上都能适应屏幕大小。 4. 响应式布局:利用Bootstrap的栅格系统,可以使登录界面在不同屏幕尺寸下都能保持良好的布局。上面的例子中,使用`col-md-6`和`offset-md-3`类使登录表单在中等尺寸以上的屏幕上居中显示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值