作者废话
本课程是我第一次上，我去网上看了很多教学视频，也找别的老师借了很多书来看，有几点体会分享给大家。
- 书上完全是线性结构化的，一个知识点一个知识点讲，网上各大平台的视频也差不多，你们可以去b站搜一下，动不动就是几百集，虽然耐心看完会有很多好处，知识是成体系的，缺点可能就是前期比较枯燥，需要有足够的耐心😪😪😪。
- 项目化就是通过做项目的方式，一边做项目，一边学习基础的知识，缺点是这样知识是零散的，不成体系，而且上手难度较大，和学科教学各有利弊，没有最完美的方法，只有最合适的方法，一般我们初学还是先学习知识点，然后有一定积累之后再上手做项目。
- 我还是打算先采取项目化教学看看效果，因为你们没有基础，全靠一边做项目一边学习，所以我会尽可能最慢，最详细，你们不要嫌絮叨，咱们的进度已经很快了，正常来说html5的标签就可以学一个学期。
- 以前读大学的时候是学霸，书上的都会，做题咔咔快，结果工作了要想做点什么项目，发现根本不会，所以我这次干脆全项目式，就从网上随便找一些网站来做，你们也可以指定，看诸位的心情吧，主打一个任性（不能是黄赌毒等违法网站），如果你随便什么网站都能自己做出来，不就是学会了这门技术吗？
项目一、登录注册页面
1.环境配置
打开HBuilder X，点左上角的文件，新建一个项目，选择uniapp中的默认模板即可，项目名称随便取一个好了，就是这么简单。（在我从教的几年时间里，总有同学反馈，我会不新建项目，太难了，我还是不学了，然后摆烂，所以我会尽量给你们创建好项目，你们打开就可以直接写代码，软件也不需要你们安装，环境全部给你们弄好，所有资料会帮你们都整理好，这样可以吧，各位巨佬。）
如果自己在家想学习的，就去下个软件安装就完事了，https://www.dcloud.io/hbuilderx.html ，一直下一步下一步就装好了，绝对比你安装游戏简单。
注意：我在机房已经安装帮你们都安装好了，有同学问上面那个链接怎么访问不了，那个是如果你在家也想学，可以自己安装软件。
2.初始项目
pages目录中放的是我们的页面文件，项目自动帮我们创建好了一个index目录，我们找到其中的index.vue，就可以直接开始编程了，先来写html的代码吧，就是网页结构，前端分为三件套。
| 三件套 | 作用 | 所属区域 |
|---|---|---|
| html | 网页结构，相当于房屋主体结构 | <template></template> |
| css | 网页样式，相当于房子里的装修 | <style></style> |
| JavaScript | 脚本语言，复制复杂的交互逻辑，用来给网页增加动态功能，相当于房子里的家电 | <script></script> |
因为html、css和JavaScript处于同一个文件里，但是它们都有属于自己的区域，不然就太乱了，就像不同专业的同学是在不同的班级上课，参考上述表格，例如html需要写在<template></template>标签里。
现在我们就开始写我们的第一个程序吧，按照不成文的惯例，我们的第一个程序毫无疑问都是要写一个hello Word，body标签表示网站的主体内容，我们输入以下代码，看一下效果吧。
<template>
<body>
helloWorld
</body>
</template>提示：点击右上角的预览按钮打开内置浏览器，并同时按下ctrl+s保存，这样就可以在内置浏览器中看到效果了
3.弹性盒子布局
那我们接下来就开始开发吧，第一步一般都是先规划好网页的布局，关于布局的样式有很多，相对定位，绝对定位，固定定位，粘性定位，浮动等等，如果要一个个详细讲，再一个个举例，差不多半学期就过去了。其实从我的开发经验来说，就是弹性盒子最实用，也最简单，所谓一招鲜，吃遍天，会了弹性盒子，几乎90%以上的问题可以解决，总结一下就是：遇事不决，弹性盒子。
那弹性盒子究竟有什么好处呢，弹性盒子顾名思义是有弹性的，它可以根据自己的内容动态调整，不用我们去操心太多，非常省心好用，具体的原理也不讲了，讲多了你们容易困，我们在实际项目中去体会吧。
你们先感受一下，我就直接四个块级元素竖着排下来是怎么样的？
<template>
<body>
<!-- 标题栏 -->
<div class="title_seciton"></div>
<!-- 图片区域 -->
<div class="image_section"></div>
<!-- 用户输入区域 -->
<div class="input_section"></div>
<!-- 登录按钮的区域 -->
<div class="button_section"></div>
</body>
</template>
<style>
.title_seciton{
width: 100vw;
height: 10vh;
background-color: white;
}
.image_section{
width: 100vw;
height: 30vh;
background-color: #efefef;
}
.input_section{
width: 100vw;
height: 40vh;
background-color: red;
}
.button_section{
width: 100vw;
height: 20vh;
background-color: blue;
}
</style>在这段代码中，我们还用了四个div标签划分了四个主要区域，并分别取了类名，比如给标题栏栏添加了类名class="title_seciton"，因为一会我们要去给他们分别写样式，比如头顶区域占多宽，背景颜色是什么，我们当然需要给它取个名。就像如果你父母如果没有给你起名字，我怎么叫你起来回答问题呢？
之后我们用.head类选择器选中头部区域，给它添加样式，比如说width: 100vw;表示宽占100vw，vw是什么单位呢？一个屏幕的宽总共分成100个vw，100vw就表示整个屏幕宽。接下来你应该可以推断出一个屏幕的高分成100个vh，10vh就表示占整个屏幕的10%。
提问：这里我为什么不用px像素呢？用像素有什么不好？
另外我为了让大家更清楚看到我们划分好的区域，我用background-color: white;指定背景颜色，也可以使用十六进制表示。
运行之后这么一看好像没毛病对吧，每个元素都很明确分配了高度，但是你不能只考虑正常的情况，我们来做一个实验，如果屏幕高度不够的情况的话会发生什么事情。
<template>
<body style="height: 50vh;">
<!-- 标题栏 -->
<div class="title_seciton"></div>
<!-- 图片区域 -->
<div class="image_section"></div>
<!-- 用户输入区域 -->
<div class="input_section"></div>
<!-- 登录按钮的区域 -->
<div class="button_section"></div>
</body>
</template>
<style>
.title_seciton{
width: 100vw;
height: 10vh;
background-color: white;
}
.image_section{
width: 100vw;
height: 30vh;
background-color: #efefef;
}
.input_section{
width: 100vw;
height: 40vh;
background-color: red;
}
.button_section{
width: 100vw;
height: 20vh;
background-color: blue;
}
</style>在上面这段代码中，我们给body标签通过行内样式设置了height为50vh，行内样式是什么，我们后面再详细说，你主要观察一下，有没有发现，因为总的高度不够，最后一个区域直接显示不出来了，接下来我们再看一下弹性盒子。
弹性盒子总之就是两种，要么横着排，要么竖着排。
<style>
/* 弹性盒子横着排 */
.flex_row{
display: flex; /* 排列方式：弹性盒子 */
flex-direction: row;/*排列方向：横向*/
justify-content: center;/*主轴居中*/
align-items: center;/*副轴居中*/
}
/* 弹性盒子竖着排 */
.flex_column{
display: flex; /* 排列方式：弹性盒子 */
flex-direction: column;/*排列方向：纵向*/
justify-content: center;/*主轴居中*/
align-items: center;/*副轴居中*/
}
</style>我们先来分析一下整个页面的布局吧，就是最外层的容器body，页面是一个最简单的从上到下的布局，简单来说就是竖着排，从上到下依次是标题栏，图片区域，输入区域，登录按钮。
<template>
<body class="flex_column" style="height: 50vh;">
<!-- 标题栏 -->
<div class="title_seciton"></div>
<!-- 图片区域 -->
<div class="image_section"></div>
<!-- 用户输入区域 -->
<div class="input_section"></div>
<!-- 登录按钮的区域 -->
<div class="button_section"></div>
</body>
</template>
<style>
.title_seciton{
width: 100vw;
height: 10vh;
background-color: white;
}
.image_section{
width: 100vw;
height: 30vh;
background-color: #efefef;
}
.input_section{
width: 100vw;
height: 40vh;
background-color: red;
}
.button_section{
width: 100vw;
height: 20vh;
background-color: blue;
}
/* 弹性盒子横着排 */
.flex_row{
display: flex; /* 排列方式：弹性盒子 */
flex-direction: row;/*排列方向：横向*/
justify-content: center;/*主轴居中*/
align-items: center;/*副轴居中*/
}
/* 弹性盒子竖着排 */
.flex_column{
display: flex; /* 排列方式：弹性盒子 */
flex-direction: column;/*排列方向：纵向*/
justify-content: center;/*主轴居中*/
align-items: center;/*副轴居中*/
}
</style>发现区别了吗？是不是四个区域都显示出来了，这就是弹性盒子所谓的“弹性”，如果空间够的话大家当然开开心心的，如果空间不够的时候，你让我一点，我让你一点，咱们稍微挤一挤，是不是日子也能凑合过下去。
4.弹性盒子对其方式
接下来我们开始从上到下，开始写代码吧，首先是标题栏，我们先讲一讲标题标签吧
标题栏中有两个元素，一个是左边的登录文字，另外一个是右边的关闭按钮，这两个元素应该是处于同一行的。
- 提问：标题栏的两个元素应该是横着排，还是竖着排?
但是我们发现为什么这两个元素靠在一起，并且处于中间，还记得<!-- 标题栏 --> <div class="title_seciton flex_row"> <h1>登录</h1> <h1>X</h1> </div>justify-content: center;吗？我们默认设置的是主轴居中对齐的方式，它还有一些别的属性可以设置，我帮你们整理好了。justify-content&align-items的属性 作用 flex-start 弹性项目向行头紧挨着填充 flex-end 弹性项目向行尾紧挨着填充 center 弹性项目居中紧挨着填充 space-between 弹性项目平均分布在该行上 space-around 弹性项目平均分布在该行上，两边留有一半的间隔空间
这里多应该选哪一个呢？我也不知道哦，自己都去试一下，看看哪个更合适一点，之所谓书上得来终觉浅，绝知此事要躬行。
<!-- 标题栏 -->
<div class="title_seciton flex_row" style="justify-content: space-between;">
<h1>登录</h1>
<h1>X</h1>
</div>这里我用了行内样式，这又是一个新名词，其实我不太愿意整太多专业名词，css引入分为内部，外部，行内，外部样式是针对大型项目的，我这里就不多说了，免得又把问题搞复杂了，简单来说就是把样式统一写到<style>标签里，叫做内部样式，这样的好处是html和css是分开的，这样显得比较整洁，当然你也可以直接把样式写到HTML标签里，就像我上面写的一样，这样的好处是方便，但是如果样式很多，都写到同一行中，维护起来就非常恶心了。
有同学注意到了吗？我们在内部样式中定义了justify-content: center;，然后在行内样式中又定义了justify-content: space-around;，两个不一致的时候它到底听谁的，这个就涉及到优先级的问题，优先级为行内样式>内部样式>外部样式，总结来说就是离标签元素越近，优先级越高。
提问：在这里我为什么要写行内元素，用意是什么？
5.标题标签
另外你可能还注意到一件事情，我在这里用到了h1标签，h开头的标题标签，这样吧，你来试试下面这段代码，自己找找规律，然后来教我，我的教学观念就是，知识是你们自己发现的，不是靠教师灌输的，自己要去多练，要敢于尝试、大胆探索。我顶多就是起个引导的作用，遇到问题答疑一下，其实有我没我都差不多。
<body>
<h1>登录</h1>
<h2>登录</h2>
<h3>登录</h3>
<h4>登录</h4>
<h5>登录</h5>
</body>6.快捷键
敲完代码双击一下.html文件看一下效果吧，怎么样？聪明的你发现区别了吗？是不是几级标题就是h几，是不是很简单呢？有同学可能会问，有没有h100呢？这个我也不知道，你如果有好奇心的就自己去试一下，有好奇心的同学走得更远。
提问:我如果觉得字太大了，我想改小一点，应该怎么办呢？
html就是各种标签的应用，我们几个项目做下来，常用的都掌握得差不多了，至于那种你做二十个项目还用不到一次得冷门标签，既然都用不到，那你学它干嘛，不学也罢。
另外我知道，学到这里班级里已经形成CV党势力，就全程复制粘贴，好像打一点代码会被手指累断。因为他觉得这么简单的代码，看都看会了，何必去打？但是哪有不打代码的程序员，打这些代码也是有技巧的，我们要多去使用快捷键，快速打完代码，不然会让别人觉得我们不专业。我这里先教一点简单的技巧。
- ctrl+z：撤销
- ctrl+y：反撤销（就是后悔撤销了）
- alt+shift+↓：复制一行
- ctrl+x：剪切一行
- ctrl+shift+k: 删除多行
- ctrl+/：注释代码
好了，讲了这么多，我把代码全部贴出来，大家看看吧，记得不要复制哦。
怎么样，累吗？我们终于把标题栏写好了，有没有感觉松了一口气呢，没想到看上去这么简单的东西其中却包含了很多的知识点，其中还有一些深入的内容我先不给大家介绍了，我们先学会简单的应用即可，随着我们项目的积累，我会越来越深入地带大家了解掌握。<template> <body class="flex_column"> <!-- 标题栏 --> <div class="title_seciton flex_row" style="justify-content: space-around;"> <h1>登录</h1> <h1>X</h1> </div> <!-- 图片区域 --> <div class="image_section"></div> <!-- 用户输入区域 --> <div class="input_section"></div> <!-- 登录按钮的区域 --> <div class="button_section"></div> </body> </template> <style> .title_seciton{ width: 100vw; height: 10vh; background-color: white; } .image_section{ width: 100vw; height: 30vh; background-color: #efefef; } .input_section{ width: 100vw; height: 40vh; background-color: red; } .button_section{ width: 100vw; height: 20vh; background-color: blue; } /* 弹性盒子横着排 */ .flex_row{ display: flex; /* 排列方式：弹性盒子 */ flex-direction: row;/*排列方向：横向*/ justify-content: center;/*主轴居中*/ align-items: center;/*副轴居中*/ } /* 弹性盒子竖着排 */ .flex_column{ display: flex; /* 排列方式：弹性盒子 */ flex-direction: column;/*排列方向：纵向*/ justify-content: center;/*主轴居中*/ align-items: center;/*副轴居中*/ } </style>8.偷图片小技巧
下面是一张呆萌图片，等等，你如果问我是不是老二次元，我只能回答：NONONO！，我只是浏览别人的网站总习惯随手拿点什么东西，图片、CSS、JS、甚至接口，偷？噢你怎么会想到这样的词汇，来侮辱神圣的爬虫，爬虫不能算偷……爬虫！……程序员的事，能算偷么！？所谓自己动手，丰衣足食，别想着这些素材我都给你们，现在我只是教你们通过开发工具的小技巧获取别人的图片，如果有机会的话，你会学到我精心设计的爬虫课程，那时候我们可以把别人的网站“扒”得更干净，效率更强。
按下`F12`打开浏览器开发者工具，然后根据左上角的定位工具，定位到图片元素所在的标签，然后复制其中的src属性中的地址，http://10.163.72.39:7777/image/shuazan/sz6.jpg 怎么样，你找对了吗？
## 9.图片标签
等等，我们好像已经学会了图片标签，还记得刚才我们去拿别人图片看到的吗？是不是用的img标签，然后其中有个src属性，你应该也能猜到，这个src属性就是指的是图片的地址。
但是别激动，我知道有同学已经写好代码了，但是别忘了，我们第一步是先设计好布局，这个图片的区域实际上是包括两部分的，上面是一张图片，下面是一句欢迎语，聪明的你可以告诉我，这两部分应该是横向排列还是纵向排列，好了，我把代码贴上来，你看看你写对了吗？
以上代码有几点我们需要注意<!-- 图片区域 --> <div class="image_section flex_column"> <img src="static/angry.gif" alt="图片加载失败"> <h4>HI!请登录</h4> </div>
- 图片请你放到自己的项目文件夹里，static目录是专门用来放网站的静态资源的，就是图片视频这种东西，然后在网页中应该如何引用呢，
static/angry.gif表示的就是项目文件夹里的static目录下的angry.gif文件，alt属性是说如果因为网络问题加载失败，或者盲人模式这张图片不显示的时候，给用户一段提示，你可以写图片加载失败，但是我一般比较懒，就不写了，图片加载失败就看不见呗，懒得给用户提示了。 - 有同学说，我发现就直接复制的链接也可以用，根本不需要保存到本地这么麻烦，我简直是天才，我只能说你这样的行为叫做盗链，并不高端也不光彩，但这事我也干过，之前我帮一个人做在线网课平台，那个人是一个补习班的老板，视频靠爬虫就算了，服务器也买不起，我只能把视频放到别人的服务器，然后盗链播放，如果你听不懂的话，那就不要琢磨了，什么知识都学只会害了你。总之就是不要偷我的链接，偷了我的图片还要占用我服务器的带宽流量资源，有点不合适。
- 标题标签还记得吧，但是不要那么大，我觉得四级标题挺合适。
10.登录区域布局
输入区域的布局稍微复杂一点，我们在布局的时候一般会把类似的东西当作是一个box，比如文字+输入框就是一个盒子，这里我姑且称它为输入盒，输入盒中的两个元素是横向排列的，两个输入盒之间又是纵向排列的，应该不是很绕，你理清楚了吗？<!-- 用户输入区域 --> <div class="input_section flex_column"> <div class="input_box flex_row"> <p>用户名:</p> <input type="text"> </div> <div class="input_box flex_row"> <p>密码:</p> <input type="text"> </div> </div>11.输入标签
仔细看看，和我做的还有什么区别吗？是不是还有输入框中的提示文字没有，这个效果是怎么实现的呢，其实input标签中的placeholder属性就是用来设置提示文字的。
有细心的同学可能发现了，输入标签和我的有一点点区别，输入框周围没有边框，但是其实也不影响我们使用，只是用户用上去的体验不会太好罢了，所以为什么我们要用css对样式进行美化装修，程序员不仅是建造师，也是艺术家，要有一定的审美水平。<!-- 用户输入区域 --> <div class="input_section flex_column"> <div class="input_box flex_row"> <p>用户名:</p> <input type="text" placeholder="请输入密码"> </div> <div class="input_box flex_row"> <p>密码:</p> <input type="text" placeholder="请输入账号"> </div> </div>
12.内边距、边框、外边距
讲到边距的话我们干脆来讲一下盒子模型吧，课本上这部分内容要讲几节课，其实就是三个东西，内边距，边框，外边距，直接运行代码大家感受一下吧。
<style>
input{
padding: 10px;
border: 1px solid black;
margin: 10px;
}
</style>观察一下上面这段代码，我增加了三行代码以及注释，体会到内边距、边框、和外边框的作用了吗？
总结一下吧。
| css属性 | 作用 |
|---|---|
| margin | 外边距 |
| border | 边框 |
| padding | 内边距 |
但是我们发现直接设置padding的话，是四周都有边距，但是我们想要左边的内边距多一点，应该怎么办呢？大家观看表格自己解决。
| css属性 | 作用 |
|---|---|
| padding-top | 设置上边距 |
| padding-bottom | 设置下边距 |
| padding-right | 设置右边距 |
| padding-left | 设置左边距 |
<style>
input{
padding: 10px;
padding-left: 20px;
border: 1px solid black;
margin: 10px;
}
</style>对了，差点忘了，还有个事情忘了说，大家发现input前面怎么没有.，为什么和别的不一样，因为我这里使用了标签选择器，是给所有的input标签设置样式。给大家归纳一下。
| css选择器 | 示例 |
|---|---|
| 类选择器 | .input_box可以选中所有<div class="input_section"> |
| 标签选择器 | input可以选中所有<input>标签 |
之后还有什么id选择器，伪类选择器，以后遇到再说吧，说多了怕你晕。
13.button标签
button比较简单，就是这个默认的样式实在有点看不下去了，我稍微美化一下吧，至少能凑合过得去。这次我把所有代码都贴出来吧。
<template>
<body class="flex_column">
<!-- 标题栏 -->
<div class="title_seciton flex_row" style="justify-content: space-around">
<h1>登录</h1>
<h1>X</h1>
</div>
<!-- 图片区域 -->
<div class="image_section flex_column">
<img src="static/angry.gif" alt="图片加载失败">
<h4>HI!请登录</h4>
</div>
<!-- 用户输入区域 -->
<div class="input_section flex_column">
<div class="input_box flex_row">
<p>用户名:</p>
<input type="text" placeholder="请输入密码">
</div>
<div class="input_box flex_row">
<p>密码:</p>
<input type="text" placeholder="请输入账号">
</div>
</div>
<!-- 登录按钮的区域 -->
<div class="button_section flex_column">
<button class="button">登录</button>
</div>
</body>
</template>
<style>
input{
padding: 10px;
padding-left: 20px;
border: 1px solid black;
margin: 10px;
}
.title_seciton{
width: 100vw;
height: 10vh;
background-color: white;
}
.image_section{
width: 100vw;
height: 30vh;
background-color: #efefef;
}
.input_section{
width: 100vw;
height: 40vh;
background-color: red;
}
.button_section{
width: 100vw;
height: 20vh;
background-color: blue;
}
.button{
padding:10px 50px;
font-size: 25px;
background-color: cornflowerblue;
}
.button:hover{
background-color: green;
}
/* 弹性盒子横着排 */
.flex_row{
display: flex; /* 排列方式：弹性盒子 */
flex-direction: row;/*排列方向：横向*/
justify-content: center;/*主轴居中*/
align-items: center;/*副轴居中*/
}
/* 弹性盒子竖着排 */
.flex_column{
display: flex; /* 排列方式：弹性盒子 */
flex-direction: column;/*排列方向：纵向*/
justify-content: center;/*主轴居中*/
align-items: center;/*副轴居中*/
}
</style>在以上代码中有几点需要注意一下。
padding我用了简写的方式，因为我想要上下的边距小，左右的边距大，如果四个方向一一设置就太麻烦了，可以通过
padding:上下 左右，来设置两个方向的边距，也可以设置四个方向的边距，顺序依次是padding:上 左 下 右鼠标放上去我希望按钮能够改变颜色，我用到了伪类选择器:hover，它可以匹配鼠标悬停其上的元素，你要是问我伪类是什么，其实这些专有的名词我也搞不太懂，反正能用就完事，我们又不是搞学术研究的。
14.注册页面
等等，好像要先注册才能登录吧，应该先做注册页面的，这就是一开始没有梳理好开发的业务逻辑，盲目开始敲代码导致的，这就尴尬了，不，我这是故意设计的，就是为了让你感受这一点，正好让你们自己去把注册页面写出来，这是布置给你们的任务，对，就是这样。
右键pages目录，新建一个页面，默认勾选了创建同名目录，以及在pages.json中注册。（记得是新建页面，不是新建目录，因为只有新建好页面，他才会帮我们在pages.json中注册，如果它不帮我们注册，就只有我们自己注册，非常麻烦，pages.json是所有页面的配置文件，如果新页面没有在这个文件中注册，我们的项目是找不到这个页面的，就比如你如果要上大学，就必须先在教育部注册学籍）
代码我写好了，你可以参考一下，建议把那些花花绿绿的背景颜色去掉，那是为了给大家区分边界的。
<template>
<body class="flex_column">
<!-- 标题栏 -->
<div class="title_seciton flex_row" style="justify-content: space-around">
<h1>注册</h1>
<h1>X</h1>
</div>
<!-- 图片区域 -->
<div class="image_section flex_column">
<img src="static/angry.gif" alt="图片加载失败">
<h4>HI!请注册</h4>
</div>
<!-- 用户输入区域 -->
<div class="input_section flex_column">
<div class="input_box flex_row">
<p>用户名:</p>
<input type="text" placeholder="请输入用户名">
</div>
<div class="input_box flex_row">
<p>密码:</p>
<input type="text" placeholder="请输入密码">
</div>
<div class="input_box flex_row">
<p>密码:</p>
<input type="text" placeholder="请输入确认账号">
</div>
</div>
<!-- 登录按钮的区域 -->
<div class="button_section flex_column">
<button class="button">注册</button>
</div>
</body>
</template>
<style>
input{
padding: 10px;
padding-left: 20px;
border: 1px solid black;
margin: 10px;
}
.title_seciton{
width: 100vw;
height: 10vh;
background-color: white;
}
.image_section{
width: 100vw;
height: 30vh;
background-color: #efefef;
}
.input_section{
width: 100vw;
height: 40vh;
background-color: red;
}
.button_section{
width: 100vw;
height: 20vh;
background-color: blue;
}
.button{
padding:10px 50px;
font-size: 25px;
background-color: cornflowerblue;
}
.button:hover{
background-color: green;
}
/* 弹性盒子横着排 */
.flex_row{
display: flex; /* 排列方式：弹性盒子 */
flex-direction: row;/*排列方向：横向*/
justify-content: center;/*主轴居中*/
align-items: center;/*副轴居中*/
}
/* 弹性盒子竖着排 */
.flex_column{
display: flex; /* 排列方式：弹性盒子 */
flex-direction: column;/*排列方向：纵向*/
justify-content: center;/*主轴居中*/
align-items: center;/*副轴居中*/
}
</style>其实就是改了几个字，然后加了一个输入框，因为注册需要确认密码，其实也不麻烦，两分钟就完事了。
15.页面跳转
我们写好注册页面之后，用户怎么样才能从登录页面跳转过来呢
<!-- 登录页面 -->
<navigator url="/pages/signup/signup">没有账号，立即注册</navigator>16.发送注册请求
发送请求我们要用到JavaScript了，还记得一开始我们说的吗，JavaScript应该写在什么区域里，如果忘了回头看看那张表格。
其实项目一开始给我们生成了一些<script></script>的结构，但是当时我们嫌烦就删了，怎么办呢，没关系，我再给你们不就完事了吗？
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script>我们先来做一个小实验吧，我们希望点击注册按钮的时候，给我们弹出一个提示框。
<template>
<!-- 登录按钮的区域 -->
<div class="button_section flex_column">
<button class="button" @click="signup()">注册</button>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
signup(){
uni.showToast({
title:'注册成功',
icon:'success',
duration:3000
})
}
}
}
</script>在这段代码中，我们首先给注册按钮添加了一个点击事件@click="signup()"，点击注册按钮会触发signup()事件，括号里面是空的是因为我们不需要传值，如果遇到需要传值的情况我们再说，然后我们在JavaScript中，methods表示方法事件，在这里定义各类事件具体是干什么的，同样，其他的先不管，后面我们都会用到。
我们在signup方法中调用了一个uni.showToastAPI，这个API的作用是弹出一个提示框，你需要的能够想到的任何API官方都会提供，你只需把参数设置一下就可以了，比如duration表示持续的时间，改改看看会有什么不同。
API是官方提供给我们的接口，他会有详细的手册供我们使用，放心，一定会简单到菜鸡都会用，如果太难了大家都不会，他怎么赚钱？
我们不需要知道他究竟是什么原理，我们只是应用程序的开发者，只需要会用就行了，就像你买了一个车子，车子的厂家提供了一些接口给你，就是方向盘刹车等等，虽然我们可能还是要经过简单的学习，但车子内部什么原理你绝对不需要了解，你又不是造车的，也不是修车的，当然，在程序界里造车的都是大佬，工资水平是你的很多很多倍。
好像又扯远了，咱们这个程序好像还不行吧，咱们还没注册呢，怎么可能直接就显示注册成功了，我们还需要发送请求到后端，如果我们发送的数据满足后端的条件，那么后端应该会告诉我们注册成功，那样我们才是真的注册成功了，有同学可能又着急了，那搞清楚了，就赶紧发请求呗，磨叽啥。
我只想说，你发请求，发什么过去，你连用户输入的数据都还没有收集呢，那么怎么收集用户的数据呢？那先看我操作，再给你们解释。
<template>
<body class="flex_column">
<!-- 标题栏 -->
<div class="title_seciton flex_row" style="justify-content: space-around">
<h1>注册</h1>
<h1>X</h1>
</div>
<!-- 图片区域 -->
<div class="image_section flex_column">
<img src="static/angry.gif" alt="图片加载失败">
<h4>HI!请注册</h4>
</div>
<!-- 用户输入区域 -->
<div class="input_section flex_column">
<div class="input_box flex_row">
<p>用户名:</p>
<input type="text" placeholder="请输入用户名" v-model="username">
</div>
<div class="input_box flex_row">
<p>密码:</p>
<input type="text" placeholder="请输入密码" v-model="password">
</div>
<div class="input_box flex_row">
<p>密码:</p>
<input type="text" placeholder="请输入确认账号" v-model="cpassword">
</div>
</div>
<!-- 登录按钮的区域 -->
<div class="button_section flex_column">
<button class="button" @click="signup()">注册</button>
</div>
</body>
</template>
<script>
export default {
data() {
return {
username: '', //用户名
password:'', //密码
cpassword:'', //确认密码
}
},
onLoad() {
},
methods: {
signup(){
uni.showToast({
title:this.username,
icon:'success',
duration:3000
})
}
}
}
</script>
<style>
input{
padding: 10px;
padding-left: 20px;
border: 1px solid black;
margin: 10px;
}
.title_seciton{
width: 100vw;
height: 10vh;
background-color: white;
}
.image_section{
width: 100vw;
height: 30vh;
background-color: #efefef;
}
.input_section{
width: 100vw;
height: 40vh;
background-color: red;
}
.button_section{
width: 100vw;
height: 20vh;
background-color: blue;
}
.button{
padding:10px 50px;
font-size: 25px;
background-color: cornflowerblue;
}
.button:hover{
background-color: green;
}
/* 弹性盒子横着排 */
.flex_row{
display: flex; /* 排列方式：弹性盒子 */
flex-direction: row;/*排列方向：横向*/
justify-content: center;/*主轴居中*/
align-items: center;/*副轴居中*/
}
/* 弹性盒子竖着排 */
.flex_column{
display: flex; /* 排列方式：弹性盒子 */
flex-direction: column;/*排列方向：纵向*/
justify-content: center;/*主轴居中*/
align-items: center;/*副轴居中*/
}
</style>v-model是将输入框和data中的数据实现双向绑定，因为我们知道数据都是保存在变量里的，相当于就是弄了个变量来保存输入框中输入的数据。
但是你怎么知道输入的数据有没有保存到data中呢，还记得刚才我们不是有一个提示框吗？我们就把用户名输入框的数据username当作输入框的标题文字吧，但是记得前面要加this，为什么要加this，这个问题比较复杂，留着以后再说吧。
再发请求之前，我们还要先去看一下后端程序员的文档。
那个所谓的后端程序员其实就是我，没人给你们写后端，你们前端也练不了，网上没有人会提供后端给你们练习，一是这玩意写着非常累，花时间，二是容易被攻击，服务器的成本也高。所以你过了这村没这店，你要是现在不学，以后也几乎没有机会学了，其实你和程序员有没有缘分现在几乎也能看出来了，八九不离十，现在这样保姆式教学都不学，以后难了，唉，以后的路自己走吧，言尽于此，估计不想学习的也不会看到这里，说实话，我是一个字一个字敲到这里的，要敲很多天，真的很累，你们可能一天就看到这了。
| 请求地址 | 请求方式 |
|---|---|
| http://10.163.72.39:5555/Signup_add.php | get |
| 字段名称 | 类型及长度 | 是否必需 | 默认值 |
|---|---|---|---|
| username | char(100) | 是 | 无 |
| password | char(100) | 是 | 无 |
| cpassword | char(100) | 是 | 无 |
| 返回参数 | 字段 |
|---|---|
| msg | 错误提示信息 |
| error | 错误状态标志，1为错误，0为无误 |
<template>
<body class="flex_column">
<!-- 标题栏 -->
<div class="title_seciton flex_row" style="justify-content: space-around">
<h1>注册</h1>
<h1>X</h1>
</div>
<!-- 图片区域 -->
<div class="image_section flex_column">
<img src="static/angry.gif" alt="图片加载失败">
<h4>HI!请注册</h4>
</div>
<!-- 用户输入区域 -->
<div class="input_section flex_column">
<div class="input_box flex_row">
<p>用户名:</p>
<input type="text" placeholder="请输入用户名" v-model="username">
</div>
<div class="input_box flex_row">
<p>密码:</p>
<input type="password" placeholder="请输入密码" v-model="password">
</div>
<div class="input_box flex_row">
<p>密码:</p>
<input type="password" placeholder="请输入确认账号" v-model="cpassword">
</div>
</div>
<!-- 登录按钮的区域 -->
<div class="button_section flex_column">
<button class="button" @click="signup()">注册</button>
</div>
</body>
</template>
<script>
export default {
data() {
return {
username: '', //用户名
password:'', //密码
cpassword:'', //确认密码
}
},
onLoad() {
},
methods: {
signup(){
uni.request({
url:'http://10.163.72.39:5555/Signup_add.php',
data:{
username:this.username,
password:this.password,
cpassword:this.cpassword
},
success(res) {
console.log(res)
// 如果注册成功
if(res.data.error==0){
uni.showToast({
title:res.data.msg,
icon:'success',
duration:3000
})
// 否者就是注册失败了
}else{
uni.showToast({
title:res.data.msg,
icon:'error',
duration:3000
})
}
}
})
}
}
}
</script>
<style>
input{
padding: 10px;
padding-left: 20px;
border: 1px solid black;
margin: 10px;
}
.title_seciton{
width: 100vw;
height: 10vh;
background-color: white;
}
.image_section{
width: 100vw;
height: 30vh;
background-color: #efefef;
}
.input_section{
width: 100vw;
height: 40vh;
background-color: red;
}
.button_section{
width: 100vw;
height: 20vh;
background-color: blue;
}
.button{
padding:10px 50px;
font-size: 25px;
background-color: cornflowerblue;
}
.button:hover{
background-color: green;
}
/* 弹性盒子横着排 */
.flex_row{
display: flex; /* 排列方式：弹性盒子 */
flex-direction: row;/*排列方向：横向*/
justify-content: center;/*主轴居中*/
align-items: center;/*副轴居中*/
}
/* 弹性盒子竖着排 */
.flex_column{
display: flex; /* 排列方式：弹性盒子 */
flex-direction: column;/*排列方向：纵向*/
justify-content: center;/*主轴居中*/
align-items: center;/*副轴居中*/
}
</style>这就是注册页面完整的代码了，有同学提了一个问题，密码输入的时候不是应该隐藏吗？这个确实是我忘了，我们来解释一下这件事情吧，大家观察一下上面这段代码的用户名输入框和密码输入框，找到不同的地方了吗？是不是用户输入框的type="text"，而密码输入框的type="password"，这个我就解释一下英文字面意思就行了，type是类型的意思，然后text是文本，password是密码。
17.发送登录请求
注册成功了之后怎么验证呢？那当然是去登录一下咯，如果你能用你刚才注册好的账号登录，就说明注册的时候信息已经提交到数据库了。
我们来看一下登录接口的后端文档吧
| 请求地址 | 请求方式 |
|---|---|
| http://10.163.72.39:5555/Login_get.php | get |
| 字段名称 | 类型及长度 | 是否必需 | 默认值 |
|---|---|---|---|
| username | char(100) | 是 | 无 |
| password | char(100) | 是 | 无 |
| 返回参数 | 字段 |
|---|---|
| msg | 错误提示信息 |
| error | 错误状态标志，1为错误，0为无误 |
<template>
<body class="flex_column">
<!-- 标题栏 -->
<div class="title_seciton flex_row" style="justify-content: space-around">
<h1>登录</h1>
<h1>X</h1>
</div>
<!-- 图片区域 -->
<div class="image_section flex_column">
<img src="static/angry.gif" alt="图片加载失败">
<h4>HI!请登录</h4>
</div>
<!-- 用户输入区域 -->
<div class="input_section flex_column">
<div class="input_box flex_row">
<p>用户名:</p>
<input type="text" placeholder="请输入密码" v-model="username">
</div>
<div class="input_box flex_row">
<p>密码:</p>
<input type="password" placeholder="请输入账号" v-model="password">
</div>
</div>
<!-- 登录按钮的区域 -->
<div class="button_section flex_column">
<button class="button" @click="login">登录</button>
</div>
<navigator url="/pages/signup/signup">没有账号，立即注册</navigator>
</body>
</template>
<script>
export default {
data() {
return {
username: '', //用户名
password:'', //密码
}
},
onLoad() {
},
methods: {
login(){
uni.request({
url:'http://10.163.72.39:5555/Login_get.php',
data:{
username:this.username,
password:this.password,
},
success(res) {
console.log(res)
// 如果登录成功
if(res.data.error==0){
uni.showToast({
title:res.data.msg,
icon:'success',
duration:3000
})
// 否者就是登录失败了
}else{
uni.showToast({
title:res.data.msg,
icon:'error',
duration:3000
})
}
}
})
}
}
}
</script>
<style>
input{
padding: 10px;
padding-left: 20px;
border: 1px solid black;
margin: 10px;
}
.title_seciton{
width: 100vw;
height: 10vh;
background-color: white;
}
.image_section{
width: 100vw;
height: 30vh;
background-color: #efefef;
}
.input_section{
width: 100vw;
height: 40vh;
background-color: red;
}
.button_section{
width: 100vw;
height: 20vh;
background-color: blue;
}
.button{
padding:10px 50px;
font-size: 25px;
background-color: cornflowerblue;
}
.button:hover{
background-color: green;
}
/* 弹性盒子横着排 */
.flex_row{
display: flex; /* 排列方式：弹性盒子 */
flex-direction: row;/*排列方向：横向*/
justify-content: center;/*主轴居中*/
align-items: center;/*副轴居中*/
}
/* 弹性盒子竖着排 */
.flex_column{
display: flex; /* 排列方式：弹性盒子 */
flex-direction: column;/*排列方向：纵向*/
justify-content: center;/*主轴居中*/
align-items: center;/*副轴居中*/
}
</style>18、记录登录信息（浏览器本地缓存）
登录完了之后，后端给我们返回的msg里提示登录成功，我们知道登录成功了，然后呢，就只是知道一下就行了吗？
我们要理一理登录成功会发生哪些改变，登录成功了之后我们希望网站能够知道我们的身份，我们现在为了简单，不弄什么会员等级制度，但是我们总得让网站知道我们已经登录了吧，因为网站有很多操作都是要登录才能使用的，比如发送留言等等，那怎么样才能让网站记录我们的登录状态呢，所以我们下面就会用到浏览器的缓存机制。
<template>
<body>
<button @click="login()">存缓存</button>
</body>
</template>
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
login(){
uni.setStorageSync('username','123456')
var login_username = uni.getStorageSync('username')
console.log(login_username)
}
}
}
</script>存缓存也用到了uniapp给我们提供的一个接口，我们通过这个接口可以把用户的身份信息存到浏览器缓存中，但是我们之后怎么把我们的身份信息又从浏览器缓存中取出来呢？想想我们搬家的时候是怎么打包物品的呢？我们是不是要准备很多箱子，然后把我们的生活物品放到箱子里，当然如果乱放的话，到时候肯定是找不到的，所以我们会在每个箱子上贴一个标签，装衣服的箱子就贴个衣服的标签，装鞋的箱子就贴个鞋的标签。
我们存缓存也是一样的道理，如果如果把数据乱存进去，到时候肯定是找不到的，所以我们要对我们的数据贴一个标签，这个标签的名字怎么取呢？还是和我们搬家一样，放的是什么就叫什么好了，放的是衣服就贴衣服标签，我们上面的代码是要存放用户名123456，uni.setStorageSync('username','123456')，那标签名就叫username好了，之后我们再用uni.getStorageSync('username')去把用户名取出来，当然，我们知道，我们之前把用户名存放在username箱子里，我们应该从username这个箱子中把用户名取出来。
最后，那个123456是我们随便放的数据，只是测试一下，具体的逻辑应该是，我们先把input框中用户输入的数据放到data里，然后在通过发请求携带data中的用户名发送到后端注册，如果注册成功了，我们将username保存到缓存里，之后我们如果要判断用户是否已登录，我们就可以从缓存中取数据，如果找得到缓存的用户名数据，说明用户已经登录成功了，如果找不到肯定是没有登录成功的。
至此，我们的登录注册功能就全部完成了，这一块的内容，我就最为我们这个项目的最后考核吧，不提供代码，但是所有的知识已经教给你们了，你们只要按照这个逻辑写出来就可以了，不存在新的知识点，看你能够对所学的知识进行融会贯通吗？如果你能做到，祝贺你，你已经掌握了本部分的内容，向着更高的方向前进吧！
