1.2 初识Maven1.2.1 什么是MavenMaven是Apache旗下的一个开源项目，是一款用于管理和构建java项目的工具。官网：Maven – Welcome to Apache MavenApache 软件基金会，成立于1999年7月，是目前世界上最大的最受欢迎的开源软件基金会，也是一个专门为支持开源项目而生的非盈利性组织。开源项目：Welcome to The Apache Sof
6 打包部署我们的前端工程开发好了，但是我们需要发布，那么如何发布呢？主要分为2步：前端工程打包通过nginx服务器发布前端工程6.1 前端工程打包接下来我们先来对前端工程进行打包我们直接通过VS Code的NPM脚本中提供的build按钮来完整，如下图所示，直接点击即可：编辑然后会在工程目录下生成一个dist目录，用于存放需要发布的前端资源，如下图所示：编辑6.2 部署前端工程6.2
5 Vue路由5.1 路由介绍将资代码/vue-project(路由)/vue-project/src/views/tlias/DeptView.vue拷贝到我们当前EmpView.vue同级，其结构如下：编辑此时我们希望基于4.4案例中的功能，实现点击侧边栏的部门管理，显示部门管理的信息，点击员工管理，显示员工管理的信息，效果如下图所示：编辑编辑这就需要借助我们的vue的路由功能了。前端路由：U
4.4.3.6 异步数据加载4.4.3.6.1 异步加载数据对于案例，我们只差最后的数据了，而数据的mock地址已经提供：http://yapi.smart-xwork.cn/mock/169327/emp/list我们最后要做的就是异步加载数据，所以我们需要使用axios发送ajax请求。在vue项目中，对于axios的使用，分为如下2步：安装axios: npm install a
4.4.3.5.3 分页工具栏分页条我们之前做过，所以我们直接找到之前的案例，复制即可，代码如下：其中template模块代码如下：<!-- Pagination分页 --> <el-pagination @size-change="handleSizeChange" @current-change="han
4.4 案例4.4.1 案例需求参考 资料/页面原型/tlias智能学习辅助系统/首页.html 文件，浏览器打开，点击页面中的左侧栏的员工管理，如下所示：编辑需求说明：制作类似格式的页面即上面是标题，左侧栏是导航，右侧是数据展示区域右侧需要展示搜索表单右侧表格数据是动态展示的，数据来自于后台实际示例效果如下图所示：编辑数据Mock地址：http://yapi.smart-xwork.cn/moc
4.3.4 Form表单4.3.4.1 组件演示Form 表单：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。表单在我们前端的开发中使用的还是比较多的，接下来我们学习这个组件，与之前的流程一样，我们首先需要在ElementUI的官方找到对应的组件示例：如下图所示：编辑我们的需求效果是：在对话框中呈现表单内容，类似如下图所示：编辑所以，首先我们先要根据上一小结所学
4.3.3 Dialog对话框4.3.3.1 组件演示Dialog: 在保留当前页面状态的情况下，告知用户并承载相关操作。其企业开发应用场景示例如下图所示编辑首先我们需要在ElementUI官方找到Dialog组件，如下图所示：编辑然后复制如下代码到我们的组件文件的template模块中<br><br> <!--Dialog 对话框 --> <
4 Vue组件库Element4.1 Element介绍不知道同学们还否记得我们之前讲解的前端开发模式MVVM，我们之前学习的vue是侧重于VM开发的，主要用于数据绑定到视图的，那么接下来我们学习的ElementUI就是一款侧重于V开发的前端框架，主要用于开发美观的页面的。Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。Element 提供了很多组件
3 前端工程化3.1 前端工程化介绍我们目前的前端开发中，当我们需要使用一些资源时，例如：vue.js，和axios.js文件，都是直接再工程中导入的，如下图所示：编辑但是上述开发模式存在如下问题：每次开发都是从零开始，比较麻烦多个页面中的组件共用性不好js、图片等资源没有规范化的存储目录，没有统一的标准，不方便维护所以现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点模
2.1 前后台分离开发介绍在之前的课程中，我们介绍过，前端开发有2种方式：前后台混合开发和前后台分离开发。前后台混合开发，顾名思义就是前台后台代码混在一起开发，如下图所示：编辑这种开发模式有如下缺点：沟通成本高：后台人员发现前端有问题，需要找前端人员修改，前端修改成功，再交给后台人员使用分工不明确：后台开发人员需要开发后台代码，也需要开发部分前端代码。很难培养专业人才不便管理：所有的代码都在一个工
1.3 Axios上述原生的Ajax请求的代码编写起来还是比较繁琐的，所以接下来我们学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装，简化书写。Axios官网是：https://www.axios-http.cn1.3.1 Axios的基本使用Axios的使用比较简单，主要分为2步：引入Axios文件<script src="js/axi
1.1 Ajax介绍1.1.1 Ajax概述我们前端页面中的数据，如下图所示的表格中的学生信息，应该来自于后台，那么我们的后台和前端是互不影响的2个程序，那么我们前端应该如何从后台获取数据呢？因为是2个程序，所以必须涉及到2个程序的交互，所以这就需要用到我们接下来学习的Ajax技术。编辑Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XM
2.4 生命周期vue的生命周期：指的是vue对象从创建到销毁的过程。vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：状态阶段周期beforeCreate创建前created创建后beforeMount挂载前mounted挂载完成beforeUpdate更新前updated更新后before
2.3.5 案例需求：编辑分析：首先我们肯定需要遍历数组的，所以需要使用v-for标签；然后我们每一条数据对应一行，所以v-for需要添加在tr标签上；其次我们需要将编号，所以需要使用索引的遍历语法；然后我们要将数据展示到表格的单元格中，所以我们需要使用{{}}插值表达式；最后，我们需要转换内容，所以我们需要使用v-if指令，进行条件判断和内容的转换步骤：使用v-for的带索引方式添加
2.3 Vue指令在上述的快速入门中，我们发现了html中输入了一个没有学过的属性v-model，这个就是vue的指令。指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…在vue中，通过大量的指令来实现数据绑定到视图的，所以接下来我们需要学习vue的常用指令，如下表所示：指令作用v-bind为HTML标签绑定属性值，如设置 href ,
2.1 Vue概述通过我们学习的html+css+js已经能够开发美观的页面了，但是开发的效率还有待提高，那么如何提高呢？我们先来分析下页面的组成。一个完整的html页面包括了视图和数据，数据是通过请求 从后台获取的，那么意味着我们需要将后台获取到的数据呈现到页面上，很明显， 这就需要我们使用DOM操作。正因为这种开发流程，所以我们引入了一种叫做MVVM(Model-View-View
1.6.4 案例1.6.4.1 需求说明接下来我们通过案例来加强所学js知识点的掌握。需求如下3个：点击 “点亮”按钮 点亮灯泡，点击“熄灭”按钮 熄灭灯泡输入框鼠标聚焦后，展示小写；鼠标离焦后，展示大写。点击 “全选”按钮使所有的复选框呈现被选中的状态，点击 “反选”按钮使所有的复选框呈现取消勾选的状态。效果如图所示：编辑1.6.4.2 资料准备在VS Code中创建名为11. JS
1.6 JavaScript事件1.6.1 事件介绍如下图所示的百度注册页面，当我们用户输入完内容，百度可以自动的提示我们用户名已经存在还是可以使用。那么百度是怎么知道我们用户名输入完了呢？这就需要用到JavaScript中的事件了。编辑什么是事件呢？HTML事件是发生在HTML元素上的 “事情”，例如：按钮被点击鼠标移到元素上输入框失去焦点........而我们可以给这些事件绑定函数
1.5.4 案例1.5.4.1 需求说明鲁迅说的好，光说不练假把式,光练不说傻把式。所以接下来我们需要通过案例来加强对于上述DOM知识的掌握。需求如下3个：点亮灯泡将所有的div标签的标签体内容后面加上：very good使所有的复选框呈现被选中的状态效果如下所示：编辑1.5.4.2 资料准备在JS目录下，也就是用于存放html文件的同级创建img文件下，然后将资料/图片素材中提供的2
1.5.3 DOM对象1.5.3.1 DOM介绍DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为Document：整个文档对象Element：元素
1.5.2 BOM对象接下来我们学习BOM对象，BOM的全称是Browser Object Model,翻译过来是浏览器对象模型。也就是JavaScript将浏览器的各个组成部分封装成了对象。我们要操作浏览器的部分功能，可以通过操作BOM对象的相关属性或者函数来完成。例如：我们想要将浏览器的地址改为http://www.baidu.com,我们就可以通过BOM中提供的location对
JavaScripthtml完成了架子，css做了美化，但是网页是死的，我们需要给他注入灵魂，所以接下来我们需要学习JavaScript，这门语言会让我们的页面能够和用户进行交互。1.1 介绍通过代码/js效果演示提供资料进行效果演示，通过浏览器打开，我们点击主题5按钮，页面的主题发生了变化，所以js可以让我们的页面更加的智能，让页面和用户进行交互。编辑1.2 引入方式同样，js代码也
2. HTML & CSS1). 什么是HTML ?HTML: HyperText Markup Language，超文本标记语言。超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言HTML标签都是预定义好的。例如：使用 <h1> 标签展示标题，使用<a>展示超链接，使用<img&
Web开发介绍1 什么是web开发Web：全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站。所以Web开发说白了，就是开发网站的，例如下图所示的网站：淘宝，京东等等编辑那么我们知道了web开发是开发网站的，那么我们需要学习哪些知识呢？以及这些知识在我们整个网站开发中占据什么位置呢？对于这些问题，我们就必须知道网站整体的工作流程。2 网站的工作流
响应式布局方案媒体查询Bootstrap框架01-媒体查询基本写法编辑max-width：最大宽度（小于等于）min-width：最小宽度（大于等于）书写顺序min-width（从小到大）max-width（从大到小）案例-左侧隐藏需求：网页宽度小于等于768px则隐藏左侧区域编辑HTML 结构<div class="box"> <div class="left"
移动 Web 第四天01-vw适配方案vw和vh基本使用vw和vh是相对单位，相对视口尺寸计算结果vw：viewport width（1vw = 1/100视口宽度 ）vh：lviewport height ( 1vh = 1/100视口高度 )vw布局vw单位的尺寸 = px 单位数值 / ( 1/100 视口宽度 )vh问题vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可
模拟移动设备，方便查看页面效果编辑屏幕分辨率分类：物理分辨率：硬件分辨率（出厂设置）逻辑分辨率：软件 / 驱动设置结论：制作网页参考 逻辑分辨率编辑视口作用：显示 HTML 网页的区域，用来约束 HTML 的尺寸<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
移动 Web 第二天01-空间转换空间转换简介空间：是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间，Z 轴位置与视线方向相同。空间转换也叫 3D转换属性：transform编辑平移transform: translate3d(x, y, z); transform: translateX(); transform: translateY(); transform:
01-平面转换简介作用：为元素添加动态效果，一般与过渡配合使用概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）编辑平面转换也叫 2D 转换，属性是 transform平移transform: translate(X轴移动距离, Y轴移动距离);取值像素单位数值百分比（参照盒子自身尺寸计算结果）正负均可技巧translate() 只写一个值，表示沿着 X 轴移动单独设置 X 或 Y
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
