first commit

This commit is contained in:
编码猿
2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions

View File

@@ -0,0 +1,134 @@
<html>
<head>
<meta charset="UTF-8" />
<title>我的第一个网页</title>
</head>
<body>
<a href="https://blog.csdn.net/qq_16559905/article/details/51182085" target="_blank"> 变得很低很低和 </a>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
<div>
段落标签<i>标签</i>标签段落标签段落标签段落标签段落标签段落标签段落标签
</div>
<h4>h4</h4>
<h5>h5</h5>
<h6>h6</h6>
<p>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</p>
<p>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</p>
<div>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</div>
<div>段落标签段落标签段落标签段落标签段落标签段落标签段落标签段落标签</div>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="图片无法加载" />
<ul>
<li>
无序列表1
<ul>
<li>无序列表1-1</li>
<li>无序列表1-2</li>
<li>无序列表1-3</li>
</ul>
</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
<input type="text">
<input type="number">
<input type="password">
<input type="password">
<input type="file">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="radio" name="li">
<input type="radio" name="li">
<input type="radio" name="li2">
<input type="radio" name="li2">
<input type="hidden" name="dd">
<input type="button" value="登录" >
<input type="reset" value="登录">
<input type="submit" value="登录">
<br><br><br>
<form action="http://192.168.1.131/" method="post">
<input type="number" value="11111" placeholder="输入手机号" name="phone" readonly>
<input type="password" placeholder="输入密码" maxlength="5" name="pwd">
<input type="reset" value="清除">
<input type="submit" value="提交" disabled>
</form>
<video loop poster="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" src="https://www.runoob.com/try/demo_source/movie.mp4" controls >
</video>
<audio src=""></audio>
<select name="" id="">
<option value="">请选择</option>
<option value="10003">合肥</option>
<option value="10001">南京</option>
<option value="10002">北京</option>
</select>
<div>
HTML的 <strong>全称</strong> 为超文 <em>本标记</em> 语言,是 <i>一种标</i> 记语言。它 <big>包括一</big> 系列标签.通过这些标签可 <small>以将网</small> 络上的文 <sub>档格式</sub> 统一,使分散的 <sup>Internet资源</sup> 连接为 <del>一个逻辑</del> 整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。超..
3°
</div>
<table>
<tr>
<th>年份</th>
<th>月份</th>
</tr>
<tr>
<td>1990</td>
<td>10</td>
</tr>
<tr>
<td>2001</td>
<td>11</td>
</tr>
</table>
<textarea placeholder="sdwdw" name=""></textarea>
</body>
</html>

View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="nav">
<div class="logo">
<img src="" alt="">
<input type="text">
</div>
<div class="menu">
<ul>
<li></li>
</ul>
</div>
</div>
<div class="content">
<div class="active">
<div class="left">
<div>
<i></i>
<img src="https://himg.bdimg.com/sys/portraitn/item/public.1.3c72d8d4.97PFsTVGYI7y8QTDsCfPHA" alt="">
<span>全部教程</span>
</div>
<ul>
<li>
<a href="">1111</a>
</li>
</ul>
</div>
<div class="right">
</div>
</div>
</div>
<div class="footer">
</div>
</body>
</html>

View File

@@ -0,0 +1,164 @@
git: 团队项目管理工具
仓库(代码)
本地仓库
远程仓库
网上免费的 : github gitee coding gitlab
分支模型
开发(dev) 测试(test) 发布(build)
代码拉取(下载)到本地
代码提交步骤
1:点击源代码管理
2:点击更改 上的 + 加号 所有文件都要被上传的意思
3:在输入框中输入备注,然后 ctrl + enter
4:点击 三个 小点,,先点击拉取,然后点击推送 (表示把本地代码上传到服务器)
web开发
前端开发 (PC网站,手机网站,app开发,桌面(windows,macos,linux)开发, 后端开发)
入门简单,时间短 要学的知识非常非常多
后端开发 java,php,python,go
入门难点,时间长 要学的知识稍微少,但是需要深度
全栈开发
开发模式
1:后端渲染
2:前后端分离
app开发
安卓开发
苹果开发
桌面开发
c#
java
技术团队
技术总监
前端开发
后端开发
产品经理(项目经理【技术型,产品型】)
UI设计师
前端开发:
html:超文本标签标记语言 人体的骨骼 用来布局,划分网页的结构
css:层叠样式表 化妆品
javascript(js):人的思想
html
标签
<标签字母 开始标签> </标签字母 结束标签>
</>
标签的分类
块级标签:独占一行,可以设置宽高
p,div,h1 ~ h6
行内标签:不会独占一行,不可以设置宽高
span,img
标签字母:
html
head
title 设置标签卡的标题文字
meta 元数据标签 工具箱
https://blog.csdn.net/qq_16559905/article/details/51182085
body
a 超链接 实现跳转
h1 ~ h6 数字越大显示效果越小 标题
p 段落
img 图片
实现重复性布局的
ul 无序列表
ol 有序列表
input 输入
type
form: 表单标签
br: 换行
div 是用来布局网站结构的
method 类型:
GET
怎么传数据给后端:
地址栏传参,会把参数 通过 ?key(名字)=value(数值)&key(名字)=value(数值)
http://192.168.1.131/?phone=12343454&pwd=111111111&dddd=2222
POST
PUT
DELETE
请求体里面的

View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box_1 {
width: 200px;
height: 200px;
background: red;
/* margin: 10px; 上右下左*/
/* margin: 10px 20px; 上下 左右*/
/* margin: 10px 20px 30px; 上 左右 下 */
/* margin: 10px 20px 30px 40px; */
/* margin-left: 30px;
padding: 10px;
margin-bottom: 30px; */
/* border: 10px solid blue; */
/* border-left: 10px solid blue; */
float: left;
}
.box_2 {
width: 200px;
height: 200px;
background: blue;
float: left;
}
.hahah {
width: 100px;
height: 100px;
background: black;
}
span {
border-right: 1px solid #f5f5f5;
}
</style>
</head>
<body>
<div class="main">
<div class="box_1"></div>
<div class="box_2"></div>
</div>
<div class="hahah"></div>
<!-- <span>测试</span> -->
<!-- 留坑:块和行相互转换 -->
</body>
</html>

View File

@@ -0,0 +1,48 @@
/* .one, h2 {
color: red;
}
.main h1 {
color: lawngreen;
}
.main a span {
color: blueviolet;
} */
h2 {
color: greenyellow !important;
}
.mouse:hover {
color: red;
font-size: 30px;
}
.name:focus {
width: 200px;
}
ul li {
color: red;
}
/* ul li:nth-child(2n) {
color: black;
} */
ul li:first-child {
color: black;
}
ul li:last-child {
color: black;
}
.insert::before {
content: "—— ";
}
.insert::after {
content: " ——";
}

View File

@@ -0,0 +1,57 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css 学习</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<p class="one">测试1</p>
<p class="two">测试2</p>
<h2>标题2</h2>
<h1>标题1-1</h1>
<div class="main">
<span>span11</span>
<h1>标题1-2
<a href="">
<span>span</span>
</a>
</h1>
</div>
<div class="mouse">测试鼠标放上</div>
<input type="text" class="name">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<div class="insert">哈哈哈哈哈</div>
</body>
</html>

View File

@@ -0,0 +1,125 @@
css:
三种写法
内联
内部
外链
语法:
css属性名称: css属性数值;
选择器:
class(类) . 选择器 class="test" .test
id()选择器 # id="test" #test
区别:
1: id选择器的优先级高于class选择器
2:id选择器是用来标识唯一性的,一般不会去重复使用
* (通配符)选择器 选中所有的标签,来设置你的样式
标签 选择器
选择器类型, 选择器类型, 选择器类型, ..... {
css属性名称: css属性数值;
}
伪类选择器
父 选择器类型 子 选择器类型 : 表示父子嵌套
选择器类型, 选择器类型 :同时选中多个
../ 表示当前文件夹的上一层
./ 表示当前文件夹
/ 表示根路径
css属性记录:
!important 提升css属性的优先级
nth-child ():
使用公式(an+ b).描述:a代表一个循环的大小,
N是一个计数器(从0开始),以及b是偏移量。
盒子模型:
外边距 margin
内边距 padding
边框 border
内容 content
真实高度的计算规则:
真实高度 = 你写的宽高 + 边距 + 边框
box-sizing: border-box; 改变盒子模式的计算规则
把块元素放一行:
1:display: block;
block 块
inline 行
inline-block 行内块级
2:浮动 float
left
right
问题:元素设置浮动后,将从文档流中脱离,他原本位置被删除,会导致父元素没有高度,
那么紧接着在父元素后面的内容,就会挤过去。
解决:
clear: both; 加在 父元素后面的内容
overflow: hidden; 加载 父元素上,自动设置高度
height 手动设置高度
line-height: 行高 只针对块标签
设置文本段落的垂直行高
设置当行文本的垂直居中
居中的各种方式
1:一个具有宽度块标签想在另外一个元素内部居中
margin: 0 auto;
2:单行文本的居中line-height,数值应该是你想要居中的父元素的高度
3: 被定位的元素如何设置垂直水平居中?
移动50%,然后 margin 减去自身宽度或者高度的一半
top: 50%;
margin-top: calc(-12px / 2);
选择一个,一般都是下面的
transform: translateY(-50%);
4: 元素内部的文字水平居中,可以使用text-align: center;
5: 设置两个行内标签的对齐,选中高的元素 设置 vertical-align

