Personal blog system (with source code)

I have learned so much theoretical knowledge , It's always boring , Let's do a small project today , Let's test the previous learning achievements ! Small partners who need source code can come and have a look : Personal blog system ; This small project mainly imitates CSDN It's done , But there are still few functions , Just write out some main functions , Let's have a look ???

Catalog

• ?? One . preparation
• • ??1. establish maven project
  • ??2. Introduce various dependencies
  • ??3. Create the necessary directories
  • ??4. Write code
  • ??5. Packaged deployment ( be based on smart Tomcat)
  • ??6. verification
• ?? Two . Write front end code
• ?? 3、 ... and . Database related code
• ?? Four . Specific functions
• • ??1. Query blog list page function
  • ??2. Query blog details page function
  • ??3. Login function
  • ??4. Check the current page login status function
  • ??5. Display user information to page function
  • ??6. Logout function
  • ??7. Post blog function
  • ??8. Delete blog function
• ?? 5、 ... and . Summary and reflection

---

?? One . preparation

The main preparation here is to test whether the environment is normal , Write some simple code to verify whether the page can be accessed smoothly !

??1. establish maven project

??2. Introduce various dependencies

Here we mainly introduce various dependent packages that need to be used :

<dependencies>
        <!-- https://mvnrepository.com/artifact/javax.servlet/javax.servlet-api -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <!-- https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.6.1</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>


    </dependencies>

All in dependencies Inside the label

??3. Create the necessary directories

stay webapp You can place the prepared front-end pages under the directory , Remember not to put it in WEB-INF Under the table of contents !!!

??4. Write code

Write simple code here to test the environment

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.getWriter().write("Hello world");
    }
}

??5. Packaged deployment ( be based on smart Tomcat)

Use smart Tomcat One click package deployment

??6. verification

In this way, there will be no problem with the environment , You can write the following code !

---

?? Two . Write front end code

The front page directly demonstrates the results :
The login page :

Blog list page :

Blog details page :

Blog editing page :

---

?? 3、 ... and . Database related code

Database related code needs to determine how to write it according to requirements : To complete the blog project, the two main points are users and blog posts, so you need to create two tables : User table and blog table , Then complete various operations such as adding, deleting, modifying, and querying
Just use the user table as an example :
First, you need to create related tables in the database , Before adding :

drop table if exists user;
create table user(
    userId int primary key auto_increment,
    username varchar(128) unique,     --  The user name will be used to log in later , User name cannot be duplicate 
    password varchar(128)
);

Then connect to the database (JDBC) The operation of :

import com.mysql.jdbc.jdbc2.optional.MysqlDataSource;

import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
public class DBUtil {
    private static final String URL = "jdbc:mysql://127.0.0.1:3306/my_blog?characterEncoding=utf8&useSSL=false";
    private static final String USERNAME = "root";
    private static final String PASSWORD = "123";

