web前端开发
文章平均质量分 72
Kira~~
梦想还是要有的,万一实现了呢~
展开
-
原生html配合canvas仿echarts图标组件合集
介绍这是一个多人项目中的一个模块,我负责了数据展示的部分,用原生的Canvas实现了进度条,饼图,雷达图,水滴图,日历图等图表的展现。采用面向对象的方式,将每个图表分为一个独立的类,将dom元素和option选项,option选项尽可能模仿echarts的选项配置。开源地址https://gitee.com/tyoubin_admin/echarts-canvas.git欢迎fork和star!预览地址http://hikari.top:8104/饼图:用于展示笔记的分类。亮点:1.开场动画原创 2021-08-16 22:30:35 · 677 阅读 · 1 评论 -
个人博客系统项目-已开源
博客上线地址:欢迎访问我的博客!http://hikari.top项目介绍实现了一个简单的个人博客系统,技术栈为后端SpringBoot+JPA+MySQL,前端Vue+ElementUI+Echarts系统分为前台展示和后台管理两个部分,前台部分主要分为了引导页,首页,随笔,项目,留言和关于我页面,使用响应式布局,能够自适应移动端,后台有首页,博客管理,撰写博客,用户管理,分类管理,标签管理,评论管理,随笔管理,项目管理,个人中心,图片管理。项目开源地址:博客前端:https://gitee.c原创 2021-07-26 23:44:23 · 54673 阅读 · 149 评论 -
餐厅经营模拟游戏实战项目
项目介绍实现了一个游戏的餐厅经营模拟,实现了厨师、顾客等角色的关键操作,完成从顾客等位、点菜、烹饪、用餐、支付的一系列状态变更的数据、信息、交互、展现的变化及处理。涉及的前端知识有移动端 HTML 页面布局及样式实现。项目上线地址:http://hikari.top:8102/项目效果图项目中角色的状态介绍:厨师的状态状态名称状态描述free未开工,等待顾客点菜working已接单,正在做菜speeding被顾客疯狂点击,加速做菜一段时间原创 2021-07-19 11:32:56 · 3851 阅读 · 1 评论 -
博客系统评论功能的实现
由于后端传来的评论数据是列表的形式,而前端要实现将评论按层级展示,直观地看出评论的回复情况。同时为了兼顾功能和美观,要将子评论显示级数限定在二级,而三级之后的评论通过显示回复的评论者的名字来找出其父评论。思路:通过parent_id的将返回的评论列表转为子树的形式,父子之间通过children属性来关联将二层之后的子节点转为其父节点的兄弟节点。将所有子评论按时间顺序排列列表转换为子树的代码如下:let parents = this.blog.comments.filter(value =&原创 2021-07-12 11:15:35 · 1621 阅读 · 0 评论 -
用原生CSS实现标签样式
semantic-ui中有一个很适合于博客标签的样式,但element-ui中却没有找到相关的组件,因此就需要自己手动用原生CSS去写样式了右边的长方形很容易实现直接用div+border的方式,修改以下颜色就可以了,颜色可以直接参考element-ui中的配色,效果如下。难点在于前面的小三角形,这里采用设置border样式的方式,将上下border设为透明,右边设为蓝色,则可以得到一个箭头向左的三角形,并紧贴后面的长方形就可以。代码如下 .sjx{ width: 0;原创 2021-07-01 00:42:43 · 1131 阅读 · 3 评论 -
Vue电商管理系统-项目优化
通过noprogress添加进度条a. 打开vue ui面板b. 添加noprogress运行依赖c. 在main.js中导入NProgresss对应的js和cssd. 在 request 拦截器中,显示进度条 NProgresss.start()e. 在 response 拦截器中,隐藏进度条 NProgresss.done()// 导入NProgresss对应的js和cssimport NProgresss from 'nprogress'import 'nprogress/npr.原创 2021-05-31 20:16:47 · 343 阅读 · 1 评论 -
Vue电商管理系统-商品分类
创建新分支a. 创建good_cate子分支git checkout -b good_cateb. 创建远程子分支git push -u创建Cate组件并添加路由添加面包屑导航区 <!-- 面包屑导航区--> <el-breadcrumb separator="/"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>.原创 2021-05-24 23:25:32 · 590 阅读 · 2 评论 -
Vue电商管理系统-角色列表
面包屑导航区域 <!-- 面包屑导航区 --> <el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item> <el-breadcrumb-item>权限管理</el-breadcrumb-item> .原创 2021-05-24 00:02:18 · 314 阅读 · 0 评论 -
Node.js学习笔记-模块化开发
JavaScript开发过程中存在文件依赖和命名冲突问题,因此要采用模块化开发的方式。软件当中的模块化开发每个JavaScript文件就是一个模块,模块内部的变量无法在外部进行访问。有两种方式可以实现访问。文件b中访问a中的变量和方法需要用exports将a中的变量和方法导出,并在b中用require方式引入// a.jslet version = 1.0const sayHi = name => `您好,${name}`;exports.version = versionex原创 2021-05-22 11:44:03 · 217 阅读 · 0 评论 -
Vue电商管理系统-用户列表
创建用户列表组件并添加Home下的子路由 { path: '/users', component: User }侧边栏选项高亮菜单的default-activate值表示现在应该高亮的选项的index思路:将当前的选项值保存到sessionStorage当中,每次创建页面都自动读取sessionStorage中的值。步骤:a. data中添加activePath: ''b. created()中添加this.activePath.原创 2021-05-22 10:37:51 · 473 阅读 · 1 评论 -
Vue电商管理系统-主页
写页面整体布局,并将container高度设置为100% <el-container class="container"> <el-header>Header <el-button type="info" @click="logout">退出</el-button> </el-header> <el-container> <el-aside width="200px">.原创 2021-05-20 22:46:59 · 3999 阅读 · 16 评论 -
Apache搭建图片服务器
由于之前做过的博客项目每一篇博客上传都需要一幅图片,刚开始想将这些图片直接存到项目static目录下的images静态资源中,但这样的话想在其他地方访问图片就显得有些不方便。 于是我就想,如果能将图片单独放到一个服务器上。这样访问图片不是就更加方便了吗,其他程序想要访问图片资源的时候也可以更加方便的访问。 首先想到的就是用tomcat再搭建一个图片服务器,这样就能实现功能了,但是有没有更加优化的解决方案呢,上网百度一下,还真有,那就是Apache。 用惯了tomcat,忘记了当初web课的.原创 2021-05-19 22:50:51 · 1242 阅读 · 2 评论