View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位</title>
<style>
body {
margin: 0;
}
.main {
margin-left: 30px;
}
.box {
width: 200px;
height: 200px;
float: left;
}
.box_1 {
background: red;
position: relative;
left: 30px;
top: 40px;
}
.box_2 {
background: green;
position: relative;
left: 10px;
top: 20px;
}
.box_2_1 {
width: 100px;
height: 100px;
background: palevioletred;
position: absolute;
left: 20px;
top: 20px;
}
.box_3 {
background: yellow;
position: fixed;
right: 0;
bottom: 0;
}
.box_4 {
background: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="box_1 box"></div>
<div class="box_2 box">
<div class="box_2_1"></div>
</div>
<div class="box_3 box"></div>
<div class="box_4 box"></div>
</div>
</body>
</html>

View File

@@ -0,0 +1,45 @@
border-radius 设置圆角
zoom 实现对元素的缩放,一般用于字体font-size 小于12px的情况
border 粗细 线条类型 线条颜色
border: 1px solid #eee;
background-attachment: fixed; 背景图的定位
background-repeat 设置背景图是否重复
background-position 设置背景图定位
cursor 修改光标的样式
background-image: linear-gradient(角度, 第一个颜色, 第二个颜色);
定位 position :
通过:left right top bottom
相对定位 relative :
当元素被设置相对定位后,他原本的位置还在,但是他脱离了页面(文档流)
定位参考对象:
它的定位参考对象就是原本的位置
绝对定位 absolute :
当元素被设置绝对定位后,他原本的位置不在,但是他脱离了页面(文档流)
定位参考对象:
父元素是否设置过定位
是:定位参考对象就是父元素的位置(当前位置)
否:定位参考对象就是浏览器边框
固定定位 fixed :
当元素被设置固定定位后,他原本的位置不在,但是他脱离了页面(文档流)
定位参考对象:
定位参考对象就是浏览器边框
z-index

View File

@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3 动画</title>
<style>
/* 帧 */
@keyframes test {
/* from {
background: red;
}
to {
background: blue;
width: 300px;
height: 300px;
border-radius: 100%;
} */
0% {
background: red;
}
50% {
background: green;
width: 600px;
height: 600px;
border-radius: 50%;
}
100% {
background: blue;
width: 300px;
height: 300px;
border-radius: 100%;
}
}
.box {
width: 200px;
height: 200px;
background: red;
animation: test 6s ease 1s infinite alternate;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>media媒体查询</title>
<style>
body {
margin: 0;
}
.box {
width: 187.5px;
height: 187.5px;
float: left;
}
.box_1 {
background: red;
}
.box_2 {
background: blue;
}
@media screen and (min-width: 414px) {
.box {
width: 207px;
height: 207px;
}
}
@media screen and (min-width: 0px) and (max-width: 320px) {
.box {
width: 160px;
height: 160px;
}
}
</style>
</head>
<body>
<div class="box box_1"></div>
<div class="box box_2"></div>
</body>
</html>

View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
li,
ul {
margin: 0;
list-style: none;
padding: 0;
}
.header {
background: red;
height: 45px;
position: fixed;
width: 100%;
top: 0;
}
.footer {
background: blue;
height: 50px;
position: fixed;
width: 100%;
bottom: 0;
}
.content {
height: calc(100vh - 45px - 50px);
margin-top: 45px;
display: flex;
}
.test {
flex: 1;
}
.main {
flex: 5;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="content">
<div class="test">dsdw</div>
<div class="main">
<h2>ddd</h2>
</div>
</div>
<div class="footer"></div>
</body>
</html>

View File

@@ -0,0 +1,164 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
li,
ul {
margin: 0;
list-style: none;
padding: 0;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
background: red;
height: 45px;
}
.footer {
background: blue;
height: 50px;
}
.content {
overflow-y: scroll;
background: yellow;
flex: 1;
}
@media screen and (min-width: 375px) {
body {
width: 375px;
margin: 0 auto;
}
}
.content::-webkit-scrollbar {
width: 0;
height: 0;
background-color: #f5f5f500;
}
</style>
</head>
<body>
<div class="header">header</div>
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>34</li>
<li>35</li>
<li>36</li>
<li>37</li>
<li>38</li>
<li>39</li>
<li>40</li>
<li>41</li>
<li>42</li>
<li>43</li>
<li>44</li>
<li>45</li>
<li>46</li>
<li>47</li>
<li>48</li>
<li>49</li>
<li>50</li>
<li>51</li>
<li>52</li>
<li>53</li>
<li>54</li>
<li>55</li>
<li>56</li>
<li>57</li>
<li>58</li>
<li>59</li>
<li>60</li>
<li>61</li>
<li>62</li>
<li>63</li>
<li>64</li>
<li>65</li>
<li>66</li>
<li>67</li>
<li>68</li>
<li>69</li>
<li>70</li>
<li>71</li>
<li>72</li>
<li>73</li>
<li>74</li>
<li>75</li>
<li>76</li>
<li>77</li>
<li>78</li>
<li>79</li>
<li>80</li>
<li>81</li>
<li>82</li>
<li>83</li>
<li>84</li>
<li>85</li>
<li>86</li>
<li>87</li>
<li>88</li>
<li>89</li>
<li>90</li>
<li>91</li>
<li>92</li>
<li>93</li>
<li>94</li>
<li>95</li>
<li>96</li>
<li>97</li>
<li>98</li>
<li>99</li>
<li>100</li>
</ul>
</div>
<div class="footer">footer</div>
</body>
</html>

View File

@@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,
li,
ul {
margin: 0;
list-style: none;
padding: 0;
}
ul {
display: flex;
justify-content: space-around;
height: 40px;
background: red;
align-items: center;
/* flex-wrap: wrap; */
}
li {
/* width: 20%; */
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>社会</li>
<li>财经</li>
<li>军事</li>
<li>科技</li>
<li>体育</li>
<li>娱乐</li>
<li>政治</li>
<li>名生</li>
<li>百科</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem</title>
<script>
window.onload = function () {
getRem(750, 100)
};
window.onresize = function () {
getRem(750, 100)
};
function getRem(pwidth, prem) {
var html = document.getElementsByTagName("html")[0];
var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
html.style.fontSize = oWidth / pwidth * prem + "px";
}
</script>
<style>
body {
margin: 0;
}
.mian {
display: flex;
flex-wrap: wrap;
}
.box {
width: 1.875rem;
height: 1.875rem;
}
.box_1 {
background: red;
}
.box_2 {
background: blue;
}
</style>
</head>
<body>
<div class="mian">
<div class="box box_1"></div>
<div class="box box_2"></div>
</div>
</body>
</html>

View File

@@ -0,0 +1,22 @@
任务:
蔡敏:
1 (33).psd
1 (58).psd
1 (128).psd
计梦梦:
1 (22).psd
1 (64).psd
1 (85).psd
陶瑞:
1 (4).psd
1 (39).psd
1 (102).psd
王安民:
1 (20).psd
1 (53).psd
1 (1).psd

View File

@@ -0,0 +1,43 @@
移动端兼容:
布局兼容
1:媒体查询
2:flex
尺寸兼容
1:100%
2: rem
2 * 50
真实的尺寸 = 你写的rem数值 * html上的基准数值(font-size)
flex
新布局方式,可以实现更多的多终端兼容效果
13 css属性
display: flex
应用在父元素上 6个
justify-content 设置元素在 X 轴上的对齐方式
flex-wrap 设置元素一行放不下的时候是否换行
align-content 设置元素在 Y 轴上的对齐方式(多行)
align-items 设置元素在 Y 轴上的对齐方式(单行)
flex-direction 设置元素的排列方向,注意如果设置了column(垂直),那么 justify-content 和 align-items
作用相反。
flex-flow: flex-direction flex-wrap
应用在子元素上 6个
order: 设置元素的顺序,数值越小越靠前
flex-basis 设置元素的宽度,类似width
align-self
flex-grow 设置元素的放大比例,数值越大,所占空间越大
flex-shrink 设置元素的缩小比例,数值0,不缩放
flex: none(flex-grow) | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

View File

@@ -0,0 +1,38 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>array 数组</title>
</head>
<body>
</body>
<script>
// 数组:通过下标来存储数据
// 定义
// var a = new Array();
// a[0] = "你好0";
// a[1] = "你好1";
// a[2] = "你好2";
// var a = new Array(1,2,3,4,5);
// var a = [1,2,3,4,5,6];
// for (var i = 0; i < a.length; i++) {
// console.log(a[i]);
// }
// a.forEach(function(v, i, arr) {
// console.log(v);
// // console.log(i);
// })
</script>
</html>

View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实现新闻列表</title>
</head>
<body>
<ul class="test">
</ul>
</body>
<script>
// 虚拟dom
// var ul = {
// localName: "ul",
// className: "test",
// children: [
// {
// localName: "li",
// children: [
// {
// localName: "p",
// innerText: "ewfwef"
// }
// ]
// },
// {
// localName: "li",
// children: [
// {
// localName: "h2",
// innerText: "wdqdqw"
// }
// ]
// }
// ]
// }
var news = [
{
title: '新闻1标题',
time: '2020-10-29',
content: "新闻1内容"
},
{
title: '新闻2标题',
time: '2020-10-29',
content: "新闻2内容"
},
{
title: '新闻3标题',
time: '2020-10-29',
content: "新闻3内容"
},
{
title: '新闻4标题',
time: '2020-10-29',
content: "新闻4内容"
}
];
for (var index = 0; index < news.length; index++) {
var li = `<li>
<h2>${news[index].title}</h2>
<span>${news[index].time}</span>
<div>${news[index].content}</div>
</li>`;
document.querySelector("ul").innerHTML += li
}
</script>
</html>

View File

@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件</title>
</head>
<body>
<button class="loginBut">登录</button>
</body>
<script>
// 事件
// 三要素: 事件源 事件处理类型 事件处理函数
// 三种
// 1
// 2
document.querySelector(".loginBut").onclick = function (event) {
console.log(event);
}
// document.querySelector(".loginBut").onclick = function () {
// alert("用户登录2")
// }
// document.querySelector(".loginBut").onclick = null
// document.querySelector(".loginBut").addEventListener("click", function() {
// alert("用户登录1")
// })
// document.querySelector(".loginBut").addEventListener("click", function() {
// alert("用户登录2")
// })
</script>
</html>

View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body,html{
margin: 0;
width: 100%;
height: 100%;
}
span {
position: absolute;
}
</style>
</head>
<body>
</body>
<script>
var body = document.querySelector("body");
body.onclick = function (event) {
var x = event.clientX, y = event.clientY;
var span = document.createElement("span");
span.innerText = "哈哈哈";
span.style.left = `${x}px`;
span.style.top = `${y}px`;
console.log(span);
body.appendChild(span)
}
</script>
</html>

View File

@@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>循环</title>
</head>
<body>
</body>
<script>
// 循环
// for
// while
// for (循环的开始变量;循环的结束条件;循环的自增变量) {
// }
// var result = 0;
// for (var i = 1; i<=100; i++) {
// result+=i
// }
// console.log(result);
// var car = {
// name: {
// name1: 'F150',
// name2: '猛禽'
// },
// speed: 6,
// color: "black"
// };
// for (var key in car) {
// console.log(car[key]);
// }
// var i = 1, result = 0;
// while (i<=100) {
// result+=i;
// i++
// }
// console.log(result);
// var i = 1
// do {
// console.log(i);
// i++;
// } while (i <= 10);
</script>
</html>

View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>function 函数(方法)</title>
</head>
<body>
</body>
<script>
// function 就是具有相同功能代码的封装,降低代码冗余
// 定义 ?
// function 方法名( 可选 方法参数1,方法参数2,....) {
// // 你的代码
// }
// 没写名字的方法叫 匿名方法
// function test (money, clothes) {
// var b = 2, c = money;
// return `同学帮我洗: ${clothes}, 还剩余${c-b}元,还给了我`;
// }
// var test = function (money, clothes) {
// var b = 2, c = money;
// return `同学帮我洗: ${clothes}, 还剩余${c - b}元,还给了我`;
// }
// var c = test;
// console.log( c(10, "衣服") );
// var d = test(10, "衣服");
// console.log(d);
// 回调函数 在 异步 (同步) 代码里面用
// function async(callback) {
// var b = 1;
// setTimeout(function() {
// b = 3;
// callback(b)
// }, 3000)
// }
// async( function(ddd) {
// console.log(ddd);
// } )
// function a (callback) {
// var c = 1;
// callback(c)
// }
// a( function(res) {
// console.log(res);
// } )
// function forEach(data, callback) {
// for (let index = 0; index < data.length; index++) {
// callback(data[index], index, data)
// }
// }
// forEach(["哈哈1","哈哈2","哈哈3"], function(v,i,arr) {
// console.log(arr);
// } )
// 方法的作用域
// 全局作用域
// 局部作用域
// 变量提升
// var c = 1
// function a () {
// var c = 2;
// console.log(c); // 3
// }
// a();
// console.log(c); // 1
</script>
</html>

View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js</title>
</head>
<body>
</body>
<script>
// es5,es6,es7 ++
// typescript
// 严格模式
// 变量 计算内部会变的数据
// var 系统关键字
// var 变量名称 = 变量数值
// var 变量名称
// var a = 100
// var b = "刘兵"
// 变量名称 规范
// 1: 变量命名不可以出现特殊符号 (_ $)
// 2:变量命名不能以数字开头
// 3: 变量命名区分大小写
// 4: 变量命名 遵守 驼峰命名法
// 5: 变量名不要出现重复
// 6: 先定义后使用
// var c = "1111"
// var C = "3333"
// var UserName = "李四"
// var hhhh
// console.log(a,b);
// a = 1000
// console.log(a);
// console.error("哈哈哈哈")
// console.warn("警告")
// console.log(b);
// 常量 计算内部不会变的数据
// const 常量名称 = 常量数值
// const test = "111"
// test = "活动和德国法国发过"
// 数据类型
// 1:基本类型
// 字符串(String):凡是用双引号或单引号包裹起来的都是字符串
// 数字(Number):阿拉伯数字
// 布尔(Boolean):就是 true(真 1) 和 false(假 0)
// 对空(Null):表示没有找到某个东西
// 未定义(Undefined):变量如果未赋值,或者未定义
// Symbol:表示唯一的
// var a = 100
// var b = 1000
// var c = 1
// 简写
var a = 1, b = 2, c = 4
// 运算符 & 赋值运算符
// + - * / % ++ -- += -= *= /+ %=
// a++(--) :表示先用a,用完后然后再+1
// (--)++a : 表示先+1,然后用a
// +
// 1: 进行数学加法运算(左右两边都是数字)
// 2: 进行字符串拼接
// = 赋值
// == 判断是否相等
// === 强等于 判断是否相等,还会判断数据类型是否相等
// 比较运算符 & 逻辑运算符
// != !== ! && 条件表达式两边必须都为true,才返回true,否则直接返回false
// || 条件表达式两边只要有一个为true,就返回true
// console.log(++a);
// console.log( ( ++a - ( c + (++b) ) ) + ( a-- + (--b) ) );
// console.log( ( a-- + ( ++a + (a-true-(c++)) / --b + (++b) ) ) + ( a + b + c) );
// 2:引用数据类型
// 现在不讲
// Object array function
// 数据类型转换
</script>
</html>

View File

@@ -0,0 +1,86 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 数据类型 - 对象</title>
</head>
<body>
</body>
<script>
// object
// 1:数据组成的规则
// 2: 编程中的思想 面向对象(oop)的变成 c++ java php python js 面向过程的编程 c
// 三大特征:封装,继承,多态
// 以前 object,js 更新一个 class
// 如何定义一个对象?
// var 对象名 = {
// 属性名(key): 属性值(value)
// }
// var obj = new Object();
// obj.name = "F150";
// obj.color = "black";
// var obj = new Object({ name: "F150", color: "black" });
// var car = {
// name: {
// name1: 'F150',
// name2: '猛禽'
// },
// 11111: "test",
// speed: 6,
// color: "black"
// };
// console.log(car);
// setTimeout(() => {
// car.name = "demo";
// console.log(car);
// }, 3000)
// console.log(car.name.name2);
// console.log(car.11111);
// console.log( car["11111"] );
// car.start();
// car.stop();
// class car {
// start() {
// console.log("车辆启动了");
// }
// stop() {
// console.log("车辆停止了");
// }
// }
// class F150 extends car {
// name = "11111"
// test() {
// // console.log(this.name);
// }
// }
// class FLL extends car{
// }
// var me = new F150();
// me.test()
</script>
</html>

View File

@@ -0,0 +1 @@
alert("1111")

View File

@@ -0,0 +1,119 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件语句</title>
</head>
<body>
<input type="text" placeholder="请输入分数">
<button>查询</button>
<div class="result"></div>
</body>
<script>
// if
// if (写条件) {
// 具体要干的事情
// }
// if () {
// } else {
// }
// if () {
// } else if () {
// } else {
// }
var je = true;
// if (je) {
// console.log("我去吃饭");
// } else {
// console.log("我不去吃饭");
// }
// if(je) console.log("我去吃饭")
// else console.log("我不去吃饭")
// 三元运算
je ? console.log("我去吃饭") : console.log("我不去吃饭")
// var nums = 100;
// if (nums < 60) {
// console.log("不及格");
// } else if (nums >= 60 && nums <= 70) {
// console.log("一般");
// } else if (nums > 70 && nums <= 80) {
// console.log("普通");
// } else if (nums > 80 && nums <= 90) {
// console.log("良好");
// } else if (nums > 90 && nums <= 100) {
// console.log("优秀");
// } else {
// console.log("成绩不合理");
// }
// document.querySelector("button").onclick = () => {
// var nums = document.querySelector("input").value;
// var res = document.querySelector(".result")
// if (nums < 60) {
// console.log("不及格");
// res.innerText = "不及格"
// } else if (nums >= 60 && nums <= 70) {
// console.log("一般");
// res.innerText = "一般"
// } else if (nums > 70 && nums <= 80) {
// console.log("普通");
// res.innerText = "普通"
// } else if (nums > 80 && nums <= 90) {
// console.log("良好");
// res.innerText = "良好"
// } else if (nums > 90 && nums <= 100) {
// console.log("优秀");
// res.innerText = "优秀"
// } else {
// console.log("成绩不合理");
// res.innerText = "成绩不合理"
// }
// }
// switch
// var je = true;
// switch (je) {
// case true:
// console.log("吃饭");
// break
// case false:
// console.log("不吃饭");
// break;
// default:
// console.log("1111");
// break;
// }
</script>
</html>

View File

@@ -0,0 +1,7 @@
javascript:
js:做表单,做特效,处理简单逻辑的(复杂的逻辑),数据渲染,桌面端,app,游戏开发,3D
js:
dom 操作html+css的
bom 操作控制浏览器的

View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ajax</title>
</head>
<body>
<ul>
</ul>
</body>
<script>
// 拿出手机 创建一个新的ajax对象
var xhr = new XMLHttpRequest();
// 输入号码
// 网址! 是后端给我们的,而且不止一个,每一个网址都有一个具体的功能
xhr.open("GET", "http://127.0.0.1:3000/api/index/hot")
// 拨号
xhr.send();
// 状态监听
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 序列化(string转object/array)
var data = JSON.parse(xhr.responseText)
data.result.forEach(v => {
console.log(v);
document.querySelector("ul").innerHTML += `<li>
<a href="${v.url}" target="_blank">
<img src="${v.img}" alt="">
<div class="title">${v.title}</div>
</a>
</li>`
});
} else {
alert("当前请求失败,请稍后再试")
}
}
}
//request req 请求
//response res 响应
// 请求头
// 响应头
// 请求体
// 请求方式
// GET 要的意图 读
// http://127.0.0.1:3000/api/index/class?username=刘兵&pwd=123456&age=18
// 地址栏传参
// POST 给的意图 写
// 请求体里面
// 二级制(文件流)
// form-data
// json
// PUT 给的意图,更新操作 更新
// DELETE 给的意图,删除操作 删除
// json
// xml
</script>
</html>

View File

@@ -0,0 +1,51 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.0.3/jquery.min.js"></script>
</head>
<body>
<img src="" alt="">
</body>
<script>
// 拿出手机 创建一个新的ajax对象
var xhr = new XMLHttpRequest();
// 输入号码
// 网址! 是后端给我们的,而且不止一个,每一个网址都有一个具体的功能
xhr.open("GET", "http://127.0.0.1:3000/api/index/hot")
// 拨号
xhr.send();
// 状态监听
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
// 序列化(string转object/array)
var data = JSON.parse(xhr.responseText)
data.result.forEach(v => {
console.log(v);
document.querySelector("ul").innerHTML += `<li>
<a href="${v.url}" target="_blank">
<img src="${v.img}" alt="">
<div class="title">${v.title}</div>
</a>
</li>`
});
} else {
alert("当前请求失败,请稍后再试")
}
}
}
</scrip>
</html>

