Blog system based on express + mongodb + pug-pug, mongodbpug

Blog system based on express + mongodb + pug-pug, mongodbpug

I wanted to build a blog myself a long time ago. I started to use hexo + github, but it was always troublesome to change my computer. Later, I used WordPress, but I always felt that I had no technical skills. I wrote it on both the frontend and backend, and I had to submit a ticket to solve the problem, in the end, I wrote it directly in the blog garden.

Recently it was relatively idle, so I took the time to simply read node. js and then looked at express. By the way, I set up a blog to practice it. Of course, it is not only a simple practice, but also a kind of exploration or exploration, because although the company has a big bull, it is more busy with business, basically, we don't have time to learn new things to try to solve various problems we encounter during development, including repeated writing of a large number of identical code and difficult maintenance in the future.

Before that, I did not really write back-end projects. Although I have written a few simple pages using PHP + MySQL in school, I have been graduating for almost a year and it has been useless for a long time, I almost forgot about it. So now we use node. js + mongoDB is also from scratch. During the writing process, some optimizations and adjustments are made to the project structure. However, the deeper the understanding, so let's keep the next version for more changes.

This version is a preliminary version, and the basic functions are complete. However, after more than three weeks of practical operations and reading blogs from other people, I have a deeper understanding of the code structure and engineering structure, so there are still many optimizations. However, I don't want to wait until I finish writing it again. Instead, I will first record the pitfalls encountered during this time period. The longer the time, the more I forget. I will record the records earlier and what else I can leave, it can also help other new users get started more easily.

This version uses libraries, including node framework express4.4X, database mongoDB, and template engine pug (formerly jade ).

If you don't talk nonsense, go to the topic.

The pug. js I used in the project is of the latest version 2.0. 1. Basic Documents

There is no ending label in pug, and indentation must be strictly used to represent the relationship between parent and child elements.

Before Compilation:

Doctype htmlhtml head title pug basic body p. text must be strictly indented to indicate the relationship between parent and child and sibling Elements

After compilation:

