dengfengling999的博客

把菜单数据存入localStorage，因为登录成功后把数据存入localStorage后进行页面的跳转，跳转后进入主页面，当页面加载时可以在从LocalStorage中获取，但是修改页面信息没有实现页面跳转所以是不行的，不会主动触发读取locaStorage，除非加一个按钮触发代码来读取更新后的信息。在菜单一种可以修改当前登录的用户信息，更新数据库，修改成功后在主页组件右上角也要同时更新，但是你会发现这是两个组件，外面那个主页组件是不会变化的，这是遇到的问题，怎么解决呢？

登录页面后，如果点击了刷新，所有的路由就会重置了，因为js代码重新执行，所有的状态都恢复到最初的状态了，新添加的路由都不存在了，怎么解决呢？当登录之后获取到tocken信息，进行解析后把用户信息，存入到LocalStorage中，登录后在从LocalStorage里面获取。服务端在生成令牌的时候，戴上了用户名的信息，客户端可以直接解析获取，当然服务端可以在令牌中加其他的信息。令牌 ：第一部分是header，第二部分是令牌的负载，第三部分是令牌的签名。当登录之后跳转到主页，在主页显示用户名的信息。

以.vue结尾结尾的单文件组件，绝大多数情况下使用单文件组件，但是有时候不太灵活，就应该使用第二类组件，函数式组件，函数式组件生成html代码，简单的话还好，麻烦的话也比较难，所以呢现在的前端框架还支持javascript的一种扩展语法jsx，用了jsx可以说就可以直接在javascript写tml代码了，比用函数式组件用h函数简单。用户登录之后根据用户的角色，看到的菜单是不一样的。因此看到的路由菜单是动态的，根据权限不同看到的不一样，这就要求数据库把路由菜单管理起来。新建组件文件：图标组件。

单文件组件以.vue结尾的组件，分成了三部分script代码部分，html标签部分，style样式部分。template部分不够灵活，vue还支持函数式组件文件以.ts结尾。每个菜单项要有唯一标识key、theme主题。添加菜单跳转路径：router-link。mode指定菜单的显示模式：下方显示。在主页组件导入：函数式组件不用加扩展名。导入直接导入这个定义的组件就行了。使用新建的一个组件标签进行替换。

前面我们学习的都是在一个页面里每次都使用了一个组件，每使用一个组件都要把原来的组件注释掉，顶多还用到了嵌套子组件，下面我们学习的是在一个页面中，去切换不同的组件，比如使用插连接或改变路径啊，切换到a2去，说白了就是根据浏览器不同的地址切换到不同的地方中去。这种导入时静态的导入，静态导入的缺点是以后打包的话，它会把组件的js代码全部打包成一个大的js，这样组件多的话打包在一个js中，会影响整个页面的加载速度。页面中外层是父组件A51，里面有一个显示组件的RouterView对应A51组件。

我们注意到组件中的功能不断的增多代码的管理变得困难，那么vue有一个思想，如果组件中代码过多的话，可以抽取成一个子组件以便重用。新增和修改特别适合抽取成子组件，在表单页面作为父组件，把子组件引进来就行，这样就能实现代码的管理。下面做一个子组件的显示，我们应该交给父组件来控制，当点击新增 或修改按钮才进行显示。当子组件发送请求完成后，给父组件发送事件saved。a-modal是一个模式对话框弹出一个对话框。在子组件中添加修改和新增的方法。添加一个标题：title。定义属性，定义编号的显示。

我们学一下怎么定义表格的单元格内容，上面的表格的单元格内容是表格组件帮助我们生成好的，如果我想改一下显示，我们需要知道怎么定义单元格内容怎么设置的，用到一个新的知识插槽。a-row行、a-col列 宽度用span控制 antdv中的一行数据被分成24等分。useRequest第一个参数，返回的参数类型，第二个是请求的类型。给dto加上没加的属性：并且跟文本框绑定：name、sex、age。跟组件绑定是v-model：value=“dto.name”a-button按钮、a-input输入框。