View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsonp</title>
</head>
<body>
</body>
<script>
function a (res) {
console.log(res);
}
</script>
<script src="http://127.0.0.1:3000/api/index/test?cc=a"></script>
</html>

View File

@@ -0,0 +1,62 @@
ajax
web 开发模式
1: 服务端(后端)渲染
后端:1万 jquery 写页面(30% js+html+css) 数据库 实现功能 做安全 (70%)
前端:3千 写页面(70% html+css) ( 30% )
优:方便做 seo 优化
缺:后端工作任务量大,代码维护艰难
2: 前后端 分离
后端:1.8k 数据库 写功能(业务) 做安全
前端:1.7k 写页面 做功能(前端) 做安全 app,桌面端,后端
优:代码维护方便,分工明确,减少前后端扯皮的次数,提供研发效率
缺:
用什么开通讯?
ajax
xml http request xhr
GraphQL
ajax 同源策略(浏览器)
前端:file:///C:/Users/bmy/Desktop/2021-11-05/index.html
http://127.0.0.1:8080/index
后端:http://127.0.0.1:3000/api/index/hot
1:协议
http 80
https 443
2:域名
3:端口
解决浏览器的同源策略(解决跨域)
1:后端设置cors请求头,允许前端访问
2: jsonp+callback(回调函数) 资源文件请求绕过浏览器的ajax同源策略
3:服务端代理(后端语言,nginx,apache)
A(自己前端)
|
B(自己公司的后端)
|
C(别人后端)

