JavaWeb前端开发

Web前端开发

HTML

HTML（HyperText Markup Language）：超文本标记语言。

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

标记语言：由标签构成的语言。

HTML标签都是预定义好的。例如：使用<a>展示超链接，使用<img>展示图片，<video>展示视频。

HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

HTML结构标签

<html>
	<head>    
		   <title>标题</title>
	</head>
	<body>
    
	</body>
</html>

特点

1.HTML标签不区分大小写。

2.HTML标签属性值单双引号都可以。

3.HTML语法松散。

图片标签`<img>`

src：指定图像的url（绝对路径 / 相对路径）
width：图像的宽度（像素 / 相对于父元素的百分比）
height：图像的高度（像素 / 相对于父元素的百分比）

绝对路径：绝对磁盘路径（D:/xxxx）、绝对网络路径（https://xxxx）

相对路径：从当前文件开始查找。（./ : 当前目录, ../ : 上级目录）

标题标签`<h1>-<h6>`

h1 → h6 重要程度依次降低。

注意：HTML标签都是预定义好的，不能自己随意定义。

水平线标签`<hr>`

超链接`<a>`

href：指定资源访问的url。
target：指定在何处打开资源链接。_self：默认值，在当前页面打开。_blank：在空白页面打开。

注意：text-decoration：规定添加到文本的修饰，none表示定义标准的文本。使用none可以将超链接<a>的下划线和蓝色字体去除。

视频标签`<video>`

src：规定视频的url。
controls：显示播放控件。controls = controls，属性和属性值一样，可以简写为controls。
width：播放器的宽度。
height：播放器的高度。

音频标签`<audio>`

src：规定音频的url。
controls：显示播放控件。controls = controls，属性和属性值一样，可以简写为controls。

段落标签`<p>`

段落内换行：<br>

文本加粗标签： <b>（加粗）/ <strong>（强调）

在HTML中无论输入多少个空格，只会显示一个。可以使用空格占位符： 

设置段落的CSS样式：

line-height：设置行高。
text-indent：定义第一个行内容的缩进。值为2em则为缩进两个字。
text-align：规定元素中的文本的水平对齐方式。

盒子模型

盒子：页面中所有的元素（标签），都可以看做是一个盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。

盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）。

布局标签

div和span是没有语义的布局标签。

div标签：一行只显示一个（独占一行），宽度默认是父元素的宽度，高度默认由内容撑开，可以设置宽高（width、height）。
span标签：一行可以显示多个（组合行内元素），宽度和高度默认由内容撑开，不可以设置宽高（width、height）。

表格标签

标签	描述	属性
`<table>`	定义表格整体，可以包裹多个`<tr>`	`border`：规定表格边框的宽度 `width`：规定表格的宽度 `cellspacing`: 规定单元之间的空间。
`<tr>`	表格的行，可以包裹多个`<td>`
`<td>`	表格单元格（普通），可以包裹内容	如果是表头单元格，可以替换为 `<th>`（有居中加粗的效果）

表单标签

标签：<form>

表单项：不同类型的input元素、下拉列表、文本域等。

<input>：定义表单项，通过type属性控制输入形式。
<select>：定义下拉列表。
<textarea>：定义文本域。

属性：

action：当提交表单时向何处发送表单数据，即表单数据提交的URL地址。
method：发送表单数据的方式。GET、POST。

type取值	描述
text	默认值，定义单行的输入字段
password	定义密码字段
radio	定义单选按钮
checkbox	定义复选框
file	定义文件上传按钮
date/time/datetime-local	定义日期/时间/日期时间
number	定义数字输入框
email	定义邮件输入框
hidden	定义隐藏域
submit / reset / button	定义提交按钮 / 重置按钮 / 可点击按钮

CSS

CSS（Cascading Style Sheet）：层叠样式表，用于控制页面的样式（表现）。

CSS引入方式

1.行内样式：写在标签的style属性中（不推荐）。

1	`<h1 style="xxx: xxx; xxx: xxx;">中国新闻网</h1>`

2.内嵌样式：写在style标签中（可以写在页面任何位置，但通常约定写在head标签中）。