<! DOCTYPE html> 2. Content Rendering (interpolation)
The rendering methods of various template engines are similar. Here we mainly show you how to write interpolation in pug templates.
Method 1:
Insert a fixed string and press a space next to the tag to enter the string.
When inserting a variable, the output character is # {}; the output html code is used! {}
JavaScript expressions are also supported when braces are used for interpolation.
Before Compilation:
-Var string = "string";-var html = "<span> htmlString </span>"; p: Insert a string directly, you only need to press a space p behind the tag to render the variable # {string} as a string}
P braces support JavaScript expressions # {string. toUpperCase ()}
P variable to be rendered as html code! {Html}
After compilation:
<P> insert a string directly, just press a space behind the tag </p> <p> variable string to be rendered as a STRING </p> <p> variable to be rendered as html code <span> htmlString </span> </p>
Method 2:
1. Use = to insert text
2. Use! = Insert html
3. JavaScript expressions are also supported.
Before Compilation:
-Var string = "string";-var html = "<span> htmlString </span>" p: Insert a string directly, just press a space p = 'variable to be rendered string' + string. toUpperCase () p! = 'Variable to be rendered as html Code' + html
After compilation:
<P> insert a string directly, just press a space behind the tag </p> <p> variable STRING to be rendered as a STRING </p> <p> variable to be rendered as html code <span> htmlString </span> </p>
3. Attributes
Add attributes to an element in a pug Template
Simple addition
Before Compilation:
A (class = 'link' href = 'www .baidu.com ') Baidu
After compilation:
<A class = "link" href = "www.baidu.com"> Baidu </a>
Quadratic operation
Before Compilation:
-Var active = truea (class = active? 'Link-activity': ''href = "www.baidu.com") Baidu
After compilation:
<A class = "link-active" href = "www.baidu.com"> Baidu </a>
Class Condition
Before Compilation:
- var currentUrl = '/about'a(class={active: currentUrl === '/'} href='/') Homea(class={active: currentUrl === '/about'} href='/about') About
After compilation:
<a href="/">Home</a><a class="active" href="/about">About</a>
Property Interpolation
Before Compilation:
-Var btnType = 'info'-var btnSize = 'lg 'button (type = 'bucket' class = 'btn btn-' + btnType + 'btn-'+ btnSize) //-button (type = 'button 'class = 'btn btn-$ {btnType} btn-$ {btnSize}') in ES6 Environments }')
After compilation:
<button class="btn btn-info btn-lg" type="button"></button><button class="btn btn-info btn-lg" type="button"></button>
4. Statements
The statements include for, if, and switch in programming languages. They are only slightly different in pug.
Case
The case statement is similar to the switch statement in JavaScript.
Before Compilation:
- var friends = 10case friends  when 0    p you have no friends  when 1    p you have a friend  default    p you have #{friends} friends
After compilation:
<p>you have 10 friends</p>
If
Before Compilation:
-Var user = {name: 'Tom '}-var age = false # user if user. description h2.green if user. name is true p. description = user. name
Else if age h2.blue if age is true p. description = age else h2.red Description p. description User has no description
After compilation:
<H2 class = "green"> If user. name is true <P class = "description"> foo bar baz </p>
Each
Before Compilation:
- var arr = ['zero', 'one', 'two'];- var obj = {name:'tom',age:21,country:'china'};ul.array  each val, index in arr    li= index + ': ' + valul.object   each val, key in obj     li= key + ': ' + val
After compilation:
<ul class="array">  <li>0: zero</li>  <li>1: one</li>  <li>2: two</li></ul><ul class="object">  <li>name: tom</li>  <li>age: 21</li>  <li>country: china</li></ul>
5. include
Using include, you can introduce another pug component in a pug template.
Before Compilation:
//-Index. pugdoctype htmlhtml title include usage body include components/head. pug p in index. head. pug and footer. pug two components include components/footer. pug
//-Components/head. pugh1 this is the head. pug component
//-Components/footer. pugfooter this is the footer. pug component
After compilation:
<! DOCTYPE html> 
<Footer> This is the footer. pug component </footer>
</Body>
</Html>
6. template inheritance
Include can help us to write a lot less repetitive code, and it is easier to maintain each component. Inheritance can make templates more flexible and further reduce our workload.
In pug, we can use extends to inherit templates and use block to define content that may change or be scalable.
Before Compilation:
//-Layout. pugdoctype htmlhtml head title Template Inheritance usage
//-Here is the Extensible link area block links link (rel = "stylesheet" href = '/main.css') script (src = "/jquery. js") body
Head Public headers of all pages

//-Here is the Scalable content Area block content
//-Here is the Scalable script area block scripts
Script (src = "/bootstrap. js ")
//-Index. pugextends layout. pugblock links link (rel = "stylesheet" href = '/bootstrap.css') link (rel = "stylesheet" href = "/index.css ") block content h1 template inheritance usage p use extends to inherit the template p use block to customize the content block append scripts script (src = "index. js ")
After compilation:
<Doctype html> 7. inline script
We sometimes embed some JavaScript code in html pages, which is also very simple in pug.
Before Compilation:
Doctype htmlhtml head title inline script body h1 needs to inline some script. console. log on this page ('Add a. symbol after the script ')
After compilation:
<Doctype html> 
 
 
Conclusion:
The above basically covers 95% of pug content, and there is nothing left to go into details, such as filters and comments. The markdown filter is a good thing, however, I think it is generally a personal project, such as a blog.
These things are enough for your use in the project. For the remaining 5%, you can go to the official website and learn about them. They are quite simple pug. js.
In addition to indentation, I found that pug can also create templates and interpolation based on standard html writing formats, which can be easily implemented through the #{} method.
However, I didn't see instructions on how to create a template using this method on the official website. This is the first time I used pug (jade), so I don't know if it will be compatible with previous versions, if you know something, please let me know. Thank you!