15：22
1.前段基于vue脚手架，构建工程化的前段项目
2.后端，基于SpringBoot高效学习SSM
3.需求分析-表结构设计-接口文档-功能实现-测试
4.登录认证：jwt令牌进行认证
5.文件存储方案：本地存储、借助阿里云进行存储OSS
day01
01web开发
web网站的运行流程
前段程序:运行在前段服务器
数据库程序：运行在数据库服务器
后端程序：java程序
web开发模式：前后端分离开发
混合发开模式
02web 前段开发
vue.js（基于js封装的vue）
桌面端交互库,element
前段服务器nginx
HTML(w3school网站进行介绍)
HTML是什么?超文本标记语言
特点:不区分大小写
html程序不严谨
03
整个网页分为标题和内容
src的使用
绝对路径:
1. 绝对磁盘路径: C:\Users\Administrator\Desktop\HTML\img\news_logo.png
2. 绝对网络路径: https://i2.sinaimg.***/dy/deco/2012/0613/yo***20120613img01/news_logo.png
<img src="https://i2.sinaimg.***/dy/deco/2012/0613/yo***20120613img01/news_logo.png">
相对路径:
./ : 当前目录 , ./ 可以省略的
../: 上一级目录
对于height和width：单设置一个属性，剩下的属性等比例变换
06 CSS的使用
css是什么？层叠样式表
css的使用：
行内样式:style
内嵌样式:style标签
外联样式：外联.css文件
css选择器：
元素选择器：通过标签选择
id选择器：通过id进行选择(id不可以重复)
类选择器:通过class属性进行选择
08
a标签 href target
文本修饰 text-decoration
09
video视频标签
audio:音频标签
p标签
b标签
stong标签
首行缩进 css样式: text-indent
排版问题 内容 + 视频 + 音频 + 图片
14
表单标签
input : text password radio checkbox date time datetime-local email number reset submit
select:下拉列表 用option(单标签)设置相应的取值
textarea:文本框
※隐藏标签项
day02
01 引入方法
javascrip大都放置在body最底部，可以加快显示速度
内部脚本和外部脚本
03 书写方法
注释：
-
多行注释 /**/
-
单行注释 //
区分大小写
大括号表示代码块输出语句 -
警示框 window.alert()
-
html输出 document.write()
-
控制台输出 console.log()
04 变量
-
使用var关键字进行声明变量
-
弱类型语言，无固定的变量类型
-
变量命名
- 数字、字母、下划线、dollar符号
- 不以数字开头
- 使用 大驼峰和小驼峰命名法
注意※
- var定义的为全局变量
- 可以重复定义，同一变量名可以重复出现
- let定义的变量是局部变量，不可重复定义
- const：定义常量
07 js对象- 基础对象
- Array
- 特点-
长度可变，类型可变
23 json -
键值对形式 {“name”:“Tom”}
-
用于数据传输
-
json定义
-
- 基础对象
-
List item
- json内容与js对象互相转换
- json转js : var jsObject = JSON.parse(userStr);
- js对象转JSON字符串: var jsonStr = JSON.stringify(jsObject);
24 BOM对象
-
Browser Object Model 浏览器对象模型
-
组成
- window:浏览器窗口对象
- 方法
- alert():显示带有一段信息和一个确认按钮的警告创
- confirm():显示带有一段信息和一个确定和一个取消按钮的警告窗,确定返回true，取消返回false
- setInterval():周期调用
- serTimeout():
- navigator:浏览器对象
- screen:屏幕对象
- history:历史记录对象
- location
- 方法
- 获取当前地址栏域名
- location.href;
- 修改当前地址栏域名
- location.href = “”;
25 vue -
MVVM(model-view-viewModel)思想
-
常见指令
-
引入vue.js 创建app接管区域 new Vue对象
-
v-model数据双向绑定
-
v-bind为标签进行属性绑定
-
v-on 为标签进行事件绑定 在vue对象中，添加methods模型
-
用于判断的两个指令 v-if和v-show
- v-if ：进行判断在代码中只有某行
- v-else-if
- v-else
- v-show ：代码中全部存在，通过css中的display属性进行标注，那些隐藏，那些不隐藏
- v-for 使用user变量表示每次循环取到数组中的值，在判断渲染的时候，不需要使用断值表达式，直接使用user调取属性进行比较即可
day03 Ajax
-
作用
- 数据交互
- 异步交互 -
前段工程化
- 需求分析
- 接口定义
- 前后端并行开发
- 测试
- yapi文档：用户api文档撰写，也可以mock相应域名，在后端接口未创建完成情况下，进行前段js的测试
37 前段工程化
-
模块化:js,css
-
组件化: UI结构，样式，行为
-
规模化:目录结构、编码、接口
-
自动化：构建、部署、测试
vue-cli- 脚手架，用于快速生成一个vue的项目模板 - 提供：同意的目录结构 - 本次调试 - 热部署 - 单元测试 - 继承打包上线
cmd 中使用vue ui命令打开vue项目管理器进行vue项目创建 、
创建新项目 输入项目名，选取npm，下一步，选取router，选取2.x版本，选取 ESLint with error prevention only