<style>
  h1 {
     xxx: xxx; 
     xxx: xxx;
  }
</style>

3.外联样式：写在一个单独的.css文件中（需要通过link标签在网页中引入）。

h1 {
   xxx: xxx; 
   xxx: xxx;
}

1	`<link rel="stylesheet" href="css/news.css">`

CSS选择器

CSS选择器用来选取需要设置样式的元素（标签）。

1.元素选择器

h1 {
    color: red;
}
<h1> Hello CSS </h1>

2.id选择器

#hid {
    color: red;
}
<h1 id="hid"> CSS id Selector</h1>

3.类选择器

.cls {
    color: red;
}
<h1 class="cls">CSS class Selector</h1>

优先级：id选择器 > 类选择器 > 元素选择器

颜色color的表示方式

表示方式	表示含义	取值
关键字	预定义的颜色名	red、green、blue…
rgb表示法	红绿蓝三原色，每项取值范围：0-255	rgb(0,0,0)、rgb(255,255,255)、rgb(255,0,0)
十六进制表示法	#开头，将数字转换成十六进制表示	#000000、#ff0000、#cccccc，简写：#000、#ccc

JavaScript

JavaScript是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。

ECMAScript6(ES6) 是最主流的JavaScript版本（发布于2015年)。

JavaScript引入方式

1.内部脚本：将JS代码定义在HTML页面中。JavaScript代码必须位于<script>和</script>标签之间。在HTML文档中，可以在任意地方，放置任意数量的<script>。一般会把脚本置于<body>元素的底部，可改善显示速度。

1
2
3

<script>
    alert("Hello JavaScript")
</script>

2.外部脚本：将 JS代码定义在外部JS文件中，然后引入到HTML页面中。外部JS文件中，只包含JS代码，不包含<script>标签。<script>标签不能自闭合。

1	`<script src="js/demo.js"></script>`

JavaScript基础语法

Javascript区分大小写。每行结尾的分号可有可无。大括号表示代码块。

输出语句

window.alert()写入警告框。
document.write()写入HTML输出。
console.log()写入浏览器控制台。

变量

JavaScript中用var关键字（variable的缩写）来声明变量。JavaScript是弱类型语言，变量可以存放不同类型的值。

变量名规则：组成字符可以是任何字母、数字、下划线（_）或美元符号（$），数字不能开头。

注意：

ECMAScript6新增了le关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明。
ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

数据类型

JavaScript中分为原始类型和引用类型。

原始类型：

number：数字（整数、小数、NaN(Not a Number)）。
string：字符串，单双引皆可。
boolean：布尔。true，false。
null：对象为空。
undefined：当声明的变量未初始化时，该变量的默认值是undefined。

使用typeof运算符可以获取数据类型：

1 2	`var a = 20; alert(typeof a);`

类型转换

1.字符串类型转为数字：将字符串字面值转为数字。如果字面值不是数字，则转为NaN。

2.其他类型转为boolean：

Number：0和NaN为false，其他（包括负数）均转为true。
String：空字符串为false，其他均转为true。
Null和undefined：均转为false。

运算符

==会进行类型转换，===不会进行类型转换。

var a = 10;
alert(a == "10"); //true
alert(a === "10"); //false
alert(a === 10); //true

函数

JavaScript函数通过function关键字进行定义。

注意：

形式参数不需要类型。因为JavaScript是弱类型语言。
返回值也不需要定义类型，可以在函数内部直接使用return返回即可。
JavaScript中，函数调用可以传递任意个数的参数。

//定义方式一
function add(a , b){
    return a + b;
}
//定义方式二
var add = function(a , b){
    return a + b;
}

**箭头函数(ES6)**：用来简化函数定义语法。具体形式为: (…) => { … } ，如果需要给箭头函数起名字：var xxx = (…) => { … }。

JavaScript对象

Array

//定义方式一
var arr = new Array(1,2,3,4);
//定义方式二
var arr = [1,2,3,4];
arr[10] = "hello";//可以访问

注意：JavaScript中的数组相当于Java中集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意的类型的数据。

属性：

length：设置或返回数组中元素的数量。

方法：

