Recommend a set of high-value family buckets based on content publishing
2019-03-02 17:10 ≈ 2.8kWords ≈ 17Minutes

Note

This article was automatically translated using Google

Wedge

Last year, because of work, I needed to pick up the code again. However, it is not to develop an enterprise-level management system, but a customer-oriented content publishing platform, which is used to patch together 1/50 of my full set of pan-member framework. At present, the core business has been released to the outside world, so this picture Finally, there is no need to keep it secret.

After waiting for this picture in the second half of the year, I can find an opportunity to write an article in detail. Back to the topic, because it is a customer-oriented system, the appearance is the first. I have been searching for a long time, and I have tried many open source frameworks and some Cloud storage platforms are listed below. It should be noted that, maybe the original purpose of these open source products is not the purpose of my application**, and the positioning in my **combined framework may be somewhat biased :

Mini Program UI Library:

  • WeUI is a small program version of WeUI, Tencent’s official UI component library. It provides a user experience consistent with the WeChat interface style. It is also the most like WeChat among many UIs. That one

    GitHub address: https://github.com/Tencent/weui-wxss

  • iView is a high-quality Vue.js component library released by TalkingData, and iView weapp is their small program version.

    GitHub address: https://github.com/TalkingData/iview-weapp

  • MinUI is a set of concise, easy-to-use, and efficient component library developed by the front-end development team of Mogujie based on the custom component features of WeChat applets, applicable It has a wide range of scenarios, covering the native framework of small programs, mainstream frameworks of various small program components, etc., and provides special command-line tools.

    GitHub address: https://github.com/meili/minui

  • ColorUI** is a UI component library of Css class, not a Js framework. Compared with similar small program component libraries, ColorUI pays more attention to visual interaction! **

    GitHub address: https://github.com/weilanwl/ColorUI

Finally, I chose to use ColorUI mainly in two aspects:

  1. The appearance of ColorUI is very high, you can take a look at this picture I made with Mock

  2. ColorUI uses the traditional css reference, which avoids the above UI component injection and saves code space to a large extent. It is important to know that the package size of the applet is limited to 4M, and there are many in the recent group. People are persuading the author to encapsulate components. What I want to say is that you still have to keep your original intention. The first UI you made was for small programs. There is no need to encapsulate. If you want to adapt to uni-app, just change a parameter. , There is no need to package components.

Content Management System:

  • Halo is a light, concise, and powerful blog system developed using Java and built by Spring Boot. In fact, the main reason for choosing it is not that he uses standard Spring Boot , But the following two aspects:

    1. Well, it’s because of the appearance.
    2. At the same time, its module split is relatively reasonable, and it may also be relatively clear. It is a blog application, so the deployment is simple, because for application integration, introducing an open source system is direct application plus light development, and it will be finished after development. Just throw the docker image directly on the host and start it, which is convenient and fast.

    GitHub address: https://github.com/ruibaby/halo

    Of course, Halo still has its own problems, **Api is too few! ! ! ! **, there are only three interfaces at present, one to get all articles, one to get comments, and the other to get tag categories, but not to get articles under tag categories, actually adding an Api is very simple,And looking at the service in the source code, there is already a method to find articles based on tags, but I don’t know why the author has not thrown out the Api. I guess the author’s psychology may only want to be a blog application, and I don’t want to turn Halo into content. Management platform?

-JPress is a WordPress-like product, developed in Java, and relies on JFinal and Jboot.

Here is a digression. In the open source world, JFinal should not need to be introduced too much. Who doesn’t know JFinal is embarrassed to say that it is mixed in the open source circle. JFinal is an extremely fast WEB + ORM framework based on the Java language, and its core design The goal is rapid development, less code, simple learning, powerful, lightweight, easy to extend, and Restful. While having all the advantages of the Java language, it also has the development efficiency of ruby, python and other dynamic languages! Especially the emergence of jfinal-undertow, **directly affects some developers who have switched to IDEA to return to eclipse! **

Jboot is an open source distributed, commercial-grade microservice architecture, based on JFinal’s MVC, it should actually be introduced like this, JFinal+jboot’s competitors are Spring Boot + Spring Cloud, of course, in the current body The quantity can be said to be the ants swallowing the elephant, but in the future, who knows, as a human being, there must always be ideals.

Gitee address: https://gitee.com/fuhai/jpress

You will see that I have no direct comments on the UI part above, if there is no choice, but I have said a lot here, because Jpress is really a very good open source framework:

  1. Inherit the lightweight of JFinal, with very little basic code, easy to understand and secondary development
  2. The most basic background management has been written, and various localized services such as cloud storage, WeChat official account, Tencent mailbox, and Alibaba Cloud SMS have been connected.
  3. Modularization is very good. It is relatively easy to add new modules. Through the basic modules, it can be changed into a variety of web applications such as blogs, forums, Q&A, shopping malls, etc.

