- 综合排序
- 最热优先
- 最新优先
- 来自专栏码力全开
教你用 pm2 快速部署前端项目
0x00 前言 前端部署项目到测试环境，简单粗暴的直接用 gulp 来写，详细流程可以看我总结的文档： 前端代码部署 pm2 大家应该都知道，主要是用来管理 node 进程，但是同样可以用来部署前端代码 目前 pm2 已经商业化，免费版叫 pm2 runtime 0x01 步骤 全局安装 pm2 $ sudo npm i pm2 -g 同时服务器上也需要全局安装 pm2 配置SSH 首先需要生成 SSH 配置文件 在项目根目录下新建 ecosystem.config.js module.exports = { apps: [{ name: "app", script: "app.js 是用来部署 node 代码的，需要提供一个 js 文件用来执行，上面配置文件制定了项目根目录下的 app.js 里面写一行 log 即可 console.log('app is running') 首次部署配置 1 # 远程执行服务器命令 pm2 deploy production exec "pm2 reload all" 链接 官方 ssh 部署说明
2.6K10发布于 2019-11-06 - 来自专栏coding个人笔记
聊聊前端项目
做前端也不是很久，也没做过什么特别大型或者是特别复杂需要很多前端配合开发的项目，所以对于前端的架构我并没有一个清晰的认识。 只是最近看着新公司的项目，实在有感而发，忍不住想说说前端项目最基础的一些架构。 现在几乎都是前后端分离了，所以前端项目都是前端自己搭建，整个项目的结构都把握在自己手里。 一个好的项目架构有什么好处呢，无外乎现在网上一直说的那几点，代码可读性、可维护性、可扩展性。当然，本人能力有限，说说基于本人认识上前端项目应该做的。 结构上，应该明确各种资源所放的位置。 组件，现在前端开发都是组件化开发，各个框架也提倡组件化开发，所以对于公共的组件封装，很重要，对于代码量减少的不是一点半点。对于维护和修改提高也很大。 不同人的敲代码的习惯都不一样，要是很多人开发一个项目或者是经很多手开发，那么这个项目在不同习惯下的代码，是很乱很杂的。
52420发布于 2020-04-24 - 来自专栏跟着小郑学JAVA
T系列部署教程2 VSCode的安装&导入前端项目
\color{red}{前言：本教程配套博主发布的所有} T系列项目。 四、前端项目的导入 VSCode 安装完成后，接下来需要导入前端项目。 提示：本套教程以 T101 项目为例，提供的项目为压缩包，需要同学们自行解压到本地文件夹。 然后选择项目的前端目录（即 front 文件夹），如下图所示。 导入完成后，如下图所示。
60700编辑于 2024-05-26 - 来自专栏学习/读书笔记
web前端开发--仿京东官网首页项目实战（2）
这期主要完成了仿京东官网首页的搜索栏和导航部分。
51520编辑于 2022-04-07 pringBoot2 仿B站高性能前端+后端项目(完结)
Spring Boot 2 核心进阶：仿 B 站项目的缓存策略与性能优化全攻略引言：高并发场景下的“生死时速”在模仿哔哩哔哩（B 站）这类高流量视频平台的架构设计中，Spring Boot 2 不仅仅是一个快速开发框架 本文将剥离具体代码，深入拆解仿 B 站项目中 Spring Boot 2 的缓存架构逻辑与性能调优范式。 二、核心痛点攻克：缓存三大难题的算法级解法在仿 B 站项目中，缓存不仅仅是 get 和 set，更是一场与并发问题的博弈。1. 仿 B 站项目通常采用最终一致性（Eventual Consistency）模型。1. 结语：架构是权衡的艺术仿 B 站项目的缓存策略与性能优化，绝非简单的技术堆砌，而是一场关于一致性、可用性、分区容错性（CAP）以及成本与性能的深度权衡。
10910编辑于 2026-03-13- 来自专栏赵康的日常专栏
【前端】Web前端学习笔记【2】
相关博客： Web前端学习笔记【1】 ---- 1. this在 JavaScript 中主要有以下五种使用场景 ---- 在全局函数调用中，this 绑定全局对象，浏览器环境全局对象为 window = { test: 'obj2test', getAge2: function () { console.log(this.test) } } return obj2; } }; obj.getAge().getAge2() // 'obj2test' // ============== var obj = { birth :@&=+$#")); 输出： http%3A%2F%2Fwww.w3school.com.cn http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F %2C%2F globalStorage 使用于Firefox2+的火狐浏览器，类似于IE的userData。 缺点：IE不支持。
55520编辑于 2023-10-17 - 来自专栏Vue源码 & 前端进阶体系
【项目】前端图片裁剪
把工作中做过的一些小东西或者功能总结记录，分享学习 最近做了一个需求，是做 视频封面裁剪的，涉及到的一个功能点是 自动裁剪，就是拿到一张图片，自动裁剪 图片的中间区域成 一个正方形 其实这个挺简单的，说到前端裁剪 所以我们大可以放心使用这个 drawImage 进行我们的前端截图 2 api 详细介绍 drawImage 的 参数还是挺多的，挺容易弄混的，所以这里必须要花大力气写清楚，反正每次用都是要看一次的 我也没想着能够一劳永逸 所以我们需要获取到以下这些数据 1、图片的 原始宽高 2、裁减的图片位置 3、裁减的图片大小 首先拿到 图片原始宽高，比较一下是 更长 还是更高，从而确定裁减的 大小 高>宽，裁减的宽高= 图片的宽 宽 height = imgHeight; width = imgHeight * aspect; } const y = (imgHeight - height) / 2; const x = (imgWidth - width) / 2; const result = await getImageCutArea(imgInfo, { x,
2.4K30发布于 2021-05-13 - 来自专栏ops技术分享
pipeline配置前端项目
) { steps { echo "======================================项目名称 = ${env.JOB_NAME}" echo "======================================项目 URL = ${gitUrl }" echo "======================================项目分支 = ${branchName}" =当前编译版本号 = ${env.BUILD_NUMBER}" echo "======================================项目 Build 文件夹路径 = ${projectBuildPath}" echo "======================================项目
58410发布于 2021-06-04 - 来自专栏grain先森
前端项目如何管理
前端项目的管理分为两个维度：项目内的管理与多项目之间的管理。 1. 项目内的管理 在一个项目内，当有多个开发者一起协作开发时，或者功能越来越多、项目越来越庞大时，保证项目井然有序的进行是相当重要的。 ，交接给其他人是很方便的 1.1 可扩展性 对于前端项目而言，可扩展性是并不难的，因为很多时候前端的代码、文件分块都是按照页面来的，所以天然就是一块一块的。 使前端项目具有高可扩展性，一般从目录文件结构入手。 1.2 组件化 这里的组件化是项目内的组件化，我们可以把多个页面之间共用的大块代码独立成组件，多个页面、组件之间共用的小块代码独立成公共模块。 - project2/ # 项目二 - package.json - src/ - ... , "component2": "^0.0.1" } } import component1 from 'component1'; import component2 from 'component2
1.4K30发布于 2019-03-28 - 来自专栏海仔技术驿站
前端成神之路-vue前端项目06
今日目标 1.完成商品添加 2.完成订单列表 3.完成数据统计展示 1.添加商品 A.完成图片上传 使用upload组件完成图片上传 在element.js中引入upload组件，并注册 因为upload 进行深拷贝，避免goods_cat数组转换字符串之后导致级联选择器报错 const form = _.cloneDeep(this.addForm) //将goods_cat从数组转换为"1,2,3 master主分支： git checkout master 将goods_list分支代码合并到master: git merge goods_list 将master推送到码云： git push 2. > <el-input v-model="addressForm.address<em>2</em>"></el-input> </el-form-item> </el-form addressVisible:false, //修改收货地址的表单 addressForm:{ address1:[], address2:
2.1K40发布于 2021-05-06 - 来自专栏海仔技术驿站
前端成神之路-vue前端项目02
今日目标 1.实现后台首页的基本布局 2.实现左侧菜单栏 3.实现用户列表展示 4.实现添加用户 1.后台首页基本布局 打开Home.vue组件，进行布局： <el-container class background-color:#373D41; } .el-aside{ background-color:#333744; } .el-main{ background-color:#eaedf1; } 2. 通过更改el-menu的active-text-color属性可以设置侧边栏菜单中点击的激活项的文字颜色 通过更改菜单项模板（template）中的i标签的类名，可以将左侧菜单栏的图标进行设置，我们需要在项目中使用第三方字体图标 return { //获取查询用户信息的参数 queryInfo: { query: '', pagenum: 1, pagesize: 2 // 查询的条件 query: '', // 当前的页数，即页码 pagenum: 1, // 每页显示的数据条数 pagesize: 2
4.4K10发布于 2021-03-20 - 来自专栏海仔技术驿站
前端成神之路-vue前端项目05
今日目标 1.完成参数管理 2.推送代码到码云 3.制作商品列表页面 4.制作商品添加页面 1.参数管理 A.展示动态参数可选项 动态参数可选项展示及操作 在获取动态参数的方法中进行处理。 补充2：当完成了动态参数可选项的功能之后，我们也需要一样的方式完成静态属性可选项的功能。 此时我们只需要将动态参数可选项中的展开行复制到静态属性的表格中即可 2.推送代码到码云 添加到暂存求： git add . '0') const d = (dt.getDate()+'').padStart(2,'0') const hh = (dt.getHours()+'').padStart(2,'0') const mm = (dt.getMinutes()+'').padStart(2,'0') const ss = (dt.getSeconds()+'').padStart(2,'0')
1.8K10发布于 2021-05-06 - 来自专栏海仔技术驿站
前端成神之路-vue前端项目01
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确定当前项目状态。
94020发布于 2021-03-20 - 来自专栏海仔技术驿站
前端成神之路-vue前端项目03
今日目标 1.修改用户,删除用户 2.推送代码到码云 3.权限列表 4.角色列表 5.分配角色 1.修改用户信息 A.为用户列表中的修改按钮绑定点击事件 B.在页面中添加修改用户对话框，并修改对话框的属性 修改用户成功') //关闭对话框 this.editDialogVisible = false //重新请求最新的数据 this.getUserList() }) } 2. ="scope.row.level === 1" type="success">二级权限</el-tag> <el-tag v-if="scope.row.level === <em>2</em>" -- 通过for循环嵌套渲染二级权限 --> <el-row :class="[i<em>2</em>===0?'' :'bdtop' ]" v-for="(item<em>2</em>,i<em>2</em>) in item1.children" :key="item<em>2</em>.id"> <el-col :span="
2.2K20发布于 2021-05-06 - 来自专栏海仔技术驿站
前端成神之路-vue前端项目04
今日目标 1.完成商品分类 2.完成参数管理 1.商品分类 A.新建分支goods_cate 新建分支goods_cate并推送到码云 git checkout -b goods_cate git 使用第三方插件vue-table-with-tree-grid展示分类数据 1).在vue 控制台中点击依赖->安装依赖->运行依赖->输入vue-table-with-tree-gird->点击安装 2) addCateFormRules:{ //验证规则 cat_name:[ {required:true , message:'请输入分类名称',trigger:'blur'} ] }, //保存1,2级父级分类的列表 $http.get('categories', { params: {type:2} }) if (res.meta.status ! git commit -m ‘完成商品分类’ git push git checkout master git merge goods_cate 2.参数管理 只允许给三级分类内容设置参数，参数分为动态参数和静态参数属性
2K20发布于 2021-05-06 - 来自专栏海仔技术驿站
前端成神之路-vue前端项目07
今日目标 1.完成项目优化 2.完成项目上线 1 .项目优化 实现步骤： A.生成打包报告，根据报告优化项目 B.第三方库启用CDN C.Element-UI组件按需加载 D.路由懒加载 E .首页内容定制 2.添加进度条 给项目添加进度条效果，先打开项目控制台，打开依赖，安装nprogress 打开main.js，编写如下代码 //导入进度条插件 import NProgress from 2.在babel.config.js中声明该插件，打开babel.config.js //项目发布阶段需要用到的babel插件 const productPlugins = [] //判断是开发还是发布阶段 打开vue_shop_server文件夹的终端，输入命令：npm i pm2 -g 使用pm2启动项目，在终端中输入命令：pm2 start app.js --name 自定义名称 查看项目列表命令 ：pm2 ls 重启项目：pm2 restart 自定义名称 停止项目：pm2 stop 自定义名称 删除项目：pm2 delete 自定义名称
1.6K30发布于 2021-05-06 - 来自专栏农民工前端
前端面经（2）
使用path来匹配路由，然后通过query来传递参数，这种情况下 query传递的参数会显示在url路由的两种模式 hash与history 对于Vue 这类渐进式前端开发框架，为了构建SPA(单页面应用 )，需要引入前端路由系统，这也就是Vue-router存在的意义。 前端路由的核心，就在于改变视图的同时不会向后端发出请求。 添加验证码2. 日常工作中用的最对的跨域方案是CORS和Nginx反向代理前端工程化webpack配置，webpack4.0有哪些优化点module.exports={entry: {},output: {},plugins
1.7K60编辑于 2023-02-17 - 来自专栏木子墨的前端日常
前端项目性能优化笔记
饱暖思淫欲，当我们完成基本的业务需求之后，我们就需要去思考一下如何是我们的业务更加的流畅、代码更健壮等等，以下是我在项目中做的一些基本的项目优化工作，小小记录一下 一、高频操作的防抖和截流 日常页面开发中经常会有一些操作频率较高的 _destroy() }, methods: { _destroy() { clearTimeout(this.timer) } } 2、使用watch代替一直轮询的setInterval
68830发布于 2018-12-07 - 来自专栏自动化测试工具
购物车项目（前端）
今天给大家讲的就是session项目，用到了昨天的那篇文章里面的一些东西。 今天就不多说了，可以看下面的思维导图。 下面是这个项目的效果图，用到了一些插件。 bid="+bid+"&gn="+gnumber; }else if(i==2) { gnumber++; location.href="dogwc.jsp? this.value='';}" onclick="ff(<%=olist.get(i).getGoods().getBid() %>,<%=olist.get(i).getGoods().getBid() %>,2)
82510编辑于 2022-11-18 - 来自专栏前端少年汪的博客
前端项目(VueReact)性能优化
前言 前端随着node等JavaScript运行时平台的出现，逐渐向工程化方向发展。 本文就围绕着如何给前端项目进行性能优化等技术点一一展开讨论 为什么 为什么要进行项目性能优化，其实这个问题我在前言中已经简单阐述过了。 发出网络请求所花费的时间 Waiting (等待)（到开始下载第一个字节的时间（TTFB））等待初始响应所花费的时间 Content Download (内容下载)接收响应数据所花费的时间 动画的视觉和流畅效果 前端前端实现动画有三种主流的方式 Canvas作为浏览器提供的2D图形绘制API本身有一定的复杂度,优化的方法非常多,我们仅仅介绍几种比较主流的优化方式. javascript 预连接到所需的来源 预先价值关键请求 减少对DOM的操作 减少http请求 图片懒加载 优化TCP协议 优化css 异步加载脚本，防止主线程阻塞 使用cdn 代理缓存 下面是一些关于前端框架项目的一些优化方法
71240编辑于 2023-11-21
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号