forEach()：遍历数组中的每个有值的元素，并调用一次传入的函数。
push()：将新元素添加到数组的末尾，并返回新的长度。
splice()：从数组中删除元素。

String

//定义方式一
var str = new String("Hello String");
//定义方式二
var str = "Hello String";

属性：

length：字符串的长度。

方法：

charAt()：返回在指定位置的字符。
indexOf()：检索字符串。
trim()：去除字符串两边的空格。
substring()：提取字符串中两个指定的索引号之间的字符。

JSON

JavaScript自定义对象

var user = {
    name:"Tom", 
    age:20, 
    gender:"male",
    eat: function(){
        alert("用膳~");
    }
    //或：
    /*
    eat(){
        alert("用膳~");
    }
    */
};

JSON：JavaScript Object Notation，JavaScript对象标记法。JSON是通过JavaScript对象标记法书写的文本。

注意：

JSON的属性名必须使用双引号包裹。
属性值value的数据类型为：数字（整数或浮点数）、字符串（在双引号中）、逻辑值（true或false）、数组（在方括号中）、对象（在花括号中）、null。

JSON字符串转为JS对象

1 2	`var userStr = '{"name":"Jerry","age":18, "addr":["北京","上海","西安"]}'; var jsObject = JSON.parse(userStr);`

JS对象转为JSON字符串

1	`var jsonStr = JSON.stringify(jsObject);`

BOM

概念：Browser Object Model浏览器对象模型，允许JavaScript与浏览器对话， JavaScript将浏览器的各个组成部分封装为对象。

组成：

Window：浏览器窗口对象。

获取：直接使用window，其中window.可以省略。

属性：

history：对History对象的只读引用。

location：用于窗口或框架的Location对象。

navigator：对Navigator对象的只读引用。

方法：

alert()：显示带有一段消息和一个确认按钮的警告框。

confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。

setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
1
2
3
setInterval(function(){ alert("hello"); }, 2000)
setTimeout()：在指定的毫秒数后调用函数或计算表达式。（只调用一次）
1
2
3
setTimeout(function(){ alert("hi"); }, 3000)
Navigator：浏览器对象。
Screen：屏幕对象。
History：历史记录对象。
Location：地址栏对象。

获取：window.location.属性;/location.属性。

属性：

href：设置或返回完整的URL。
1
location.href = "https://www.itcast.cn";

DOM

概念：Document Object Model，文档对象模型。DOM是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分：

1.Core DOM：所有文档类型的标准模型。将标记语言的各个组成部分封装为对应的对象：

Document：整个文档对象。
Element：元素对象。
Attribute：属性对象。
Text：文本对象。
Comment：注释对象。

2.XML DOM：XML文档的标准模型。

3.HTML DOM：HTML文档的标准模型。

Image：<img>
Button：<input type='button'>

HTML中的Element对象可以通过Document对象获取，而Document对象是通过window对象获取的。

Document提供获取Element元素对象的函数：

1.根据id属性值获取，返回单个Element对象。

1	`var h1 = document.getElementById('h1');`

2.根据标签名称获取，返回Element对象数组。

1	`var divs = document.getElementsByTagName('div');`

3.根据name属性值获取，返回Element对象数组。

1	`var hobbys = document.getElementsByName('hobby');`

4.根据class属性值获取，返回Element对象数组。

1	`var clss = document.getElementsByClassName('cls');`

JavaScript事件监听

事件：HTML事件是发生在HTML元素上的事情。比如：按钮被点击、鼠标移动到元素上、按下键盘按键。

事件监听：JavaScript可以在事件被侦测到时执行代码。

事件绑定

方式一：通过 HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">
<script>
    function on(){
        alert('我被点击了!');
    }
</script>

方式二：通过 DOM 元素属性绑定

<input type="button" id="btn" value="按钮2">
<script>
    document.getElementById('btn').onclick=function(){
        alert('我被点击了!');
    }
</script>

常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开

Vue

Vue是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。

基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。

官网： https://v2.cn.vuejs.org/

引入Vue

<script src="js/vue.js"></script>

<div id="app">
    <input type="text" v-model="message">
    {{ message }} <!-- {{message}}内支持变量、三元运算符、函数调用、算术运算 -->