View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试</title>
</head>
<body>
<h2>测试测hi是</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
</html>

View File

@@ -0,0 +1,33 @@
// var { test, hello } = require("./utils");
// var request = require("request");
// request('https://www.baidu.com/', function (error, response, body) {
// console.log(body);
// });
// console.log(test());
// console.log(hello());
// console.log("你好");
// var http = require('http');
// var fs = require('fs');
// http.createServer(function(req, res){
// var html = fs.readFileSync("./index.html");
// res.writeHead(200, {'Content-Type': 'text/html; charset=utf-8'});
// res.end(html.toString());
// }).listen(8080);
const fs = require('fs');
var readStream = fs.createReadStream('index.html');
var writeStream = fs.createWriteStream("1.png");
//覆盖原有数据
readStream.pipe(writeStream);
console.log("程序执行完毕");

View File

@@ -0,0 +1,18 @@
{
"name": "2021-11-17",
"version": "1.0.0",
"description": "npm学习",
"main": "index.js",
"scripts": {
"start": "node-dev index.js",
"pc": "node-dev src/pc.js"
},
"author": "bmy",
"license": "ISC",
"dependencies": {
"axios": "^0.24.0",
"cheerio": "^1.0.0-rc.10",
"iconv-lite": "^0.6.3",
"request": "^2.88.2"
}
}

View File

@@ -0,0 +1,3 @@
module.exports = {
url: 'http://www.netbian.com/'
}

View File

@@ -0,0 +1,33 @@
const axios = require('axios');
const config = require("./config");
const iconv = require('iconv-lite');
class http {
constructor() {
this.http = axios.create({
baseURL: config.url,
timeout: 100000,
headers: {
"Cookie": "__yjs_duid=1_54d7d9761ff38fd500742b8c976378851637137358248; xygkqecookieclassrecord=%2C1%2C; Hm_lvt_14b14198b6e26157b7eba06b390ab763=1637137357,1637138134,1637138153,1637138272; xygkqecookieinforecord=%2C7-24028%2C7-24022%2C1-1%2C19-23857%2C11-23937%2C12-24000%2C; Hm_lpvt_14b14198b6e26157b7eba06b390ab763=1637144818",
"Host": "www.netbian.com",
"Referer": "http://www.netbian.com/index.htm",
"User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/95.0.4638.69 Safari/537.36"
}
});
}
async get(params) {
var res = (await this.http.get(params.url, {
params: params.data,
responseType: params.type ? "arraybuffer" : "stream"
})).data;
if (params.type == "1") {
return iconv.decode(res,'gbk');
} else {
return res;
}
}
}
module.exports = new http();

View File

@@ -0,0 +1,87 @@
var http = require("./http");
const cheerio = require('cheerio');
const fs = require('fs');
const path = require('path');
var pagePicNums = 20;
var urlArr = [] // 存放每一页的网址
var urlIndex = 0;
var pagePicArr = [] // 存放当前页有多少列表需要爬取
var picIndex = 0;
for (var i = 1; i <= 10; i++) {
if (i == 1) {
urlArr.push("")
} else {
urlArr.push(`/index_${i}.htm`)
}
}
GetPageHtml();
async function GetPageHtml() {
console.log("GetPageHtml: ",urlArr[urlIndex]);
var res = await http.get({
url: urlArr[urlIndex],
data: {},
type: "1"
});
const $ = cheerio.load(res);
$(".list ul li").each(function() {
if ($(this).attr("class") != "nextpage") {
if (! ($(this).find("a").attr("href").includes("pic")) ) {
pagePicArr.push({
title: $(this).find("a img").attr("alt"),
url: $(this).find("a").attr("href")
})
}
}
});
console.log(pagePicArr);
GetPageInfo();
}
async function GetPageInfo() {
var res = await http.get({
url: pagePicArr[picIndex].url,
data: {},
type: "1"
});
const $ = cheerio.load(res);
createdImg($(".endpage .pic img").attr("src"))
if (picIndex <= pagePicArr.length - 1) {
picIndex += 1;
// 这一页爬结束了
if (picIndex > pagePicArr.length - 1) {
console.log(`当前第 ${urlIndex} 页结束,开始下一页 ${urlIndex + 1},下一页网址是:${urlArr[urlIndex]}`);
pagePicArr = [];
picIndex = 0;
urlIndex+=1;
GetPageHtml();
} else {
GetPageInfo();
}
}
}
async function createdImg(url) {
console.log(url);
var res = await http.get({
url: url,
data: {},
type: "2"
});
fs.writeFileSync(path.join(__dirname, `./img/${pagePicArr[picIndex]?.title}.jpg`), res);
}

View File

@@ -0,0 +1,11 @@
class utils {
test () {
return "test"
}
hello() {
return "hello"
}
}
module.exports = new utils();

View File

