Home Web Front-end JS Tutorial How to implement image cropping component using Vue mobile terminal

How to implement image cropping component using Vue mobile terminal

Jun 23, 2018 pm 06:06 PM
vue

This article introduces you to the mobile terminal image cropping component function based on Vue. Because the mobile terminal uses vue, it is written as a vue component. Here are some of my implementation ideas. Friends who need it can refer to it. Next

I am working on a recent project to build a license plate recognition function. I originally thought it was very simple, just throw the image to the background, but after testing, the recognition rate was only 20-40%. Therefore, the product recommends that after taking a picture, you can drag and zoom the picture, then crop the license plate part and upload it to the background to improve the recognition rate. At the beginning, I checked Baidu to see if there were any ready-made components, but I couldn't find a suitable one. Fortunately, I wasn't very anxious about this function, so I studied it at home on the weekend.

Demo address: https://vivialex.github.io/demo/imageClipper/index.html

Download address: https://github.com/vivialex/vue-imageClipper

Since the mobile terminal uses Vue, I wrote it as a Vue component. Let’s talk about some of my implementation ideas (I have limited skills, please understand. In addition, the code shown is not necessarily complete for a certain function. Code), let’s take a look at the effect first:

1. Initialization parameters of the component

1. Image img (url or base64 data-url)

2. Screenshot width clipperImgWidth

3. Screenshot height clipperImgHeight

props: {
  img: String, //url或dataUrl
  clipperImgWidth: {
    type: Number,
    default: 500
  },
  clipperImgHeight: {
    type: Number,
    default: 200
  }
}

2 , Layout

Viewed in the Z-axis direction, it is mainly composed of 4 layers. The first layer is a canvas (called cCanvas) that occupies the entire container; the second layer is a transparent mask layer; the third layer is the cropped area (the white box in the example picture), which contains a Canvas with equal area sizes (called pCanvas); the fourth layer is a transparent layer gesture-mask, used to bind touchstart, touchmove, touchend events. Both canvases will load the same picture, but the starting coordinates are different. Why do we need two canvases? Because I want to create the effect that when the finger leaves the screen, part of the surface outside the cropping area will have a mask layer effect, which can highlight the content of the cropping area.

<p class="cut-container" ref="cut">
  <canvas ref="canvas"></canvas>
  <!-- 裁剪部分 -->
  <p class="cut-part">
    <p class="pCanvas-container">
      <canvas ref="pCanvas"></canvas>
    </p>
  </p>
  <!-- 底部操作栏 -->
  <p class="action-bar">
    <button class="btn-cancel" @click="_cancel">取消</button>
    <button class="btn-ok" @click="_cut">确认</button>
  </p>
  <!-- 背景遮罩 -->
  <p class="mask" :class="{opacity: maskShow}"></p>
  <!-- 手势操作层 -->
  <p class="gesture-mask" ref="gesture"></p>
</p>

  3. Initialize canvas

Pictures drawn by canvas will appear blurry on the hdpi display. The specific reasons will not be analyzed here. You can refer to Get off here. What I do here is to make the width and height of the canvas times the devicePixelRatio of its css width/height, and the parameters passed in when calling the canvas api must be multiplied by window.devicePixelRatio. Finally, record the x, y difference between the two canvas coordinate origins (originXDiff and originYDiff). As follows