</div>

<script>
    new Vue({
        el: "#app",
        data: {
            message: "Hello Vue!"
        }
    })
</script>

常用命令

1.v-bind为HTML标签绑定属性值，如设置href , css样式等。

2.v-model在表单元素上创建双向数据绑定。

<a v-bind:href="url">传智教育</a>
<a :href="url">传智教育</a>
<input type="text" v-model="url"> <!-- 修改url，则三者的url均会改变 -->

<script>
  new Vue({
     el: "#app",
     data: {
        url: "https://www.itcast.cn"
     }
  })
</script>

注意：通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

3.v-on为HTML标签绑定事件。

<input type="button" value="按钮" v-on:click="handle()">
<input type="button" value="按钮" @click="handle()">

<script>
    new Vue({
        el: "#app",
        data: {
	//...
        },
        methods: {
            handle:function(){
                alert('我被点击了');
            }
        },
    })
</script>

4.v-if、v-else-if、v-else：条件性的渲染某元素，判定为true时渲染，否则不渲染。

5.v-show根据条件展示某元素，与v-if的区别在于，v-show切换的是display属性的值。会渲染在屏幕上，但是不显示。

年龄{{age}},经判定为:
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age > 35 && age < 60">中年人</span>
<span v-else>老年人</span>

年龄{{age}},经判定为:Vue
<span v-show="age <= 35">年轻人</span>

<script>
    new Vue({
        el: "#app",
        data: {
           age: 18
        }
    })
</script>

6.v-for渲染列表，遍历容器的元素或者对象的属性。

<div v-for="addr in addrs">{{addr}}</div>
<div v-for="(addr,index) in addrs">{{index + 1}} : {{addr}}</div>

<script>
    new Vue({
        el: "#app",
        data: {
           addrs: ['北京','上海','广州','深圳','成都','杭州']
        }
    })
</script>

生命周期

生命周期：指一个对象从创建到销毁的整个过程。

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）。

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

<script>
    new Vue({
        el: "#app",
        data: {
            
        },
        mounted() {//mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。（发送请求到服务端，加载数据）
            console.log("Vue挂载完毕,发送请求获取数据");
        },
        methods: {
           
        },
    })
</script>

Ajax

概念：Asynchronous JavaScript And XML，异步的JavaScript和XML。

作用：

数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

原生Ajax（繁琐）

1.准备数据地址。

2.创建XMLHttpRequest对象：用于和服务器交换数据。

3.向服务器发送请求。

4.获取服务器响应数据。

<input type="button" value="获取数据" onclick="getData()">
<div id="div1"></div></body>

<script>
    function getData(){
        //1. 创建XMLHttpRequest 
        var xmlHttpRequest = new XMLHttpRequest();
        //2. 发送异步请求
        xmlHttpRequest.open('GET','https://mock.apifox.cn/m1/3128855-0-default/emp/list');
        xmlHttpRequest.send();//发送请求
        //3. 获取服务响应数据
        xmlHttpRequest.onreadystatechange = function(){
            if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;
            }
        }
    }
</script>

Axios

Axios对原生的Ajax进行了封装，简化书写，快速开发。

官网： https://www.axios-http.cn/

1.引入Axios的js文件。

1	`<script src="js/axios-0.18.0.js"></script>`

2.使用Axios发送请求，并获取响应结果。

<script>
    axios({
        method: "get",
        url: "http://yapi.smart-xwork.cn/mock/169327/emp/list"
    }).then((result) => {
        console.log(result.data);
    });
    
    axios({
        method: "post",
        url: "http://yapi.smart-xwork.cn/mock/169327/emp/deleteById",
        data: "id=1"
    }).then((result) => {
        console.log(result.data);
    });
</script>

Axios请求方式别名：

axios.get(url [, config])
axios.delete(url [, config])
axios.post(url [, data[, config]])
axios.put(url [, data[, config]])

发送GET请求：

1
2
3

axios.get("http://yapi.smart-xwork.cn/mock/169327/emp/list").then((result) => {
    console.log(result.data);HTML
});

发送POST请求：