接下来我们学习vue的一个组件库：ant-design-vue，帮助我们把页面做的更加漂亮一些，它涉及到了很多可以重用的组件：表单、表格、级联选择器等等。我们做一个案例，卡片中的数据，不是写死在页面上了，而是来源与网站，这个网站可以生成数据，我们根据这些数据来帮助我们生成用户卡片。之前我们的例子里只使用了一个vue的组件，那么在这个组件里能不能内嵌另外一个组件呢？子引入组件库，我们做一个全局注册，将来页面不用一个一个引入按钮啊等等组件，可以直接使用标签。pinia：vue组件间的数据共享。

useCounter函数是封装的计数器的函数，返回是一个对象，里面有属性和方法count计数的数字初始值0，inc增减计数函数、dec减少计数函数。之前我们需要先准备好一个响应时的数据，当axios真正返回后，把返回的数据，更新掉响应式数据的值。引入use-Request函数：以后我们会用到很多的use函数，他们都是对响应式数据的增强封装。我们在实际中use函数的封装，不用我们自己写，其实已经有人帮助我们写好了工具函数。这个网站，它提供了很多的use函数帮助我们创建有扩展功能的响应时数据。

我们做的JWT的认证方式，第一次认证成功以后呢,我们需要在请求头里加一个tocken令牌，这种操作适用于请求拦截器，如果不用请求拦截器，那么我们就需要在每一个请求里加一个参数：比较麻烦，所以用拦截器。监听器在响应式数据的基础上添加了一些额外的操作，我们把额外的操作叫做添加了副作用，这个副作用可以有很多种变化，利用这种特性可以把更多的变成响应式的，这就是监听器的作用。我们自己创建axios对象有一个好处，就是可以给axios对象加一个拦截器，加了拦截器呢可以队请求和响应做一个统一的处理。

我们就不能使用默认的axios对象了，我们需要创建新的axios对象。运行npm run build 给生产环境打包，但不是运行，打包之后还要部署到生产环境的服务器上才能运行。第三方库axios是对xhr的封装，让xhr更加好用，支持Promise的特性。使用代理方式性能上比较差，需要的时间太长，所以在后端处理，使用响应头的方式更优。在组件中引入自己创建的axios对象：在发送请求时不用在写路径前缀了。新建一个文件夹api，这里放的是跟后端服务器交互的代码。打包后的js文件输出的就是生产环境的值。

计算属性具有缓存功能，它只做了一次字符串拼接，把结果缓存出来第二次在去使用这个计算属性时，他就从缓存中获取，不在做字符串的拼接。不是的只要计算 属性中的变量发生了变化，他就会重新计算一次，计算新的值。fetch返回的是一个Promise对象，我们想要xhr用的方便也需要对其进行改造。我们会学习一个第三方的库axios，已经用类似的方式帮助我们封装好了。xhr以发送请求异步操作的，resolve用来处理成功的情况。上面有重复的代码，用计算属性，做一个简化。修改一下错误路径：返回的是错误信息。

js中的对象和表单进行绑定，js中变了，表单也会变化，表单中变了，js中也跟着改变。ref可以包装基本类型也可以包装对象类型，而reactive只能包装对象类型。ref函数可以把普通的数据变成响应式的数据，reactive函数也可以实现。使用浏览器的vue插件更改属性：public路径下不用谢完整路径。：这种绑定是单项的绑定，js中变化了，页面跟着变，但是反之不行。使用v-model来实现双向绑定，使用与所有的表单项。希望把表单和js中的对象做绑定，而且是响应式的。v-model：实现双向绑定。

我们访问的使用的localhost，这个ip地址去访问的，这就意味着，只能自己去访问，在局域网中别人是不能访问你这个vue的应用的，这个怎么该呢。因为刚才的变量不是响应式的变量，在vue3里只要响应式的变量才能在页面达到响应式的更新，可以使用vue的函数把普通的变量包装成响应式的变量。vue3的技术选型，它提供了两套API，一个是选项式的API（vue2的东西）和组合式的API。项目默认监听的5173，还可以修改端口，想改项目的配置文件：vite config.ts。我们用组合式的API，因为它更简单。