    // Design lazy singleton mode   Connect when necessary , Pay attention to thread safety 
    private volatile static DataSource dataSource = null;
    private static DataSource getDataSource(){
        if(dataSource == null){
            synchronized (DBUtil.class){
                if(dataSource == null){
                    dataSource = new MysqlDataSource();
                    ((MysqlDataSource)dataSource).setURL(URL);
                    ((MysqlDataSource)dataSource).setUser(USERNAME);
                    ((MysqlDataSource)dataSource).setPassword(PASSWORD);

                }
            }
        }
        return dataSource;
    }
    // Connect 
    public static Connection getConnection() throws SQLException {
        return getDataSource().getConnection();
    }
    // Release resources 
    public static void close(Connection connection, PreparedStatement statement, ResultSet resultSet){
        if(resultSet != null){
            try {
                resultSet.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if(statement != null){
            try {
                statement.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
        if(connection != null){
            try {
                connection.close();
            } catch (SQLException e) {
                e.printStackTrace();
            }
        }
    }
}

Then you can use the user id To find information :

 public User selectById(int userId){
        Connection connection = null;
        PreparedStatement statement = null;
        ResultSet resultSet = null;
        try {
            connection = DBUtil.getConnection();
            //sql sentence 
            String sql = "select * from user where userId = ?";
            statement = connection.prepareStatement(sql);
            statement.setInt(1,userId);
            // perform sql sentence 
            resultSet = statement.executeQuery();
            // Ergodic result   Because here is the primary key , Therefore, it is also used if instead of while
            if(resultSet.next()){
                User user = new User();
                user.setUserId(resultSet.getInt("userId"));
                user.setUsername(resultSet.getString("username"));
                user.setPassword(resultSet.getString("password"));
                return user;
            }
        } catch (SQLException e) {
            e.printStackTrace();
        }finally {
            DBUtil.close(connection,statement,resultSet);
        }
        return null;
    }

Of course, here we need to find things that need data , To find , Other operations are similar to this , There is no more demonstration here !

---

?? Four . Specific functions

The functions here are basically implemented by first agreeing on the front and rear end interaction interfaces , Then write the client request , And the corresponding processing of the server , The only connection between the front end and the back end is these agreed interfaces ! Here I use the query blog list page to demonstrate the code !

??1. Query blog list page function

Through the query, you can directly query all the blog information in the database , Then you can list them on the blog details page ( In the order of release time ):

Front end and back end interface :

 request :
GET /blog
 Respond to :
[
    {
        blogId: 1,
        title: ' This is the first blog ',
        content: ' This is the body of the blog ( Abbreviated version )',
        userId: 1,
        postTime: '2022-06-04 21:21:00'
    },
    {
        blogId: 2,
        title: ' This is the second blog ',
        content: ' This is the body of the blog ( Abbreviated version )',
        userId: 2,
        postTime: '2022-06-04 21:21:00'
    }
]

And then handle them according to the agreed interface :
request :

// When the page is loaded , Use ajax Send a request to the server , Get the corresponding response 
       function getBlogList(){
           $.ajax({
               type: 'get',
               url: 'blog',
               success: function(body){
                   // At this time body It's just one. js An array of objects ( The transformation here is native ), Every element is js object , Then here we need to put these js The object structure is shaped like the type above 
                   //1. The first right Empty the contents , Then insert 
                   let rightDiv = document.querySelector(".right");
                   // Empty the contents 
                   rightDiv.innerHTML = '';
                   // Then traverse the whole js Array , Go to right Insert elements into it 
                   for(let blog of body){
                       // Construct a blogDiv, Then insert the corresponding element into it , And then I put this blogDiv Insert into right Just inside l
                       // It's all here createElement No querySelector....
                       let blogDiv = document.createElement("div");
                       blogDiv.className = "blog";
                       // Then construct the elements inside 
                       // Blog title 
                       let titleDiv = document.createElement('div');
                       titleDiv.className = 'title';
                       titleDiv.innerHTML = blog.title;
                       blogDiv.appendChild(titleDiv);
                       // Blog release time 
                       let dateDiv = document.createElement('div');
                       dateDiv.className = 'date';
                       dateDiv.innerHTML = blog.postTime;
                       blogDiv.appendChild(dateDiv);
                       // Blog summary 
                       let descDiv = document.createElement('div');
                       descDiv.innerHTML = blog.content;
                       descDiv.className = 'desc';
                       blogDiv.appendChild(descDiv);
                       // View full text links 
                       let a = document.createElement('a');
                       
                       a.innerHTML = " View full text  >>";
                       // Set up a.href Click this link to jump to the blog details page 
                       // This jump needs to tell the server which blog details page to visit 
                       a.href = "blog_detail.html?blogId=" + blog.blogId;
                       blogDiv.appendChild(a);
                       
                       // Finally, the whole blogDiv Insert into the complete rightDiv In the middle 
                       rightDiv.appendChild(blogDiv);
                   }
               },
               error: function(){
                   //console.log(" Failed to get blog list ");
                   alert(" Failed to get blog list !");
               }
            });           
       }
       // Call this method 
       getBlogList();

The response from the server :

@WebServlet("/blog")
public class BlogServlet extends HttpServlet {
    private ObjectMapper objectMapper = new ObjectMapper();
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // Here you need to query the data in the database , And then convert to JSON Format , Output is OK 
        // Query through classes that encapsulate database operations 
        BlogDao blogDao = new BlogDao();
        // Prevent confusion code , This and the following sequence cannot be reversed , Set character first , Then the output 
        resp.setContentType("application/json;charset=utf8");
        // No parameters , Is to get the content of the blog list 
        // Put the results of the query into an array 
        List<Blog> blogs = blogDao.selectAll();
        // And then through objectMapper Convert this into JSON Format , Then output 
        String respJson = objectMapper.writeValueAsString(blogs);
        // Then the output is OK 
        resp.getWriter().write(respJson);
    }
 }

This separation of the front and rear ends , It also makes the front-end and back-end programmers independent of each other , It is also very convenient !

??2. Query blog details page function

In the blog list page , There is a button to view the full text , With this button, you can send a request , Then you can find the specific content of this blog :

??3. Login function

Enter the correct user name and password to log in :

??4. Check the current page login status function

If you have not logged in, a pop-up box will appear to prompt you to log in , Then it will jump to the login page :

??5. Display user information to page function

??6. Logout function

Click logout to exit the login , Jump to the blog landing page

??7. Post blog function

Click publish after the blog body and title are written , You can complete the release , Then you can see this article on the blog list page !

??8. Delete blog function

On the blog details page , When you are the author of this blog , A delete blog button will appear , Click to delete , Not the words of the author of this blog , There would be no such button :

---

?? 5、 ... and . Summary and reflection

From this small project, we can deeply realize the benefits of front and rear end separation , For each front-end and back-end interaction, you only need to look at the interaction interfaces agreed at the front and back ends, and you can fully implement your own things , This also greatly improves the efficiency of development , Not to let front-end and back-end programmers " There is nothing to do ", And you don't need programmers to do it all , Just do your own thing !!!
In addition, the functions involved in this small project are not perfect , Like registration , Delete user information , Modify many functions such as blog , It didn't show up , But these implementations can't be compared with the above implementations , But here I don't reflect , Friends who need it can do it by themselves , It is similar to the one above , In addition, a lot of repetitive code is written above , These are very unfriendly to our clever programmers , So I will finish this small project again based on the framework later , The framework is much simpler to use ! I'll talk about this later !!!