@@ -0,0 +1,100 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue.js</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div class="app" v-cloak>
<h2 v-once>{{ test }}</h2>
<img :src="imgSrc" alt="">
<ul>
<li v-for="v,i in newList" :key="i" @click="LiClick(i)">{{ i }} | {{ v.title }}</li>
</ul>
<input type="text" placeholder="输入用户名" v-model="userName">
{{ userName }}
<div class="" v-show="isVip">vip查看的内容</div>
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
<h2>{{ hello }}</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// vue 如何实现双向数据绑定的???
// vue 指令 (标签的属性 全局属性)
// v-bind: 将变量绑定到标签的属性上
// 简写 :
// v-for 循环 必须加 :key="" 数值一般是下标
// v-html 将字符串显示成网页
// v-text 所有内容显示成为本
// v-model 用来获取输入框用户输入的数值 修饰符 .trim
// v-on 绑定点击事件 v-on:事件类型="事件处理函数"
// 简写 @事件类型="事件处理函数"
// v-show
// v-if v-else v-if-else
// v-slot 留坑,插槽的时候再说
var vm = new Vue({
el: '.app',
data: {
type: 'C',
userName: '',
test: '你好',
imgSrc: "https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
newList: [
{ id: 1, title: '新闻1' },
{ id: 2, title: '新闻2' },
{ id: 3, title: '新闻3' },
],
html: "<h2>测试html</h2>",
isVip: false
},
// vue中的所有方法
methods: {
LiClick(index) {
console.log("你点击了li标签: ", this.newList[index]);
}
},
watch: {
test(newValue, oldValue) {
console.log(newValue, oldValue);
}
},
computed: {
hello() {
return "111111"
}
}
})
</script>
</html>

View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图组件 作用域插槽的封装</title>
</head>
<body>
<div class="app">
<swiper :list="imgList">
<template v-slot:default="{ data: a }">
<img :src="a" alt="">
</template>
</swiper>
<hr>
<swiper :list="newsList">
<template v-slot:default="{ data: a }">
<p>{{ a.title }}</p>
</template>
</swiper>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
Vue.component("swiper", {
template: `
<div class="swiper">
<div class="swiper-silder" v-for="(item,index) in list" :key="index">
<slot :data="item"></slot>
</div>
</div>
`,
props: {
list: {
type: Array,
default: () => []
}
},
data() {
return {
}
},
methods: {
}
});
new Vue({
el: '.app',
data: {
imgList: [
'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png'
],
newsList: [
{ id: 1, title: '热点1' },
{ id: 2, title: '热点2' },
{ id: 3, title: '热点3' },
]
},
methods: {
}
})
</script>
</html>

View File

@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tabs切换</title>
<style>
body,
ul,
li {
margin: 0;
padding: 0;
list-style: none;
}
.tabs_title {
display: flex;
}
.tabs_title li {
margin-right: 20px;
}
.title_active {
color: red;
}
.tabs_content div {
display: none;
}
.content_active {
display: block !important;
}
</style>
</head>
<body>
<div class="app">
<ul class="tabs_title">
<!-- <li :class=" index == currentIndex ? 'title_active' : '' " -->
<li :class="{ title_active: index == currentIndex }"
@click="currentIndex = index"
v-for="(item,index) in tabsList" :key="index">
{{ item.title }}
</li>
</ul>
<div class="tabs_content">
<div :class="index == currentIndex ? 'content_active' : '' " v-for="(item,index) in tabsList" :key="index">
<p v-for="(v,i) in item.content" :key="i">
{{ v.text }}
</p>
</div>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
new Vue({
el: '.app',
data: {
currentIndex: 0,
tabsList: [
{
id: 1,
title: '精选',
content: [
{ text: '精选的内容1' },
{ text: '精选的内容2' },
{ text: '精选的内容3' },
]
},
{
id: 2,
title: '美食',
content: [
{ text: '美食的内容1' },
{ text: '美食的内容2' },
{ text: '美食的内容3' },
]
},
{
id: 3,
title: '百货',
content: [
{ text: '百货的内容1' },
{ text: '百货的内容2' },
{ text: '百货的内容3' },
]
},
{
id: 4,
title: '个护',
content: [
{ text: '个护的内容1' },
{ text: '个护的内容2' },
{ text: '个护的内容3' },
]
},
]
},
methods: {
changeActive(index) {
this.currentIndex = index;
}
}
})
</script>
</html>

View File

@@ -0,0 +1,75 @@
angular react vue 尤雨溪
m(model ajax获取到的数据) v(view 页面) vm(view and model) 模块
// dom操作
// 去dom 化
m(model)v(view)c(controller)模式 纯服务端渲染的网站开发
laravel
vue 1.x
vue 2.x
option api vue 不适合做大型项目开发
60%
class api 过渡阶段 语法
5%
@Componect
class Home extends Vue {
}
vue3.x nodejs + typescript
composition api 35%
setup() {
var test = function() {
}
return {
test
}
}
vue 优势:
数据双向(view and model)绑定 & 响应式
组件系统
计算属性和侦听器
组件
混入 mixins this 指向
更合理的代码封装(解决this指向问题)
自定义指令
过滤器
vue-router
vue第二种用法 (详细的介绍第二种用法的文件结构和规范注意事项)
demo
封装vue脚手架
做项目........
vue cli 脚手架
vue 2.x
vuecli 2.x 自己的文件夹结构
vue 3.x
vuecli 3.x 4.x 5.x 文件结构变化很大

View File

@@ -0,0 +1,149 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app">
<lb-header :title="str"></lb-header>
<lb-button @more="alertOne"></lb-button>
<h2 ref="nihao">测试标签</h2>
<lb-button @more="alertTwo"></lb-button>
<lb-header title="详情页的头部">
<template v-slot:left>
<i>我是图标left</i>
</template>
<template v-slot:right>
<i>我是图标right</i>
</template>
</lb-header>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
// 组件
// 生命周期
//
// 全局组件 在项目的任何一个页面都可以随意使用
// ref
// 局部组件 只有某个页面可以使用
// 1 定义局部组件
var button_a = {
template: `
<div>局部组件 </div>
`,
data() {
return {
}
},
methods: {},
}
Vue.component('lb-header', {
template: `
<div>
<div class="left">
<slot name="left"></slot>
</div>
<h2>{{ title }}</h2>
<div class="right">
<slot name="right"></slot>
</div>
</div>
`,
// props: [ 'title' ],
props: {
title: {
type: String,
default: '默认标题'
}
},
data() {
return {
headerText: '我的公共头部'
}
},
methods: {
}
})
Vue.component('lb-button', {
template: `
<button @click="but_click">
点我
<lb-c></lb-c>
</button>
`,
data() {
return {
aaa: '11111'
}
},
methods: {
but_click() {
// 2
console.log(this.$root.$children[3].$props.title="哈哈是受到很多很多很好的");
this.$emit("more", "1111")
}
},
// 2 注册局部组件
components: {
"lb-c":button_a
}
});
// 父子组件的数据传递
// 父 --> 子 props provide / inject
// 子 --> 父 $emit
// 传html 用插槽
// 别名插槽
// 作用域插槽 (搞不明白没关系)
// 兄弟关系
// 1: 子1 $emit 提交数据给父组件,然后父组件通过props传给子2
// 2: this.$parent $root 等实现
// 3: provide / inject
new Vue({
el: '.app',
data: {
str: '',
},
beforeCreate() {
console.log(this);
},
created() {
this.getIndex();
console.log(this.$refs.nihao);
},
methods: {
alertOne(res){
console.log(res);
this.str = res;
alert(1)
},
alertTwo(res){
console.log(res);
alert(2)
},
getIndex() {
console.log("getIndex");
}
}
})
</script>
</html>

View File

@@ -0,0 +1,44 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.test {
width: 100%;
height: 600px;
}
#one {
background: red;
}
#two {
background: green;
}
#three {
background: blue;
}
#four {
background: black;
}
</style>
</head>
<body>
<div>
<a href="#one">one</a>
<a href="#two">two</a>
<a href="#three">three</a>
<a href="#four">four</a>
</div>
<div class="test" id="one"></div>
<div class="test" id="two"></div>
<div class="test" id="three"></div>
<div class="test" id="four"></div>
</body>
</html>

View File

@@ -0,0 +1,67 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="app" v-title=" '首页' ">
{{ hello | sub }}
<h2></h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
var mix = {
data() {
return {
page: 1,
totalPage: 0
}
},
methods: {
testTwo() {
return "testTwo"
}
}
}
new Vue({
el: '.app',
mixins: [mix],
data: {
hello: '这是测试的问题哈很多很多很多很多很多很多很多很多和',
demo: '你好'
},
created() {
console.log(this.page);
console.log(this.testTwo());
},
methods: {
test() {
}
},
filters: {
sub(str) {
return str.substring(0, 10) + '...'
}
},
directives: {
title: {
bind: function (el, binding) {
var html = `<div class="header">${binding.value}</div>`
el.innerHTML = html + el.innerHTML
}
}
}
})
</script>
</html>

View File