javaScript是基于原型来实现继承面向对象的机制，但是javaScript也支持使用class类的方式来实现继承啊面向对象的机制，这样冲突吗？编译：生成js代码：他还是一个函数，并不是产生一个class类，所以javaScript中的class并不等于java中的class它的底层还是基于原型来实现的。上面这段代码，造成了类型定义的冗余如果以后有更多的value类型要加入，需要不断的加入interface类型，怎么改进呢？我们子啊传递参数的时候不仅做类型的限制，还想做值的限制，就可以使用字面量。

类型声明可以加在变量上、参数上、函数的返回值上，很多情况下可以把类型声明省略，只要它能够推断出类型这个类型：变量类型，参数类型，返回值类型。我们讲过javaScript语言是动态的语言，动态的语言可能出现一些问题，比如说：这个函数的参数就是动态的可以是任何类型：对象、函数、数字、字符串...编译之后就会生成一个同名的hello.js：编译之后就会做一个类型的擦除：退回到动态类型了，在编译值前做了类型的检查了，就不会传递过来一个错误的做法。下面我们定义一个字符串参数，返回值也是字符串的函数怎么写呢？

使用表格el-table ，el-table-column：表格列 ， ：data数据绑定。对话框的visble：属性加了.sync属性当对话框关闭的时候改为false。在views文件夹下创建student文件夹：在创建一个index.js。Layout组件布局：中间部分是我们组件替换的部分，其他部分写好了。router：需要给新的功能加一些路由，是能够跳到对应的视图界面。前端需要修改的地方：业务简单的一半需要改3个地方。前面我们配置了：环境变量：包含了api。

点击授权，会从gitee登录后重定向后台的8080服务器上，跳转是使用了浏览器的重定向方式进行跳转，第三方服务器在重定向的时候，携带一个参数叫做code，后端复服务器收到code值，就会知道在gitee上完成登录，然后会。我们以前用户的路由信息和菜单信息是存在用户的一张表里，，我们直接把它查出来，返回给前端，前端直接用了就可以啦，现在这个是，数据库只存储了用户对应什么角色，路由信息并不是存在数据库里，路由信息还是保存在前端 ，有前端管理。上面是基本的路由：首页，文档，引导页，大家都能看到的。

getToken（）从Cookie中获取令牌，在哪用到呢，我们向后端服务器发送请求的时候，后端服务器发的请求，需要做一个身份的检查，是不是一个合法的请求请求中具有一个合法的tocken，我就认为可以执行，那么请求中没有tocken，就认为不是一个合法的请求。我们这里把tocken存到了两个地方一个是vuex里，一个是tocken里，我们最好存储到一个地方，利于维护，注释掉存入tocken中的地方。setTocken（data.tocken）：把tocken存到另外一个地方：存到了Cookie中了。

在axios创建中，请求拦截器，在每次发送请求的时候多带一个请求头，请求头来携带tocken，每次要把tocken发送给服务器，服务器根据你的tocken做身份校验。登录这个请求，并不是发给后台的，现在还没后台，它发给9527，9527里面也有一段代码，返回假的moke响应，包含了登录的模拟数据。页面的是国际话的，可以选择对应的语言，我们如果要子啊index.vue的登录页面找登录这个字的按钮时找不到的按文字去搜索是搜不到的。怎么演示是发送给mock下的请求呢：点击网路，在点击登录按钮：查看发送的请求。

我们去分析，被人开发好的项目，去分析其中几个重点流程，我们vue-element-admin项目，是别人用的比较多的脚手架项目，他用的技术版本，跟前面的讲的想接近，axios呀，vuex呀，等等版本都是一致的。我们这样写有问题的，在mutations里写发请求，接响应的方法，需要花一定的时间，不是立刻完成的这样的代码写在这里是有问题的，它影响的不是数据的展示，它影响的是vue的开发调试工具。的代码，不能包括这种改变需要等待点时间才能生效的代码，怎么改变呢需要在actions里面写，发送请求的方法，在。