1
2
3

axios.post("http://yapi.smart-xwork.cn/mock/169327/emp/deleteById","id=1").then((result) => {
    console.log(result.data);
});

前后端分离开发

API

YAPI

案例使用的是YApi，官网：yapi.smart-xwork.cn（旧版，无法访问）

新版：https://yapi.pro/ （但是卡卡的，还是很难用）

步骤：添加项目、添加分类、添加接口。

Apifox

官网：Apifox

步骤：

1.新建接口：GET后面填/users/{id}，使用大括号{}表示Path参数。

2.返回响应：在数据结构下设置返回的数据结构。

3.运行：选择体验模式或云端Mock（建议，需要单独开启）。点击发送就有随机的值返回。

免费API接口：接口大全-免费API,收集所有免费的API

前端工程化

环境准备

Vue-cli是Vue官方提供的一个脚手架，用于快速生成一个Vue的项目模板。

Vue-cli提供了如下功能：统一的目录结构、本地调试、热部署（不用手动刷新，可以自动更新修改后的页面）、单元测试、集成打包上线。

依赖环境：NodeJS

安装命令：npm install -g @vue/cli

Vue项目

创建

1.命令行：vue create vue-project01

2.图形化界面：vue ui（项目目录下输入）

1
2
3

E:\2_学习\JavaWeb\code\vue>vue ui
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

在http://localhost:8000下打开图形化界面，创建->在文件夹下创建新项目->填写项目名称，先取消初始化git仓库->选择一套预设手动->选择功能，添加Router，其他的以后需要再添加->选择2.x和ESLint with error prevention only->创建新项目。

等待一段很长的时间，即可创建成功。在http://localhost:8000下即可看到新创建的项目。

目录结构

基于Vue脚手架创建出来的工程，有标准的目录结构。

启动方式

1.图形化界面

在package.json页面Ctrl+Q，然后一直按住Ctrl键，找到NPM Scripts，点击之后在VSCode左下方出现NPM SCRIPTS(NPM脚本)，选择serve vue-cli-service，点击右边的三角键即可运行。

2.命令行：npm run serve

配置端口

在vue.config.js文件下：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port: 7000,
  }
})

Vue项目开发流程

默认首页：index.html

入口文件：main.js

根组件：App.vue

Vue的组件文件以 .vue结尾，每个组件由三个部分组成：<template> 、<script>、<style> 。

Vue组件库Element

Element：是饿了么团队研发的，一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。

组件：组成网页的部件，例如超链接、按钮、图片、表格、表单、分页条等等。

官网：https://element.eleme.cn/#/zh-CNListener

快速入门

1.安装ElementUI组件库（在当前工程的目录下），在命令行执行指令：

1	`npm install element-ui@2.15.3`

2.引入ElementUI组件库，在main.js文件下加入：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

3.在views文件夹下创建.vue组件（在views文件夹下或者views的子文件夹下创建都可以），命名格式必须是驼峰命名法，如ElementView.vue，在App.vue文件中，在<template></template>模块中使用<element-view></element-view>标签引入该模板。完整代码：

<template>
  <div id="app">
      <element-view></element-view> <!-- 引入组件 -->
  </div>
</template>

<script>
import ElementView from './views/element/ElementView.vue'

export default {
  components: { ElementView },
  data(){
    return {
      message: "Hello surourou"
    }
  }
}
</script>

【报错】

1.【vue 报错】The template root requires exactly one element

原因：因为vue的模版中只有能一个根节点，所以在template中插入第二个元素就会报错。

解决方法：在template下套一个div标签，然后在div标签下放Element组件。

常见组件

Table表格

用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

Pagination分页

当数据量过多时，使用分页分解数据。

Dialog对话框

在保留当前页面状态的情况下，告知用户并承载相关操作。

Form表单

由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

案例