@@ -0,0 +1,236 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue-router</title>
<style>
.active {
color: red;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to
/* .fade-leave-active below version 2.1.8 */
{
opacity: 0;
}
</style>
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/">首页</router-link>
<router-link to="/my">我的</router-link>
</p>
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<script>
// 1. 定义 (路由) 组件。
const Home = {
template: `
<div class="home">
首页
<button @click="GoLogin">登录</button>
<ul>
<router-link :to="{ path: 'info', query: { title: item.title, id: item.id } }" tag="li" v-for="(item,index) in shopList" :key="index">
{{ item.title }}
</router-link>
</ul>
</div>
`,
data() {
return {
shopList: [
{ id: 1, title: 'MBP最新款', price: 21000 },
{ id: 2, title: 'iphone最新款', price: 9000 },
{ id: 3, title: '鞋子最新款', price: 400 },
]
}
},
methods: {
GoLogin() {
this.$router.push("/login")
// this.$router.push({
// path: '/login',
// query: {
// id: "111"
// }
// })
}
}
}
const Info = {
template: `<div>详情页面</div>`,
data() {
return {
}
},
created() {
// $route 获取路由的配置信息
// $router vuerouter的所有方法
console.log(this.$route.query.id, this.$route.query.title);
},
}
const Login = {
template: `
<div @click="login">登录页面</div>
`,
methods: {
login() {
localStorage.setItem("token", '1111122222');
if (this.$route.query.hasOwnProperty("from")) {
this.$router.replace({
path: this.$route.query.from
})
} else {
this.$router.replace("/")
}
}
}
}
const My = {
template: `<div>我的页面</div>`
}
const NotFound = {
template: `<div>404页面</div>`
}
const routes = [
{
name: 'error',
path: '*',
component: NotFound,
meta: {
isLogin: false
}
// redirect: "/"
},
{
name: 'home',
path: '/',
component: Home,
meta: {
isLogin: false,
title: '首页'
}
},
{
name: 'info',
path: '/info',
component: Info,
meta: {
isLogin: false,
title: '详情'
}
},
{
name: 'login',
path: '/login',
component: Login,
meta: {
isLogin: false,
title: '登录'
},
beforeEnter: (to, from, next) => {
if (localStorage.getItem("token") != null) {
history.back();
} else {
next();
}
}
},
{
name: 'my',
path: '/my',
component: My,
meta: {
isLogin: true,
title: '我的'
}
},
]
const router = new VueRouter({
mode: "hash",
linkExactActiveClass: 'active',
routes
});
// 实现页面的权限控制(有些页面需要登录才可以访问)
router.beforeEach((to, from, next) => {
document.title = to.meta.title
// 判断你要访问的页面是否需要登录,如果需要登录
// 再判断用户是否登录
// 需要等
if (to.meta.isLogin) {
// 登录过了
if (localStorage.getItem("token") != null) {
next();
} else {
next({
path: '/login',
query: {
from: to.fullPath
}
})
}
} else {
next();
}
})
const app = new Vue({
router,
el: "#app"
})
// 现在,应用已经启动了!
// vue-router
// hash http://www.test.com/#/info
// history
// http://www.test.com/car
// 页面传参方式
// 1: query
// http://www.test.com/info?id=1&page=2
// 2: params
// http://www.test.com/car/1/2
</script>
</html>

View File

@@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<webview url="https://www.baidu.com/s?ie=utf-8&f=3&rsv_bp"></webview>
</body>
</html>

View File

@@ -0,0 +1,47 @@
uniapp
用前端开发APP
1:Cordova lonic PhoneGap
2:React Native weex
1:Android(java) ios(object-c, swift) 原生
更新成本太高了 开发成本高
webview html 标签
2: webview (android system webview) (H5页面) + 原生
webview 让浏览器中的js和android代码进行交互
3: 混合app,中间层转换 ReactNative Weex VueNative uniapp flutter
webview
前身:
mui
uniapp 基于 vue.js
js
|
webview
|
uniapp.jar
|
android
adb 电脑控制手机的调试工具
nvue
index.nvue(weex) ===> 原生渲染
vue
index.vue ===> index.js

View File

@@ -0,0 +1,11 @@
body,
html,
h2,
h3,
h4,
h5,
h6,
h6,
p {
margin: 0;
}

View File

@@ -0,0 +1,55 @@
.bmy_dialog {
position: fixed;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
}
.bmy_dialog_content {
background: #fff;
font-size: 16px;
border-radius: 16px;
margin-top: -5%;
}
.bmy_dialog_title {
padding-top: 26px;
font-weight: 500;
line-height: 24px;
text-align: center;
}
.bmy_dialog_message {
color: #646566;
padding: 26px 24px;
padding-top: 8px;
text-align: center;
word-wrap: break-word;
max-height: 60vh;
overflow-y: scroll;
}
.bmy_dialog_button{
display: flex;
align-items: center;
height: 48px;
}
.bmy_dialog_cancel {
border-bottom-left-radius: 16px;
}
.bmy_dialog_confirm {
border-bottom-right-radius: 16px;
}
.button {
flex: 1;
height: 100%;
text-align: center;
line-height: 48px;
user-select: none;
}
.button:active {
background: #e6e6e6;
}

View File

@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
</style>
</head>
<body>
<div class="test">
<button class="ddd">点我</button>
</div>
</body>
<script>
document.querySelector(".test").onclick = function () {
alert(1)
}
document.querySelector(".ddd").onclick = function (e) {
console.log(e);
e.stopPropagation()
alert(2)
}
</script>
</html>

View File

@@ -0,0 +1,95 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>弹出层</title>
<link rel="stylesheet" href="./css/clear.css">
<link rel="stylesheet" href="./css/dialog.css">
</head>
<body>
<button>登录</button>
</body>
<script src="./js/dialog.js"></script>
<script>
// 初始化插件,并传入配置参数
// 配置参数
// 插件内部默认的参数
// 使用者自定义传入的参数
// 可选参数 必填参数
var dia = new Dialog({
title: '标题222',
message: '哈哈哈哈',
confirmButtonText: 'OK',
showConfirmButton: true,
cancelButtonText: '取消2',
cancelButtonColor: '',
});
document.querySelector("button").onclick = () => {
dia.open();
// dia.oncancel( function () {
// console.log("你点击取消2");
// } );
dia.onconfirm( function () {
console.log("你点击确定按钮2");
} );
}
// var name = "里斯"
// var test = {
// name: '张三',
// getName: () => {
// console.log("1: ",this);
// var a = {
// id: 1,
// name: '哈哈哈哈',
// getId: () => {
// console.log("2: ",this);
// console.log(this.name); //
// }
// }
// a.getId()
// console.log(this.name);
// }
// }
// test.getName()
// this 墙头草
// this 在定义的时候无法确定指向谁,this会在被调用的时候确定执行
// 箭头函数 解绑this作用域
// 定义一个变量,保存this指向
// function demo() {
// var c = 1;
// var test = function () {
// c += 1;
// return c
// }
// return test;
// }
// var a = demo()
// console.log( a() ); // 2
// console.log( a() ); // 2
// // 闭包 方法内部的方法,内部方法访问外部变量,外部变量会被缓存的过程
// // 场景:为了避免重复计算,缓存常用的数据
// // 缺点:导致内存泄漏
</script>
</html>

View File

@@ -0,0 +1,160 @@
// 语法糖
class Dialog {
// 默认参数
defaultOption = {
title: '标题1',
message: '内容1',
showConfirmButton: false,
confirmButtonText: '确认',
confirmButtonColor: '#ee0a24',
showCancelButton: true,
cancelButtonText: '取消',
cancelButtonColor: 'black',
className: '',
width: 320,
overlay: true,
closeOnPopstate: true, // 是否在页面回退时自动关闭
closeOnClickOverlay: true, // 是否在点击遮罩层后关闭弹窗
lockScroll: false,
allowHtml: true,
confirm: () => { }, // 确认按钮的回调
cancel: () => { }, // 点击取消按钮时触发
oncancel: () => { }, // 打开弹出
onconfirm: () => { } // 关闭弹窗
}
// 构造函数
constructor(option) {
if (option.hasOwnProperty("title") && option.hasOwnProperty("message")) {
this.defaultOption.title = option.title || this.defaultOption.title
this.defaultOption.message = option.message || this.defaultOption.message
option.hasOwnProperty("showConfirmButton") ? this.defaultOption.showConfirmButton = option.showConfirmButton : ''
option.hasOwnProperty("showCancelButton") ? this.defaultOption.showCancelButton = option.showCancelButton : ''
option.hasOwnProperty("overlay") ? this.defaultOption.overlay = option.overlay : ''
option.hasOwnProperty("closeOnPopstate") ? this.defaultOption.closeOnPopstate = option.closeOnPopstate : ''
option.hasOwnProperty("closeOnClickOverlay") ? this.defaultOption.closeOnClickOverlay = option.closeOnClickOverlay : ''
option.hasOwnProperty("lockScroll") ? this.defaultOption.lockScroll = option.lockScroll : ''
option.hasOwnProperty("allowHtml") ? this.defaultOption.allowHtml = option.allowHtml : ''
this.defaultOption.confirmButtonText = option.confirmButtonText || this.defaultOption.confirmButtonText
this.defaultOption.cancelButtonText = option.cancelButtonText || this.defaultOption.cancelButtonText
this.defaultOption.className = option.className || this.defaultOption.className
this.defaultOption.width = option.width || this.defaultOption.width
this.defaultOption.confirmButtonColor = option.confirmButtonColor || this.defaultOption.confirmButtonColor
this.defaultOption.cancelButtonColor = option.cancelButtonColor || this.defaultOption.cancelButtonColor
this.defaultOption.confirm = option.confirm || this.defaultOption.confirm
this.defaultOption.cancel = option.cancel || this.defaultOption.cancel
this.defaultOption.open = option.open || this.defaultOption.open
this.defaultOption.close = option.close || this.defaultOption.close
} else {
throw new Error("抱歉,缺少必填的title,message参数,请传入!")
}
}
initHTML() {
$("body").insertAdjacentHTML("beforeend", `
<div class="bmy_dialog ${this.defaultOption.className}">
<div class="bmy_dialog_content" style="width:${this.defaultOption.width}px">
<div class="bmy_dialog_title">${this.defaultOption.title}</div>
<div class="bmy_dialog_message"></div>
<div class="bmy_dialog_button">
${this.defaultOption.showCancelButton
? `<div style="color:${this.defaultOption.cancelButtonColor}" class="button bmy_dialog_cancel">${this.defaultOption.cancelButtonText}</div>`
: ''
}
${this.defaultOption.showConfirmButton
? `<div style="color:${this.defaultOption.confirmButtonColor}" class="button bmy_dialog_confirm">${this.defaultOption.confirmButtonText}</div>`
: ''
}
</div>
</div>
</div>`);
this.initConfig();
}
initConfig() {
// 是否监听页面返回
if (this.defaultOption.closeOnPopstate) {
window.addEventListener("popstate", (e) => {
this.close();
}, false);
}
// 是否显示背景层
this.defaultOption.overlay
? ''
: $(".bmy_dialog ").style.backgroundColor = "rgba(0, 0, 0, 0)"
// message 是否支持渲染html
this.defaultOption.allowHtml
? $(".bmy_dialog_message").innerHTML = this.defaultOption.message
: $(".bmy_dialog_message").innerText = this.defaultOption.message
// 是否锁住背景层
this.defaultOption.lockScroll
? $("body").style.overflow = "hidden"
: $("body").style.overflow = "auto"
$(".bmy_dialog_cancel").onclick = (e) => {
e.stopPropagation()
this.close();
}
$(".bmy_dialog_confirm").onclick = (e) => {
e.stopPropagation()
this.defaultOption.confirm()
this.defaultOption.onconfirm()
this.close();
}
if (this.defaultOption.closeOnClickOverlay) {
$(".bmy_dialog").onclick = () => {
this.close();
}
}
}
open () {
this.initHTML()
}
close () {
$("body").removeChild($(".bmy_dialog"))
this.defaultOption.cancel()
this.defaultOption.oncancel()
}
oncancel(callback) {
this.defaultOption.oncancel = callback
}
onconfirm(callback) {
this.defaultOption.onconfirm = callback
}
}
function open () {
}
function $(className) {
return document.querySelector(className)
}

View File

@@ -0,0 +1 @@
webpack

View File

@@ -0,0 +1,16 @@
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
"version": "0.0",
"configurations": [{
"default" :
{
"launchtype" : "local"
},
"h5" :
{
"launchtype" : "local"
},
"type" : "uniCloud"
}
]
}

