企业官网建设流程全解析

怎么做网页上小广告,合肥seo整站优化网站,长沙网站制作服务,平面设计素材网文章目录 1. Web标准2. HTML 2.1 HTML 简介2.2 HTML 特点2.3 HTML 基本标签 3. CSS 3.1 CSS 简介3.2 CSS 引入方式3.3 CSS 选择器3.4 盒子模型3.5 CSS 基本属性 4. JavaScript 4.1 JavaScript 简介4.2 JS 引入方式4.3 JS 基础语法 4.3.1 书写语法4.3.2 变量4.3.3 数据类型4.3.…文章目录1. Web标准2. HTML2.1 HTML 简介2.2 HTML 特点2.3 HTML 基本标签3. CSS3.1 CSS 简介3.2 CSS 引入方式3.3 CSS 选择器3.4 盒子模型3.5 CSS 基本属性4. JavaScript4.1 JavaScript 简介4.2 JS 引入方式4.3 JS 基础语法4.3.1 书写语法4.3.2 变量4.3.3 数据类型4.3.4 运算符4.3.5 流程控制语句4.4 JS 函数4.5 JS 对象4.5.1 基本对象4.5.1.1 Array 对象4.5.1.2 String 对象4.5.1.3 JSON 对象4.5.2 BOM 对象4.5.2.1 Window 对象4.5.2.2 Location 对象4.5.3 DOM 对象4.6 JS 事件监听5. Vue5.0 引言5.1 Vue 简介5.2 Vue 初体验5.3 Vue 指令5.4 Vue 生命周期5.5 Vue 路由6. Ajax6.1 原生 Ajax6.2 Axios7. 前后端分离开发7.1 开发方式简介7.2 YApi7.3 前端工程化8. Element9. 打包部署1. Web标准Web标准也称为网页标准由一系列的标准组成大部分由W3C World Wide Web Consortium万维网联盟负责制定。三个组成部分HTML负责网页的结构页面元素和内容。CSS负责网页的表现页面元素的外观、位置等页面样式如颜色、大小等。JavaScript负责网页的行为交互效果。文档查阅w3school 在线教程2. HTML2.1 HTML 简介HTMLHyperTextMarkupLanguage超文本标记语言。超文本超越了文本的限制比普通文本更强大。除了文字信息还可以定义图片、音频、视频等内容。标记语言由标签构成的语言。2.2 HTML 特点HTML标签不区分大小写HTML属性值单双引号都可以建议使用双引号HTML语法松散在HTML页面中无论输入了多少个空格, 最多只会显示一个。 可以使用空格占位符nbsp来生成空格如果需要多个空格就使用多次占位符。2.3 HTML 基本标签以下罗列了一下最常见的 HTML 标签需要其他标签可以查阅官方文档 HTML 标签参考手册 (w3school.com.cn)标题标签h1…/h1h1 → h6 重要程度依次降低段落标签p换行标签br水平线标签hr文本加粗标签b strong文本倾斜标签i em图片标签img src width height绝对路径绝对磁盘路径D:/xxxx、绝对网络路径https://xxxx相对路径从当前文件开始查找./ : 当前目录, …/ : 上级目录超链接标签a href targethref指定资源访问的urltarget指定在何处打开资源链接self默认值在当前页面打开_blank在空白页面打开视频标签video scr controls width heightsrc规定视频的urlcontrols显示播放控件音频标签audio scr controlssrc规定音频的urlcontrols显示播放控件表格标签table boder width cellspacing定义表格整体可以包裹多个trborder规定表格边框的宽度width规定表格的宽度cellspacing规定单元格之间的空间tr定义表格钟的行可以包裹多个tdtd定义表格单元格可以包裹内容特殊地表头单元格使用th具有加粗居中效果表单标签在网页中主要负责数据采集功能如注册、登录等数据采集form action methodaction规定当提交表单时向何处发送表单数据URLmethod规定用于发送表单数据的方式。GET、POSTGET表单数据是拼接在url后面的 如 xxxxxxxxxxx?usernameTomage12url中能携带的表单数据大小是有限制的POST 表单数据是在请求体消息体中携带的大小没有限制表单项标签input type name value定义表单项通过type属性控制输入形式type取值描述text默认值定义单行的输入字段password定义密码字段radio定义单选按钮checkbox定义复选框file定义文件上传按钮date/time/datetime-local定义日期/时间/日期时间number定义数字输入框email定义邮件输入框hidden定义隐藏域submit / reset / button定义提交按钮 / 重置按钮 / 可点击按钮select name定义下拉列表option value定义列表项。textarea name定义文本域表单中的所有表单项要想能够正常的采集数据在提交的时候能提交到服务端表单项必须指定name属性。 否则无法提交该表单项。服务器接收到的数据是value的值。submit和reset、button的value值决定按钮上显示的是什么布局标签div span3. CSS3.1 CSS 简介CSSCascadingStyleSheet层叠样式表用于控制页面的样式表现。3.2 CSS 引入方式行内样式写在标签的style属性中不推荐h1 stylexxx: xxx; xxx: xxx;中国新闻网/h1内嵌样式写在style标签中可以写在页面任何位置但通常约定写在head标签中style h1 { xxx: xxx; } /style外联样式写在一个单独的.css文件中需要通过 link 标签在网页中引入link relstylesheet hrefcss/news.css3.3 CSS 选择器元素选择器标签名 { … }id选择器#id属性值 { … }类选择器.class属性值 { … }优先级id选择器 类选择器 元素选择器3.4 盒子模型盒子页面中所有的元素标签都可以看做是一个盒子由盒子将页面中的元素包含在一个矩形区域内通过盒子的视角更方便的进行页面布局盒子模型组成内容区域content、内边距区域padding、边框区域border、外边距区域margin布局标签实际开发网页中会大量频繁的使用div和span这两个没有语义的布局标签div标签一行只显示一个独占一行宽度默认是父元素的宽度高度默认由内容撑开可以设置宽高width、heightspan标签一行可以显示多个宽度和高度默认由内容撑开不可以设置宽高width、heightwidth设置宽度可以是像素可以是百分比百分比相对父元素height设置高度可以是像素可以是百分比百分比相对父元素border设置边框的属性如1px solid #000padding内边距margin外边距注意如果只需要设置某一个方位的边框、内边距、外边距可以在属性名后加上 –位置如padding-top、padding-left、padding-right …3.5 CSS 基本属性下面提供了一些最基本的 CSS 属性如需其他属性可以查阅官方文档 CSS 参考手册 (w3school.com.cn)color设置文本的颜色有以下三种表示方式表示方式表示含义取值关键字预定义的颜色名red、green、bluergb表示法红绿蓝三原色取值范围0-255rgb(255,255,255)十六进制表示法#开头用十六进制表示#000000 #000font-size字体大小 注意记得加pxtext-decoration规定添加到文本的修饰none表示定义标准的文本line-height设置行高text-indent定义第一个行内容的缩进text-align规定元素中的文本的水平对齐方式4. JavaScript4.1 JavaScript 简介JavaScript简称JS 是一门跨平台、面向对象的脚本语言不需要编译由浏览器解释执行。是用来控制网页行为的它能使网页可交互。JavaScript 和 Java 是完全不同的语言不论是概念还是设计但是基础语法类似。JavaScript 在 1995 年由 Brendan Eich 发明并于 1997 年成为 ECMA 标准。ECMAScript6 (ES6) 是最主流的 JavaScript 版本发布于 2015 年)。ECMA ECMA 国际前身为欧洲计算机制造商协会制定了标准化的脚本程序设计语言 ECMAScript这种语言得到广泛应用。而 JavaScript 是遵守 ECMAScript 的标准的。4.2 JS 引入方式内部脚本将JS代码定义在HTML页面中JavaScript代码必须位于script/script标签之间在HTML文档中可以在任意地方放置任意数量的script一般会把脚本置于body元素的底部可改善显示速度外部脚本将 JS 代码定义在外部 JS 文件中然后引入到 HTML 页面中外部 JS 文件中只包含 JS 代码不包含script标签script标签不能自闭合否则不生效script srcjs/demo.js/script4.3 JS 基础语法4.3.1 书写语法除了分号可有可无其他地方和 Java 基本类似区分大小写与 Java 一样变量名、函数名以及其他一切东西都是区分大小写的每行结尾的分号可有可无建议加上注释单行注释// 注释内容多行注释/* 注释内容 */大括号表示代码块JS 的三种输出语句api描述window.alert()写入警告框浏览器弹出警告框window可省略document.write()写入 HTML 输出在浏览器展示console.log()写入浏览器控制台在控制台显示4.3.2 变量变量的声明和 Java 有很大的不同JS 主要使用以下三种关键字来声明变量关键字解释var声明变量全局作用域/函数作用域允许重复声明let声明变量块级作用域不允许重复声明const声明常量一旦声明常量的值不能改变注意在 JS 中被 const 修饰的简单类型或者说是基本类型是不能发生改变的但是被 const 修饰的引用数据类型的内容是可以被修改的因为 const 仅限制了指向的值不可更改而不限制其指向的对象内容不可更改。JavaScript 是一门弱类型语言变量可以存放不同类型的值 。变量名需要遵循如下规则组成字符可以是任何字母、数字、下划线_或美元符号$数字不能开头建议使用驼峰命名script //同一变量可以存放不同类型的值 var a 10; a 张三; alert(a); //var全局变量可以重复定义 { var x 1; var x A; } alert(x); //let局部变量只在代码块内有效不能重复定义 { let x 1; } alert(x); //报错 //const常量一旦声明常量的值就不能改变 const pi 3.14; pi 3.15; //报错 alert(pi); /script4.3.3 数据类型JavaScript中分为原始类型和引用类型。原始类型number数字整数、小数、NaN(Not a Number)string字符串单双引号都可以boolean布尔。truefalsenull对象为空undefined当声明的变量未初始化时该变量的默认值是 undefined既然 JavaScript 中的变量不声明类型我们怎么知道数据是什么类型呢我们可以使用typeof运算符可以获取数据类型var a 20; alert(typeof a);4.3.4 运算符算术运算符 , - , * , / , % , , –赋值运算符 , , - , * , / , %比较运算符 , , , , ! ,,逻辑运算符 , || , !三元运算符条件表达式 ? true_value: false_value运算符和 Java 几乎完全一致值得注意一下只比较值是否相等不区分数据类型哪怕类型不一致也会自动转换类型进行值得比较不光比较值还要比较数据类型如果类型不一致直接返回 falsevar age 20; var _age 20; var $age 20; alert(age _age);//true 只比较值 alert(age _age);//false 类型不一样 alert(age $age);//true 类型一样值一样在 JavaScript 中虽然不区分数据类型但有时涉及数值运算我们希望得到数值类型可以进行类型转换JS 为我们提供了这样的函数。字符串类型转为数字parseInt()将字符串字面值转为数字。 如果字面值不是数字则转为 NaN。// 类型转换 - 其他类型转为数字 alert(parseInt(12)); //12 alert(parseInt(12A45)); //12 识别到不是数字停止 alert(parseInt(A45));//NaN (not a number)在 JS 中还有非常重要的一点是0,NaN,null,undefined,,可以理解成 false,反之理解成 true。Number0 和 NaN 为 false其他均转为 true。String空字符串为 false其他均转为 true。null和undefined均转为 false。if(NaN){//false alert(NaN 转换为false); }4.3.5 流程控制语句流程控制语句与 Java 中完全一样此处不再赘述if…else if …else…switchforwhiledo … while4.4 JS 函数Java 中通过方法提高代码的复用性在 JavaScript 中可以使用函数完成类似的事情JavaScript 使用function关键字定义函数有两种定义语法//方式一 function functionName(参数1,参数2..){ //要执行的代码 } //方式二 var functionName function (参数1,参数2..){ //要执行的代码 }需要注意与 Java 中不同的 JS 函数特性形式参数不需要类型。因为 JavaScript 是弱类型语言返回值也不需要类型可以在函数内部直接使用 return 返回即可在函数的调用上与 Java 类似直接函数名(参数列表)但是在 JavaScript 中函数的调用只需要名称正确即可函数调用可以传递任意个数的参数。function add( a, b) { return a b; } var res add(10, 20, 30, 40); alert(res); //结果为30多余的参数直接忽略4.5 JS 对象JavaScript 中有很多对象可以参考官方文档 JavaScript 和 HTML DOM 参考手册 (w3school.com.cn)这些对象大致可以分为三类分别是基本对象在这里主要学习 Array 和 JSON 和 StringBOM 对象主要是和浏览器相关的几个对象DOM对象JavaScript 中将 html 的每一个标签都封装成一个对象4.5.1 基本对象4.5.1.1 Array 对象JavaScript 中 Array 对象用于定义数组相当于 Java 中集合但数组的长度是可变的JavaScript 又是弱类型语言所以可以存储任意类型的数据。常用定义语法有以下两种//方式一 var arr new Arrary( 1, 喝喝, true, 10); //方式二更简洁 var arr [1, 喝喝, true, 10];数组定义好了该如何获取数组里面的值呢和 Java 一样通过索引arr[1]来获取值。需要注意与 Java 不同的特点长度可变存储任意类型var arr [1,2,3,4]; arr[10] 50; //长度可变 console.log(arr[9]); //未定义的部分是 undefined arr[9] A; //添加不同类型的值 arr[8] true; console.log(arr);作为一个对象官方文档中提供了许多 Array 的属性和函数在这里只列出最常用的属性和函数。属性描述length设置或返回数组中元素的数量。length属性length 属性可以用来获取数组的长度我们可以用来遍历数组中的元素var arr [1,2,3,4]; arr[10] 50; for (let i 0; i arr.length; i) { console.log(arr[i]); }还有一种遍历方式可以使用以下语法for(const i in arr) { console.log(i); // i仅仅是索引 console.log(arr[i]); // arr[i]才是数组值 }函数描述forEach()遍历数组中的每个有值元素并调用一次传入的函数。push()将新元素添加到数组的末尾并返回新的长度。splice()从数组中删除元素。forEach()函数这个函数是用来遍历的那么遍历的目的是做什么所以这个方法的参数需要传递一个函数每次遍历都会执行这个函数而且这个函数接受一个参数就是遍历时数组元素的值。修改之前的遍历代码如下//e是形参接收的是数组遍历时元素的值 //每次遍历都将数组元素传给 function 函数并执行 arr.forEach(function(e){ console.log(e); })在 ES6 中为了简化函数定义的语法引入箭头函数的写法语法类似 Java 中 lambda 表达式具体形式为:(…) { … }如果需要给箭头函数起名字var xxx (…) { … }修改上述代码如下arr.forEach((e) { console.log(e); })既然都是遍历那么 forEach() 函数和 for 循环遍历结果一致吗答案是不一致对于 forEach() 函数来说没有元素的内容是不会输出的forEach() 只会遍历有值的元素而 for 循环会遍历数组中的每一个值具体使用哪一个要看使用场景是否需要空值元素。push()函数这个函数用于向数组的末尾添加元素其中函数的参数就是需要添加的元素arr.push(7,8,9); console.log(arr);splice()函数这个函数用来删除数组中的元素函数中填入2个参数。参数1表示从哪个索引位置删除参数2表示删除元素的个数//从索引2的位置开始删删除2个元素 arr.splice(2,2); console.log(arr);4.5.1.2 String 对象JavaScript 中 String 对象用于定义字符串和 Java 类似。常用定义语法有以下两种//方式一 var str new String(Hello String); //方式二更加简洁 var str Hello String;String 对象也提供了许多属性和函数在这里我们介绍一些最常用的属性描述length返回字符串的长度。length属性可以用于返回字符串的长度console.log(str.length);函数描述charAt()返回在指定位置的字符。indexOf()检索字符串返回起始索引。trim()去除字符串两边的空格。substring()提取字符串中两个指定的索引号之间的字符。charAt()函数用于返回在指定索引位置的字符函数的参数就是索引console.log(str.charAt(4));indexOf()函数用于检索指定内容在字符串中的索引位置的返回值是索引参数是指定的内容console.log(str.indexOf(llo));trim()函数用于去除字符串两边的空格的返回一个新字符串var str Hello String ; var s str.trim(); console.log(s.length);sustring()函数用于截取字符串的函数有2个参数。和 Java 一样包头不包尾。参数1表示从哪个索引位置开始截取。参数2表示到哪个索引位置结束。console.log(s.substring(0,5));4.5.1.3 JSON 对象介绍 JSON 之前我们需要先来介绍一下 JavaScript 的自定义对象类似 Java 的类或 C 的结构体在 JS 中自定义对象非常简单其语法格式如下var 对象名 { 属性名1: 属性值1, 属性名2: 属性值2, 属性名3: 属性值3, 函数名称: function(形参列表){} };我们可以通过对象名.属性名获取属性通过对象名.函数名()调用函数下面是一个自定义对象示例var user { name: Tom, age: 10, gender: male, // eat: function(){ // console.log(用膳~); // } //函数定义语法可以简化成这样类似 C 中的函数 eat() { console.log(用膳~); } }了解了 JS 的自定义对象接下来有请我们的 JSON 隆重登场。JavaScriptObjectNotationJavaScript对象标记法。是通过 JavaScript 对象标记法书写的文本。其格式如下{ key:value, key:value, key:value }需要注意的是key 必须使用双引号标记value可以是任意数据类型。在互联网中有许多 JSON 在线解析网站大家可以在搜索引擎中搜索试试。那么 JSON 这种数据格式的文本应用在什么地方呢经常用作前后台交互的数据载体。如下图所示前后台交互时我们需要传输数据但是 Java 中的对象我们该怎么去描述呢我们可以使用如图所示的 xml 格式可以清晰的描述 Java 中需要传递给前端的 Java 对象。很明显 xml 格式存在如下问题标签需要编写双份标签甚至比数据还多占用带宽浪费资源解析繁琐所以我们可以使用 JSON 来替代相比 xmlJSON是一种非常高效的数据格式如下图所示我们可以采用如下方式定义 JSON//整个 JSON 字符串用 //字符串用 //数字直接写 //布尔值直接写 true false //数组用 [] 围起来 //对象用 {} 围起来 var userStr {name:Jerry,age:18, address:[北京,上海]}; //这里不能换行定义好了 JSON接下来我们访问 JSON 中的内容alert(userStr.name)浏览器输出了 undefined为什么这是因为上述定义是一个 JSON 字符串而不是 JSON 对象。JS 为我们提供了对它们进行转换的函数JSON.parse()函数将 JSON 字符串转换为 JSON 对象返回一个对象需要接收var jsObject JSON.parse(userStr);JSON.stringify()对象将 JSON 对象转换为 JSON 字符串返回一个字符串需要接收var jsonStr JSON.stringify(jsObject);4.5.2 BOM 对象接下来我们学习 BOM 对象BOM 的全称是 Browser Object Model翻译过来是浏览器对象模型。JavaScript将浏览器的各个组成部分封装成了对象允许 JavaScript 与浏览器对话。我们要操作浏览器的部分功能可以通过操作 BOM 对象的相关属性或者函数来完成。BOM 提供了如下五个对象对象名称描述Window浏览器窗口对象Navigator浏览器对象Screen屏幕对象History历史记录对象Locationd地址栏对象在此我们重点介绍 Window 和 Location 对象4.5.2.1 Window 对象window 对象指的是浏览器窗口对象window 对象是全局对象所以对于 window 对象我们可以直接使用并且对于 window 对象的函数和属性我们可以省略window.。例如我们之前学习的 alert() 函数其实是属于 window 对象的其完整的代码如下window.alert(hello);所以对于 window 对象的属性和函数我们都是采用简写的方式。window 提供了很多属性下表列出了常用属性window 对象提供了获取其他BOM对象的属性属性描述history对 History 对象的只读引用。请参阅 History 对象 。location用于窗口或框架的 Location 对象。请参阅 Location对象。navigator对 Navigator 对象的只读引用。请参阅 Navigator对象。screen用于获取Screen对象也就是说我们要使用 location 对象只需要通过代码window.location或者简写location即可使用。window也提供了一些常用的函数如下表格所示函数描述alert()显示带有一段消息和一个确认按钮的警告框。comfirm()显示带有一段消息以及确认按钮和取消按钮的对话框。setInterval()按照指定的周期以毫秒计来调用函数或计算表达式。setTimeout()在指定的毫秒数后调用函数或计算表达式。alert()函数弹出警告框函数的内容就是警告框的内容。alert(Hello BOM Window);comfirm()函数弹出确认框函数的内容就是确认框的内容并且提供用户2个按钮分别是确认和取消。confirm(您确认删除该记录吗?);但是我们怎么知道用户点击了确认还是取消呢所以这个函数有一个返回值当用户点击确认时返回值为 true点击取消时返回值为 false。我们根据返回值来决定是否执行后续操作。修改代码如下可以查看返回值 true 或者 false。var flag confirm(您确认删除该记录吗?); alert(flag);setInterval()函数定时器用于周期性的执行某个功能并且是循环执行。该函数需要传递2个参数参数1函数需要周期性执行的功能代码参数2间隔时间单位毫秒//定时器 - setInterval -- 周期性的执行某一个函数 var i 0; setInterval(function(){ i; console.log(定时器执行了i次); },2000);setTimeout()函数定时器只会在一段时间后执行一次功能。参数和上述setInterval一致。//定时器 - setTimeout -- 延迟指定时间执行一次 setTimeout(function(){ alert(JS); },3000);4.5.2.2 Location 对象location 是指代浏览器的地址栏对象使用 window.location 获取其中window.可以省略。对于这个对象我们常用的是 href 属性用来获取或者设置浏览器的地址栏信息。//获取浏览器地址栏信息 alert(location.href); //设置浏览器地址栏信息设置之后浏览器自动跳转指定地址 location.href https://www.baidu.com;4.5.3 DOM 对象DOMDocumentObjectModel 文档对象模型JavaScript 将 HTML 文档的各个组成部分封装为对应的对象Core DOM - 所有文档类型的标准模型Document整个文档对象Element元素对象Attribute属性对象Text文本对象Comment注释对象XML DOM - XML 文档的标准模型HTML DOM - HTML 文档的标准模型ImageButton …在这里我们主要学习 HTML DOMHTML DOM 将所有的 HTML 标签都封装成了对象具体的属性和函数可以查阅 JavaScript 和 HTML DOM 参考手册 (w3school.com.cn)DOM 的主要作用如下改变 HTML 元素的内容改变 HTML 元素的样式CSS对 HTML DOM 事件作出反应添加和删除 HTML 元素总之就是达到动态改变页面效果目的学习 DOM核心就是两点获取 DOM 中的元素对象Element对象 也就是标签操作 Element 对象的属性也就是标签的属性。首先就是如何获取 DOM 对象HTML 中的 Element 对象可以通过 Document 对象获取而 Document 对象是通过 window 对象获取的window 可以省略。Document 对象中提供了以下获取 Element 元素对象的函数函数描述document.getElementById()根据 id 属性值获取返回单个 Element 对象document.getElementsByTagName()根据标签名称获取返回 Element 对象数组document.getElementsByName()根据 name 属性值获取返回 Element 对象数组document.getElementsByClassName()根据 class 属性值获取返回 Element 对象数组如下代码是通过 id 获取 id 值为 “h1” 的元素对象返回给变量 hvar h document.getElementById(h1);这些函数都非常简单在这里不再一一演示需要注意的是其他三个获取方式由于并不唯一返回的都是对象数组需要使用下标取出对应的对象。获取到对象之后如何操作标签的属性呢通过查阅文档在这里演示一个修改标签内容var divs document.getElementsByClassName(content); var div1 divs[0]; div1.innerHTML 666;4.6 JS 事件监听什么是事件呢HTML 事件是发生在 HTML 元素上的 “事情”例如按钮被点击鼠标移到元素上输入框失去焦点…而我们可以给这些事件绑定函数当事件触发时执行相应的代码完成对应的功能这就是事件监听是 JS 非常重要的一部分。JavaScript 提供了两种事件绑定方式方式一通过 HTML标签中的事件属性进行绑定input typebutton onclickon() value按钮1 script function on(){ alert(我被点击了!); } /script方式二通过 DOM 中 Element 元素的事件属性进行绑定input typebutton idbtn value按钮2 script document.getElementById(btn).onclickfunction(){ alert(我被点击了!); } /script除了以上演示的点击事件以下再列出一些常用事件事件说明onclick鼠标点击元素onblur元素失去焦点onfocus元素获得焦点onload某个页面或图像被完成加载onsubmit当表单提交时触发该事件onmouseover鼠标移到某元素上onmouseout鼠标从某元素移开更多的事件在文档中查阅 HTML DOM 事件 (w3school.com.cn)5. Vue5.0 引言通过上述学习的 HTML CSS JS 已经能够开发美观的页面了但是开发的效率还有待提高那么如何提高呢一个完整的 HTML 页面包括了视图和数据数据是通过请求从后台获取的那么意味着我们需要将后台获取到的数据呈现到页面上这就需要我们使用 DOM 操作。正因为这种开发流程所以我们引入了一种叫做MVVM(Model-View-ViewModel)的前端开发思想即让我们开发者更加关注数据而非数据绑定到视图这种机械化的操作。那么具体什么是MVVM思想呢MVVMModel-View-ViewModel 的缩写Model: 数据模型特指前端中通过请求从后台获取的数据View: 视图用于展示数据的页面可以理解成我们的 HTML CSS 搭建的页面但是没有数据ViewModel: 数据绑定到视图负责将数据Model通过 JavaScript 的 DOM 技术将数据展示到视图View上如图所示就是 MVVM 开发思想的含义基于上述的 MVVM 思想其中的 Model 我们可以通过Ajax来发起请求从后台获取对于 View 部分我们在下一个章节会学习一款ElementUI框架替代 HTML CSS 来更加方便的搭建 View而接下来我们要学习的就是侧重于 ViewModel 部分开发的Vue前端框架用来替代 JavaScript 的 DOM 操作让数据展示到视图的代码开发变得更加的简单。可以简单到什么程度呢可以参考下图对比在更加复杂的 DOM 操作中Vue 只会变得更加的简单在上述的代码中我们看不到之前的DOM操作因为 Vue 全部帮我们封装好了。5.1 Vue 简介接下来正式开始学习 Vue目前最新版本为 Vue3但目前企业大多还在使用 Vue2所以在这里我们仍然学习 Vue2。官网Vue.js (vuejs.org)Vue.js读音 /vjuː/, 类似于 view 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是Vue 采用自底向上增量开发的设计。Vue 基于 MVVM 思想实现数据的双向绑定将编程的关注点放在数据上。Vue 的核心库只关注视图层并且非常容易学习非常容易与其它库或已有项目整合。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。框架即是一个半成品软件是一套可重用的、通用的、软件基础代码模型。基于框架进行开发更加快捷、更加高效。5.2 Vue 初体验第一步将官方提供的 vue.js 文件放在专门存放 js 文件的 js 目录下第二步编写script src../js/vue.js/script第三步在 js 代码区定义 Vue 对象,代码如下el:用来指定哪些标签被 Vue 管理类似 CSS 标签选择器。data:用来定义数据模型。methods:用来定义函数。new Vue({ //里面是一个对象所以使用 {} el: #app, // app 是受管理的标签的 id 属性值 data:{ // 数据模型 message: Hello Vue } })第四步编写视图其中{{}}是插值表达式用来将 Vue 对象中定义的 data 展示到页面上的div idapp input typetext v-modelmessage {{message}} /div插值表达式{{ 表达式 }}。内容可以是变量算术运算 三元运算符 函数调用以上代码实现的效果就是输入框输入什么后面的元素就显示什么Vue 对象数据模型 data 中的 message 和视图中的 message 双向绑定互相影响。5.3 Vue 指令在上述 Vue 体验中有一个没有学过的属性v-modelHTML 标签上带有 v- 前缀的特殊属性这个就是 Vue 的指令。在 Vue 中通过大量的指令来实现数据绑定到视图的所以接下来我们学习一些 Vue 的常用指令如下表所示指令作用v-bind为 HTML 标签绑定属性值如设置 href , css 样式等v-model在表单元素上创建双向数据绑定v-on为 HTML 标签绑定事件v-if条件性的渲染某元素判定为 true 时渲染,否则不渲染v-else-ifv-elsev-show根据条件展示某元素区别在于切换的是 display 属性的值v-for列表渲染遍历容器的元素或者对象的属性v-bind为 HTML 标签绑定属性值语法使用v-bind:属性名或者直接使用:属性名当 Vue 对象中的数据模型发生变化时标签的属性值会随之发生变化。//两种写法都可以 a v-bind:hrefurl链接1/a a :hrefurl链接2/a script new Vue({ el: #app, //vue接管区域 data:{ url: https://www.baidu.com } }) /script /htmlv-model在表单元素上创建双向数据绑定Vue对象的 data 属性中的数据变化视图展示会一起变化视图数据发生变化Vue 对象的 data 属性中的数据也会变化data 属性中数据变化我们知道可以通过赋值来改变但是视图数据为什么会发生变化呢只有表单项标签所以双向绑定一定是使用在表单项标签上的。在上述代码中添加以下代码我们会发现输入框中输入内容会改变上述代码中超链接的地址这就是数据双向绑定。input typetext v-modelurl那么这个在企业开发的应用场景是什么双向绑定的作用可以获取表单的数据的值然后提交给服务器通过 v-bind 或者 v-model 绑定的变量必须在数据模型中声明。v-on为 HTML 标签绑定事件类似 JS 中的事件绑定事件名相较于 JS 没有 on有v-on:事件名或事件名两种写法如下// JS中 input onclickdemo() // Vue中还有简写形式 input v-on:clickdemo() input clickdemo()接下来演示一个点击事件div idapp //两种写法都可以 input typebutton value点我一下 v-on:clickhandle() input typebutton value点我一下 clickhandle() /div script new Vue({ el: #app, //vue接管区域 data:{ }, methods: { //函数声明 handle: function(){ alert(你点我了一下...); } } }) /scriptv-on 指令事件绑定的函数需要在 Vue 对象 methods 中声明v-ifv-else-ifv-else根据条件渲染元素判定为 true 时渲染否则不渲染。定义 Vue 对象的代码省略双向绑定 age 属性意味着我们可以通过表单输入框来改变age的值下面演示代码年龄input typetext v-modelage经判定,为: span v-ifage 35年轻人(35及以下)/span span v-else-ifage 35 age 60中年人(35-60)/span span v-else老年人(60及以上)/span以上代码实现了当我们改变年龄时动态判断年龄的值呈现对应的年龄的文字描述。v-show根据条件展示元素判定为 true 时显示否则不显示。和上述 v-if 的显示效果一样区别在于上述判断为 false 时不渲染而 v-show 无论怎样都会渲染只是决定是否显示。具体差别可以在 F12 开发者工具中查看v-if 指令中不满足条件的标签代码直接没了而 v-show 指令中不满足条件的代码依然存在只是添加了 css 样式 display:none 来控制标签不显示。v-for从名字我们就能看出这个指令是用来遍历的。需要循环哪个标签v-for 指令就写在哪个标签上。其语法格式如下标签 v-for变量名 in 集合模型数据 {{变量名}} /标签有时我们遍历时需要使用索引那么 v-for 指令遍历的语法格式如下标签 v-for(变量名,索引变量) in 集合模型数据 //索引变量是从0开始所以要表示序号的话需要手动的加1 //在Vue初体验中介绍了插值表达式可以进行算术运算 {{索引变量 1}} {{变量名}} /标签接下来演示一个示例div idapp div v-foraddr in addrs{{addr}}/div hr div v-for(addr,index) in addrs{{index 1}} : {{addr}}/div /div script new Vue({ el: #app, //vue接管区域 data:{ addrs:[北京, 上海, 西安, 成都, 深圳] } }) /script5.4 Vue 生命周期Vue 的生命周期指的是 Vue 对象从创建到销毁的过程。Vue的生命周期包含 8 个阶段每触发一个生命周期事件会自动执行一个生命周期方法这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示状态阶段周期beforeCreate创建前created创建后beforeMount挂载前mounted挂载完成beforeUpdate更新前updated更新后beforeDestroy销毁前destroyed销毁后下图是 Vue 官网提供的从创建 Vue 到销毁 Vue 对象的整个过程及各个阶段对应的钩子函数其中我们需要重点关注的是mounted其他的我们了解即可。mounted挂载完成Vue 初始化成功HTML 页面渲染成功。以后我们一般用于页面初始化自动的 ajax 请求后台数据发送请求到服务端加载数据new Vue({ el: #app, //vue接管区域 data:{ }, methods: { }, //与 methods 同级 mounted () { alert(vue挂载完成,发送请求到服务端) } })5.5 Vue 路由前端路由URL 中的 hash(#号) 与组件之间的对应关系。Vue Router 是 Vue 的官方路由。有以下组成部分VueRouter路由器类根据路由请求在路由视图中动态渲染选中的组件router-link请求链接组件浏览器会解析成arouter-view动态视图组件用来渲染展示与路由路径对应的组件首先 VueRouter 根据我们配置的 url 的 hash 片段和路由的组件关系去维护一张路由表然后页面提供一个router-link组件用户点击发出路由请求接着 VueRouter 根据路由请求在路由表中找到对应的 vue 组件最后 VueRouter 会切换router-view中的组件从而进行视图的更新。如下图所示使用 VueRouter 需要先安装 vue-router 插件可以通过如下命令npm install vue-router3.5.1或者在使用 vue-cli 创建项目时选择 VueRouter 插件。使用大致有这样几步在 src/router/index.js 文件中定义路由表根据其提供的模板代码进行修改。如下{ path: /emp, name: emp, component: () import(../views/tlias/EmpView.vue) }, { path: /, //默认路径 redirect:/emp //可以重定向到/emp防止默认路径没有页面显示 },在 main.js 中引入了router功能。路由基本信息配置好了路由表已经被加载此时我们还缺少2个东西就是router-link和router-view在需要跳转的位置添加如下代码//浏览器会解析成 a 标签 router-link to/dept部门管理/router-link在内容展示区域即 App.vue 中定义route-view实现组件的切换如下template div idapp router-view/router-view /div /template6. Ajax6.1 原生 Ajax前端页面中的数据不应该是在页面中写死的而应该来自于后端后端和前端是互不影响的程序前端应该如何从后端获取数据这必须涉及到 2 个程序的交互这就需要用到我们接下来学习的 Ajax 技术。Ajax全称AsynchronousJavaScriptAndXML异步的 JavaScrip t和 XML。其作用如下数据交换通过 Ajax 可以向服务器发送请求并获取服务器响应的数据。异步交互可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术如搜索联想、用户名是否可用的校验等等。针对上述 Ajax 的局部刷新功能是因为 Ajax 请求是异步的与之对应的有同步请求。接下来我们介绍一下异步请求和同步请求的区别。同步浏览器页面发送请求给服务器在服务器处理请求的过程中浏览器页面不能做其他的操作只能等待服务器响应结束才能继续做其他的操作。异步浏览器页面发送请求给服务器在服务器处理请求的过程中浏览器页面还可以做其他的操作。Ajax 请求是基于客户端发送请求服务器响应数据的技术。服务器端这里我使用 SpringBoot直接通过 Ajax 请求访问该地址即可。后台服务器地址http://localhost:8080/nav/selectAll有一点要注意CORS是浏览器的一种安全机制用来防止网页请求来自不同域的资源。如果服务器没有正确配置CORS头浏览器会拒绝访问响应数据。如果只是为了开发和测试可以使用浏览器扩展来绕过CORS政策。这些扩展允许所有请求通过但是请注意这种方法不适用于生产环境。Allow CORS客户端第一步创建XMLHttpRequest对象用于和服务器交换数据。也是原生 Ajax 请求的核心对象提供了各种方法。代码如下//1. 创建XMLHttpRequest var xmlHttpRequest new XMLHttpRequest();第二步调用open()方法设置请求的参数信息例如请求地址请求方式然后调用send()方法向服务器发送请求。代码如下//2. 发送请求 xmlHttpRequest.open(GET,http://localhost:8080/nav/selectAll); xmlHttpRequest.send();第三步获取服务器响应数据//3. 获取服务响应数据 xmlHttpRequest.onreadystatechange function(){ //此处判断 4表示浏览器已经完全接受到Ajax请求得到的响应200表示这是一个正确的Http请求没有错误 if(xmlHttpRequest.readyState 4 xmlHttpRequest.status 200){ document.getElementById(div1).innerHTML xmlHttpRequest.responseText; } }6.2 Axios上述原生的 Ajax 请求的代码编写起来还是比较繁琐的所以接下来我们学习一门更加简单的发送 Ajax 请求的技术 Axios 。Axios 对原生的 Ajax 进行了封装简化书写快速开发。Axios 官网是Axios中文文档Axios 的使用非常简单主要有两步引入 Axios 的 js 文件script srcjs/axios-0.18.0.js/script使用 Axios 发送请求并获取响应结果官方提供的 api 很多此处给出2种如下发送 get 请求axios({ method:get, url:http://localhost:8080/nav/add?nav_titlehhhnav_link666 }).then(function (result){ alert(result.data); })发送 post 请求axios({ method:post, url: http://localhost:8080/nav/add, data: nav_titlehhhnav_link666 }).then((result) { //可用箭头函数简写 alert(result.data); });axios() 是用来发送异步请求的小括号中使用 JSON 对象传递请求相关的参数method属性用来设置请求方式的。取值为 get 或者 post。url属性用来书写请求的资源路径。如果是 get 请求需要将请求参数拼接到路径的后面格式为 url?参数名参数值参数名2参数值2。data属性作为请求体被发送的数据。也就是说如果是 post 请求的话数据需要作为 data 属性的值。then()需要传递一个匿名函数。我们将then()中传递的匿名函数称为回调函数意思是该匿名函数在发送请求时不会被调用而是在成功响应后调用的函数。而该回调函数中的result参数是对响应的数据进行封装的对象通过result.data可以获取到响应的数据。Axios 还针对不同的请求提供了别名方式的 api它们更简单易用具体如下方法描述axios.get(url [, config])发送get请求axios.post(url [, data[, config]])发送post请求axios.put(url [, data[, config]])发送put请求axios.delete(url [, config])发送delete请求[] 中的内容表示可选项我们目前只关注 get 和 post 请求所以在上述案例中我们可以将代码改写成如下axios.get(http://localhost:8080/nav/selectAll).then(result { console.log(result); // 箭头函数的()甚至也可以省略 }) axios.post(http://localhost:8080/nav/add,nav_titlehhhnav_link666).then(result { console.log(result.data); })7. 前后端分离开发7.1 开发方式简介前面我们介绍过有两种开发方式前后端混合开发和前后端分离开发。前后端混合开发顾名思义就是前后端代码混在一起开发。这种开发模式有如下缺点沟通成本高后端人员发现前端有问题需要找前端人员修改前端修改成功再交给后台人员使用。分工不明确后端开发人员需要开发后端代码也需要开发部分前端代码。不便管理所有的代码都在一个工程中。不便维护和扩展前端代码更新和后端无关但是需要整个工程包括后台一起重新打包部署。所以我们目前基本都是采用的前后端分离开发方式如下图所示我们将原先的工程分为前端工程和后端工程这两个工程前端工程交给专业的前端人员开发后端工程交给专业的后端人员开发。前端页面需要数据可以通过发送异步请求从后端工程获取。但是我们前后端是分开开发的前端人员怎么知道后端返回数据的格式呢后端人员开发怎么知道前端人员需要的数据格式呢针对这个问题我们为前后端开发统一指定一套规范我们前后端开发人员只需遵循这套规范开发就可以无缝衔接这就是我们的接口文档接口文档有离线版和在线版本。那么接口文档的内容怎么来的呢是我们后端开发者根据产品经理提供的产品原型和需求文档所撰写出来的。那么基于前后台分离开发的模式下后端开发者开发一个功能的具体流程如何呢需求分析首先我们需要阅读需求文档分析需求理解需求。接口定义查询接口文档中关于需求的接口的定义包括地址参数响应数据类型等等。前后台并行开发各自按照接口文档进行开发实现需求。测试前后端开发完了各自按照接口文档进行测试。前后端联调测试前端工程请求后端工程测试功能。7.2 YApi前后端分离开发中我们前后端开发人员都需要遵循接口文档所以接下来我们介绍一款撰写接口文档的平台。YApi 是高效、易用、功能强大的 api 管理平台旨在为开发、产品、测试人员提供更优雅的接口管理服务。官网地址YApi Pro-高效、易用、功能强大的可视化接口管理平台YApi 主要提供了2个功能API 接口管理根据需求撰写接口包括接口的地址参数响应等等信息。Mock 服务模拟真实接口生成接口的模拟测试数据用于前端的测试。7.3 前端工程化前端工程化是通过 Vue 官方提供的脚手架 Vue-cli 来完成的用于快速的生成一个 Vue 的项目模板。 Vue-cli 主要提供了如下功能统一的目录结构本地调试热部署单元测试集成打包上线运行 Vue-cli需要依赖 NodeJSNodeJS 是前端工程化依赖的环境。所以我们需要先安装 NodeJS然后才能安装 Vue-cli。Node.js — 下载 Node.js®npm install -g vue/cli环境准备好了接下来我们通过 Vue-cli 创建一个 Vue 项目再学习一下 Vue 项目的目录结构。Vue-cli 提供了如下2种方式创建 Vue 项目:命令行直接通过命令行方式创建 Vue 项目vue create vue-project01图形化界面通过命令先进入到图形化界面然后再进行 Vue 工程的创建vue ui基于 Vue 脚手架创建出来的工程有标准的目录结构如下创建好工程如何运行呢有两种方式可供选择首先可以通过 VSCode 的图形化界面 npm 脚本启动如下图还可以直接基于 cmd 命令窗口在 Vue 目录下执行输入命令npm run serve即可。对于8080端口经常被占用所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容添加如下代码devServer:{ port:7000 }我们发现index.html 的代码很简洁但是浏览器所呈现的 index.html 内容却很丰富代码和内容不匹配所以 Vue 是如何做到的呢接下来我们学习一下 Vue 项目的开发流程。对于 Vue 项目index.html 文件默认是引入了入口函数 main.js 文件我们找到 src/main.js 文件其代码如下import Vue from vue import App from ./App.vue import router from ./router Vue.config.productionTip false new Vue({ router, render: h h(App) }).$mount(#app)​上述代码中包括如下几个关键点import导入指定文件并且重新命名。例如上述代码import App from ./App.vue导入当前目录下的 App.vue 并且命名为 App。new Vue()创建 Vue 对象。$mount(#app)将 Vue 对象创建的 dom 对象挂在到 id“app” 的这个标签区域中作用和之前学习的 Vue 对象的 el 属性一致。router引入路由。render主要使用视图的渲染的。此时我们知道了 Vue 创建的 dom 对象挂在到 idapp 的标签区域但是我们还是没有解决最开始的问题首页内容如何呈现的render 中的 App 是关键头文件上显示导入来自 ./App.vue 的 App。这个 App 对象怎么回事呢我们打开 App.vue注意 .vue 结尾的都是 vue 组件。而 vue 的组件文件包含3个部分template模板部分主要是 HTML 代码用来展示页面主体结构的。scriptjs代码区域主要是通过 js 代码来控制模板的数据来源和行为的。stylecss样式部分主要通过 css 样式控制模板的页面效果得。!-- 模板部分由它生成HTML代码 -- template div {{message}} /div /template !-- 控制模板的数据来源和行为 -- script export default { //data之前直接指定对象这里的data指定的是函数函数返回对象 data: function() { return { message:hello vue } } //4.5.1.3中介绍过函数可以这样简写 data(){ return { message:hello vue } } } /script !-- css样式部分 -- style /style8. Element在 MVVM 开发模式下前面介绍的 Vue 是侧重于 VM 开发的主要用于数据绑定到视图的接下来介绍的 ElementUI 就是一款侧重于 V 开发的前端框架主要用于开发美观的页面的。Element是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库用于快速构建网页。Element 提供了很多组件组成网页的部件供我们使用。例如超链接、按钮、图片、表格等等。ElementUI 的学习方式和之前不太一样对于 ElementUI作为一个后端开发者只需要学会如何从ElementUI的官网复制组件到我们自己的页面中并且做一些修改即可。其官网地址Element - 网站快速成型工具。首先要安装 ElementUI 的组件库打开VS Code在命令行输入如下命令npm install element-ui2.9.2然后需要在 main.js 这个入口 js 文件中引入 ElementUI 的组件库其代码如下import ElementUI from element-ui; import element-ui/lib/theme-chalk/index.css; Vue.use(ElementUI);按照 vue 项目的开发规范在 src/views 目录下创建 vue 组件文件注意组件名称后缀是.vue并且使用驼峰命名并且在组件文件中编写之前介绍过的基本组件语法。最后我们只需要去ElementUI的官网在组件库中找到对应的组件复制代码即可需要注意的是我们组件包括了3个部分如果官方有除了 template 部分之外的 style 和 script 都需要复制。还需要在默认访问的根组件 src/App.vue 中引入我们自定义的组件具体代码如下template div //保留这个div标签 !-- 这里根据提示引入element-view组件时会自动生成必须使用驼峰命名 -- !-- vue组件叫什么 xxxView.vue 这里就叫 xxx-view -- element-view/element-view /div /template script !-- 这里根据提示引入element-view组件时会自动生成 -- import ElementView from ./views/Element/ElementView.vue export default { components: { ElementView }, } /script9. 打包部署打包部署分为两步第一步是打包第二步是部署。直接在 VScode 中点击 build 就可以完成打包打包完成生成一个 dist 目录。部署可以使用 Nginx。Nginx 是一款轻量级的 Web 服务器/反向代理服务器及电子邮件IMAP/POP3代理服务器。其特点是占有内存少并发能力强在各大型互联网公司都有非常广泛的使用。Nginx 的功能十分强大这里只是使用其中非常小的一部分功能。Nginx 在 windows 中的安装非常方便直接解压即可。官网nginx: download下载稳定版。下图是 Nginx 的目录结构说明将之前打包的前端工程 dist 目录下的内容拷贝到 nginx 的 html 目录下双击 nginx.exe 来启动 nginx点击之后没有任何反应可以通过任务管理器的详细信息查看是否启动成功通过名称找到 nginx 则表示已经启动。nginx 默认占用端口80如果80端口被占用可以在 cmd 通过netstat -ano | findStr 80查看哪个进程占用了80端口返回的信息中有进程的 PID 号再去任务管理器中通过 PID 找到占用端口的进程。在 windows 下80端口经常被系统占用如果80端口被占用我们可以通过 conf/nginx.conf 配置文件来修改端口号。启动成功后访问在浏览器访问 http://localhost:80 即可其中80端口可以省略。2025开年AI技术打得火热正在改变前端人的职业命运阿里云核心业务全部接入Agent体系字节跳动30%前端岗位要求大模型开发能力腾讯、京东、百度开放招聘技术岗80%与AI相关……大模型正在重构技术开发范式传统CRUD开发模式正在被AI原生应用取代最残忍的是业务面临转型领导要求用RAG优化知识库检索你不会带AI团队微调大模型要准备多少数据你不懂想转型大模型应用开发工程师等相关岗没项目实操经验……这不是技术焦虑而是职业生存危机曾经React、Vue等热门的开发框架已不再是就业的金钥匙。如果认为会调用API就是懂大模型、能进行二次开发那就大错特错了。制造、医疗、金融等各行业都在加速AI应用落地未来企业更看重能用AI大模型技术重构业务流的技术人。如今技术圈降薪裁员频频爆发传统岗位大批缩水相反AI相关技术岗疯狂扩招薪资逆势上涨150%大厂老板们甚至开出70-100W年薪挖掘AI大模型人才不出1年 “有AI项目开发经验”或将成为前端人投递简历的门槛。风口之下与其像“温水煮青蛙”一样坐等被行业淘汰不如先人一步掌握AI大模型原理应用技术项目实操经验“顺风”翻盘大模型目前在人工智能领域可以说正处于一种“炙手可热”的状态吸引了很多人的关注和兴趣也有很多新人小白想要学习入门大模型那么如何入门大模型呢下面给大家分享一份2025最新版的大模型学习路线帮助新人小白更系统、更快速的学习大模型2025最新版CSDN大礼包《AGI大模型学习资源包》免费分享**一、2025最新大模型学习路线一个明确的学习路线可以帮助新人了解从哪里开始按照什么顺序学习以及需要掌握哪些知识点。大模型领域涉及的知识点非常广泛没有明确的学习路线可能会导致新人感到迷茫不知道应该专注于哪些内容。我们把学习路线分成L1到L4四个阶段一步步带你从入门到进阶从理论到实战。L1级别:AI大模型时代的华丽登场L1阶段我们会去了解大模型的基础知识以及大模型在各个行业的应用和分析学习理解大模型的核心原理关键技术以及大模型应用场景通过理论原理结合多个项目实战从提示工程基础到提示工程进阶掌握Prompt提示工程。L2级别AI大模型RAG应用开发工程L2阶段是我们的AI大模型RAG应用开发工程我们会去学习RAG检索增强生成包括Naive RAG、Advanced-RAG以及RAG性能评估还有GraphRAG在内的多个RAG热门项目的分析。L3级别大模型Agent应用架构进阶实践L3阶段大模型Agent应用架构进阶实现我们会去学习LangChain、 LIamaIndex框架也会学习到AutoGPT、 MetaGPT等多Agent系统打造我们自己的Agent智能体同时还可以学习到包括Coze、Dify在内的可视化工具的使用。L4级别大模型微调与私有化部署L4阶段大模型的微调和私有化部署我们会更加深入的探讨Transformer架构学习大模型的微调技术利用DeepSpeed、Lamam Factory等工具快速进行模型微调并通过Ollama、vLLM等推理部署框架实现模型的快速部署。整个大模型学习路线L1主要是对大模型的理论基础、生态以及提示词他的一个学习掌握而L3 L4更多的是通过项目实战来掌握大模型的应用开发针对以上大模型的学习路线我们也整理了对应的学习视频教程和配套的学习资料。二、大模型经典PDF书籍书籍和学习文档资料是学习大模型过程中必不可少的我们精选了一系列深入探讨大模型技术的书籍和学习文档它们由领域内的顶尖专家撰写内容全面、深入、详尽为你学习大模型提供坚实的理论基础。书籍含电子版PDF三、大模型视频教程对于很多自学或者没有基础的同学来说书籍这些纯文字类的学习教材会觉得比较晦涩难以理解因此我们提供了丰富的大模型视频教程以动态、形象的方式展示技术概念帮助你更快、更轻松地掌握核心知识。四、大模型项目实战学以致用当你的理论知识积累到一定程度就需要通过项目实战在实际操作中检验和巩固你所学到的知识同时为你找工作和职业发展打下坚实的基础。五、大模型面试题面试不仅是技术的较量更需要充分的准备。在你已经掌握了大模型技术之后就需要开始准备面试我们将提供精心整理的大模型面试题库涵盖当前面试中可能遇到的各种技术问题让你在面试中游刃有余。因篇幅有限仅展示部分资料需要点击下方链接即可前往获取2025最新版CSDN大礼包《AGI大模型学习资源包》免费分享