<template>
    <div>
        <!-- Button按钮 -->
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>

        <br>

        <!-- Table表格 -->
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>

        <br>

        <!-- Pagination分页 -->
        <el-pagination background layout='total, sizes, prev, pager, next, jumper, ->' @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :total=totalPage>
        </el-pagination>

        <br>

        <!-- Dialog对话框 -->
        <el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

        <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
            <el-table :data="gridData">
                <el-table-column property="date" label="日期" width="150"></el-table-column>
                <el-table-column property="name" label="姓名" width="200"></el-table-column>
                <el-table-column property="address" label="地址"></el-table-column>
            </el-table>
        </el-dialog>

        <br>

        <!-- Form表单 -->

        <el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>

        <el-dialog title="收货地址" :visible.sync="dialogFormVisible">

            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="活动名称">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="活动区域">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动时间">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1"
                            style="width: 100%;"></el-date-picker>
                    </el-col>
                    <el-col class="line" :span="2">-</el-col>
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>

    </div>
</template>

<script>
export default {
    methods: {
        tableRowClassName({ rowIndex }) {
            if (rowIndex === 1) {
                return 'warning-row';
            } else if (rowIndex === 3) {
                return 'success-row';
            }
            return '';
        },
        handleSizeChange(value) {
            alert("每页记录数变化" + value)
        },
        handleCurrentChange(value) {
            alert("页码发生变化" + value)
        },
        onSubmit() {
            alert(JSON.stringify(this.form))
        }
    },
    data() {
        return {
            totalPage: 88,
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            gridData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }],
            dialogTableVisible: false,
            dialogFormVisible: false,
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            formLabelWidth: '120px'
        }
    }
}
</script>

<style>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>

Vue路由

前端路由：URL中的hash(#号) 与组件之间的对应关系。

Vue Router是Vue的官方路由。

组成：

VueRouter：路由器类，根据路由请求在路由视图中动态渲染选中的组件。

<router-link>：请求链接组件，浏览器会解析成<a>。

<router-view>：动态视图组件，用来渲染展示与路由路径对应的组件。

安装路由：npm install vue-router@3.5.1

在index.js文件中定义路由：

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

在main.js文件中引入路由：

1 2	`//引入路由 import router from './router'`

【案例】通过Vue的路由VueRouter完成左侧菜单栏点击切换效果

在两个需要切换的组件中设置：

1 2	`<router-link to="/dept">部门管理</router-link> <router-link to="/emp">员工管理</router-link>`

在App.vue组件中设置：

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

打包

在package.json页面Ctrl+Q，然后一直按住Ctrl键，找到NPM Scripts，点击之后在VSCode左下方出现NPM SCRIPTS(NPM脚本)，选择build vue-cli-service，点击右边的三角键即可运行。

打包后生成dist文件夹，包含生成的静态页面。将dist文件夹用于部署。

部署

Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。

官网：https://nginx.org/

Nginx部署

部署：将打包好的dist目录下的文件，复制到nginx安装目录的html目录下。

启动：双击nginx.exe文件即可，Nginx服务器默认占用80端口号。

注意：Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。（netstat –ano | findStr 80命令可以查看当前占用80端口的是什么进程。）（备注：我的电脑可以使用80端口，所以可以不需要这个操作）

访问：http://localhost:90

案例

【补充知识】

1.通过 Scoped slot 可以获取到row, column, $index 和 store（table内部的状态管理）的数据。

1
2
3

<template slot-scope="scope">
    <p>姓名: {{ scope.row.name }}</p> <!-- scope.row获取到该行的值 -->
</template>

2.Vue项目中使用Axios

在项目目录下安装axios：npm install axios

需要使用axios时，导入axios：import axios from 'axios';

【案例要求】：根据页面原型完成员工管理页面开发，并通过Axios完成数据异步加载。

1.用户管理组件EmpView.vue：

<template>
    <div>
        <el-container style="height: 700px; border: 1px solid #eee">
            <el-header
                style="font-size: 30px; color: #000; text-align: center; line-height: 60px; background-color: rgb(238, 241, 246);">tlias智能学习辅助系统</el-header>
            <el-container>
                <el-aside width="230px" style="border: 1px solid #eee">
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                            <el-menu-item index="1-1">
                                <router-link to="/dept">部门管理</router-link>
                            </el-menu-item>
                            <el-menu-item index="1-2">
                                <router-link to="/emp">用户管理</router-link>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>

                    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                        <el-form-item label="姓名">
                            <el-input v-model="searchForm.user" placeholder="姓名"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select v-model="searchForm.region" placeholder="性别">
                                <el-option label="男" value="1"></el-option>
                                <el-option label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="入职日期">
                            <el-date-picker v-model="searchForm.entrydate" type="daterange" range-separator="至"
                                start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>

                    <el-table :data="tableData" border>
                        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                        <el-table-column prop="image" label="图像" width="180">
                            <template slot-scope="scope">
                                <img :src="scope.row.image" width="100px" height="70px">
                            </template>
                        </el-table-column>
                        <el-table-column label="性别" width="140">
                            <template slot-scope="scope">
                                {{ scope.row.gender == 1 ? '男': '女' }}
                            </template>
                        </el-table-column>
                        <el-table-column prop="job" label="职位" width="140"></el-table-column>
                        <el-table-column prop="entrydate" label="入职日期" width="180"></el-table-column>
                        <el-table-column prop="updatetime" label="最后操作时间" width="230"></el-table-column>
                        <el-table-column label="操作">
                            <el-button type="primary" size="mini">编辑</el-button>
                            <el-button type="danger" size="mini">删除</el-button>
                        </el-table-column>
                    </el-table>

                    <br>
                    <!-- 分页 -->
                    <el-pagination background layout='total, sizes, prev, pager, next, jumper, ->'
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" :total=totalPage>
                    </el-pagination>


                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import axios from 'axios';
export default {
    data() {
        return {
            tableData: {},
            searchForm: {
                name: "",
                gender: "",
                entrydate: [],
            }
        }
    },
    methods: {
        onsubmit() {
            alert("查询用户信息");
        },
        handleSizeChange(value) {
            alert("每页记录数变化" + value)
        },
        handleCurrentChange(value) {
            alert("页码发生变化" + value)
        },
    },
    mounted() {
        axios.get("https://mock.apifox.cn/m1/3128855-0-default/emp/list").then(result => {
            this.tableData = result.data.data; // 必须要带上this才能访问tableData 
        })
    },
}
</script>

<style></style>

2.部门管理组件DeptView.vue：类似用户管理组件，留着空白也可以运行。

3.App.vue组件：

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

<style></style>

4.配置路由index.js文件：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/emp',
    name: 'emp',
    component: ()=>import("../views/tlias/EmpView.vue")
  },
  {
    path: '/dept',
    name: 'dept',
    component: ()=>import("../views/tlias/DeptView.vue")
  },
  {
    path: '/',
    redirect: 'emp'
  }
]