有没有发现这种做法不方便，一个组件发生改变，另外一个组件不能立刻意识到数据发生了变化了，我们必须自己盗用一个方法获取到更新的数据，响应的不够及时，我们接下来改变了这一点，当共享数据发生了变化，另外一方能够立刻监听到变化，能够显示出来，我们把这种技术叫做响应式的技术，与之对比SessionStorage就不是响应式的技术。注意它返回的是 一个对象我们还是用展开...运算符展开，这个名字也需要修改，跟store里面的修改方法的额名字一样，他还需要把修改的name参数传进去，传参不一样。

我们有这样一个需求，不同的用户根据自己的身份不一样，看到的菜单和跳转的路由是不一样的，比如数admin用户系统管理员，它登录后可以看到全部的菜单，但是普通用户只能看到部分菜单，根据身份不同，看到的菜单也不一样。我们动态添加的路由会产生页面刷新的问题，登录之后访问新添加的路由没有问题，但是刷新页面后，再次访问就不能了，一刷新页面所有的内容就重置啦就会是的添加的动态路由恢复最初的状态，在换一个用户，它是在7个路由的基础上变成了几个路由：新增了2个路由，是不对的应该在4个路由的基础上新增连个路由。

这些功能也是一个个组件，这些组件需不需要再主页的某个区域进行切换，当进来的时候是某个管理的，将来点击某个超链接进行切换管理，就用到嵌套路由。我们有这样的需求，我们已经显示了主页，但是主页里面有，更多的功能，比如说多个管理：学生管理、老师管理等等。主页一开始并没有包含其中的一个子组件，那么能不能让它一开始就包含其中的一个组件呢？添加路由需要在路由中的主路由下面添加children的属性：子路由（嵌套路由）在饱含一些路由的配置，这些路由对应的组件，切换的就是主页中的内容了。菜单项：el-menu-item。

vue是单页面程序，说白了你的整个程序，就一个html页面，原来我们写的那么多的组件，那么将来都会用到一个html的页面中嘛？他们都会用到一个html页面中，只不过这个页面的内容会替换成其他组件的内容，内容会变，页面之后一个，学的路由。执行数据的绑定： 数据的绑定都是给queryDto这个对象，发送请求的时候，都是把这个对象作为参数传递进去的，把数据都是绑定给这个对象。动态导入内部：把这个组件独立出来，用到的时候在进行导入，用不到不加载js到组件页面，提高页面加载速度，这是动态import的好处。

我们自己去使用组件的时候，我们需要子在option对象里加这个组件，但是element ui的组件太多啦，一个一个去加太麻烦了我们使用Use方法把Element对象传给他，内部会把element-ui的所有组件都给他加进去，将来页面就可以使用element-ui的标签啦。layout：分页条外观，可以控制组件外观哪些显示哪些不显示 ：prev：向上按钮， pager：页码部分，next：向下按钮，jumper：跳转的输入框，total：总页数，->：总条数向右对齐。

比如说我们要做一个JWT的认证方式，每次请求，都要在请求头里加tocken的信息，如果每次请求，把tocken令牌写在请求方法里面，代码有很多重复的方法，我们可以用拦截器做 代码就可以简化了，在拦截器的第一个函数config加一个tocken，在使用v-for的时候，必须加一个特殊的：key 这个属性必须加vue内部会用到，：key做了数据绑定更能跟起到标识的做绑定。前面的请求出现异常，使我们自己加的try catch，我们使用拦截器，不用自己加了，实现响应异常的统一处理。访问不存在的资源：返回404。