Having said so many advantages, why do I give up using it? There are two main points:

  1. The mirror version on the docker hub is too low, it is still 1.05 (just went up to see, and finally updated), so I can only download the source code to package the latest version, which brings the second problem

  2. The author doesn’t know for what purpose, maybe it is for the ultimate split service? ** Split JPress into a lot of modules, about a dozen, and at the same time reference a lot of maven libraries, which directly caused my local maven library to become 1.95G, I want to say that the concept of microservices is service splitting In this part, the granularity is still controversial. Articles|pages|attachments|users|WeChat|templates|systems, these applications are disassembled into more than a dozen modules, which may be a bit too detailed.

    Of course I believe this is a process. In any case, Jpress is a very good open source platform, and is currently adjusting the positioning of the work, and the author’s update speed is still very fast. It can also be seen from the above tags size that the author should be aware of the jar package quoting problem and have fixed it. At the same time, I saw that the code generator was added to the latest version, but I don’t have time to study in depth for a short time. Maybe you can study it in depth when you do SNS applications in the later stage

Cloud storage:

In fact, there is no good choice for cloud storage. Although Ali’s traffic is free, the storage space is charged monthly. The cost is not high, but it is charged. The CDN that took the cloud again is very good, but it charges. After Qiniu Cloud completes the real-name authentication, there is a 10G free space** that can be used. The download traffic is also free within 10G. The only thing that needs to be paid is the Https traffic. **Well, it looks like the thinking logic of an individual developer, not company behavior, tusk. **

Start assembly

The system is selected, then the next step is to assemble, the assembly is very simple:

Secondary development of Halo

First clone the latest Halo source code, and then throw out the API we need. This is mainly to query articles based on classification and tags. Add a method in package cc.ryanc.halo.web.controller.api.ApiPostController;: Find articles by article classification

1
2
3
4
5
6
7
8
9
@GetMapping(value = "/categories/{categorieName}")
public JsonResult posts(@PathVariable(value = "categorieName") String categorieName) {

final Page<Post> posts = postService.findPostByCategories(categoryService.findByCateName(categorieName));
if (null == posts) {
   return new JsonResult(HttpStatus.NO_CONTENT.value(), HttpStatus.NO_CONTENT.getReasonPhrase());
}
return new JsonResult(HttpStatus.OK.value(), HttpStatus.OK.getReasonPhrase(), posts);
}

It should be noted that the findPostByCategories method here needs to be passed in Categories, there is a written method findByCateName in categoryService, so it needs to be on the class categoryService

1
2
@Autowired
private CategoryService categoryService;

OK, it’s that simple, then directly use the dockerfile in the source code to package it into an image and throw it on the server.

The author also integrated a docker-compose file very intimately, which can also be used, but I typed the command directly.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
version: '2'
services:

  nginx:
    restart: always
    image: nginx
    container_name: nginx
    ports:
      -80:80
      -443:443
    volumes:
      -/etc/nginx/conf.d:/etc/nginx/conf.d
      -/etc/nginx/vhost.d:/etc/nginx/vhost.d
      -/usr/share/nginx/html:/usr/share/nginx/html
      -/etc/nginx/certs:/etc/nginx/certs:ro

  halo:
    restart: always
    image: ruibaby/halo
    container_name: halo
    ports:
      -8090:8090
    environment:
      -VIRTUAL_PORT=8090
      -VIRTUAL_HOST=localhost # Listening address (must be modified)
      -LETSENCRYPT_HOST=localhost # The domain name of the certificate (must be modified)
      -LETSENCRYPT_EMAIL=i@example.com # The certificate owner’s mailbox, which will be reminded when it is about to expire (must be modified)
      -DB_USER=admin # h2 database user name, customized (must be modified)
      -DB_PASSWORD=123456 # h2 database password, customized (must be modified)
    volumes:
      -~/halo:/root/halo

  docker-gen:
    restart: always
    image: jwilder/docker-gen
    container_name: docker-gen
    volumes:
      -/var/run/docker.sock:/tmp/docker.sock:ro
      -/etc/nginx/nginx.tmpl:/etc/docker-gen/templates/nginx.tmpl:ro
    volumes_from:
      -nginx
    entrypoint: /usr/local/bin/docker-gen -notify-sighup nginx -watch -wait 5s:30s
      /etc/docker-gen/templates/nginx.tmpl /etc/nginx/conf.d/default.conf

  letsencrypt-nginx-proxy-companion:
    restart: always
    image: jrcs/letsencrypt-nginx-proxy-companion
    container_name: letsencrypt-nginx-proxy-companion
    volumes_from:
      -nginx
    volumes:
      -/var/run/docker.sock:/var/run/docker.sock:ro
      -/etc/nginx/certs:/etc/nginx/certs:rw
    environment:
      -NGINX_DOCKER_GEN_CONTAINER=docker-gen

