前端时间的两周的校内实训课程上学习了关于前端的一些知识,课上也跟着做了基础项目并进行了完善和整理,具体如下。
项目结构
1.DropleService.html
<!-- html5标准网页声明,这是简写方式,支持html5标准的主流浏览器都认识,放置 在页面文档的最前面--><!DOCTYPE html><!-- 网页的第一个标签,以下的标签都是超文本标记lang:languag en表示:english--><html lang="en"><head><!-- meta:不会显示在页面中 表示文档的关键字,对整个网页文档的描述,设置网页的过期时间举例:当我们设置网页的关键字/描述信息后,搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说:例如使用IE9,那么就算兼容模式下切换适应IE7,仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link:链接,外部资源 - 小图标资源 --><!-- 标签组成:属性 值 键值对 描述标签(标签)的自身特点 --><!-- href:资源路径相对路径:相对于目标位置,./表示:同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径:D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><link rel="stylesheet" href="./CSSFile/RowStyle.css"><style>ul {height: 80px;background-color: white;margin-top: -4px;margin-bottom: 10px;}</style></head><body><!-- XML:放置数据的,可以自定义标签名称 --><!-- p:paragraph 语义化标签 - 见名知意 - 特点:标签本身自带很多特性语义化好处:代码结构清晰的,易于阅读的,为后期的维护和开发提供便捷条件方便解析,根据语义化展示页面 - 提高渲染速度利于搜索引擎优化。搜索引擎的爬虫会根据不同的标签赋予标签不同的权重--><!-- 第一部分 --><!-- 头部 --><header><p>小滴服务</p></header><!-- image source --><!-- 第二部分 --><section class="second_section"><img src="./Resource//banner1.png" alt=""></section><!-- 第三部分 --><section><ul><li><img src="./Resource/index1.png" alt=""><p>企业项目</p></li><li><img src="./Resource/index2.png" alt=""><p>平台风采</p></li><li><img src="./Resource/index3.png" alt=""><p>报名流程</p></li></ul><ul><li><img src="./Resource/index4.png" alt=""><p>客户管理</p></li><li><img src="./Resource/index5.png" alt=""><p>服务管理</p></li><li><img src="./Resource/index6.png" alt=""><p>新闻公告</p></li></ul><ul><li><img src="./Resource/index7.png" alt=""><p>工程案例</p></li><li><img src="./Resource/index8.png" alt=""><p>修改密码</p></li><li><img src="./Resource/index9.png" alt=""><p>会员注册</p></li></ul><ul><li><img src="./Resource/index7.png" alt=""><p>工程案例</p></li><li><img src="./Resource/index8.png" alt=""><p>修改密码</p></li><li><img src="./Resource/index9.png" alt=""><p>会员注册</p></li></ul></section><!-- 第四部分 --><footer><a href="./DropleService.html"><img src="./Resource/nav11.png" alt><p style="color: red;">小滴服务</p></a><a href="./BusinessProject.html"><img src="./Resource/nav20.png" alt><p>企业项目</p></a><a href="./ServiceProcedure.html"><img src="./Resource/nav30.png" alt><p>服务流程</p></a><a href="./Platform.html"><img src="./Resource/nav40.png" alt><p>平台风采</p></a><a href="./My.html"><img src="./Resource/nav50.png" alt><p>我的小滴</p></a></footer></body></html>
2.BusinessProject.html
<!-- html5标准网页声明,这是简写方式,支持html5标准的主流浏览器都认识,放置 在页面文档的最前面--><!DOCTYPE html><!-- 网页的第一个标签,以下的标签都是超文本标记lang:languag en表示:english--><html lang="en"><head><!-- meta:不会显示在页面中 表示文档的关键字,对整个网页文档的描述,设置网页的过期时间举例:当我们设置网页的关键字/描述信息后,搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说:例如使用IE9,那么就算兼容模式下切换适应IE7,仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link:链接,外部资源 - 小图标资源 --><!-- 标签组成:属性 值 键值对 描述标签(标签)的自身特点 --><!-- href:资源路径相对路径:相对于目标位置,./表示:同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径:D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><link rel="stylesheet" href="./CSSFile/RowStyle.css"><link rel="stylesheet" href="./CSSFile/BusinessStyle.css"><style>.BP_section {height: 50px;}.BP_a {text-decoration: none;font-size: 20px;}.main_section {margin-top: -4px;}</style></head><body><header><p>创业项目</p></header><!-- 页面导航部分 --><section class="BP_section"><a class="BP_a" href="./BusinessProject.html" style="background-color: white; color: #458CCD;"><p>钻石创业者</p></a><a class="BP_a" href="./GoldBusiness.html"><p>金牌创业者</p></a><a class="BP_a" href="./SilverBusiness.html"><p>银牌创业者</p></a></section><section class="second_section"><img src="./Resource//banner2.png" alt=""></section><!-- 主内容区域 --><section class="main_section"><div style="background-color:white;"><p>服务内容</p><img src="./Resource/50w_1.png" alt=""><p class="first_main_p">提供以上两个学院的技术支持、咨询服务、课件学习等内容</p></div><div><p>创业者享受的回报收益</p><img src="./Resource/50w_2.png" alt=""><p class="main_p">x:渠道可享有的股份额度;</p><p class="main_p">y:渠道个人业绩流水总额累计;</p><p class="main_p">z:历年渠道全部各方业绩流水总额统计;</p><p class="main_p">b:宏鑫互联网集团所拥有的上市或者充足公司纵谷本数;</p><p class="main_p">q:宏鑫互联网集团上市总股本数的20%;</p></div><div class="main_div" style="background-color:white;"><p>获得收益的条件</p><p class="main_p">①N≥10人;<br>②业绩流水≥1.2亿<br>当满足以上两个条件时,钻石创业者才能取得期权。<br>注:上面的y,z为财务数据,由财务部门按期提供,录入即可。</p></div></section><footer><a href="./DropleService.html"><img src="./Resource/nav10.png" alt><p>小滴服务</p></a><a href="./BusinessProject.html"><img src="./Resource/nav21.png" alt><p style="color: red;">企业项目</p></a><a href="./ServiceProcedure.html"><img src="./Resource/nav30.png" alt><p>服务流程</p></a><a href="./Platform.html"><img src="./Resource/nav40.png" alt><p>平台风采</p></a><a href="./My.html"><img src="./Resource/nav50.png" alt><p>我的小滴</p></a></footer></body></html>
3.GoldBusiness.html
<!-- html5标准网页声明,这是简写方式,支持html5标准的主流浏览器都认识,放置 在页面文档的最前面--><!DOCTYPE html><!-- 网页的第一个标签,以下的标签都是超文本标记lang:languag en表示:english--><html lang="en"><head><!-- meta:不会显示在页面中 表示文档的关键字,对整个网页文档的描述,设置网页的过期时间举例:当我们设置网页的关键字/描述信息后,搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说:例如使用IE9,那么就算兼容模式下切换适应IE7,仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link:链接,外部资源 - 小图标资源 --><!-- 标签组成:属性 值 键值对 描述标签(标签)的自身特点 --><!-- href:资源路径相对路径:相对于目标位置,./表示:同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径:D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><link rel="stylesheet" href="./CSSFile/RowStyle.css"><link rel="stylesheet" href="./CSSFile/BusinessStyle.css"><style>.BP_section {height: 50px;}.BP_a {text-decoration: none;font-size: 20px;}.main_section {margin-top: -4px;}</style></head><body><header><p>创业项目</p></header><!-- 页面导航部分 --><section class="BP_section"><a class="BP_a" href="./BusinessProject.html"><p>钻石创业者</p></a><a class="BP_a" href="./GoldBusiness.html" style="background-color: white; color: #458CCD;"><p>金牌创业者</p></a><a class="BP_a" href="./SilverBusiness.html"><p>银牌创业者</p></a></section><section class="second_section"><img src="./Resource//banner21.png" alt=""></section><!-- 主内容区域 --><section class="main_section"><div style="background-color:white;"><p>服务内容</p><img src="./Resource/50w_1.png" alt=""><p class="first_main_p">提供以上两个学院的技术支持、咨询服务、课件学习等内容</p></div><div><p>创业者享受的回报收益</p><img src="./Resource/30w_2.png" alt=""><p class="main_p">x:渠道可享有的股份额度;</p><p class="main_p">y:渠道个人业绩流水总额累计;</p><p class="main_p">z:历年渠道全部各方业绩流水总额统计;</p><p class="main_p">b:宏鑫互联网集团所拥有的上市或者充足公司纵谷本数;</p><p class="main_p">q:宏鑫互联网集团上市总股本数的20%;</p></div><div class="main_div" style="background-color:white;"><p>获得收益的条件</p><p class="main_p">①N≥10人;<br>②业绩流水≥1.2亿<br>当满足以上两个条件时,钻石创业者才能取得期权。<br>注:上面的y,z为财务数据,由财务部门按期提供,录入即可。</p></div></section><footer><a href="./DropleService.html"><img src="./Resource/nav10.png" alt><p>小滴服务</p></a><a href="./BusinessProject.html"><img src="./Resource/nav21.png" alt><p style="color: red;">企业项目</p></a><a href="./ServiceProcedure.html"><img src="./Resource/nav30.png" alt><p>服务流程</p></a><a href="./Platform.html"><img src="./Resource/nav40.png" alt><p>平台风采</p></a><a href="./My.html"><img src="./Resource/nav50.png" alt><p>我的小滴</p></a></footer></body></html>
4.SilverBusiness.html
<!-- html5标准网页声明,这是简写方式,支持html5标准的主流浏览器都认识,放置 在页面文档的最前面--><!DOCTYPE html><!-- 网页的第一个标签,以下的标签都是超文本标记lang:languag en表示:english--><html lang="en"><head><!-- meta:不会显示在页面中 表示文档的关键字,对整个网页文档的描述,设置网页的过期时间举例:当我们设置网页的关键字/描述信息后,搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说:例如使用IE9,那么就算兼容模式下切换适应IE7,仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link:链接,外部资源 - 小图标资源 --><!-- 标签组成:属性 值 键值对 描述标签(标签)的自身特点 --><!-- href:资源路径相对路径:相对于目标位置,./表示:同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径:D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><link rel="stylesheet" href="./CSSFile/RowStyle.css"><link rel="stylesheet" href="./CSSFile/BusinessStyle.css"><style>.BP_section {height: 50px;}.BP_a {text-decoration: none;font-size: 20px;}.main_section {margin-top: -4px;}</style></head><body><header><p>创业项目</p></header><!-- 页面导航部分 --><section class="BP_section"><a class="BP_a" href="./BusinessProject.html"><p>钻石创业者</p></a><a class="BP_a" href="./GoldBusiness.html"><p>金牌创业者</p></a><a class="BP_a" href="./SilverBusiness.html" style="background-color: white; color: #458CCD;"><p>银牌创业者</p></a></section><section class="second_section"><img src="./Resource//banner21.png" alt=""></section><!-- 主内容区域 --><section class="main_section"><div style="background-color:white;"><p>服务内容</p><img src="./Resource/10w_1.png" alt=""><p class="first_main_p">提供以上两个学院的技术支持、咨询服务、课件学习等内容</p></div><div><p>创业者享受的回报收益</p><img src="./Resource/10w_2.png" alt="" style="margin-bottom: 38px ;"></div></section><footer><a href="./DropleService.html"><img src="./Resource/nav10.png" alt><p>小滴服务</p></a><a href="./BusinessProject.html"><img src="./Resource/nav21.png" alt><p style="color: red;">企业项目</p></a><a href="./ServiceProcedure.html"><img src="./Resource/nav30.png" alt><p>服务流程</p></a><a href="./Platform.html"><img src="./Resource/nav40.png" alt><p>平台风采</p></a><a href="./My.html"><img src="./Resource/nav50.png" alt><p>我的小滴</p></a></footer></body></html>
5.ServiceProcedure.html
这个页面的效果图只是最开始的 最终的图片是通过js代码来进行插入的,由于我在编写文章的时候华衫科技那边给的这个接口文档已经关了,所以展示不了最终效果。如果不需要js来进行图片插入你们可以自行把这段代码最后的js代码给去了。
<!-- html5标准网页声明,这是简写方式,支持html5标准的主流浏览器都认识,放置 在页面文档的最前面--><!DOCTYPE html><!-- 网页的第一个标签,以下的标签都是超文本标记lang:languag en表示:english--><html lang="en"><head><!-- meta:不会显示在页面中 表示文档的关键字,对整个网页文档的描述,设置网页的过期时间举例:当我们设置网页的关键字/描述信息后,搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说:例如使用IE9,那么就算兼容模式下切换适应IE7,仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link:链接,外部资源 - 小图标资源 --><!-- 标签组成:属性 值 键值对 描述标签(标签)的自身特点 --><!-- href:资源路径相对路径:相对于目标位置,./表示:同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径:D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><link rel="stylesheet" href="./CSSFile/RowStyle.css"><script src="./CommonJS.js"></script><style>.main_section div {margin: 20px;margin-bottom: 150px;}</style></head><body><header><p>服务流程</p></header><section class="second_section"><img id="img_process" src="./Resource//banner3.png" alt=""></section><section class="main_section"><img style="margin: 10px 20px; margin-bottom: 65px;" width="90%" src="Resource/process.png"></section><footer><a href="./DropleService.html"><img src="./Resource/nav10.png" alt><p>小滴服务</p></a><a href="./BusinessProject.html"><img src="./Resource/nav20.png" alt><p>企业项目</p></a><a href="./ServiceProcedure.html"><img src="./Resource/nav31.png" alt><p style="color: red;">服务流程</p></a><a href="./Platform.html"><img src="./Resource/nav40.png" alt><p>平台风采</p></a><a href="./My.html"><img src="./Resource/nav50.png" alt><p>我的小滴</p></a></footer></body></html><script>requestData("get", "getimg", "",function (res) {console.log(res.data);// ? img 通过属性src来设置动态图片var img = document.getElementById("img_process");console.log(img);img.src = res.data;})</script>
6.Platform.html
注意这个页面的文字也是通过js代码获取的,
js文件PlatformJS.js
var a = 10;function add(num1, num2, callback) {var sum = num1 + num2;callback(sum)}function con(number) {console.log(number);}add(3, 2, con)var xhr = new XMLHttpRequest();xhr.open("get", "/2ZhGVxjacb39010e6753bd9c02ee803e6e3bfeab6e8007c/aboutus?username=xxx&psw=xxxx");xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200) {console.log(xhr.response);var res = JSON.parse(xhr.responseText)var h1 = document.getElementById("main_h1");var h3 = document.getElementById("main_h3");var p = document.getElementById("main_p");h1.innerText = res.data.title;h3.innerHTML = res.data.subTitle;p.innerHTML = res.data.info;}}
Platform.html
<!-- html5标准网页声明,这是简写方式,支持html5标准的主流浏览器都认识,放置 在页面文档的最前面--><!DOCTYPE html><!-- 网页的第一个标签,以下的标签都是超文本标记lang:languag en表示:english--><html lang="en"><head><!-- meta:不会显示在页面中 表示文档的关键字,对整个网页文档的描述,设置网页的过期时间举例:当我们设置网页的关键字/描述信息后,搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说:例如使用IE9,那么就算兼容模式下切换适应IE7,仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link:链接,外部资源 - 小图标资源 --><!-- 标签组成:属性 值 键值对 描述标签(标签)的自身特点 --><!-- href:资源路径相对路径:相对于目标位置,./表示:同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径:D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><script type="text/javascript" src="./PlatformJS.js"></script><style>.main_section {margin-top: -4px;}#main_h1 {font-size: 20px;color: red;line-height: 40px;}#main_h3 {font-size: 18px;/* border-top: 1px solid rgb(150, 146, 146); */}#main_p {text-indent: 2rem;line-height: 30px;font-weight: 520;font-size: 14px;}</style></head><body><header><p>平台风采</p></header><section class="second_section"><img src="./Resource//banner4.png" alt=""></section><!-- 主内容区域 --><section class="main_section"><!-- h1 - h6 语义含义表示不同的标题类型 --><h1 id="main_h1">公司简介</h1><hr><h3 id="main_h3"></h3><p id="main_p"></p></section><footer><a href="./DropleService.html"><img src="./Resource/nav10.png" alt><p>小滴服务</p></a><a href="./BusinessProject.html"><img src="./Resource/nav20.png" alt><p>企业项目</p></a><a href="./ServiceProcedure.html"><img src="./Resource/nav30.png" alt><p>服务流程</p></a><a href="./Platform.html"><img src="./Resource/nav41.png" alt><p style="color: red;">平台风采</p></a><a href="./My.html"><img src="./Resource/nav50.png" alt><p>我的小滴</p></a></footer></body></html>
7.My.html
<!-- html5标准网页声明,这是简写方式,支持html5标准的主流浏览器都认识,放置 在页面文档的最前面--><!DOCTYPE html><!-- 网页的第一个标签,以下的标签都是超文本标记lang:languag en表示:english--><html lang="en"><head><!-- meta:不会显示在页面中 表示文档的关键字,对整个网页文档的描述,设置网页的过期时间举例:当我们设置网页的关键字/描述信息后,搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说:例如使用IE9,那么就算兼容模式下切换适应IE7,仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link:链接,外部资源 - 小图标资源 --><!-- 标签组成:属性 值 键值对 描述标签(标签)的自身特点 --><!-- href:资源路径相对路径:相对于目标位置,./表示:同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径:D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><style>.second_section {position: relative;/* 必须设置父类为相对定位 */}.second_section div {position: absolute;left: 50%;top: 50%;margin-left: -35px;margin-top: -60px;text-align: center;line-height: 25px;}.main_section {/* 设置边框 宽度 */border: 1px solid rgb(221, 221, 221);background-color: white;border-radius: 5px;/* 定宽居中布局方式 */width: 90%;margin: 10px auto;line-height: 50px;}.left_img {float: left;margin: 0 15px;margin-top: 15px;}.right_img {float: right;margin-right: 15px;margin-top: 20px;}</style></head><body><!-- XML:放置数据的,可以自定义标签名称 --><!-- p:paragraph 语义化标签 - 见名知意 - 特点:标签本身自带很多特性语义化好处:代码结构清晰的,易于阅读的,为后期的维护和开发提供便捷条件方便解析,根据语义化展示页面 - 提高渲染速度利于搜索引擎优化。搜索引擎的爬虫会根据不同的标签赋予标签不同的权重--><!-- 第一部分 --><!-- 头部 --><header><p>我的小滴</p></header><section class="second_section"><img src="./Resource//banner5.png" alt=""><div><img src="./Resource/head.png" alt=""><p>华杉科技</p><button style="background-color: #1C6DC0;">退出登录</button></div></section><!-- 主内容区域 --><section class="main_section"><img class="left_img" src="./Resource/gr_1.png" alt=""><span>我的客户</span><img class="right_img" src="./Resource/jt.png" alt=""></section><section class="main_section"><img class="left_img" src="./Resource/gr_1.png" alt=""><span>我的客户</span><img class="right_img" src="./Resource/jt.png" alt=""></section><section class="main_section"><img class="left_img" src="./Resource/gr_1.png" alt=""><span>我的客户</span><img class="right_img" src="./Resource/jt.png" alt=""></section><section class="main_section"><img class="left_img" src="./Resource/gr_1.png" alt=""><span>我的客户</span><img class="right_img" src="./Resource/jt.png" alt=""></section><section class="main_section"><img class="left_img" src="./Resource/gr_1.png" alt=""><span>我的客户</span><img class="right_img" src="./Resource/jt.png" alt=""></section><section class="main_section"><img class="left_img" src="./Resource/gr_1.png" alt=""><span>我的客户</span><img class="right_img" src="./Resource/jt.png" alt=""></section><footer><a href="./DropleService.html"><img src="./Resource/nav10.png" alt><p>小滴服务</p></a><a href="./BusinessProject.html"><img src="./Resource/nav20.png" alt><p>企业项目</p></a><a href="./ServiceProcedure.html"><img src="./Resource/nav30.png" alt><p>服务流程</p></a><a href="./Platform.html"><img src="./Resource/nav40.png" alt><p>平台风采</p></a><a href="./My.html"><img src="./Resource/nav51.png" alt><p style="color: red;">我的小滴</p></a></footer></body></html>
8.Login.html
登录页面也是使用js代码进行校验登录 ,如果华衫科技那边接口没关掉的话可以按照如下接口文档,可以使用账号admin 密码 admin 来进行校验登录即可跳转到首页
基本接口baseurl: http://106.75.16.42:8082--------------------------------------------------------------------获取图片url: /getimgmethods: get参数:无响应:json{"code": 1, // 1成功"msg":"获取数据成功","data":"/public/static/fwlc.png" // 图片信息}-----------------------------------------------------关于我们url: /aboutusmethod:get参数:无响应:json{"code": 1, // 0失败 1成功"msg":"获取数据成功","data":{...} // 公司信息数据}----------------------------------------------------登录接口url: /loginmethods: postform-data参数:username pwd响应:json{"code": 1, // 0失败 1成功"msg":"登录成功" }登录成功的操作 默认用户名用户名:admin 密码:admin用户名:hskj 密码:123456用户名:test 密码:123456----------------------------------------------------------------------
Login.html
<!-- html5标准网页声明,这是简写方式,支持html5标准的主流浏览器都认识,放置 在页面文档的最前面--><!DOCTYPE html><!-- 网页的第一个标签,以下的标签都是超文本标记lang:languag en表示:english--><html lang="en"><head><!-- meta:不会显示在页面中 表示文档的关键字,对整个网页文档的描述,设置网页的过期时间举例:当我们设置网页的关键字/描述信息后,搜索引擎可以利用搜索来实现页面的寻找--><meta charset="UTF-8"><!-- 适配浏览器 IE 简单说:例如使用IE9,那么就算兼容模式下切换适应IE7,仍然时以IE9的样子进行页面渲染--><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>华水实训周项目</title><!-- 设置成手机模式 --><meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"><!-- link:链接,外部资源 - 小图标资源 --><!-- 标签组成:属性 值 键值对 描述标签(标签)的自身特点 --><!-- href:资源路径相对路径:相对于目标位置,./表示:同级目录下 ../ 上级目录 .. ../ 上上级目录绝对路径:D:\桌面\实习材料\小滴服务\Resource--><!-- rel relation --><link href="./Resource/icon.png" rel="short icon"><!-- 大的外部css文件 --><link rel="stylesheet" href="./CSSFile/CommonStyle.css"><!-- 各个页面之间的公共属性 --><link rel="stylesheet" href="./CSSFile/ExtemalStyle.css"><script src = "./CommonJS.js" type = "text/javascript"></script><style>.main_section {border: 1px solid #dddddd;background-color: white;height: 100px;width: 80%;margin: 20px auto;border-radius: 10px;}.input_user,.input_psw {height: 50px;line-height: 50px;}.input_user {border-bottom: 1px solid #dddddd;}input {border: none;outline: none;margin-left: 10px;}.main_section span {margin-left: 15px;}.login_div{background-color: #1C6DC0;border-radius: 10px;height: 50px;text-align: center;line-height: 50px;margin-top: 40px;}.login_div button{width: 100%;height: 100%;color: white;background: transparent;border: none;}</style></head><body><header><p>登录</p></header><section style="text-align: center;"><img style="margin-top: 60px;" src="./Resource/head.png" alt=""></section><section class="main_section"><div class="input_user"><span>账号名:</span><input type="text" id="user"></div><div class="input_psw"><span>密 码:</span><input type="password" id="pwd"></div><div class="login_div"><button id="btn">登录</button></div></section></body></html><script>// 1.当用户点击登录页面后,js部分需要知道用户的点击行为发生(点击事件)// 进行接下的处理var btn = document.getElementById("btn");console.log(btn);// 给元素添加点击事件btn.onclick = function(){// 信息提交 确认登陆// 首先:获取用户信息 - DOMvar user = document.getElementById("user").value;var pwd = document.getElementById("pwd").value// 将用户信息提交给后台 - 后台从数据库中查询到注册的信息// 之后通过代码比较是否正确/有无注册 - 之后将对应信息返回给前端// 前端根据后端信息做出对应的正确的操作+ "&pwd="var par = "username=" + user + "&pwd="+ pwd;requestData("post","login",par,function(res){// 拿到登陆状态码var code = res.code;// 如何为1,证明成功if(code == 1){// 跳转到首页 - href// BOMlocation.href = "DropleService.html"} else {// 提示用户账号/密码出错 - 查到信息(请先注册,直接跳转注册)// BOM - 浏览器alert("账号密码错误,请重新输入!");}})} </script>
CommonJS.js
function requestData(par1,par2,par3,callback){var xhr = new XMLHttpRequest();// 2.配置请求信息xhr.open(par1, "http://106.75.16.42:8082/" + par2)// 配置请求头,告诉后端前端以表格的形式传递过去参数xhr.setRequestHeader("content-Type","application/x-www-form-urlencoded");// 3.发送xhr.send(par3);// 后端收到请求,处理 - 返回对应的数据 // 前端得到想要的内容,怎么拿?xhr.onreadystatechange = function() {// 4:代表服务器正常// 200:OKif (xhr.readyState == 4 && xhr.status == 200) {// 所有的一切正常,拿到后台数据,在哪里?console.log(xhr.response);// 将服务器的json数据转换成为 JavaScript 对象var res = JSON.parse(xhr.responseText)// ************* 数据如何回去?callback(res)}}}
BusinessStyle.css
.main_section div p{text-align: center;padding-top: 10px;font-size: 18px;font-weight:600}.main_section div img{width: 100%;}.main_section div .main_p{color: #8D8D8D;font-size: 10px;padding: 0 15px;text-align: left;line-height: 30px;}.main_section div .first_main_p{color: #8D8D8D;font-size: 10px;text-align: center;}
CommonStyle.css
header{background-color: #1C6DC0;color: white;text-align: center;line-height: 44px;font-size: 18px;top: 0;position: sticky;z-index: 1;}.second_section img{width: 100%;}a{text-decoration: none;}footer {display: table;width: 100%;text-align: center;background-color: black;height: 66px;bottom: 0px;position: sticky;}footer a {display: table-cell;vertical-align: middle;}footer a p {color:white;font-size: 10px;}footer a img {width: 20px;}
ExtemalStyle.css
*{margin: 0;padding: 0;}body{background-color: #F1F1F4;}
RowStyle.css
ul,.BP_section {display: table;width: 100%;}ul li,.BP_a {display: table-cell;text-align: center;vertical-align: middle;}
到这里就是项目的全部了,需要代码到我主页自提,后续还发布了关于党建项目的作业,稍后会进行编写,可以进小编主页进行查看。
如果觉得《华衫科技-实训课程-小滴服务(Html-Css-Javascript)》对你有帮助,请点赞、收藏,并留下你的观点哦!