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.***/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

转载请说明出处内容投诉
CSS教程_站长资源网 » web学习

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买