建设网站毕业设计,适合新手的网站开发,网站建设的工作职责是什么,股票实时交易网站开发ps#xff1a;刚开始学习web前端开发#xff0c;有什么不正确、不标准的内容#xff0c;欢迎大家指出~
Web简介
90年代初期#xff0c;Web1.0#xff0c;静态页面#xff0c;不和服务器交互#xff0c;网页三剑客指Dreamweaver、Fireworks、Flash2000年代中期#xf…ps刚开始学习web前端开发有什么不正确、不标准的内容欢迎大家指出~
Web简介
90年代初期Web1.0静态页面不和服务器交互网页三剑客指Dreamweaver、Fireworks、Flash2000年代中期Web2.0动态页面HTML是网页的结构CSS是网页的外观JavaScript是网页的行为。Ajax、jQuery等技术。2010年代移动互联网响应式设计、单页面应用、前后端分离、TypeScript 、ECMA标准。React、Angular、Vue等MVVM前端框架。
框架(web framework) 提供了整套的开发和部署网站的方式 模板引擎(template engine) 专注于将静态模板与动态数据结合生成最终的视图文件
学习顺序HTML → CSS → JavaScript → jQuery → CSS3 → HTML5 → Vue等框架
web技术统计https://w3techs.com/
HTML
!DOCTYPE html
html
headtitle这是网页的标题/title
/head
bodyp这是网页的内容/p!--注释的内容--
/body
/htmlhead标签
title标签 标题meta标签 搜索 编码 自动跳转等link标签 外部cssstyle标签 内部CSSscript标签 JavaScriptbase标签 相对链接默认URL
body标签
文本 h1 p br div nbsp;列表 ol li ul li dl dt dd表格 table tr td caption th图片 img超链接 a href表单 form input textarea select option框架 iframe
CSS
外部样式表内部样式表行内样式表
选择器
{属性1 : 取值1;属性n : 取值n;
}JavaScript
外部JavaScript内部JavaScript元素事件JavaScript
一个浏览器窗口就是一个window对象
变量
var a 10;
常量
var DEBUG 1;
控制
if else switch while do while for
函数
function myFunction()
{alert(Hello World!);
}
数组
var arr [HTML,CSS, JavaScript];
对象
var person {name:John,age:50,
};
person.age 51;
时间
var d new Date();DOM
当网页被加载时浏览器会创建页面的文档对象模型Document Object Model为页面元素的树形结构。
• 元素节点 nodeType1
• 属性节点 nodeType2
• 文本节点 nodeType3获取元素
• getElementById() 只支持document
• getElementsByTagName() 可操作动态DOM
• getElementsByClassName()
• querySelector()和querySelectorAll() CSS选择器
• getElementsByName() 只用于表单元素
• document.title和document.body
示例
var oDivdocument.getElementById(div1);
oDiv.style.color red;创建元素节点 var e1 document.createElement(元素名);
删除元素 A.removeChild(B);
复制元素 obj.cloneNode(bool)
替换元素 A.replaceChild(new,old);事件
• 鼠标事件
• 键盘事件
• 表单事件
• 编辑事件
• 页面事件在页面输出内容document.write()
弹出对话框alert()
打开新窗口window.open(url, target)
定时器setTimeout(code, time);
周期执行setInterval(code, time);jQuery
轻量级JavaScript库用于简化页面元素操作、事件处理、Ajax网络请求等。
jQuery 库包含以下特性
HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改AJAXUtilities
基础语法$(selector).action()
//隐藏 idtest 的元素。
$(#test).hide()
//文档就绪回调
$(document).ready(function(){// jQuery functions go here
});网络请求
form标签的submit
早期提交请求的方式会导致整个页面重新加载。
form actionhttps://httpbin.org/post methodpostlabel fornameName:/labelinput typetext idname namename requiredlabel foremailAge:/labelinput typenumber idage nameage requiredinput typesubmit valueSubmit
/formAJAX
在不重载整个网页的情况下发起请求更新页面的部分内容。 AJAX使用了浏览器提供的 XMLHttpRequestxhr而XMLHttpRequest是基于XML的HTTP请求。
var URL https://httpbin.org/get?nameMingage18;
var xhr new XMLHttpRequest();
xhr.open(GET, URL, true);
xhr.onreadystatechange function () {if (xhr.readyState 4) {if (xhr.status 200) {console.log(JSON.parse(xhr.responseText));} else {console.error(Error:, xhr.statusText);}}
};
xhr.send();jQuery 封装 AJAX
jQuery对AJAX请求进行了封装
// 从服务器加载数据并把返回的数据放入被选元素中
$(#div1).load(demo.txt);
// 通过 HTTP GET 请求从服务器上请求数据
$(button_get).click(function(){$.get(demo_get,function(data,status){alert(Data: data \nStatus: status);});
});
// 通过 HTTP POST 请求从服务器上请求数据
$(button_post).click(function(){$.post(demo_post,{name:Donald Duck,city:Duckburg},function(data,status){alert(Data: data \nStatus: status);});
});Axios
Axios是一个独立的基于Promise的HTTP客户端同时支持浏览器和node.js在浏览器中使用XMLHttpRequest在node.js中直接发送http请求。 而Promise是ES6中异步编程的新解决方案。
引入Axiosscript srchttps://unpkg.com/axios1.1.2/dist/axios.min.js/script
const URL https://httpbin.org/get;
axios.get(URL, {params: {name: Ming,age: 18},
}).then(response {console.log(response.data);
}).catch(error {console.error(Error:, error);
});Fetch API
Fetch 是现代浏览器提供的原生API代替了XMLHttpRequest。同样基于Promise。
const URL https://httpbin.org/get?nameMingage18;
fetch(URL).then(response response.json()).then(data console.log(data)).catch(error console.error(Error:, error));Vue.js
Vue简介
Vue是一款 MVVMModel-View-ViewModel框架。
View视图层DOM层用户看到的界面。Model模型层数据层是来自服务器的或固定的数据ViewModel视图模型层实现了数据绑定(Data Bindings)可以在Model层数据发生变化时将变化反映到View上。用户与View进行交互时ViewModel层又可以通过监听DOM事件的变化将监听到的变化反映给Model。
组件化将MVVM中的VVM封装成一个组件可重用。
采用虚拟DOM技术解决性能问题。
响应式当数据改变后会通知使用该数据的代码从而改变使用到该数据的其他数据进而使关联对应数据的视图自动更新。
API风格
选项式API通过props、data、methods等相关配置来组织功能逻辑不同功能代码混合在一起。适合不使用构建工具或低复杂度场景。组合式API同一个功能代码放到一起不同功能分开通过setup方法统一调用。适合使用Vue构建完整单页应用并使用单文件组件。
使用Vue
推荐IDE VSCode Volar WebStorm
使用Vue有两种方式
直接引入script srchttps://unpkg.com/vue3/dist/vue.global.js/script
创建Vue应用创建的项目使用基于 Vite 的构建设置并允许使用 Vue 的单文件组件 (SFC)
#安装并执行 create-vue它是 Vue 官方的项目脚手架工具
npm create vuelatest
cd your-project-name
#安装依赖
npm install
#启动开发服务器
npm run dev
#打包
npm run build工程目录
dist 打包生成的文件目录
node_modules 安装的依赖包
public 公共资源-favicon.ico 网站图标
src 开发目录assets 静态资源图片、CSS等components 所有Vue组件-App.vue Vue根组件-main.js 入口js文件
-index.html 网站入口
-jsconfig.json js相关配置
-package.json 项目配置和项目依赖
-vite.config.ts 构建相关配置单文件组件SFC 即 *.vue 文件将一个 Vue 组件的逻辑(JavaScript)、模板(HTML)与样式(CSS)封装在单个文件中。
script setup
import { ref } from vue
const greeting ref(Hello World!)
/scripttemplatep classgreeting{{ greeting }}/p
/templatestyle
.greeting {color: red;font-weight: bold;
}
/styleVue语法基础
html:
div idappbutton clickcount{{ count }}/buttonspan{{ myCount }}/span
/divjs:
import { createApp } from vue
const app createApp({data() {return {count: 0}}mounted() {console.log(this.count)this.count 2}computed: {myCount() {return count 5}}
})
app.mount(#app)createApp()传入根组件组件可以有子组件。mount()挂载到DOM元素中将组件中的内容渲染出来。 当根组件没有设置 template 选项时Vue 将自动使用容器的 innerHTML 作为模板。data() 选项声明组件的响应式状态返回对象的属性会被代理到组件实例即this上。mounted()为挂载时的回调。computed声明了计算属性myCount的值会随着count的改变同步更新。click 是Vue的事件处理等价于 v-on:click
数据绑定 文本插值{{ count }} 将count解释为纯文本 插入HTMLspan v-htmlrawHtml/span 绑定attributediv v-bind:iddynamicId/div v-bind支持简写:iddynamicId 等价于 v-bind:iddynamicId 若绑定的名字相同可进一步简写:id 等价于 :idid 绑定多个attribute:
const objectOfAttrs {id: container,class: wrapper
}div v-bindobjectOfAttrs/div条件渲染
v-if 指令用于条件性地渲染一块内容。指令的表达式返回真值时才被渲染。
div v-iftype AA
/div
div v-else-iftype BB
/div
div v-elseNot A/B
/divv-show 则仅切换元素的 display 属性。
h1 v-showokHello!/h1列表渲染
v-for 指令基于一个数组来渲染一个列表。
li v-for(item, index) in items{{ index }} - {{ item.message }}
/li其中 items 是源数据的数组而 item 是迭代项的别名。index是位置索引可省略。
v-for 可以遍历对象的属性。也可以渲染范围值初始值为1。
li v-for(value, key) in myObject{{ key }}: {{ value }}
/li
span v-forn in 10{{ n }}/span表单输入绑定
将表单输入的值同步给 JavaScript 中的变量。
input v-modeluserNameElement UI
Element是基于Vue的UI组件库。其中Element Plus基于Vue3使用了TypeScript组合式API。 Element提供按钮、表单、表格、导航菜单等一系列组件易于使用、风格统一、交互性良好。
安装npm install element-plus --save
Vue3 Element Plus 实现动态表格 首先创建Vue应用并安装Element Plus。 使用Vue单文件组件、组合式API。 Element还可以方便的实现表格排序、筛选、展开等功能。
main.js
import {createApp} from vue;
import ElementPlus from element-plus;
import element-plus/dist/index.css;
import App from ./App.vue;const app createApp(App);
app.use(ElementPlus);
app.mount(#app);App.vue
templateel-button clickshowDialog true添加用户/el-buttonel-dialog title用户信息 v-modelshowDialogel-form :modeluserFormel-form-item label名字el-input v-modeluserForm.name/el-input/el-form-itemel-form-item label年龄el-input v-model.numberuserForm.age/el-input/el-form-itemel-form-item label性别el-select v-modeluserForm.genderel-option label男 value男/el-optionel-option label女 value女/el-option/el-select/el-form-item/el-formtemplate #footerel-button clickshowDialog false取消/el-buttonel-button typeprimary clicksubmitUser提交/el-button/template/el-dialogel-table :datausers stylewidth: 100%el-table-column propid labelID/el-table-columnel-table-column propname label名字/el-table-columnel-table-column propage label年龄/el-table-columnel-table-column propgender label性别/el-table-columnel-table-column label操作template #defaultscopeel-button clickeditUser(scope.row)修改/el-buttonel-button typedanger clickdeleteUser(scope.$index)删除/el-button/template/el-table-column/el-table
/templatescript setup langts
import {ref} from vue;
import {ElButton, ElDialog, ElForm, ElFormItem, ElInput, ElSelect, ElOption, ElMessage} from element-plus;const showDialog ref(false);
const userForm ref({id: 0,name: ,age: 0,gender: 男,
});
const users ref([]);
const currentId ref(0);
const editingIndex ref(0);function clearForm() {userForm.value {id: null, name: , age: 0, gender: 男};editingIndex.value null;
}function submitUser() {if (!userForm.value.name || !userForm.value.age) {ElMessage.error(请填写完整的用户信息);return;}if (editingIndex.value ! null) {// Update existing userusers.value[editingIndex.value] {...userForm.value};} else {// Add new usercurrentId.value 1;userForm.value.id currentId.value;users.value.push({...userForm.value});}showDialog.value false;clearForm();
}function deleteUser(index) {users.value.splice(index, 1);ElMessage.success(用户已删除);
}function editUser(user) {editingIndex.value users.value.indexOf(user);userForm.value {...user};showDialog.value true;
}
/script其他常用js、css库
Bootstrap提供了丰富的预定义样式和组件便于开发响应式布局、移动端优先的项目React与Vue类似是一个MVVM框架用于构建大型、高效的Web应用Underscore / Lodash两者都提供了大量的JavaScript工具函数如map、reduce、filter等Popper.js用于处理定位问题如工具提示、弹出框的定位Moment.js用于处理日期和时间Animate.css包含一系列动画效果的CSS库 (如弹跳、闪烁、渐变、淡入淡出等Modernizr用于检测浏览器的HTML5和CSS3支持情况Polyfill.io使旧浏览器支持现代网页特性
其他
Electron利用Web前端技术进行桌面应用开发支持Windows、Linux、Max平台。2023新版QQ就是用的Electron。React Native使用JavaScript并借助React库进行移动应用开发支持安卓、iOS、微信小程序等。使用React Native开发的应用有Facebook、Instagram等。H5游戏渲染技术使用Canvas或WebGL(Three.js是基于WebGL的3D渲染库)网络通信使用WebSocket。可使用Egret、Cocos2d-js、Phaser、Babylon等H5游戏引擎。
