Without further ado, first put the project experience address (adapted to mobile) : Famine in the palm

Front-end technology stack

  • vue
  • vue-router
  • vuex
  • webpack
  • axios
  • better-scroll
  • lavas
  • vuetify

Back-end technology stack

  • egg
  • express
  • mysql
  • mongo

operations

  • nginx
  • pm2
  • https
  • Oss Object Storage
  • cdn
  • DNS resolution cloud

The starting

Before I started, I only had front-end knowledge of VUE on my tech stack. The back-end only knows a little about mysql, and has no basic operation and maintenance. Much of what kept me going, besides the value of the project itself, was the novelty of exploring uncharted technical territory.

The front end

I’ve been paying attention to chrome’s progressive Web applications since March of ’17 and wanted to give them a try. Start with Lavas, which was originally designed to quickly plug in PWA-related features, including skeleton screens, offline caches, AppShells, and more.

  • The skeleton screen simply replaces the Loader, making users more patient while waiting for pages to load. Skeleton screen has greatly improved user experience. Taobao and Ele. are you using skeleton screen in a large number of pages?
  • AppShellRefers to the common component likeheader.slider.At the bottom of the navigationAnd put it in the root component. Other pages that have routes need onlyconfigurationParameters, and the basiseventBusInstead of going to the child component to import, you can handle the event you passCommon componentsIn an elegant way.
  • Offline cache, which means that the basic page is displayed even when the Internet is offApp structure, rather than being disconnected from the Internet.service workerIf you are interested, you can go to the official lavas site, where there is a good documentation.

The back-end

At the beginning, I just wanted to provide some data services. At the back end, I wrote some simple interfaces with Express and used Mongo to store the data of unstructured item data. Pm2 is used during deployment. Pm2 is used to restart nodes when code fails, rather than the entire service crashes. When I first went live, I found that there was an AD placement, something called DNS hijacking. Is the third party network operator in the DNS server to do a trick, open a DNS cloud resolution.

As the number of users increased, I began to want to practice some more complex features, so I plugged into the user system. Login, register, post, comment, reply and so on. Express struggled to support community-specific business logic, and I needed a more rigorous back-end architecture, so I started using Egg. The KOA-based development experience of Egg is very similar to the MVC development pattern of the Java backend:

  • The Router schedules requests to be processed by the Controller
  • Controller handles specific business logic
  • A service is responsible for dealing with data, and there’s some logic for adding, deleting, changing, and checking.eggIt also has its own plug-in accessmysqlandmongoAnd set strict rules. It is worth mentioning that useeggAccess to theAli cloudSome of your services will come in handy. Such as accessossUpload files. Oss, by the way, is powerful if you want to use itDifferent sizesorDifferent compressionThan the picture, just need to add after the picture path in oss console added goodStyle nameYou don’t have to change the source file.ossAccess to thecdnIt is also very convenient. The optimization of network link layer greatly improves the loading speed of static resources.

The service side

One of the same origin policies is the same protocol, which means that HTTP cannot access the HTTPS interface. Therefore, full site HTTPS is implemented to implement PWA-related features.

Alibaba cloud and Tencent cloud actually provide free HTTPS certificates, but not wildcard type, that is, your secondary domain name can not be used. Since I have opened express and Egg services, I applied for the certificates of Ali Cloud and Tencent Cloud respectively and used NGINx as the agent. In order to make the old user accessible, you need to redirect HTTP port 80 to HTTPS port 443. The HTTPS deployment process now seems to be simple, just put the certificate in the specified directory on the site, and then change the configuration of nginx. However, due to the lack of previous knowledge of operation and maintenance, it took quite a while.

How to Stick with it

Individual projects tend to fizzle because of the lack of immediate feedback. Here are some tips to help you keep going:

  • The starting point of a project can be a great motivator for you, or a great motivator for youFreedom of wealthIs possible, or can promoteThe communityTo achieve personal glory
  • Embrace the community, figure out where your direct users are and where they often congregateBBSShare your thoughts and progress and get feedback
  • Access statistics, observation site every dayviewsandNew usersUps and downs are good feedback (Growingio is a good choice)
  • Try to monetize and start adding ads after a certain amount of traffic, for exampleTaobao union. From the primaryTaobao guestTo have aDiamond boothIt’s fun to upgrade and fight monsters all the way.

conclusion

For me, the biggest gain from completing this project should be the improvement of my vision. My perspective is not limited to the front end, but also enables me to undertake more tasks and responsibilities in the actual work.