Understanding the website traffic and user behavior is crucial for operators.AnqiCMS as an efficient enterprise-level content management system provides comprehensive data statistics and spider monitoring functions in the background.This data not only helps us analyze website performance and optimize content strategy, but also has the potential to provide more intuitive information to users or visitors in specific scenarios by displaying in the form of charts on the front end.

How can we cleverly present these valuable data from the AnqiCMS backend on the website front end in the form of charts for intuitive display?This requires us to combine the flexible features of AnqiCMS with some front-end technologies to achieve this goal.

Insight into AnqiCMS backend data

AnqiCMS's comprehensive data statistics feature on the backend. It allows convenient viewing of the website'sSpider access record chart/Traffic Record ChartAs well as detailed record details. In addition, it can track Baidu, Sogou, Bing, Google, and other search engines.Daily inclusion data situation.

This data is displayed with intuitive charts and lists on the backend homepage and a dedicated 'Data Statistics' module.For example, you can see visitor IP, visit volume, bounce rate, and the frequency and crawling paths of different search engine spiders, etc.This first-hand data is an important basis for website optimization, it can help us understand which content is popular, which pages need improvement, and even monitor the actual effects of SEO strategies.

However, these data are default for administrators to use in the background.If you want to display on the front end, for example, if you operate a blog focused on SEO technology sharing and want to display the trend of spider visits to the website; or if you run a community-oriented website and want to show users the activity and traffic overview of the website, you need to "draw out" the background data in some way and visualize it.

The approach and method of introducing background data to the front end

AnqiCMS is developed based on the Go language, its modular design and high customizability provide us with the possibility to present background data on the front-end. As of now, the front-end template tags of AnqiCMS (such assystem,archiveList主要用于 calling content, system configuration, etc., and does not directly expose traffic or crawler access original statistical data methods, therefore, we need to adopt some customized development ideas.

The most core method isTo obtain data through a custom development interface (API)The powerful Go language backend of AnqiCMS allows developers to easily expand functionality. We can:

  1. Customize the backend interfaceIn the AnqiCMS Go backend, write one or more interfaces (APIs) specifically for querying and returning traffic or crawler data from the background statistics module.These interfaces can extract original data from the database and perform necessary aggregation and processing (such as, daily and weekly statistics of visits, counting visits of different crawlers, etc.), and then return it to the front-end in JSON format.

    This interface needs to ensure data security, consider only returning public visible aggregated data, or setting certain permission verification mechanisms for accessing the interface.

  2. Front-end JavaScript data requestOnce the backend provides such an API interface, the front-end can use JavaScript (for example, usingfetchThe API or jQuery's$.ajaxto asynchronously request these data.

    The JSON data retrieved contains information such as timestamps, access volume, crawler type, and access times, which are all the original data needed to draw charts.

Implementation details and visualization in the front-end template

After the data is successfully retrieved from the backend through a customized interface and delivered to the frontend, the next task is to choose an appropriate frontend chart library for visualization.There are many excellent JavaScript chart libraries available on the market, such as ECharts, Chart.js, Highcharts, etc., which can help us easily draw professional and beautiful traffic or crawler access trend charts.

Here we take ECharts as an example to simply explain how to implement it in the front-end template of AnqiCMS:

  1. Introduce the chart library: Firstly, you need to include the JavaScript file of the selected chart library in the AnqiCMS template. This is usually in the public header file of your template (such asbash.html) or at the bottom of a specific page. You can use AnqiCMS'ssystemtag to get the static file path of the template:

    {# 在 template/default/bash.html 或其他公共头部文件 <head> 标签内引入 #}
<script src="{% system with name='TemplateUrl' %}/js/echarts.min.js"></script>

    Here it is assumed that you have already included the ECharts library file (such asecharts.min.js) Place in/public/static/js/directory.

  2. Define the chart container in the page: In the front-end page template where you want to display the chart (for exampleindex/index.htmlorpage/detail.html) Add an HTMLdivelement as the container for the chart. Give thisdivSet a unique ID and set its width and height:

    <h2 class="section-title">网站流量趋势</h2>
<div id="website-traffic-chart" style="width: 100%; height: 400px;"></div>


<h2 class="section-title">搜索引擎爬虫访问情况</h2>
<div id="spider-access-chart" style="width: 100%; height: 300px;"></div>

  3. Write JavaScript code to render the chartThe last, at the bottom of the template file containing the chart container, or in a separate JavaScript file (also throughsystemLabel introduction), write the logic to request data and render the chart.

    `html