Vue, nuxt server rendering, nodejs full stack project, interview Xiaobai’s blog system~~


Vue, nuxt server rendering, nodejs full stack project, interview Xiaobai's blog system~~

Hello, Holle, I’m Li Bai!!

This is the end of the project.

This is a small project on the way to the whole stack. From the design, front-end, back-end, and server-side, all the way through the rapid learning, the quantity is ecstatic~~

I have been exposed to third-party website systems such as WordPress and hexo. Although it is simple, I feel that it is too redundant and cumbersome, too messy, and various restrictions and experience are not good.

So I decided to write my own world,I am the creator and the seeker

The front and back stages are designed with great efforts. The overall style is simple style. When people reach a certain stage, their minds tend to be more and more simple,Minimalism may be the ultimate destination

“Online humble, get a star… “

  • Project deployment
  • Local development
  • Front page
  • back-stage management
  • Gossips and whispers

Project deployment

According to this tutorial, even if you don’t understand the code, you can also own a website system of your own. The background settings are perfect, covering the normal blog functions!!

  1. Pull project wood in GitHub
  2. modifyconfigIn the foldernginx.confFile, need to specify their own domain name, there are notes in the file.
  3. In the server directory, createdataFolder as project directory
  4. uploadwebserverconfig3 folders anddocker-compose.yml1 file.
  5. Open the server terminal and install itdocker(installation tutorial reference:… )~~
  6. After the installation is successful, enter thedataDirectory, runningdocker-compose up -dFor deployment
  7. functiondocker-compose ps or docker ps -aSee if it works, perfect~~

OK, that’s it,“Docker force”

Front desk website: In the background: There’s no problem here~~

“Key points: enter the background first and set up the basic information. Then the front desk can have normal access. Otherwise, it will report an error. OK, perfect. Go home and have a meal to celebrate ~ ~”

One word for deployment, docker is delicious

(Note: to step 5, if the prompt does not exist, install according to the promptdocker-compose, I remember it seems necessary. I don’t have to spend any time here ~ ~)

Local development

1. First, you need to install the database on your computermongodb, andRunning mongodb service

2. Add the following contents to the local hosts file: web server mongodb

usedockerWhen deploying, you need to connect containers with different host names, so you need to specify the names of different projects!!

Beginners have not yet found a better way, if any, welcome to give advice~~

3. Project initiation

NPM install each directory must
npm run dev    ## web
npm run serve  ## admin & server

4. After opening, you need to enter the management background and fill in the information on the first screen before you can access the front desk normally. Otherwise, the front desk will report an error.

(er… I’m lazy here. I didn’t deal with it. There’s no need to deal with it.)

5. It will be ok if there is“Suggestions / optimizations / bugs”You can GitHub at any time「Issues」I, thank you for your support!!

Technology stack used

  • Page design

    • The bottom three designers are all racking their brains
    • The front desk is a little bit more in viewPlain brocade(open source project)
  • Front page

    • Server side rendering framework of Vue Nuxt.js
    • The styles are all hand written
  • Background page

    • vue-cli、element-ui
  • back-end

    • Node.js、MongoDB、docker
  • Front and back station: PC and mobile have been adapted

    • Recently, I found that some mobile phone browsers are not compatible. I only have a millet, which is not easy to test, so please forgive me

“Front page”

“The foreground page is not mapped. You can look at my website directly “

Many people see the website, as long as it is their own website, are calledBlog

Yeah? I don’t like this word very much. I prefer to call it:Mood town or Heart station

The page is very simple, the function is also very simple, so simple that maybe only the first screen of the home page can make people feel a trace of amazing.

It is mainly open to passers-by, tourists and all people. It can comment and view without registering an account.

Come to see your website, is to give you face, comment is also interesting to you. Why don’t you want me to register an account so that I can comment and view articles?? Farewell (full score for friendliness)

This is mine“Mood town”or“Heart station”, covering the functions of mainstream blogs

#Home page
#Article details (comment function
#Article list (summary of data
#Phrase list (send a circle of friends
#Subscription notice
#Personal introduction (naive bravery
#Rainy day (serene or beautiful

A total of 7 pages, it is relatively simple, the normal personal website, the above should have functions, there should be some animation transition also have, fancy No.

Although sparrow small five viscera complete, a complete display of a person’s emotions, the heart of what they want

Background page

Only administrators can enter the background, so only the pictures in the background can be put

Note: the picture is the first version, the function of subsequent update does not update the picture

Sign in

The first time you enter the background, you need to register your account first. The account can only be registered once to avoid being forgotten. If you have forgotten, operate the database by yourself

The effect of the input box imitates the Nuggets, people are always envious of things that are forced by cattle~~

Vue, nuxt server rendering, nodejs full stack project, interview Xiaobai's blog system~~

Vue, nuxt server rendering, nodejs full stack project, interview Xiaobai's blog system~~

home page

The summary of all the data is like the cost of living every month. If you don’t keep an account, do you know how much you eat all year round and how many pieces of trouser pockets you have left.

Local tyrant & moonlight clan is another matter. If you have a rich woman, please contact me. The mailbox is at the bottom

Well, I’ll give it directly [email protected]

Vue, nuxt server rendering, nodejs full stack project, interview Xiaobai's blog system~~

Publish articles

Upload background image and background music, upload to the server by default, can be selected in setting