View File

@@ -0,0 +1,21 @@
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
},
// 全局变量
globalData: {
}
}
</script>
<style>
@import "@/less/_.less";
</style>

View File

@@ -0,0 +1,32 @@
import http from "@/service";
import utils from "@/utils";
export default {
devBaseUrl: 'http://127.0.0.1:3000/api/json', // 开发阶段
testBaseUrl: '', // 测试阶段
prodBaseUrl: '', // 正式阶段
apiList: {
home: '/index'
},
VueComponents: [],
NotVuePlugins: [
{ n: '$http', v: http },
{ n: '$utils', v: utils },
],
CheckBaseUrl: function () {
switch (process.env.NODE_ENV) {
case "development":
return this.devBaseUrl;
break;
case "test":
return this.testBaseUrl;
break;
case "production":
return this.prodBaseUrl;
break;
default:
break;
}
}
}

View File

@@ -0,0 +1,68 @@
import config from "@/config"
export default class Http {
constructor() {}
async get(params) {
uni.showLoading({
title: '加载中...'
});
return new Promise((success, error) => {
uni.request({
url: config.CheckBaseUrl() + params.url,
method: "GET",
data: params.data,
header: Object.assign({
"Content-Type": "application/json; charset=utf-8",
}, params.headers),
success: (res) => {
this.interceptors(success, error, res.data)
}
});
})
}
async post(params) {
uni.showLoading({
title: '加载中...'
});
return new Promise((success, error) => {
uni.request({
url: config.CheckBaseUrl() + params.url,
method: "POST",
data: params.data,
header: Object.assign({
"Content-Type": "application/json; charset=utf-8",
}, params.headers),
success: (res) => {
this.interceptors(success, error, res.data)
}
});
})
}
interceptors(s, e, data) {
uni.hideLoading();
switch (data.status) {
case 200:
s(data.result)
break;
case 404:
uni.showToast({
title: data.msg,
duration: 2000
});
throw new Error(data.msg);
break;
default:
break;
}
}
}

View File

@@ -0,0 +1,14 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
<title></title>
<!--preload-links-->
<!--app-context-->
</head>
<body>
<div id="app"><!--app-html--></div>
<script type="module" src="/main.js"></script>
</body>
</html>

View File

@@ -0,0 +1,2 @@
@import "./mixins/normalize.less";
@import "./mixins/resetUI.less";

View File

@@ -0,0 +1,2 @@
@themeColor: red;

View File

@@ -0,0 +1,3 @@
@defaultSize: 14px;
@smallSize: 12px;
@bigSize_19: 19px;

View File

@@ -0,0 +1,419 @@
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Prevent adjustments of font size after orientation changes in IE and iOS.
*/
html {
font-family: sans-serif; /* 1 */
-ms-text-size-adjust: 100%; /* 2 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/**
* Remove the margin in all browsers (opinionated).
*/
body {
margin: 0;
}
/* HTML5 display definitions
========================================================================== */
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.
* 2. Add the correct display in IE.
*/
article,
aside,
details, /* 1 */
figcaption,
figure,
footer,
header,
main, /* 2 */
menu,
nav,
section,
summary { /* 1 */
display: block;
}
/**
* Add the correct display in IE 9-.
*/
audio,
canvas,
progress,
video {
display: inline-block;
}
/**
* Add the correct display in iOS 4-7.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Add the correct display in IE 10-.
* 1. Add the correct display in IE.
*/
template, /* 1 */
[hidden] {
display: none;
}
/* Links
========================================================================== */
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
*/
a {
background-color: transparent; /* 1 */
-webkit-text-decoration-skip: objects; /* 2 */
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).
*/
a:active,
a:hover {
outline-width: 0;
}
/* Text-level semantics
========================================================================== */
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
*/
b,
strong {
font-weight: inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* Add the correct font style in Android 4.3-.
*/
dfn {
font-style: italic;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/**
* Add the correct background and color in IE 9-.
*/
mark {
background-color: #ff0;
color: #000;
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10-.
*/
img {
border-style: none;
}
/**
* Hide the overflow in IE.
*/
svg:not(:root) {
overflow: hidden;
}
/* Grouping content
========================================================================== */
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
pre,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct margin in IE 8.
*/
figure {
margin: 1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/* Forms
========================================================================== */
/**
* 1. Change font properties to `inherit` in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
select,
textarea {
font: inherit; /* 1 */
margin: 0; /* 2 */
}
/**
* Restore the font weight unset by the previous rule.
*/
optgroup {
font-weight: bold;
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
* controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.
*/
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
-webkit-appearance: button; /* 2 */
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Remove the default vertical scrollbar in IE.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
*/
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* Correct the text style of placeholders in Chrome, Edge, and Safari.
*/
::-webkit-input-placeholder {
color: inherit;
opacity: 0.54;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}

View File

@@ -0,0 +1,8 @@
@import "../config/color.less";
@import "../config/size.less";
@import "../mixins/mixins.less";
.title {
color: @themeColor;
font-size: 100px;
}

View File

@@ -0,0 +1,22 @@
import App from './App'
import Vue from 'vue'
import config from "@/config";
import store from '@/store'
App.mpType = 'app'
Vue.config.productionTip = false
config.VueComponents.forEach(v => Vue.component(v.name, v));
// 挂载自定义方法到vue实例上,实现全局访问
config.NotVuePlugins.forEach(v => Vue.prototype[v["n"]] = v["v"]);
const app = new Vue({
store,
...App
});
app.$mount()

View File

@@ -0,0 +1,72 @@
{
"name" : "hbx-tpl",
"appid" : "__UNI__C902B1F",
"description" : "",
"versionName" : "1.0.0",
"versionCode" : "100",
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"splashscreen" : {
"alwaysShowBeforeRender" : true,
"waiting" : true,
"autoclose" : true,
"delay" : 0
},
/* 模块配置 */
"modules" : {},
/* 应用发布信息 */
"distribute" : {
/* android打包配置 */
"android" : {
"permissions" : [
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
"<uses-feature android:name=\"android.hardware.camera\"/>",
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
]
},
/* ios打包配置 */
"ios" : {},
/* SDK配置 */
"sdkConfigs" : {}
}
},
/* 快应用特有相关 */
"quickapp" : {},
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "",
"setting" : {
"urlCheck" : false
},
"usingComponents" : true
},
"mp-alipay" : {
"usingComponents" : true
},
"mp-baidu" : {
"usingComponents" : true
},
"mp-toutiao" : {
"usingComponents" : true
},
"uniStatistics" : {
"enable" : false
},
"vueVersion" : "2"
}

View File

@@ -0,0 +1,16 @@
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}

View File

@@ -0,0 +1,31 @@
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
created() {
this.getIndex();
},
methods: {
async getIndex() {
let res = await this.$http.index.home();
console.log(res)
}
}
}
</script>
<style lang="less" scoped>
@import "@/less/page/index.less";
</style>

View File

@@ -0,0 +1,3 @@
export default class carService {
}

View File

@@ -0,0 +1,9 @@
// 统一导出
import indexService from "@/service/indexService";
import carService from "@/service/carService";
export default {
index: new indexService(),
car: new carService(),
}

View File

@@ -0,0 +1,13 @@
import Http from "@/http";
import config from "@/config"
export default class indexService {
async home (data = {}, headers = {}) {
return await (new Http()).get({
url: config.apiList.home,
data: data,
headers: headers
})
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

View File

@@ -0,0 +1,76 @@
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
*/
/* 颜色变量 */
/* 行为相关颜色 */
$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
/* 文字基本颜色 */
$uni-text-color:#333;//基本色
$uni-text-color-inverse:#fff;//反色
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
$uni-text-color-placeholder: #808080;
$uni-text-color-disable:#c0c0c0;
/* 背景颜色 */
$uni-bg-color:#ffffff;
$uni-bg-color-grey:#f8f8f8;
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
/* 边框颜色 */
$uni-border-color:#c8c7cc;
/* 尺寸变量 */
/* 文字尺寸 */
$uni-font-size-sm:12px;
$uni-font-size-base:14px;
$uni-font-size-lg:16;
/* 图片尺寸 */
$uni-img-size-sm:20px;
$uni-img-size-base:26px;
$uni-img-size-lg:40px;
/* Border Radius */
$uni-border-radius-sm: 2px;
$uni-border-radius-base: 3px;
$uni-border-radius-lg: 6px;
$uni-border-radius-circle: 50%;
/* 水平间距 */
$uni-spacing-row-sm: 5px;
$uni-spacing-row-base: 10px;
$uni-spacing-row-lg: 15px;
/* 垂直间距 */
$uni-spacing-col-sm: 4px;
$uni-spacing-col-base: 8px;
$uni-spacing-col-lg: 12px;
/* 透明度 */
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
/* 文章场景相关 */
$uni-color-title: #2C405A; // 文章标题颜色
$uni-font-size-title:20px;
$uni-color-subtitle: #555555; // 二级标题颜色
$uni-font-size-subtitle:26px;
$uni-color-paragraph: #3F536E; // 文章段落颜色
$uni-font-size-paragraph:15px;

View File

@@ -0,0 +1,4 @@
export default {
getCarList: (state) => state.car.carList,
getTheme: (state) => state.setting.theme
}

View File

@@ -0,0 +1,20 @@
import Vue from 'vue'
import Vuex from 'vuex'
import common from "./modules/public";
import car from "./modules/car";
import setting from "./modules/setting";
import getters from "./getters";
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
common,
car,
setting
},
getters
})
export default store

