做前端也不是很久,也没做过什么特别大型或者是特别复杂需要很多前端配合开发的项目,所以对于前端的架构我并没有一个清晰的认识。 只是最近看着新公司的项目,实在有感而发,忍不住想说说前端项目最基础的一些架构。 现在几乎都是前后端分离了,所以前端项目都是前端自己搭建,整个项目的结构都把握在自己手里。 一个好的项目架构有什么好处呢,无外乎现在网上一直说的那几点,代码可读性、可维护性、可扩展性。当然,本人能力有限,说说基于本人认识上前端项目应该做的。 结构上,应该明确各种资源所放的位置。 组件,现在前端开发都是组件化开发,各个框架也提倡组件化开发,所以对于公共的组件封装,很重要,对于代码量减少的不是一点半点。对于维护和修改提高也很大。 不同人的敲代码的习惯都不一样,要是很多人开发一个项目或者是经很多手开发,那么这个项目在不同习惯下的代码,是很乱很杂的。
) { steps { echo "======================================项目名称 = ${env.JOB_NAME}" echo "======================================项目 URL = ${gitUrl }" echo "======================================项目分支 = ${branchName}" =当前编译版本号 = ${env.BUILD_NUMBER}" echo "======================================项目 Build 文件夹路径 = ${projectBuildPath}" echo "======================================项目
把工作中做过的一些小东西或者功能总结记录,分享学习 最近做了一个需求,是做 视频封面裁剪的,涉及到的一个功能点是 自动裁剪,就是拿到一张图片,自动裁剪 图片的中间区域成 一个正方形 其实这个挺简单的,说到前端裁剪 但是实际上也的确没有什么复杂的东西,只不过使用的时候会难以避免碰到一些坑而已 兼容性 canvas.drawImage 这个方法 的兼容性我们再来看一下,现在基本大部分浏览器已经兼容了,就除了 IE6-8 所以我们大可以放心使用这个 drawImage 进行我们的前端截图 2 api 详细介绍 drawImage 的 参数还是挺多的,挺容易弄混的,所以这里必须要花大力气写清楚,反正每次用都是要看一次的 我也没想着能够一劳永逸
前端项目的管理分为两个维度:项目内的管理与多项目之间的管理。 1. 项目内的管理 在一个项目内,当有多个开发者一起协作开发时,或者功能越来越多、项目越来越庞大时,保证项目井然有序的进行是相当重要的。 ,交接给其他人是很方便的 1.1 可扩展性 对于前端项目而言,可扩展性是并不难的,因为很多时候前端的代码、文件分块都是按照页面来的,所以天然就是一块一块的。 使前端项目具有高可扩展性,一般从目录文件结构入手。 1.2 组件化 这里的组件化是项目内的组件化,我们可以把多个页面之间共用的大块代码独立成组件,多个页面、组件之间共用的小块代码独立成公共模块。 让项目能够轻松的移植某些页面、组件、模块到其他项目,需要对整个项目代码尽量的解耦与模块化。另外,也与后面会讲到的“项目之间的统一性”有关。 一般会从下面几点来考证多个项目之间是否管理得很好: 组件化:多个项目共用的代码应当独立出来,成为一个单独的组件项目 版本化:组件项目与应用项目都应当版本化管理,特别是组件项目的版本应当符合 semver
js 的基本数据类型的赋值,就是值传递。引用类型对象的赋值是将对象地址的引用赋值。这时候修改对象中的属性或者值,会导致所有引用这个对象的值改变。如果想要真的复制一个新的对象,而不是复制对象的引用,就要用到对象的深拷贝。
方案一:思想 首先对数组进行排序(小 》大),第一项为最小值,最后一项为最大值
= "0" + i; } return i; } </script> function formatTime(ms) { ms = new Date("2018/8/ 8 14:20:00").getTime() - Date.now(); if(ms <= 0){ document.getElementById("showTime").innerHTML image.png <head> <meta charset="UTF-<em>8</em>"> <title>简单时长倒计时</title> <SCRIPT type="text/javascript"> image.png <head> <meta charset="UTF-<em>8</em>"> <title>js简单时分秒倒计时</title> <script type="text console.log('已截止') that.setData({ countdown:'00:00:00' }) } }, }) 动态显示<em>项目</em>倒计时
-- 搜索栏 --> <el-row :gutter="20"> <el-col :span="<em>8</em>"> < -- 搜索栏 --> <el-row :gutter="20"> <el-col :span="<em>8</em>"> <el-input placeholder="请输入内容
通过更改el-menu的active-text-color属性可以设置侧边栏菜单中点击的激活项的文字颜色 通过更改菜单项模板(template)中的i标签的类名,可以将左侧菜单栏的图标进行设置,我们需要在项目中使用第三方字体图标 此时当我们点击二级菜单的时候,就会根据菜单的index 属性进行路由跳转,如: /110, 使用index id来作为跳转的路径不合适,我们可以重新绑定index的值为 :index="’/’+subItem.path" 8.
-- 卡片视图区域 --> <el-card> <el-row :gutter="20"> <el-col :span="<em>8</em>"> -- 搜索栏 --> <el-row :gutter="20"> <el-col :span="<em>8</em>"> <el-input placeholder="请输入内容
PC后台管理端的功能:管理用户账号(登录,退出,用户管理,权限管理),商品管理(商品分类,分类参数,商品信息,订单),数据统计 电商后台管理系统采用前后端分离的开发模式 前端项目是基于Vue的SPA (单页应用程序)项目 前端技术栈:Vue,Vue-Router,Element-UI,Axios,Echarts 后端技术栈:Node.js,Express,Jwt(模拟session),Mysql, Sequelize(操作数据库的框架) 2.项目初始化 A.安装Vue脚手架 B.通过脚手架创建项目 C.配置路由 D.配置Element-UI:在插件中安装,搜索vue-cli-plugin-element B.安装nodeJS,配置后台项目,从终端打开后台项目vue_api_server 然后在终端中输入命令安装项目依赖包:npm install C.使用postman测试api接口 ? C.添加新分支login,在login分支中开发当前项目vue_shop: 打开vue_shop终端,使用git status确定当前项目状态。
A.为用户列表中的修改按钮绑定点击事件 B.在页面中添加修改用户对话框,并修改对话框的属性 C.根据id查询需要修改的用户数据
新建分支goods_cate并推送到码云 git checkout -b goods_cate git push -u origin goods_cate
今日目标 1.完成项目优化 2.完成项目上线 1 .项目优化 实现步骤: A.生成打包报告,根据报告优化项目 B.第三方库启用CDN C.Element-UI组件按需加载 D.路由懒加载 E DOCTYPE html> <html lang="en"> <head> <meta charset="utf-<em>8</em>"> <meta http-equiv="X-UA-Compatible -- built files will be auto injected --> </body> </html> <em>8</em>.定制首页内容 开发环境的首页和发布环境的首页展示内容的形式有所不同 如开发环境中使用的是 DOCTYPE html> <html lang="en"> <head> <meta charset="utf-<em>8</em>"> <meta http-equiv="X-UA-Compatible ,()=>{ console.log("server running at http://127.0.0.1:8998") }) C.配置https服务 配置https服务一般是后台进行处理,前端开发人员了解即可
饱暖思淫欲,当我们完成基本的业务需求之后,我们就需要去思考一下如何是我们的业务更加的流畅、代码更健壮等等,以下是我在项目中做的一些基本的项目优化工作,小小记录一下 一、高频操作的防抖和截流 日常页面开发中经常会有一些操作频率较高的
前言 前端随着node等JavaScript运行时平台的出现,逐渐向工程化方向发展。 项目开发也越来越规范化,但是随着项目的体积越来越大,依赖库越来越多,项目的运行,热更新和打包发布也是越来越慢,甚至卡顿。这个时候就需要对项目进行“瘦身”(性能优化)了。 本文就围绕着如何给前端项目进行性能优化等技术点一一展开讨论 为什么 为什么要进行项目性能优化,其实这个问题我在前言中已经简单阐述过了。 发出网络请求所花费的时间 Waiting (等待)(到开始下载第一个字节的时间(TTFB))等待初始响应所花费的时间 Content Download (内容下载)接收响应数据所花费的时间 动画的视觉和流畅效果 前端前端实现动画有三种主流的方式 javascript 预连接到所需的来源 预先价值关键请求 减少对DOM的操作 减少http请求 图片懒加载 优化TCP协议 优化css 异步加载脚本,防止主线程阻塞 使用cdn 代理缓存 下面是一些关于前端框架项目的一些优化方法
我目前使用的只有Hexo和Vue 一、创建VUE脚手架 开发工具使用的:idea 2021.2 image.png image.png 本地项目启动 image.png 二、Vercel 部署 通常我们部署一个简单项目只是想要演示 是不要连接现在的项目,大写的是N,直接回车即可 What’s your project’s name? 项目名称,直接默认即可(看自己个人情况),回车 In which directory is your code located? 是不是要项目的所有文件,默认回车 Want to override the settings? 识别出了我的项目是vue 项目,问我们是不是这些配置,覆盖,如果不是就修改,是的话默认回车 image.png 部署成功 image.png 测试:https://vue-demo-orpin.vercel.app
今天给大家讲的就是session项目,用到了昨天的那篇文章里面的一些东西。 今天就不多说了,可以看下面的思维导图。 下面是这个项目的效果图,用到了一些插件。 pageEncoding="UTF-8"%> <! DOCTYPE html> <html> <head> <meta charset="UTF-<em>8</em>"> <title>Insert title here</title> <! pageEncoding="UTF-<em>8</em>"%> <! DOCTYPE html> <html> <head> <meta charset="UTF-<em>8</em>"> <title>Insert title here</title> <!
前端 vue 开发规范笔记 命名规范 组件 method方法命名 views下文件命名 props 命名 目录文件夹及子文件规范 vue文件基本结构 多个特性的元素规范 元素特性顺序 组件选项顺序 注释规范
1.安装node、npm、cnpm apt install nodejs y apt install npm y node -v npm -v npm install cnpm -g --regist