![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
VUE3
yrldjsbk
探讨java,vue3,css3等网站,小程序和各种企业软件开发编程技术难题和热点内容。
展开
-
vue3前端开发-小兔鲜-购物车全选功能实现
vue3前端开发-小兔鲜-购物车全选功能实现!提醒大家的是,这个全选的按钮组件,在顶部的位置。它对应的代码在下面的位置,注意了。原创 2024-08-12 17:18:56 · 156 阅读 · 0 评论 -
vue3前端开发-小兔鲜-购物车列表单选功能的实现和基础渲染
vue3前端开发-小兔鲜-购物车列表单选功能的实现和基础渲染!我们直接看代码就行了。如图所示,我们点击这个,会自动同步到pina里面去。这样就可以实现同步设置的效果了。需要提醒大家的地方是,我们绑定了是@change回调函数。这里需要用到两个参数,一个是选择的状态,一个是skuId。这里面,我们新增了一个单选功能的action方法。到时候会调用,实现(pina的同步设置)原创 2024-08-12 17:04:38 · 287 阅读 · 0 评论 -
vue3前端开发-小兔鲜-购物车的列表渲染和删除及统计计算
首先,需要新增一个组件,叫HeaderCart.vue。这是一个独立的组件,它就是顶部那个缩略图调用的商品购物车的组件。这一次,完成列表的渲染和统计计算的内容,比如,统计购物车内有多少货物的数量,及商品的总价格。里面写好了增,删,统计价格,统计数字。它的调用位置在LayoutHeader.vue里面。这个位置就是我们刚刚新增的头部购物车组件的调用入口位置。当鼠标滑动停止在该图片上面,就会显示当前购物车内的情况。如图所示,这个就是那个顶部购物车的组件代码显示的图标。原创 2024-08-12 11:08:37 · 227 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-添加购物车操作第一步
如果用户意见勾选了商品规格,我们就把它按照逻辑业务要求加入购物车内。那么既然如此,我们自己写的这个博客记录日志,就显得尤为重要了。继续今天的内容分享。其他的代码辅助有:1-carStore,这是pina的内容。实现数据复用的效果。首先,呢,告诉大家一个坏消息,官方媒体的案例代码已经被他们删除了。我们还做了浏览器缓存同步存储,防止页面刷新引起的数据丢失的情况发生。自己登录测试用户后,添加一下购物车,我这边亲自测试了一下,正常的。也就是说,大家已经看不到官方的代码文件了。今天分享的是,添加购物车的第一步操作。原创 2024-08-09 17:39:37 · 330 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-token失效后拦截操作处理
vue3前端开发-小兔鲜项目-token失效后拦截操作处理!今天改一下之前的代码,实现功能是,当用户的token失效后,我们应该拦截这种请求,做出一些相应的处理操作才行。整体思路是,第一步:当拦截器捕捉到,请求反馈的状态代码是401时,我们需要首先清空浏览器应用aplication内部存储缓存的用户角色信息。为了方便大家的查阅,提供一份完整的https的代码内容。如图所示,代码比较简单。调用了之前我们写好的一些函数。然后第二步,完成一个跳转页面,引导用去跳转到登录页。原创 2024-08-09 15:48:01 · 226 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-退出登录的基本操作代码
因为我们之前使用了pinia同步操作localstorage的插件,所以,这样设置后,localstorage里也变成了空。vue3前端开发-小兔鲜项目-退出登录的基本操作代码!不再做太多的介绍了。新增了一个方法而已。2:其实,我们就是在。原创 2024-07-25 17:37:22 · 124 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-路由拦截器增加token的携带
实际开发中,很多业务接口的请求,都要求必须是登录状态!为此,这个token信息就会频繁的被加入到了请求头部信息中。request请求头内既然需要频繁的携带这个token.我们就可以把它配置一下。题外话:每个公司,都有自己公司特殊定义的要求格式。所以,到时候询问后端开发人员,就知道,该如何拼接token字符串了。如图,从pinia中获取这个token。然后安装后端工程师的要求去拼接token。如图,所示,无论是哪个接口调用,都自动拼接带着这个拼接完成后的token信息了。1:修改一下,路由拦截器的代码内容。原创 2024-07-25 17:24:25 · 457 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-登录和非登录状态下的模板适配
vue3前端开发-小兔鲜项目-登录和非登录状态下的模板适配!有了上次的内容铺垫,我们可以根据用户的token来判定,到底是显示什么内容了。如果没有这个token,就会显示第二个模板的内容《提示用户请先登录》有这个判定后,就可以根据token信息,来判定,到底是显示什么内容了。2:主要是,第一步导入我们刚刚定义的pinia内容。1:我们在对应的导航组件内修改完善一下内容即可。然后再补充完善一下,对应的v-if判定参数。原创 2024-07-25 17:07:25 · 238 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-使用pinia插件完成token的本地存储
实际业务开发中,token是一个表示着用户登录状态的重要信息,它有自己的生命周期。不能跟着pinia。因为pinia是基于内存设计的模块。可以使用官方提供的插件来帮助我们快速实现localstorage的操控同步。当然了你也可以自己手写代码,去完成这个操作存储的流程。如图,增加这个配置,为true。你可以自己根据个人的项目结构,自己选择。我们使用的是npm安装了。2:然后就在之前的pinia定义代码内增加一句话就行了。如图所示,确实是,同步操作成功了。完成后可以看见出现在了里面,有版本信息。原创 2024-07-25 16:57:00 · 306 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-使用pinia管理优化登录业务代码
这一次,我们使用pinia来优化一下之前写的那个登录代码。如图,我们在浏览器内按F12,打开开发者模式。就可以看见,确实是封装进入了pinia实例对象中了。这样以后在其他组件内就可以很方便的使用这个用户信息了。里面改成我们自己 的这个函数,直接调用它就行了。它已经把反馈回来的用户信息,封装到了实例对象内部了。3:主要是,把之前调用登录接口 的内容,改成我们现在的pinia实例对象即可。顶部导入进来,我们刚刚定义好的pinia。1:首先我们需要自定义好一个pinia实例对象。2:完善一下之前写好的内容。原创 2024-07-25 16:39:06 · 128 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-登录功能的业务接口调用
这次,正式调用远程服务器的登录接口了。随便输入的内容,是不行的,会反馈:用户不存在。说明我们已经和服务器远程接口进行了正常的互动。1:我们因为要用到了一个插件的模块(提示语的);待会到了路由请求拦截器内,还会再次用到这个组件,还需要再次导入一下。如图,这个就是导入了提示语的组件,我们已经导入了它的样式文件了。为了避免和其他的组件样式进行覆盖,我们进行了单独的样式导入。3:在路由拦截器内,错误回调函数内,再次使用刚刚那个提示语。当输入正确的账户密码时,会跳转到首页去。比如,无效(错误)的密码提示标语内容。原创 2024-07-25 15:55:58 · 338 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-form表单的统一校验
vue3前端开发-小兔鲜项目-form表单的统一校验!实际上,为了安全起见,用户输入的表单信息,要满足我们的业务需求,参数类型等种种标准之后,才会允许用户向服务器发送登录请求。为此,有必要进行一次form表单的全局校验。也为后面的是否发送登录业务请求作为判定依据。之前我分享的内容文章里介绍过这个ref是一个钩子函数,用它,可以获取到标签对象的内容。有了这个基础数据,我们后面就可以写登录发送请求的判定逻辑了。1:使用钩子函数,ref.获取到form的表单对象。内容比较简单,看代码就懂了。原创 2024-07-25 15:23:04 · 318 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-登录组件的开发表单验证
vue3前端开发-小兔鲜项目-登录组件的开发表单验证!现在开始写登录页面的内容。首先这一次完成基础的首页按钮点击跳转,以及初始化一些简单的表单的输入验证。后期还会继续完善内容。2:开始完善一下,页面使用到的内容,一个是用户信息userInfo。一个是表单验证对象rules。输入正确的时候,表达验证没有报错了,说明表单验证代码是起到了效果了。如图所示,输入错误的时候,表单验证成功激发了效果。1:首先还是准备好login页面的组件代码内容。3:测试一下情况如何。原创 2024-07-25 14:44:36 · 603 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-一些额外提醒的内容
今天这一篇文章,是提醒大家,如果你正在学习小兔鲜这个前端项目,有些地方需要提醒大家,额外注意的地方。第一个:就是大家在进入二级页面后,有一个分类的导航,当我们点击这个分类打开了一个新的页面后,里面看见可以实现(无限加载)。后期真实的项目,调用什么,你需要自己对接自己公司的后端开发人员,拿到真实的接口地址。这种无限加载的列表内容,注意了,仅仅是暂时的(临时的业务接口,后期如果你想自己做真实的项目,你需要换一下接口调用!注意看,这个接口的信息,人家公司写的很清楚了,temporary(暂时的)原创 2024-07-24 17:19:39 · 172 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-全局化插件的合并和整体引入
我们为了便于直观的展示插件的来源,我们都在插件的签名,加上了(xtx-小兔鲜的汉语拼音缩写字母)。之前我们都是在组件内部,单个的引入插件!为了统一管理插件的引入,我们进行一次合并。我们在main.js里面,做了2个操作。就完成了插件代码的全局注册。如图,我们在compoents.下面新建一个index.js文件。这样,在其他组件内调用的时候,我们也需要这样写(名字要一致)才行!之前那种旧的,单个导入的就不需要了,注销掉就行了。因为我们已经做好了全局的注册。sku插件组件,也有这三个字母。原创 2024-07-24 16:56:04 · 227 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-sku的实现
这是一个会计学的特殊专业名词,可以理解为产品的型号,规格的货品计量单位。比如:尺寸,材料,品质,等等。因为,我们的父组件,将来要写一个加入购物车的按钮 操作。您可以去这个地址里下载百度网盘内的代码内容。包括本次项目测试内容用到的sku插件代码。子组件会定义了一些方法,会回传给父组件一个sku对象。它的位置,还是在项目的根components下面的。在组件内调用一下它,注意要给它传递对象的。这个是power-set.js的内容了。如图,父组件内调用了这个子组件(sku)这个就是index.vue的内容了。原创 2024-07-24 16:39:19 · 451 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-关于详情页图片渲染的一些技术
之前vue2的时候,是vuex。当我们遇到了,一个组件,在不同的业务场景内都需要使用它,它就应该被抽离出来,单独设计成一个组件。这个组件内部自定义的props对象,可以帮助我们很好的解决这种业务需求。2:当一个组件内部可能会需要渲染不同的内容(但是类型一致)的情况下,就需要考虑使用props对象了。在其它组件内调用这个组件的时候,我们只需要给它动态赋值就行了。如图,在产品详情的页面组件内,调用这个图片显示的组件,给它绑定这个动态参数值就行了。比如这一次,在图片组件内,需要渲染产品的缩略图,就是这样的案例。原创 2024-07-24 15:00:43 · 205 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-产品详情放大镜效果
具体的意思和思路就是,借助于官方提供的插件,来获取鼠标的位置坐标信息。然后动态的改变遮罩层距离父级节点的边界值“left,top”;vue3前端开发-小兔鲜项目-产品详情放大镜效果!这节内容,主要是围绕,如何实现放大镜效果。代码整体上没有什么特别困难的地方,大家自己看看代码都能看懂了。代码内容已经完全测试通过了,效果正常。原创 2024-07-23 16:07:42 · 410 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-图片切换效果和动态class
vue3前端开发-小兔鲜项目-图片切换效果和动态class!这次实现的效果是,图片预览效果,根据小图片,来实时改变大图(预览)的效果。同时让动态的特征class也跟着显示出来。因为这个在其他很多地方都会用得到,所以单独把它独立创建一份组件。放在了compoents文件夹下面。隶属于项目的根组件(通用组件)。首先,需要准备好我们的图片预览区域的组件,如图,代码比较简单。原创 2024-07-23 15:17:52 · 295 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-热榜区域的代码实现
如图,我们给这2个地方,分别绑定一个自定义的属性值,分别为1,2,(注意,这里的数字是远程服务器接口要求的,必须这样写。vue3前端开发-小兔鲜项目-热榜区域的代码实现!这里主要的思路是,借助于props定义的对象,来做一个计算属性的判定。这里面就是完整的代码了,我们使用到了一个计算属性。来判定到底是显示什么内容文字。把props.hotType交给业务接口函数就行了。实现了内容的差异化请求渲染。第二步是修改一下,我们的组件内代码。第一步是准备好业务接口的调用。原创 2024-07-23 14:44:37 · 355 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-产品详情基础数据渲染
这一次内容比较多,我们分开写。第一步先完成详情页面的基础数据的渲染。然后再去做一下右侧的热门产品的列表内容。声明,这里,为了避免出现生命周期函数引起的故障,我们做了一个v-if的条件判定。当拿到了数据后,我们再让框架去渲染。否则是报错的,提示undefined.第一步,还是老规矩,先准备好接口函数。方便我们的页面组件拿到对应的产品信息数据。第二步,在组件内调用这个接口函数,自定义好对应的页面数据对象。代码比较简单,我们不再一一介绍了。第三步就是把这个数据对象渲染到页面组件内。原创 2024-07-23 12:03:46 · 757 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-路由滚动行为的设置
vue3前端开发-小兔鲜项目-路由滚动行为的设置!说白了,就是想让实现一种效果。当我们的路由发生变化时,我们希望看见滚动条能自动恢复到初始的位置(也就是顶部的位置)。官方提供好一个自定义的代码块。我们拿来用一下就行了。如图,我们新增了一个,路由滚动自定义行为的代码块。这个比较简单,我们不再演示了。大家可以自己试试看。里面返回一个对象,对象有一个属性叫top:0。值为0,即意味着距离顶部的像素为0像素。原创 2024-07-23 10:57:26 · 179 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-二级分类页面无限加载的实现
产品内容庞大,但是用户不可能一次性全部都加载请求的。当客户向下滚动,触碰到插件的底部时,会再次申请下一页内容。这样就会一直加载,直到反馈过来的集合为空停止。我们做了判定条件,如果反馈过来的集合长度为0,说明没有内容了,我们就设置那个状态参数为true。如图所示,我们一直向下翻页,到达了第19页的时候,发现了反馈过来的集合为空了。我们这2个标签都是element-plus官方提供好的,我们直接调用就行了。如图,我们已经向下翻页,一直翻看到了第十页了,还是有数据。第二步,修改标签属性,新增2个属性标签。原创 2024-07-23 10:50:47 · 156 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-二级页面的tab切换后动态调用
如图,我们给这个el-tabs标签呢,绑定了一个动态数据对象,就是我们上面的那个reqData的参数。sortFiled.这就实现了动态切换参数的值的效果了。页面内容显示没有变化,是远程服务器接口反馈的数据问题(远端服务器没有更改内容,所以我们看见的还是一样的,没有发生变化。上一次仅仅是做了基础的渲染,这一次,把tab切换后的动态参数调用做一下。需要提醒大家的是,为了方便看见第一页内容,我们提前把reqData.value.page。我们来一个自定义的,回调函数就行了。如图,我们做了一个简单的控制台打印。原创 2024-07-22 17:22:35 · 173 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-二级页面产品列表基础渲染
vue3前端开发-小兔鲜项目-二级页面产品列表基础渲染!因为这里面的功能比较复杂,后期还会涉及到过滤,所以,我们分开一步一步走。第一步,先完成基础的数据渲染。我们这是基础的调用,因此,我们都设计成固定的数字,当前页面1,页面数量20.使用发布日期来过滤数据。如图,代码非常简单。我们之前已经抽离好了,这个组件。第二步,调用这个接口,组件内提前准备好接口调用需要使用到的数据参数对象。可以看见,这是一个post请求。因此,method不能省略了。第一步,准备好接口调用代码。里面有详细的参数内容。原创 2024-07-22 16:40:48 · 191 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-二级页面面包屑导航和跳转
第一件事是把二级分类页面的跳转(也就是路由)设计一下。第二件事是把二级页面的面包屑导航设计一下。如图,没有什么技巧,还是使用的路由插件的帮助,拿到了路由参数的内容。就可以顺利获取到对应的二级路由的信息了。因此,还是的提前准备好调用接口的函数。就是多了sub的过滤参数,后面还是一样的动态绑定了参数id。如图,我们提前创建,准备好二级页面需要用到的组件代码。经过上面的设计,我们就可以实现二级页面的跳转了。第一件事,二级页面的跳转路由设计一下。第二步,我们需要设计一下路由的内容。第二件事是,面包屑导航的渲染。原创 2024-07-22 15:57:03 · 326 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-使用逻辑函数拆分业务模块
vue3前端开发-小兔鲜项目-使用逻辑函数拆分业务模块!其实就是把一些单独的业务代码组成一个js文件。抽离出去后,方便后面的维护。如图,在一级分类下面新建一个文件夹。composables里面新建2个js文件。最后需要把模块需要使用的数据,return出去就行了。分别封装之前的分类,和banner的代码。在模块页面内调用就行了。如图,直接调用就行了。原创 2024-07-22 15:16:49 · 476 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-路由缓存的更新解决办法
默认情况下,如果我们不想办法解决这个问题,vue3框架有个默认的约定,那就是,当仅仅是路由参数发生变化的时候,框架并不会更新整个模块的内容。但是我们现在需要看见的是,路由参数变化后,要刷新整个模块内的数据信息。为此,有两种解决思路。如图所示,代码参数里面,有一个默认值(不赋值的情况下,就是调用的那个默认值,)。这个参数就是官方框架自带的,一个对象,它里面有那个路径的参数id。这样就可以确保,初始化操作,和后期的修改操作,都能渲染更新框架内的数据信息了。我们对应的也需要稍微的修改一下,之前的函数了。原创 2024-07-22 10:37:38 · 466 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-一级页面产品列表渲染
第二件事,提前准备好模板的代码。未来其他页面还会 再次用到他的,因此,单独拎出来,做成一个独立的模块,极大的提升了开发效率。第一个是给导航栏增加一个动态标记的属性。第二件事是渲染一下一级页面内产品列表。如图所示,有一个属性,是官方提供的,我们只需要调用这个属性就行了。vue3前端开发-小兔鲜项目-一级页面产品列表渲染!如图所示,从远程业务接口调用的数据渲染成功了。第一件事,很简单,路由器插件,自带了这种属性。把自己写好的样式,赋值一下就行了。这个就是本次一级页面渲染列表使用的代码。原创 2024-07-22 10:11:13 · 181 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-一级页面banner图渲染
其实,首页的banner渲染代码可以拿来复用的,只是区别在于,传递的接口参数不一样而已。我们的一级页面就可以成功拿到了后端接口反馈过来的一级栏目的banner图信息了。我们增加了一个参数对象params.而且做好了默认值的设置。(用的是一种解构赋值的模式)1:改造一下之前的获取banner的接口调用函数,增加一个参数对象。2:把之前HomeBanner.vue里面的代码,拿过来,在template里面新增banner的渲染模块内容。写好默认的值1.(不赋值的情况下,就是这个默认值1)3:修改完善页面内容。原创 2024-07-19 16:03:43 · 457 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-面包屑导航的渲染
代码里可以看见,我们这个自定义函数,是带参数的。id参数,是一级栏目的id。它可以从路由参数对象useRoute的实体类对象中获取到。vue3前端开发-小兔鲜项目-面包屑导航的渲染!今天来完成,一级分类页面顶部,面包屑导航的渲染。如图,从首页顶部导航点击一级分类,就进入了一级分类页面,面包屑导航跟着也刷新了。如图,我们拿到了来自业务接口 返回的数据对象。里面包含了我们需要的数据信息。1:完善好一级页面内的基础模块代码。而且我们确实拿到了详细的数据。2:准备好接口调用的代码。原创 2024-07-19 15:26:34 · 292 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-一级分类的路由设置
如图,在视图里面,下面,有category文件夹,里面我们已经创建好了一个简单的模板,index.vue,这是一个根组件,未来,这里面还会有很多子组件(展示各种不同的信息,不同的信息,有对应各自的子组件来完成承载。之前的代码,我们没有做一级分类的路由设置,所以点击是默认停留在原始页面了,不会发生跳转。如图所示,这个也得改成动态渲染的,这样就可以实现参数id渲染进入路径了。如图,一定要记住,动态渲染,前面少不了那个:冒号,别忘了。3:然后,我们去修改一下,图层模板组件内的情况。原创 2024-07-19 11:23:26 · 284 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-封装一下产品展示模块组件
vue3前端开发-小兔鲜项目-封装一下产品展示模块组件!因为这种产品展示信息的模块组件,后面我还会在其他的页面内反复使用到,所以,使用模块化开发的思路,把它单独设计成一个组件,这样可以代码复用。以后在其他的页在遇到这样的业务需求,直接调用组件就行了,里面显示什么内容,我们给他传入一个动态数据对象就行了。2:第二步,修改之前的HomeProduct.vue的子集合渲染列表的内容。如图,我们调用了自己刚刚定义好的一个组件。1:第一步,新增一个组件,名字叫ProductItem.vue。原创 2024-07-19 11:02:54 · 426 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-首页产品列表渲染
vue3前端开发-小兔鲜项目-首页产品列表渲染!主要是在首页面,渲染出来产品列表,都是一些现成的业务数据接口调用,我们还是仿造之前的列表渲染的思路去操作即可。大家可以自己在浏览器的开发者模式下,自己监控图片加载情况,看看是不是成功了。原始的代码是,:src。我们改成了自己定义好的图片懒加载标签了。这样就会动态加载内容了。唯一需要注意的地方是,这里面,有嵌套的列表(子集合遍历即可)。我们已经完成了懒加载图片的内容。如图所示,确实是记载渲染成功了内容。第二步:准备好接口调用的内容。原创 2024-07-19 10:44:13 · 331 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-热门品牌推荐栏目
vue3前端开发-小兔鲜项目-热门品牌推荐栏目!这一期内容,大家一定要认真的看完。因为,黑马官方教程视频里面老师没有讲这个,但是内容其实不难。只是按照之前的流程操作就行了。我把自己写好的代码分享给大家。在首页面的里面调用这个热门品牌的模块组件。css样式我自己定义了一下,大家可以根据个人习惯,自己定义css内容。第一步:写好模板文件,HomeBran.vue的基础内容。这个是home.js文件中,需要增加的接口调用的内容。如图,调用接口渲染出来的数据,是默认是10条数据。第二步:准备好各种调用接口的资料。原创 2024-07-18 17:51:57 · 489 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-图片懒加载的自定义标签
很多大型网站,因为首页面渲染的内容太多了,然而有些用户,可能在顶部就发现了自己感兴趣的内容,直接就点击跳转去了其他页面,因此,完全没有必要完全加载所有的页面内容,使用懒加载,可以俭省节约一些服务器的资源调用。当浏览器的页面视图进入浏览区域内,就会加载绑定我们的接口调用绑定过来的资源信息,给img标签做图片渲染操作。解释一下,意思就是,这个指令将来会绑定到img标签里面,作为一个动态渲染图片内容的作用。此时,页面缓慢的向下拖动滚动条,当人气推荐栏目露头的时候,就会马上渲染加载图片。如图,加载了这四张图片。原创 2024-07-18 16:44:34 · 463 阅读 · 0 评论 -
vue3前端开发-小兔鲜项目-人气推荐栏目的前端渲染
除了必要的import导入之外,剩余的就是直接调用了,赋值了。经历过上一次的,新鲜好物的栏目渲染之后,我们已经熟练了,vue3的接口调用,数据渲染到页面中的整体流程。如图,我们已经做好了,列表的渲染赋值。里面可以看见,顶部是脚本,中间是模板,底部是样式。在首页面,内容里面,会看见很多内容,上期内容我们已经完成了新鲜好物的渲染操作。1:打开接口文档,查询:人气推荐栏目的接口地址信息和参数,返回值对象信息等。以上内容就是,已经写好的,HomeHot的模板代码了。如图,地址信息和调用的方式已经清楚了。原创 2024-07-18 15:48:23 · 1003 阅读 · 0 评论 -
vue3前端开发-如何让自己的网站适合SEO排名规则
我们大家都知道,原始出生的vue3项目,原始代码层面,是没有meta标签的,也就是说,不适合SEO排名规则。SEO排名规则,蜘蛛爬虫抓取网站页面的内容,就会把这种meta标签内容进行采集,匹配。但是,这个技术要求大家还是应该知道的。黑马教育,课程,前端课程案例项目:小兔鲜儿超市,vue3前端项目案例。想学习vue3前端开发,拿来练习,实战的朋友们,值得一看哦。这个代码,就是我自己手工录入的。录入后,再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。原创 2024-07-17 15:32:14 · 296 阅读 · 0 评论 -
vue3前端开发-执行npm run dev提示报错怎么解决
但是当我执行npm run dev想启动它时报错了说,找不到dev。如图,我使用vscode打开了这个项目,但是我进入了路径不对,我第一次进入了路径是外层目录,我并无进入真正的项目内部。旧版本vue2底层使用的是webpack脚手架搭建的项目,启动命令是:npm run serve。实际上,不必惊慌,这是因为我自己的项目存档路径,进行了一次嵌套操作,所以引起的故障。vue3技术,是使用的vite作为底层的脚手架来搭建项目的,因此,使用该脚手架 搭建的项目,启动命令也变成了:npm run dev。原创 2024-07-17 15:16:43 · 755 阅读 · 0 评论 -
springboot+vue网站开发-后端管理框架-vue-admin-template
链接:https://pan.baidu.com/s/15LJ2MoSWToFGFp28VaxBeQ?为了方便国内用户下载,我把自己的百度网盘分享给大家一份地址,可以去下载。它预设了很多模块,你拿去修改就行 了。然后就是,进入项目文件夹内,使用安装命令,把基础的依赖包安装好。使用上网盒子软件后,下载很快的,几秒钟就下载到当前文件下了。如果你有上网盒子软件,那就自己去下载,很小。如图所示,进入后台了。写的很清楚,都是本身框架自带的,一些参数和值。如果你是想使用git命令下载,使用方法简单。原创 2024-02-27 15:42:38 · 706 阅读 · 0 评论