View File

@@ -0,0 +1,26 @@
import http from "@/service";
export default {
state: {
carList: []
},
getters: {},
mutations: {
SET_LIST(state, data) {
state.carList = data;
}
},
actions: {
// 获取购物车商品的数量
async HttpCarList({ commit }) {
let res = await http.car.CarList();
commit("SET_LIST", res)
},
// 商品添加购物车
async addCarList({ commit }, params) {
let res = await http.car.addCar(params)
}
}
}

View File

@@ -0,0 +1,6 @@
export default {
state: {},
getters: {},
mutations: {},
actions: {}
}

View File

@@ -0,0 +1,8 @@
export default {
state: {
theme: "red"
},
getters: {},
mutations: {},
actions: {}
}

View File

@@ -0,0 +1,10 @@
class utils {
test() {
console.log("工具函数");
}
}
export default new utils();

View File

@@ -0,0 +1,29 @@
body,
html,
ul,
li,
h2,
h3,
h4,
h5,
h6,
h1,
p {
margin: 0;
list-style: none;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
input {
outline: none;
}
body, html {
width: 100%;
height: 100%;
}

View File

@@ -0,0 +1,97 @@
class AjAX {
constructor() {
this.xhr = new XMLHttpRequest();
}
/**
*
* @param {*} params
* url: 字符串 请求地址,
* data: 对象
*/
get(params) {
return new Promise((success, error) => {
var record = ""
for (const key in params.data) {
record += `&${key}=${params.data[key]}`
}
record = record.replace("&", "?")
this.xhr.open("GET", `${config.checkStage()}${params.url}${record}`)
this.xhr.send();
this.readystatechange(success, error)
})
}
post() { }
readystatechange(success, error) {
this.xhr.onreadystatechange = () => {
if (this.xhr.readyState == 4) {
if (this.xhr.status == 200) {
var res = JSON.parse(this.xhr.responseText);
// 业务逻辑状态码的判断
switch (res.status) {
case 200:
success(res.result)
break;
case 404:
alert(res.message)
throw new Error(res.message)
break;
default:
break;
}
} else {
error(this.xhr)
}
}
}
}
}
// a.get({
// url: '/index/class',
// data: {
// type: 1,
// page: 1
// },
// success: (res) => {
// console.log("拿到的数据为:", res);
// },
// error: (err) => {
// console.log("请求出错了:", err);
// }
// });
// function test() {
// return new Promise(function (success, error) {
// var a = 1
// setTimeout(() => {
// a += 1;
// success(a)
// }, 3000)
// })
// }
// var dd = async () => {
// // test()
// // .then((res) => {
// // console.log(res);
// // })
// // .catch()
// var num = await test();
// console.log(num);
// }
// dd()
// 回调地狱
// 异步返回值 回调 promise
// 系统级别判断
// await indexService.class({ type: 1, page: 1 })

View File

@@ -0,0 +1,32 @@
var config = {
// 开发阶段的请求基地址
devBaseUrl: 'http://127.0.0.1:3000/api',
// 测试阶段的请求基地址
testBaseUrl: 'http://127.0.0.1:3000/test/api',
// 上线阶段的请求基地址
prodBaseUrl: 'http://127.0.0.1:3000/prod/api',
stage: "dev", // dev test prod
apiList: {
index: '/index/class',
hot: '/index/hot'
},
checkStage: function () {
switch (this.stage) {
case "dev":
return this.devBaseUrl;
break;
case "test":
return this.testBaseUrl;
break;
case "prod":
return this.prodBaseUrl;
break;
}
}
}

View File

@@ -0,0 +1,14 @@
class index {
constructor () {
this.getIndexData()
console.log($("body"));
}
async getIndexData() {
var data = await indexServe.index({ type: 1, page: 2 });
console.log(data);
}
}
new index()

View File

@@ -0,0 +1,11 @@
class IndexServe {
async index(params) {
return await (new AjAX()).get({
url: config.apiList.index,
data: params
});
}
}
var indexServe = new IndexServe()

View File

@@ -0,0 +1,10 @@
class Utils {
$(className) {
return document.querySelector(className)
}
}
var { $ } = new Utils()
// 解构赋值

View File

@@ -0,0 +1,24 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/clear.css">
<link rel="stylesheet" href="../css/public.css">
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<img src="https://tjg.gzhuibei.com/a/1/38818/0.jpg" alt="">
</body>
<script src="../js/config/index.js"></script>
<script src="../js/utils/index.js"></script>
<script src="../js/ajax/index.js"></script>
<script src="../js/service/indexServe.js"></script>
<script src="../js/page/index.js"></script>
</html>

View File

@@ -0,0 +1,6 @@
ajax: 封装ajax请求
config:做网站配置的(接口的请求地址,前端的一些其他固定死的参数)
lib:存放我们自己写的插件或者从网上下载插件
page:存放每个html页面所对应的js文件
service:ajax接口调用中间层
utils:工具函数

View File

@@ -0,0 +1,31 @@
/*
* Eslint config file
* Documentation: https://eslint.org/docs/user-guide/configuring/
* Install the Eslint extension before using this feature.
*/
module.exports = {
env: {
es6: true,
browser: true,
node: true,
},
ecmaFeatures: {
modules: true,
},
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
},
globals: {
wx: true,
App: true,
Page: true,
getCurrentPages: true,
getApp: true,
Component: true,
requirePlugin: true,
requireMiniProgram: true,
},
// extends: 'eslint:recommended',
rules: {},
}

View File

@@ -0,0 +1,23 @@
import http from "./service/index";
import util from "./utils/index";
App({
onLaunch() {
// 展示本地存储能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
},
globalData: {
...http,
util
}
})

View File

@@ -0,0 +1,13 @@
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Weixin",
"navigationBarTextStyle": "black"
},
"sitemapLocation": "sitemap.json",
"lazyCodeLoading": "requiredComponents"
}

View File

@@ -0,0 +1,10 @@
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}

Some files were not shown because too many files have changed in this diff Show More