foreword
After learning nodejs related knowledge, the first practice is this bookkeeping project. This article is a summary of the problems encountered in the project.
Let’s talk about the technology stack first:
front-end technology: h5 combined with bootstrap framework;
back-end technology: nodejs+Express framework+lowdb database.
gitee address: https://gitee.com/chocolate-roll/cashbook-express.git
Just clone directly.
Preparation
When making preparations, the first thing is to create an express project. You can use the tool express-generator.
Generally use this command to create a project:
express -h '文件名‘
If the template syntax uses ejs, the directive is:
express -e ejs '文件名'
For details, please refer to my article: Express framework from entry to soil
data and database
The database uses a local lightweight database. As a lightweight local storage method, LowDB is an ideal choice for building small projects that do not rely on servers to store and manage data.
This section does not intend to introduce lowdb in detail, mainly to talk about data acquisition and data manipulation.
Understanding of front-end and back-end interactions
Here is my understanding of front-end and back-end interaction. The client sends a request to the server through ajax (or packaged ajax), and the server returns the request to the client. The request sent by the server is a request specified with the backend, that is, the routing rule.
But the server side is actually controlled by the backend, controlling the requests sent by the foreground. If the front-end sends a request, the background will process the request after receiving it, and perform related operations according to the needs of the front-end and the logic of the background.
The request of the foreground is nothing more than data. In my opinion, the logic of the background is actually serving the data. It is a bridge between the data and the foreground. After the data is processed in the background, it will be returned to the foreground, thus realizing a request.
Here I want to talk about my own thoughts. In the above logic, the background is more critical and irreplaceable, because it involves design and logic. But in practical applications, the front desk is also very important, but the front desk can be public and written after the UI design, so it is highly replaceable.
Mixed with a personal idea (whether you don’t look at it), if the front desk only builds a technology stack, it is impossible to eat it for a long time. Later, to seek development, you must slowly switch to the background (full stack), and then switch to design. At present, nodejs is a good way.
Rendering of data in the foreground
What I want to say here is that this bookkeeping project does not use the separation of the front and back, so the front and back are connected, and ajax is not used.
The front desk uses ejs, which is template syntax. My approach is to write the front desk first. Use template syntax for data-related places. Here I will take a more complicated front desk to explain my understanding.
The style is like this:
code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua"
crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<h2>记账本</h2>
<hr />
<% accounts.forEach(item=> {
%>
<div class="card">
<div class="card-header <%= item.type === '-1' ? 'header1' : 'header2' %>">
<%= item.time %>
</div>
<div class="card-body">
<div>
<%= item.title %>
</div>
<div>
<% if(item.type==='-1' ) {
%>
<span class="bage">支出</span>
<% } else {
%>
<span class="bage1">收入</span>
<% } %>
</div>
<div>
<%= item.account %>
</div>
<div><a href="/account/<%= item.id %>" class="x">x</a></div>
</div>
</div>
<% }) %>
</div>
</body>
<style>
.container {
margin: 30px auto;
width: 60%;
}
.container h2 {
margin-bottom: 50px;
}
.card-body {
display: flex;
}
.header1 {
background-color: rgb(241, 220, 222);
}
.header2 {
background-color: rgb(222, 240, 214);
}
.card-body div {
flex: 1;
justify-content: space-between;
}
.card {
margin-top: 20px;
}
.bage,
.bage1 {
display: block;
width: 30px;
background-color: rgb(240, 117, 81);
height: 25px;
color: rgb(255, 255, 255);
border-radius: 2px;
font: 400 13px/25px '微软雅黑';
text-align: center;
}
.bage1 {
background-color: rgb(108, 178, 106);
}
.x {
margin-left: 300px;
font-weight: 550;
}
</style>
</html>
It can be seen that there are no separate projects in the front and back, and the data uses the ejs template syntax. (There are many template syntaxes but the principles are the same), pass the data to this ejs file and then render it.
Data processing in the background
If the background is relative to data processing, it must first link to the database. Then write the interface. Different interfaces correspond to different operations. The operations here are operations on the database (addition, deletion, modification, and query). Different database statements are also somewhat different.
I think the more important point is the id, which is used in this demo to generate an id.
let id = shortid.generate()
In addition, it is also very important to obtain related request messages. You can refer to the blog I posted above for detailed explanations.
postscript
The significance of the demo is that it condenses the development process and sees results immediately. However, because the demo is condensed, it shows more essential ingredients, and it does not involve design, so it is actually quite limited.
Real mastery must start from the project.
Finally, thanks for reading, welcome to pay attention!