For website performance, it is recommended to compress the images and upload them according to the specified size

Hidden article, how to say, happy is good~~

Editors are mainstreamMarkdownIf you can’t, I sincerely suggest that you learn the three steps in one minute

  1. Take out the pen and paper and write
  2. Take out the mobile phone, clap, paper
  3. Upload to Nuggets

One minute from entry to give up, use hand pen to write, take photos and post articles. People who know how to innovate are always at the forefront

Others laugh that I am too crazy, I laugh others can not see through

Vue, nuxt server rendering, nodejs full stack project, interview Xiaobai's blog system~~

Vue, nuxt server rendering, nodejs full stack project, interview Xiaobai's blog system~~


Can delete, reply to comments, view the current comment of the article, is not allowed to edit

What people say is from the heart. Even if the emperor and Laozi come, they will not give them privileges!!

Vue, nuxt server rendering, nodejs full stack project, interview Xiaobai's blog system~~

Vue, nuxt server rendering, nodejs full stack project, interview Xiaobai's blog system~~

set up

Note: the first screen information needs to be filled in completely before the front desk can be accessed normally (the filing information is optional)

  • Background information: nickname, avatar, etc. (the avatar is unified in the front and background)
  • Website information: website name, description, SEO, etc
  • Front page: home page information, background music of different pages, and record information at the bottom
  • Personal introduction: the personal introduction page of the front desk, let you know you for a while ~ ~ (please refer to my website)
  • Upload file: upload pictures and music. You can specify the upload location. The default is the server (alicloud OSS is optional)
  • Email type: at present, only QQ and 163 email are supported (other required mailbox can be expanded by themselves)
  • Comment function: nickname, mailbox, administrator logo (the front page highlights the administrator’s logo)
  • Comment ID: that is, the administrator ID, which is confirmed according to the comment email and nickname
  • Comment notification: when a comment is posted, an email is sent to notify the respondent
  • Subscription notification: when publishing an article, group e-mail notifies the subscribed mailbox
  • Pass code: to enable the notification function, you need to fill in this code, which can be obtained in the mailbox settings (open the SMTP server), and it should be consistent with the filled email
  • Change Password: need the original password, forget to do it by yourself~~

(tip: you can view F12 for your saved account and password)

(be sure to fill in the basic information completely, so as to avoid the ignorance bug. If you want to solve the problem, ask me for 10 yuan. Don’t bargain, unless you introduce me a girlfriend.)

Vue, nuxt server rendering, nodejs full stack project, interview Xiaobai's blog system~~

Vue, nuxt server rendering, nodejs full stack project, interview Xiaobai's blog system~~

Front page logo

  • Find the directory and replace the pictures in it (4 needed, please refer to the original pictures) (/ Web / static / image / logo /)
  • Two logo on the front page: 456 * 200 (one white and one black transparent)
  • Logo of sub page: 200 * 200
  • ICO icon in tab bar: optional

Another: the size of the logo can be similar, you can debug it yourself, upload a variety of pictures when the logo is also OK, mainly depends on personal hobbies
Note: logo supporticonfontIcon, specific can see the source code (for some people who do not understand the operation, so use the picture here)

I didn’t expect this design. Would you like to give me a score? Please comment on it. Hahaha~~

Online humble, GitHub here, the first time to post for a star


As the saying goes, “do what you want to do, you can’t be careless for a moment.”.

Technical notes have its significance of existence. Paper books recognize their own value and always know how to survive.

After all, no rules, no square!

For my website, many netizens ask if there is a template, certainly not, this is my own handwritten ah. Of course, I understand that students who ask these questions still need time to hone their current abilities or ideas.

Therefore, I decided to open source, so that even mice, rabbits and cabbages can operate a simple system of sending articles, taking notes and personal introduction.

After this period of day and night toss, finally ended, with practical operation to consolidate the past learning, more in-depth understandingJavaScriptThe most problematic nonnuxtThe way to learn code is to dig and fill all the way.

As long as you have something to return to, the scenery along the way, no matter good or bad, will become the most beautiful and unforgettable existence in memory. It’s a worthwhile trip.

If you rely too much on something, you may have worries about everything, you can’t allow yourself to pursue yourself, or you may not say a word one day. What is the significance of my existence??

I often remind myself that learning and continuous progress are the ultimate destination. Only what belongs to me is the ultimate source of security.

Don’t you understand? can’t?? It’s OK. I can learnIf you can’t learn, you have to work harder, pay twice or three times the time and sincerely to learn. Sooner or later, you will learn.


Share their own a simple project stack to everyone, interested can learn, whatSuggestions / bugs / optimizations can be mentionedThank you!!.

The most important point is to find a star

There should be no problem here, if there are any loopholes, please contact me, thank you~~

I can do things, you can; others will, we can do the same, please believe in yourself, there is nothing in the world is impossible, come on!!

Thank you for your support. Please accept your advice and suggestions

Looking forward to working with students with technical requirements [email protected]

(at the beginning, I feel something is wrong with the code. It seems that there are too many words, but they can’t be regarded as mood articles. I’d like to delete them as soon as possible. I guess the most annoying thing for technical masters is long speeches

The unknowns in life are always changeable, which makes people have to give in to reality. After 25 days, they formally joined the front-end talent pool and began to look for new directions and opportunities.

————July 25, 2020 12:30