_ratio(size) {
  return parseInt(window.devicePixelRatio * size);
},
_initCanvas() {
  let $canvas = this.$refs.canvas,
    $pCanvas = this.$refs.pCanvas,
    clipperClientRect = this.$refs.clipper.getBoundingClientRect(),
    clipperWidth = parseInt(this.clipperImgWidth / window.devicePixelRatio),
    clipperHeight = parseInt(this.clipperImgHeight / window.devicePixelRatio);

  this.ctx = $canvas.getContext(&#39;2d&#39;);
  this.pCtx = $pCanvas.getContext(&#39;2d&#39;);

  //判断clipperWidth与clipperHeight有没有超过容器值
  if (clipperWidth < 0 || clipperWidth > clipperClientRect.width) {
    clipperWidth = 250
  }

  if (clipperHeight < 0 || clipperHeight > clipperClientRect.height) {
    clipperHeight = 100
  }

  //因为canvas在手机上会被放大,因此里面的内容会模糊,这里根据手机的devicePixelRatio来放大canvas,然后再通过设置css来收缩,因此关于canvas的所有值或坐标都要乘以devicePixelRatio
  $canvas.style.width = clipperClientRect.width + &#39;px&#39;;
  $canvas.style.height = clipperClientRect.height + &#39;px&#39;;
  $canvas.width = this._ratio(clipperClientRect.width);
  $canvas.height = this._ratio(clipperClientRect.height);

  $pCanvas.style.width = clipperWidth + &#39;px&#39;;
  $pCanvas.style.height = clipperHeight + &#39;px&#39;;
  $pCanvas.width = this._ratio(clipperWidth);
  $pCanvas.height = this._ratio(clipperHeight);

  //计算两个canvas原点的x y差值
  let cClientRect = $canvas.getBoundingClientRect(),
    pClientRect = $pCanvas.getBoundingClientRect();

  this.originXDiff = pClientRect.left - cClientRect.left;
  this.originYDiff = pClientRect.top - cClientRect.top;
  this.cWidth = cClientRect.width;
  this.cHeight = cClientRect.height;
}

  IV. Loading images

Loading images is relatively simple. First, create an Image object and listen to the onload event (because the loaded The image may be cross-domain, so set its crossOrigin attribute to Anonymous, and then set the Access-Control-Allow-Origin response header on the server). If the width and height of the loaded image are greater than the width and height of the container, they must be reduced. Finally, vertically and horizontally centered display () (note here is to save the width and height value before the picture is drawn, because the future scaling of the picture will be based on this value and then multiplied by the zoom factor, here take imgStartWidth, imgStartHeight) as follows

_loadImg() {
  if (this.imgLoading || this.loadImgQueue.length === 0) {
    return;
  }
  let img = this.loadImgQueue.shift();
  if (!img) {
    return;
  }
  let $img = new Image(),
    onLoad = e => {
      $img.removeEventListener(&#39;load&#39;, onLoad, false);
      this.$img = $img;
      this.imgLoaded = true;
      this.imgLoading = false;
      this._initImg($img.width, $img.height);
      this.$emit(&#39;loadSuccess&#39;, e);
      this.$emit(&#39;loadComplete&#39;, e);
      this._loadImg();
    },
    onError = e => {
      $img.removeEventListener(&#39;error&#39;, onError, false);
      this.$img = $img = null;
      this.imgLoading = false;
      this.$emit(&#39;loadError&#39;, e);
      this.$emit(&#39;loadComplete&#39;, e);
      this._loadImg();
    };
  this.$emit(&#39;beforeLoad&#39;);
  this.imgLoading = true;
  this.imgLoaded = false;
  $img.src = this.img;
  $img.crossOrigin = &#39;Anonymous&#39;; //因为canvas toDataUrl不能操作未经允许的跨域图片,这需要服务器设置Access-Control-Allow-Origin头
  $img.addEventListener(&#39;load&#39;, onLoad, false);
  $img.addEventListener(&#39;error&#39;, onError, false);
}
_initImg(w, h) {
  let eW = null,
    eH = null,
    maxW = this.cWidth,
    maxH = this.cHeight - this.actionBarHeight;
  //如果图片的宽高都少于容器的宽高,则不做处理
  if (w <= maxW && h <= maxH) {
    eW = w;
    eH = h;
  } else if (w > maxW && h <= maxH) {
    eW = maxW;
    eH = parseInt(h / w * maxW);
  } else if (w <= maxW && h > maxH) {
    eW = parseInt(w / h * maxH);
    eH = maxH;
  } else {
    //判断是横图还是竖图
    if (h > w) {
      eW = parseInt(w / h * maxH);
      eH = maxH;
    } else {
      eW = maxW;
      eH = parseInt(h / w * maxW);
    }
  }
  if (eW <= maxW && eH <= maxH) {
    //记录其初始化的宽高,日后的缩放功能以此值为基础
    this.imgStartWidth = eW;
    this.imgStartHeight = eH;
    this._drawImage((maxW - eW) / 2, (maxH - eH) / 2, eW, eH);
  } else {
    this._initImg(eW, eH);
  }
}

  5. Draw the picture

The following _drawImage has four parameters, which are the x, y coordinates of the picture corresponding to cCanvas and the current width and height w of the picture. ,h. The function will first clear the contents of the two canvases by resetting the width and height of the canvas. Then update the corresponding value in the component instance, and finally call the drawImage of the two canvases to draw the picture. For pCanvas, the coordinate values ​​of the picture drawn are x and y minus the corresponding originXDiff and originYDiff (actually it is equivalent to switching the coordinate system display, so you only need to subtract the x and y difference between the origins of the two coordinate systems) ). Take a look at the code

_drawImage(x, y, w, h) {
  this._clearCanvas();
  this.imgX = parseInt(x);
  this.imgY = parseInt(y);
  this.imgCurrentWidth = parseInt(w);
  this.imgCurrentHeight = parseInt(h);
  //更新canvas
  this.ctx.drawImage(this.$img, this._ratio(x), this._ratio(y), this._ratio(w), this._ratio(h));
  //更新pCanvas,只需要减去两个canvas坐标原点对应的差值即可
  this.pCtx.drawImage(this.$img, this._ratio(x - this.originXDiff), this._ratio(y - this.originYDiff), this._ratio(w), this._ratio(h));
},
_clearCanvas() {
  let $canvas = this.$refs.canvas,
    $pCanvas = this.$refs.pCanvas;
  $canvas.width = $canvas.width;
  $canvas.height = $canvas.height;
  $pCanvas.width = $pCanvas.width;
  $pCanvas.height = $pCanvas.height;
}

  6. Moving pictures

The implementation of moving pictures is very simple. First, bind touchstart, touchmove, touchend to gesture-mask. Events, the contents of these three events are introduced below

First define four variables scx, scy (the starting coordinates of the finger), iX, iY (the current coordinates of the picture, relative to cCanvas).

1. touchstart

The method is very simple, just get the pageX and pageY of touches[0] to update scx and scy and update iX and iY

2. touchmove

Get the page

Let’s take a look at the code

_initEvent() {
  let $gesture = this.$refs.gesture,
    scx = 0,
    scy = 0;
  let iX = this.imgX,
    iY = this.imgY;
  $gesture.addEventListener(&#39;touchstart&#39;, e => {
    if (!this.imgLoaded) {
      return;
    }
    let finger = e.touches[0];
      scx = finger.pageX;
      scy = finger.pageY;
      iX = this.imgX;
      iY = this.imgY;  
  }, false);
  $gesture.addEventListener(&#39;touchmove&#39;, e => {
    e.preventDefault();
    if (!this.imgLoaded) {
      return;
    }
    let f1x = e.touches[0].pageX,
      f1y = e.touches[0].pageY;
      this._drawImage(iX + f1x - scx, iY + f1y - scy, this.imgCurrentWidth, this.imgCurrentHeight);
  }, false);
}

   七、缩放图片(这里不作特别说明的坐标都是相对于cCanvas坐标系)

  绘制缩放后的图片无非需要4个参数,缩放后图片左上角的坐标以及宽高。求宽高相对好办,宽高等于imgStartWidth * 缩放比率与imgstartHeight * 缩放倍率(imgStartWidth ,imgstartHeight 上文第四节有提到)。接下来就是求缩放倍率的问题了,首先在touchstart事件上求取两手指间的距离d1;然后在touchmove事件上继续求取两手指间的距离d2,当前缩放倍率= 初始缩放倍率 + (d2-d1) / 步长(例如每60px算0.1),touchend事件上让初始缩放倍率=当前缩放倍率。

  至于如何求取缩放后图片左上角的坐标值,在草稿纸上画来画去,画了很久......终于有点眉目。首先要找到一个缩放中心(这里做法是取双指的中点坐标,但是这个坐标必须要位于图片上,如果不在图片上,则取图片上离该中点坐标最近的点),然后存在下面这个等式

  (缩放中心x坐标 - 缩放后图片左上角x坐标)/ 缩放后图片的宽度 = (缩放中心x坐标 - 缩放前图片左上角x坐标)/ 缩放前图片的宽度;(y坐标同理)

  接下来看看下面这个例子(在visio找了很久都没有画坐标系的功能,所以只能手工画了)

  

  绿色框是一张10*5的图片,蓝色框是宽高放大两倍后的图片20*10,根据上面的公式推算的x2 = sx - w2(sx - x1) / w1,y2 = sy - h2(sy - y1) / h1。

  坚持...继续看看代码吧

_initEvent() {
  let $gesture = this.$refs.gesture,
    cClientRect = this.$refs.canvas.getBoundingClientRect(),
    scx = 0, //对于单手操作是移动的起点坐标,对于缩放是图片距离两手指的中点最近的图标。
    scy = 0,
    fingers = {}; //记录当前有多少只手指在触控屏幕
  //one finger
  let iX = this.imgX,
    iY = this.imgY;
  //two finger
  let figureDistance = 0,
    pinchScale = this.imgScale;
  $gesture.addEventListener(&#39;touchstart&#39;, e => {
    if (!this.imgLoaded) {
      return;
    }
    if (e.touches.length === 1) {
      let finger = e.touches[0];
      scx = finger.pageX;
      scy = finger.pageY;
      iX = this.imgX;
      iY = this.imgY;
      fingers[finger.identifier] = finger;
    } else if (e.touches.length === 2) {
      let finger1 = e.touches[0],
        finger2 = e.touches[1],
        f1x = finger1.pageX - cClientRect.left,
        f1y = finger1.pageY - cClientRect.top,
        f2x = finger2.pageX - cClientRect.left,
        f2y = finger2.pageY - cClientRect.top;
      scx = parseInt((f1x + f2x) / 2);
      scy = parseInt((f1y + f2y) / 2);
      figureDistance = this._pointDistance(f1x, f1y, f2x, f2y);
      fingers[finger1.identifier] = finger1;
      fingers[finger2.identifier] = finger2;
      //判断变换中点是否在图片中,如果不是则去离图片最近的点
      if (scx < this.imgX) {
        scx = this.imgX;
      }
      if (scx > this.imgX + this.imgCurrentWidth) {
        scx = this.imgX + this.imgCurrentHeight;
      }
      if (scy < this.imgY) {
        scy = this.imgY;
      }
      if (scy > this.imgY + this.imgCurrentHeight) {
        scy = this.imgY + this.imgCurrentHeight;
      }
    }
  }, false);
  $gesture.addEventListener(&#39;touchmove&#39;, e => {
    e.preventDefault();
    if (!this.imgLoaded) {
      return;
    }
    this.maskShowTimer && clearTimeout(this.maskShowTimer);
    this.maskShow = false;
    if (e.touches.length === 1) {
      let f1x = e.touches[0].pageX,
        f1y = e.touches[0].pageY;
      this._drawImage(iX + f1x - scx, iY + f1y - scy, this.imgCurrentWidth, this.imgCurrentHeight);
    } else if (e.touches.length === 2) {
      let finger1 = e.touches[0],
        finger2 = e.touches[1],
        f1x = finger1.pageX - cClientRect.left,
        f1y = finger1.pageY - cClientRect.top,
        f2x = finger2.pageX - cClientRect.left,
        f2y = finger2.pageY - cClientRect.top,
        newFigureDistance = this._pointDistance(f1x, f1y, f2x, f2y),
        scale = this.imgScale + parseFloat(((newFigureDistance - figureDistance) / this.imgScaleStep).toFixed(1));
      fingers[finger1.identifier] = finger1;
      fingers[finger2.identifier] = finger2;
      if (scale !== pinchScale) {
        //目前缩放的最小比例是1,最大是5
        if (scale < this.imgMinScale) {
          scale = this.imgMinScale;
        } else if (scale > this.imgMaxScale) {
          scale = this.imgMaxScale;
        }
        pinchScale = scale;
        this._scale(scx, scy, scale);
      }
    }
  }, false);
  $gesture.addEventListener(&#39;touchend&#39;, e => {
    if (!this.imgLoaded) {
      return;
    }
    this.imgScale = pinchScale;
    //从finger删除已经离开的手指
    let touches = Array.prototype.slice.call(e.changedTouches, 0);
    touches.forEach(item => {
      delete fingers[item.identifier];
    });
    //迭代fingers,如果存在finger则更新scx,scy,iX,iY,因为可能缩放后立即单指拖动
    let i,
      fingerArr = [];
    for(i in fingers) {
      if (fingers.hasOwnProperty(i)) {
        fingerArr.push(fingers[i]);
      }
    }
    if (fingerArr.length > 0) {
      scx = fingerArr[0].pageX;
      scy = fingerArr[0].pageY;
      iX = this.imgX;
      iY = this.imgY;
    } else {
      this.maskShowTimer = setTimeout(() => {
        this.maskShow = true;
      }, 300);
    }
    //做边界值检测
    let x = this.imgX,
      y = this.imgY,
      pClientRect = this.$refs.pCanvas.getBoundingClientRect();
    if (x > pClientRect.left + pClientRect.width) {
      x = pClientRect.left
    } else if (x + this.imgCurrentWidth < pClientRect.left) {
      x = pClientRect.left + pClientRect.width - this.imgCurrentWidth;
    }
    if (y > pClientRect.top + pClientRect.height) {
      y = pClientRect.top;
    } else if (y + this.imgCurrentHeight < pClientRect.top) {
      y = pClientRect.top + pClientRect.height - this.imgCurrentHeight;
    }
    if (this.imgX !== x || this.imgY !== y) {
      this._drawImage(x, y, this.imgCurrentWidth, this.imgCurrentHeight);
    }
  });
},
_scale(x, y, scale) {
  let newPicWidth = parseInt(this.imgStartWidth * scale),
    newPicHeight = parseInt(this.imgStartHeight * scale),
    newIX = parseInt(x - newPicWidth * (x - this.imgX) / this.imgCurrentWidth),
    newIY = parseInt(y - newPicHeight * (y - this.imgY) / this.imgCurrentHeight);
  this._drawImage(newIX, newIY, newPicWidth, newPicHeight);
},
_pointDistance(x1, y1, x2, y2) {
  return parseInt(Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2)));
}

  说明一下fingers是干嘛的,是用来记录当前有多少只手指在屏幕上触摸。可能会出现这种情况,双指缩放后,其中一只手指移出显示屏,而另外一个手指在显示屏上移动。针对这种情况,要在touchend事件上根据e.changedTouches来移除fingers里已经离开显示屏的finger,如果此时fingers里只剩下一个finger,则更新scx,scy,iX,iY为移动图片做初始化准备。

  八、裁剪图片

  这里很简单,就调用pCanvas的toDataURL方法就可以了

_clipper() {
  let imgData = null;
  try {
    imgData = this.$refs.pCanvas.toDataURL();
  } catch (e) {
    console.error(&#39;请在response header加上Access-Control-Allow-Origin,否则canvas无法裁剪未经许可的跨域图片&#39;);
  }
  this.$emit(&#39;sure&#39;, imgData);
}

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Bootstrap框架里使用treeview如何实现动态加载数据

在Nginx中如何配置多站点vhost

在vue中如何实现跳转到之前页面

在express+mockjs中如何实现后台数据发送

The above is the detailed content of How to implement image cropping component using Vue mobile terminal. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

PHP Tutorial
1592
276
How to build a component library with Vue? How to build a component library with Vue? Jul 10, 2025 pm 12:14 PM

Building a Vue component library requires designing the structure around the business scenario and following the complete process of development, testing and release. 1. The structural design should be classified according to functional modules, including basic components, layout components and business components; 2. Use SCSS or CSS variables to unify the theme and style; 3. Unify the naming specifications and introduce ESLint and Prettier to ensure the consistent code style; 4. Display the usage of components on the supporting document site; 5. Use Vite and other tools to package as NPM packages and configure rollupOptions; 6. Follow the semver specification to manage versions and changelogs when publishing.

How to use PHP to develop a Q&A community platform Detailed explanation of PHP interactive community monetization model How to use PHP to develop a Q&A community platform Detailed explanation of PHP interactive community monetization model Jul 23, 2025 pm 07:21 PM

1. The first choice for the Laravel MySQL Vue/React combination in the PHP development question and answer community is the first choice for Laravel MySQL Vue/React combination, due to its maturity in the ecosystem and high development efficiency; 2. High performance requires dependence on cache (Redis), database optimization, CDN and asynchronous queues; 3. Security must be done with input filtering, CSRF protection, HTTPS, password encryption and permission control; 4. Money optional advertising, member subscription, rewards, commissions, knowledge payment and other models, the core is to match community tone and user needs.

Free entrance to Vue finished product resources website. Complete Vue finished product is permanently viewed online Free entrance to Vue finished product resources website. Complete Vue finished product is permanently viewed online Jul 23, 2025 pm 12:39 PM

This article has selected a series of top-level finished product resource websites for Vue developers and learners. Through these platforms, you can browse, learn, and even reuse massive high-quality Vue complete projects online for free, thereby quickly improving your development skills and project practice capabilities.

How to use PHP to implement AI content recommendation system PHP intelligent content distribution mechanism How to use PHP to implement AI content recommendation system PHP intelligent content distribution mechanism Jul 23, 2025 pm 06:12 PM

1. PHP mainly undertakes data collection, API communication, business rule processing, cache optimization and recommendation display in the AI content recommendation system, rather than directly performing complex model training; 2. The system collects user behavior and content data through PHP, calls back-end AI services (such as Python models) to obtain recommendation results, and uses Redis cache to improve performance; 3. Basic recommendation algorithms such as collaborative filtering or content similarity can implement lightweight logic in PHP, but large-scale computing still depends on professional AI services; 4. Optimization needs to pay attention to real-time, cold start, diversity and feedback closed loop, and challenges include high concurrency performance, model update stability, data compliance and recommendation interpretability. PHP needs to work together to build stable information, database and front-end.

How to develop AI intelligent form system with PHP PHP intelligent form design and analysis How to develop AI intelligent form system with PHP PHP intelligent form design and analysis Jul 25, 2025 pm 05:54 PM

When choosing a suitable PHP framework, you need to consider comprehensively according to project needs: Laravel is suitable for rapid development and provides EloquentORM and Blade template engines, which are convenient for database operation and dynamic form rendering; Symfony is more flexible and suitable for complex systems; CodeIgniter is lightweight and suitable for simple applications with high performance requirements. 2. To ensure the accuracy of AI models, we need to start with high-quality data training, reasonable selection of evaluation indicators (such as accuracy, recall, F1 value), regular performance evaluation and model tuning, and ensure code quality through unit testing and integration testing, while continuously monitoring the input data to prevent data drift. 3. Many measures are required to protect user privacy: encrypt and store sensitive data (such as AES

How to build a Vue application for production? How to build a Vue application for production? Jul 09, 2025 am 01:42 AM

Deploying Vue applications to production environments requires optimization of performance, ensuring stability and improving loading speed. 1. Use VueCLI or Vite to build a production version, generate a dist directory and set the correct environment variables; 2. If you use VueRouter's history mode, you need to configure the server to fallback to index.html; 3. Deploy the dist directory to Nginx/Apache, Netlify/Vercel or combine CDN acceleration; 4. Enable Gzip compression and browser caching strategies to optimize loading; 5. Implement lazy loading components, introduce UI libraries on demand, enable HTTPS, prevent XSS attacks, add CSP headers, and restrict third-party SDK domain names to enhance security.

How to use PHP to develop e-commerce backend monetization PHP e-commerce system architecture and profit strategy How to use PHP to develop e-commerce backend monetization PHP e-commerce system architecture and profit strategy Jul 25, 2025 pm 06:33 PM

1. The mainstream frameworks of PHP e-commerce backend include Laravel (fast development, strong ecology), Symfony (enterprise-level, stable structure), Yii (excellent performance, suitable for standardized modules); 2. The technology stack needs to be equipped with MySQL Redis cache, RabbitMQ/Kafka message queue, Nginx PHP-FPM, and front-end separation is considered; 3. High concurrency architecture should be layered and modular, database read and write separation/distributed database, accelerated with cache and CDN, asynchronous processing of tasks, sharing of load balancing and Session, gradually microservice, and establish a monitoring and alarm system; 4. Multiple monetization paths include product price difference or platform commission, site advertising, SaaS subscription, customized development and plug-in market, API connection

vue free finished product resource entrance vue free finished product website navigation vue free finished product resource entrance vue free finished product website navigation Jul 23, 2025 pm 12:42 PM

For Vue developers, a high-quality finished project or template is a powerful tool to quickly start new projects and learn best practices. This article has selected multiple top Vue free finished product resource portals and website navigation for you to help you find the front-end solutions you need efficiently, whether it is a back-end management system, UI component library, or templates for specific business scenarios, you can easily obtain them.

See all articles