Golang's practical development blog function article: article details display browsing and recording views

In the previous section, we completed the post publishing function and image upload function, but have not yet displayed the article. In this section, we will introduce how to show articles and increase the count of views.

Article details page html code

{% include "partial/header.html" %}
<div class="layui-container index">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
            <div class="layui-card article-detail">
                <div class="layui-card-body">
                    <h1 class="title">{{article.Title}}</h1>
                    <div class="meta">
                        {% if article.Category %}<span><a href="/?category_id={{article.CategoryId}}">{{article.Category.Title}}</a></span>{% endif %}
                        <span>{{stampToDate(article.CreatedTime, "2006-01-02")}}</span>
                        <span>{{article.Views}} 阅读</span>
                        {% if hasLogin %}<span><a href="/article/publish?id={{article.Id}}">编辑</a></span>{% endif %}
                    </div>
                    <div class="article-body">
                        {{article.ArticleData.Content|safe}}
                    </div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="article-prev-next">
                        {% if prev %}
                        <li>上一篇：<a href="/article/{{prev.Id}}">{{prev.Title}}</a></li>
                        {% endif %}
                        {% if next %}
                        <li>下一篇：<a href="/article/{{next.Id}}">{{next.Title}}</a></li>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md4">
            {% include "partial/author.html" %}
        </div>
    </div>
</div>
{% include "partial/footer.html" %}

We use the left and right structure for the article details page, and the main information such as the article title, article content, previous and next articles are displayed on the left. The latest articles, related articles and other contents related to the article are displayed on the right.

In the information displayed on the left, we noticed that the article classification is used to display the article classification.{{article.Category.Title}}, This is because when we define the article model, article.Category points to the article classification model, article.Category.Title can access the name of the article classification.

At the same time, we used the article release time here{{stampToDate(article.CreatedTime, "2006-01-02")}}to display. stampToDate is our customized template function before, which can format the timestamps in the given format. Here we output the timestamp published by the article in the format "2006-01-02".

We use tags for the output of article content{{article.ArticleData.Content|safe}}. Here, article.ArticleData points to the article content table article_data model, and the content of the article can be read through article.ArticleData.Content. Here we use the |safe filter tags in the template language. If we do not use the safe tag, the template parsing is for safety, and syntax tags such as HTML tags and JS will be automatically escaped to prevent xss attacks. After escape, it is no longer html, which does not meet the requirements of the output of rich text content of our article, so here we need to use safe to prevent it from automatically escaping.

Article details page controller function

The article details page controller is written in controller/article.go. We add it in article.goArticleDetail()function:

func ArticleDetail(ctx iris.Context) {
	id := ctx.Params().GetUintDefault("id", 0)
	article, err := provider.GetArticleById(id)
	if err != nil {
		NotFound(ctx)
		return
	}
    _ = article.AddViews(config.DB)

	ctx.ViewData("article", article)
	ctx.View("article/detail.html")
}

This function first passesctx.Params().GetUintDefault()To get the id of the article, we read the article based on the id of the article. If the article does not exist, then useNotFound()Function, output 404 error. After checking the article, we will use it againctx.ViewData("article", article)Inject article into the template so that the template can use the article variable. Then passctx.View("article/detail.html")To associate the controller with the article details template.

We used it hereprovider.GetArticleById(id), This function needs to access the database to read the article content, so we extract it from the provider directory. We open provider/article.go and add it in itGetArticleById()function:

func GetArticleById(id uint) (*model.Article, error) {
	var article model.Article
	db := config.DB
	err := db.Where("`id` = ?", id).First(&article).Error
	if err != nil {
		return nil, err
	}
	//加载内容
	article.ArticleData = &model.ArticleData{}
	db.Where("`id` = ?", article.Id).First(article.ArticleData)
	//加载分类
	article.Category = &model.Category{}
	db.Where("`id` = ?", article.CategoryId).First(article.Category)

	return &article, nil
}

Here, when we read article information from the database based on the article id, we first use itPreload("ArticleData")Let’s read the content table information of the article as well.

When we set up the article model, category is not associated with the article table through foreign keys, so we need to load the article classification separately.

Increase article visits

We used the above when the user accessed the article details page._ = article.AddViews(config.DB)To increase the number of views of the article. For intuitiveness, we use the page to access it once by default as adding a single view. In actual project applications, we may also need to process the user's IP and UA, differentiate the search engine's spiders, and also do access records and other information, rather than simply accumulating.

We used abovearticle.AddViews(), indicating that this is a built-in method for the article model, so we add in model/article.goAddViews()method:

func (article *Article) AddViews(db *gorm.DB) error {
	article.Views = article.Views + 1
	db.Model(Article{}).Where("`id` = ?", article.Id).Update("views", article.Views)
	return nil
}

Here we need to pass in the db object from the upper layer. Therefore, the db object is in config. If we directly access config in the model, it will lead to nested dependencies and will cause the golang project to fail to compile. The update function we use to update the article views here. The Update function can directly update the corresponding fields without reading the table information again after the update, which can reduce a query operation.

Configure article details page routing

The above article details page is ready. We also need to add the article route to allow users to access the article details page. We add it under the article group in route/base.goarticle.Get("/{id:uint}", controller.ArticleDetail), the code for the final article grouping is as follows:

article := app.Party("/article", controller.Inspect)
{
    article.Get("/{id:uint}", controller.ArticleDetail)
    article.Get("/publish", controller.ArticlePublish)
    article.Post("/publish", controller.ArticlePublishForm)
}

We used it here{id:uint}To get the article id. Here we define the type of id as an unsigned plastic digit. After this definition, the article details controller can be passedid := ctx.Params().GetUintDefault("id", 0)Come to get it.

Verification results

Let's restart the project, we first access it in the browserhttp://127.0.0.1:8001/article/1Let’s take a look at the results and verify whether the article publishing process is normal. If nothing unexpected happens, you can see this picture:

Tutorial use case source code

The complete project sample code is hosted on GitHub. Visit github.com/fesiong/goblog to view the complete tutorial project source code. It is recommended that while viewing the tutorial, carefully compare the source code, which can effectively improve the code speed and deepen your understanding of blog projects. It is recommended to fork a copy directly to make modifications on it. Welcome to Star.