文章 2021-08-19 来自:开发者社区

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-5.使用字体图标(iconfont)

由于之前是做UI的,在之前的图标使用中,我都是直接将icon下载成png格式来做图,然后在网页中以img形式引入并显示。后来发现svg格式小一些,在网页中就用svg格式图标。今天明白了阿里图标库真正的使用方法,没有使用过的朋友一起学习下。1.找图标在图标搜索引擎中找我们需要的图标,选中之后加入购物车:2.下载图标代码选出我们需要的几个图标后,找到购物车:点击下载后下载的是压缩包,其中内容是css....

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-5.使用字体图标(iconfont)
文章 2021-08-19 来自:开发者社区

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-4.vue广告轮播图,并使用接口引入数据

1.下载组件包Vue-Awesome-Swiper并引入Vue-Awesome-Swiper链接cd web npm i vue-awesome-swiper2.使用vue-swiper在首页组件Home.vue中使用该组件,使用方法为外层 < swiper > 内部 < swiper-slide > 。此时已经可以拖动轮播了:3.引入广告数据(1)在server端创建路....

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-4.vue广告轮播图,并使用接口引入数据
文章 2021-08-19 来自:开发者社区

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-3.使用flex布局并开始搭建web端

1.用sass工具定义flex布局样式flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。其中justify-content(水平方向对齐)属性和align-content(垂直方向对齐)属性更方便地解决元素的对其、分布方式具体在什么场景如何得到效果大家去链接中测试。sass工具定义:// flex布局 .d-flex{ display: flex; } $flex-jc: ...

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-3.使用flex布局并开始搭建web端
文章 2021-08-19 来自:开发者社区

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-2.sass工具的变量

上篇文章我们学习了如何在node + vue中安装sass工具,并对 嵌套 (nested rules) 功能做出了演示,本篇文章我们对sass工具的另一大功能 变量(variables) 进行学习和使用。1.为什么使用变量(variables)功能设计师在整个页面的视觉设计工作中,会根据网站特性、产品功能、企业文化等特点对页面进行一个色彩的基础定位,每个成功的网站设计都会有其确定的主色、辅助色....

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-2.sass工具的变量
文章 2021-08-19 来自:开发者社区

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-1.使用sass工具搭建前台web端页面

关于sass:Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。点击链接可进入sa....

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-13-1.使用sass工具搭建前台web端页面
文章 2021-08-19 来自:开发者社区

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-4.登陆的前端vue-router路由验证(导航守卫)

上篇文章我们发现有些不使用任何接口的页面,在不登陆状态下是可以进行访问的,所以本篇文章解决一下这个问题。1.使用导航守卫导航守卫是在路由定义之后,进行使用之前进行的相关函数操作。类似中间件,可以说实际上他就是一个钩子函数的中间件。// 导航守卫 router.beforeEach((to, from, next) => { // 打印to,查看内容 console.log(to) ...

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-4.登陆的前端vue-router路由验证(导航守卫)
文章 2021-08-19 来自:开发者社区

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-3.登陆的token验证(校验登录)

token验证的实现方式很简单,只需要在所有后端接口中添加一个验证是否存在token的中间件即可,接口的访问过程是调用→运行→返回数据。所以我们在接口调用之后、运行之前的位置加一个验证token的函数作为接口的中间件,从而验证到非登录人员,将其页面跳转到登陆页面即可。1.在server端获取admin端sessionStorage(或localStorage)存储的token我们要通过将sess....

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-3.登陆的token验证(校验登录)
文章 2021-08-19 来自:开发者社区

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-2.管理员登录

上篇文章使用了bcryptjs对密码进行了加密,既然加密后的密码是不可逆的,那么保存后的密文又如何被验证识别呢?仍然使用bcryptjs,其中的compareSync来比较密码和数据库的密文。1.制作登陆页面登陆页面不使用Main.vue带有左侧菜单的布局,所以与Main.vue的路由链接“/”同级。Login.vue:<template> <div class="lo...

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-2.管理员登录
文章 2021-08-19 来自:开发者社区

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块

网站的必备功能:用户登录。用户登录功能是网站安全的一大重点,网站做的再好看,再完善,如果没有一个安全的管理员通道,都算不上一个成功的网站。今天起的几篇文章对用户登录进行专门学习。本篇文章我们将管理员模块实现。1.管理员模块的实现我们使用了CRUD通用接口,我们不需要对常用接口进行编辑,所以每个数据表的模型是我们开发一个模块时的第一步。模型Admin.js,只包括用户名密码即可:主页面Main.v....

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-12-1.管理员模块
文章 2021-08-19 来自:开发者社区

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-11.动态添加分栏上传多组数据

例如有些时候需要上传多张图片,但是并不确定留下几个图片位,这是我们就想手动添加图片位,从而实现自定义数量图片的上传。我们以广告上传为例,上传多个广告。1.仿照分类组件编写广告位模块AdSet.vue:<template> <div> <h1>{{id ? '编辑' : '创建'}}广告位</h1> <e...

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-11.动态添加分栏上传多组数据

本页面内关键词为智能算法引擎基于机器学习所生成,如有任何问题,可在页面下方点击"联系我们"与我们沟通。

产品推荐

开发与运维

集结各类场景实战经验,助你开发运维畅行无忧

+关注
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问