Configure Halo background multimedia files to be saved in Qiniu Cloud

This operation is relatively simple. You can directly select it in the background settings-blog settings-attachment settings, and fill in the information corresponding to the application. Bucket is the name of your object storage space. At first, I was confused for a long time.

Use ColorUI to develop small program display page

The usage of ColorUI is very simple, the Demo is in the source code, so although someone in the group has been calling for the author to write a document, I think it shouldn’t be necessary to write it except for a custom tabBar, right? The entire source code is in two folders template and demo

How ​​to view the demo: First create an empty small program by yourself, delete all the files except project.config.json in the path, and then delete the demo folder except project.config.json Copy all the content in the applet path, just open the WeChat developer tool directly, all the implementations are in it, just copy the style you like.

If you need to quote in an existing applet:

  1. You need to copy the two files colorui.wxss and icon.wxss to the root directory of your mini program. If you enable cloud development, it is under miniprogram

  1. Add references in app.wxss
1
2
3
4
5
6
@import "icon.wxss";
@import "colorui.wxss";

view {
  overflow: initial;
}
  1. Just copy which wxml you like, don’t care about the wxss in the page

Description of custom tabBar

What needs to be said is Custom tabBar. The author added a custom tabBar in version 2.0.5. However, the official WeChat official support for custom base library version is 2.5 or more, so setting a custom tabBar needs to be carefully considered. If you are sure to use it, then it is also divided into two steps:

-First, you need to copy the custom-tab-bar folder in the demo package into the root directory of the applet, which is the same level directory as app.json
-Then add “custom”: true in the “tabBar” section of app.json

The custom tarBar can be opened at this time, and subsequent tarBar maintenance and changes should be configured in the custom-tab-bar folder, not in the app.json, here is Amway, because By using a custom tarBar, our tarBar can achieve a transparent effect. At the same time, the icon can directly use font icons instead of 81px pictures. The demo still uses pictures. You can refer to the writing of the two files below.

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
Component({
  options: {
    addGlobalClass: true,
  },
  data: {
    selected: 0,
    color: "#808080",
    selectedColor: "#FFFFFF",
    backroundColor: "#000",
    modalName:false,
    list: [{
      pagePath: "/pages/index/index",
      icon:"icon-repeal",
      text: "communication"
      },
      {
        pagePath: "/pages/halo/index",
        icon: "icon-comment",
        text: "Classroom"
      },
      {
        pagePath: "/pages/translator/translator",
        icon: "icon-cart",
        text: "Translation"
      },
      {
        pagePath: "/pages/walk/walk",
        icon: "icon-footprint",
        text: "Walk"
      },
      {
        pagePath: "/pages/halo/index",
        icon: "icon-list",
        text: "Life"
      }
    ]
  },
  methods: {
    switchTab(e) {
      const url = e.currentTarget.dataset.path
      console.log(e)
      wx.switchTab({
        url
      })
     
    }
  },
  pageLifetimes: {
  }
})

index.wxml

1
2
3
4
5
6
7
8
9
<view class="cu-bar tabbar bg-black shadow padding-tb-sm">

  <view class='action {{index == 2? "add-action": ""}}' wx:for="{{list}}" wx:key="index" data-path="{{item .pagePath}}" data-index="{{index}}" bindtap="switchTab" style='color: {{selected === index? selectedColor: color}}'>
    <view wx:if="{{index != 2}}" class='{{item.icon}}'></view>
    <view wx:if="{{index == 2}}" class='cu-btn icon-order bg-bjfunred shadow'></view>
    {{item.text}}
  </view>

</view>

Use html2wxml plugin for html page rendering

Because we use a small program to display the content of the API article, the content passed is in html format. At this time, the html2wxml plug-in is needed to convert the html file to the wxml file format and present it, which can be searched directly in the background of the small program html2wxml rich text component and opened in the background of the mini program

Make the plug-in declaration in app.json:

1
2
3
4
5
6
"plugins": {
    "htmltowxml": {
        "version": "1.3.1",
        "provider": "wxa51b9c855ae38f3c"
    }
}

Then register as follows in the json file of the required page:

1
2
3
"usingComponents": {
    "htmltowxml": "plugin://htmltowxml/view"
  }

Finally, use it directly in the wxml file that needs the page, and inject the content of the html file into the tag:

1
2
3
<view class='margin-lrji solid-top padding-top'>
  <htmltowxml text="{{post.postContent}}" highlightStyle="{{style}}" linenums="{{false}}" showLoading="{{false}}" bindWxmlTagATap="wxmlTagATap"></htmltowxml>
</view>

Finally, take a look at the rendering effect:

The dilemma of commercial real estate
How to write articles with Typora