web学习

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.cn/dy/deco/2012/0613/yocc20120613img01/news_logo.png
                       <img src="https://i2.sinaimg.cn/dy/deco/2012/0613/yocc20120613img01/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