const router = new VueRouter({
  routes
})

export default router

JavaWeb

#JavaWeb

JavaWeb前端开发

http://surourou8.github.io/2024/10/09/JavaWeb前端开发/

作者

Su Rourou

发布于

2024年10月9日

许可协议

JavaWeb后端开发：Maven和SpringBoot 上一篇

Java高级下一篇

JavaWeb前端开发

Web前端开发

HTML

HTML结构标签

图片标签<img>

标题标签<h1>-<h6>

水平线标签<hr>

超链接<a>

视频标签<video>

音频标签<audio>

段落标签<p>

盒子模型

布局标签

表格标签

表单标签

CSS

CSS引入方式

CSS选择器

颜色color的表示方式

JavaScript

JavaScript引入方式

JavaScript基础语法

输出语句

变量

数据类型

类型转换

运算符

函数

JavaScript对象

Array

String

JSON

BOM

DOM

JavaScript事件监听

事件绑定

常见事件

Vue

引入Vue

常用命令

生命周期

Ajax

原生Ajax（繁琐）

Axios

前后端分离开发

API

YAPI

Apifox

前端工程化

环境准备

Vue项目

创建

目录结构

启动方式

配置端口

Vue项目开发流程

Vue组件库Element

快速入门

常见组件

Table表格

Pagination分页

Dialog对话框

Form表单

案例

Vue路由

打包

部署

Nginx部署

案例

图片标签`<img>`

标题标签`<h1>-<h6>`

水平线标签`<hr>`

超链接`<a>`

视频标签`<video>`

音频标签`<audio>`

段落标签`<p>`