之前我们使用axios都是import了axios对象以后都是直接使用它发送请求的方法 ，这样做是有一个问题的这样做发送每个请求的时候，它使用的都是一个默认的设置，如果我发送请求时不想用它的默认设置啦，每个请求里都需要添加config的参数，在config改动相应的参数，这样不够通用，我们可以自己创建axios对象，我们在创建axios对象的时候呢给它一个自己的设置，这样呢他就会对所有的请求都生效啦。axios：返回的是promise，可以使用异步then或者使用同步方式await。

只打印一次进入了：第一次计算出来，第二次不用重新计算，而是走缓存。使用this代表方法中返回的数据 画出的部分对象。绑定事件：v-on:click鼠标单击事件。不使用v-binid：而使用v-model。v-on：简写形式：@

h1中要展示的数据，是写死啦，我们将来是让js代码动态获取数据，一般是从后端获取数据，提供给模板来显示，那么我们需要学习如何将JavaScript数据在页面中显示出来。h：是对模板进行解析，解析之后呢生成虚拟节点，虚拟节点可以也理解为html的元素，只是还没有跟页面结合到一起中去，还没有显示出来，需要使用mount。我们使用向导创建的项目，是自带了gti功能的，源代码的版本控制，每个文件都是绿色的，左后一个修改了还没有提交。App.vue：是顶层组件，页面首次运行的显示部分，先在这里写 ，全部删除。

把ES6的规范打包成ES5让所有浏览器都能运行。npmrundev运行程序。

Vue可以不更该页面数据自动更改数据，前端在页不用写数据了，只要写一些标签和获取数据的东西。

Webpack从一开始就对CSS模块化提供了支持，在CSSloader中进行配置后，你所需要做的一切就是把”modules“传递都所需要的地方，然后就可以直接把CSS的类名传递到组件的代码中，且这样做只对当前组件有效，不必担心在不同的模块中具有相同的类名可能会造成的问题。其实Webpack和另外两个并没有太多的可比性，Gulp/Grunt是一种能够优化前端的开发流程的工具，而WebPack是一种模块化的解决方案，不过Webpack的优点使得Webpack可以替代Gulp/Grunt类的工具。...

查看Node.js是否安装成功出现了版本号。下载完Node.js后再设置镜像。

创建组件：Profile.vueList.vue：Login.vue:Main.vue:设置路由：index.js：在main.js中设置路由：App.vue：index.html: 路由模式修改： index.js添加：mode:'history' 地址栏就不带#了404页面创建NotFound.vue添加路由：index.js当输入地址错误时，都跳转到这个页面 除了之前的钩子函数还存在两个钩子函数befor

说明此时我们在Main.vue中的route-link位置处to改为了to，是为了将这一属性当成对象使用，注意router-link中的name属性名称一定要和路由中的name属性名称匹配，因为这样Vue才能找到对应的路由路径。--name是组件的名字params是传的参数如果要传参数的话就需要用vbind来绑定-->个人信息...

先下载Node.js,上面网址进行安装 * 安装node.js淘宝镜像加速器（cnpm） 安装vue-cli 创建第一个Vue程序，需要先找好一个目录，进入那个目录下使用Windows命令：vue init webpack myvue全都选no之后项目创建成功，再进行配置项目环境 然后 ，进入创建好的项目，输入cd myvue：输入：npm install当出现问题时，它会给出提示我们按照提示来就行 进入项目， 输入上述命令：npm install vue-router --s

vue只有一个主入口，因为前端工程话之后，不需要那么过页面了，它是一个一个js组件，一个一个vue组件，组件一拼，前端一引,，这就是模块化开发，前端高js就好了。webpack就是一个打包工具，打包选择打包入口，自动把入口里面它所需要的所有东西都通过它的方式打包起来。把上面main.js写的ES6的require进行降级了成ES5，你定义的代码打包后就可以用了。创建一个index.html,使用刚打包完的js文件。把ES6的规范打包成ES5让所有浏览器都能运行。打包完之后多了文件夹和文件。......

demo10.html：点击按钮 删除第一个：删除：

demo08.html:currentTime1（）每次在控制台调用发生改变 currentTime2(),每次在控制台调用不变： demo9.html: