博客系统示例

╰半夏微凉° 2023-10-09 20:07 41阅读 0赞

**前后端项目零开发，使用vue3作为前端，springboot+mybatis三层架构作为后端，并且前后端分离应该如何写，包括数据库信息，请举一个例子？**

假设我们要开发一个简单的个人博客系统。

先来看一下项目的架构：

前端使用 Vue3 搭建，使用 axios 发送 HTTP 请求与后端进行数据交互。

后端使用 SpringBoot 框架搭建，结合 MyBatis 实现持久层、业务层和表现层的分离。

下面是一个简单的示例，包括前后端代码和数据库信息。

##### 1 后端代码： #####

*  数据库信息：

我们可以创建一个名为blog的数据库，其中包含两个表：user和article。

user表：

<table> 
 <thead> 
  <tr> 
   <th>id</th> 
   <th>username</th> 
   <th>password</th> 
   <th>email</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td>admin</td> 
   <td>123456</td> 
   <td>admin@qq.com</td> 
  </tr> 
 </tbody> 
</table>

article表：

<table> 
 <thead> 
  <tr> 
   <th>id</th> 
   <th>title</th> 
   <th>content</th> 
   <th>user_id</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>1</td> 
   <td>title1</td> 
   <td>content1</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>2</td> 
   <td>title2</td> 
   <td>content2</td> 
   <td>1</td> 
  </tr> 
 </tbody> 
</table>

*  实体类：

在SpringBoot中，实体类是与数据库表对应的Java类。我们可以定义两个实体类：User和Article。

// User.java
    public class User {
        
        private Long id;
        private String username;
        private String password;
        private String email;
        // getter和setter省略
    }
    
    // Article.java
    public class Article {
        
        private Long id;
        private String title;
        private String content;
        private Long userId;
        // getter和setter省略
    }

*  Mapper：

Mapper是MyBatis的核心，用于映射数据库表和Java对象。我们可以定义两个Mapper：UserMapper和ArticleMapper，用于调用SQL语句。

// UserMapper.java
    @Mapper
    public interface UserMapper {
        
    
        @Select("select * from user where id=#{id}")
        User getUserById(@Param("id") Long id);
    
        @Select("select * from user where username=#{username}")
        User getUserByUsername(@Param("username") String username);
    
        @Insert("insert into user(username,password,email) values(#{username},#{password},#{email})")
        int insertUser(User user);
    }
    
    // ArticleMapper.java
    @Mapper
    public interface ArticleMapper {
        
    
        @Select("select * from article where id=#{id}")
        Article getArticleById(@Param("id") Long id);
    
        @Insert("insert into article(title,content,user_id) values(#{title},#{content},#{userId})")
        int insertArticle(Article article);
    }

*  Service:

Service层主要用于编写逻辑和调用Mapper。我们可以定义两个Service：UserService和ArticleService。

// UserService.java
    @Service
    public class UserService {
        
        @Autowired
        private UserMapper userMapper;
    
        public User getUserById(Long id) {
        
            return userMapper.getUserById(id);
        }
    
        public User getUserByUsername(String username) {
        
            return userMapper.getUserByUsername(username);
        }
    
        public int insertUser(User user) {
        
            return userMapper.insertUser(user);
        }
    }
    
    // ArticleService.java
    @Service
    public class ArticleService {
        
        @Autowired
        private ArticleMapper articleMapper;
    
        public Article getArticleById(Long id) {
        
            return articleMapper.getArticleById(id);
        }
    
        public int insertArticle(Article article) {
        
            return articleMapper.insertArticle(article);
        }
    }

*  Controller:

Controller层一般用于接收HTTP请求并调用Service层方法。我们可以定义两个Controller：UserController和ArticleController。

// UserController.java
    @RestController
    @RequestMapping("/user")
    public class UserController {
        
        @Autowired
        private UserService userService;
    
        @GetMapping("/{id}")
        public User getUserById(@PathVariable("id") Long id) {
        
            return userService.getUserById(id);
        }
    
        @GetMapping("/byname")
        public User getUserByUsername(@RequestParam("username") String username) {
        
            return userService.getUserByUsername(username);
        }
    
        @PostMapping
        public int insertUser(@RequestBody User user) {
        
            return userService.insertUser(user);
        }
    }
    
    // ArticleController.java
    @RestController
    @RequestMapping("/article")
    public class ArticleController {
        
        @Autowired
        private ArticleService articleService;
    
        @GetMapping("/{id}")
        public Article getArticleById(@PathVariable("id") Long id) {
        
            return articleService.getArticleById(id);
        }
    
        @PostMapping
        public int insertArticle(@RequestBody Article article) {
        
            return articleService.insertArticle(article);
        }
    }

##### 2 前端代码： #####

我们可以使用Vue3框架来实现前端页面的搭建。由于这个系统只是个博客系统，我们可以实现以下页面：

*  首页：展示最新的几篇文章，包括文章标题和摘要。
 *  文章列表页：展示所有文章标题和摘要，包括分页和搜索功能。
 *  文章详情页：展示文章标题和内容。

我们可以定义以下路由：

const routes = [
      {
         path: '/', component: Home },
      {
         path: '/articles', component: ArticleList },
      {
         path: '/articles/:id', component: ArticleDetail },
    ]

其中，Home对应首页，ArticleList对应文章列表页，ArticleDetail对应文章详情页。

我们可以使用axios库发送HTTP请求，例如获取文章列表：

axios.get('/api/articles')
      .then(response => {
        
        this.articles = response.data
      })
      .catch(error => console.log(error))

在这个例子中，我们假设后端提供了一个 `/api/articles` 的接口，用于获取文章列表。我们使用axios库发送GET请求，并将返回的数据存储在Vue实例的articles属性中。

##### 3 前后端交互： #####

前后端交互的方式可以简单地使用JSON格式进行数据交换。前端通过axios库向后端发送HTTP请求，后端接收请求并返回JSON格式的数据。在前端中，通过解析JSON格式的数据来获取后端返回的数据。

例如获取文章列表：

*  前端代码：

axios.get('/api/articles')
      .then(response => {
        
        this.articles = response.data
      })
      .catch(error => console.log(error))

*  后端代码：

// ArticleController.java
    @RestController
    @RequestMapping("/api/articles")
    public class ArticleController {
        
        @Autowired
        private ArticleService articleService;
    
        @GetMapping
        public List<Article> getArticles() {
        
            return articleService.getArticles();
        }
    }
    
    // ArticleService.java
    @Service
    public class ArticleService {
        
        @Autowired
        private ArticleMapper articleMapper;
    
        public List<Article> getArticles() {
        
            return articleMapper.getArticles();
        }
    }
    
    // ArticleMapper.java
    @Mapper
    public interface ArticleMapper {
        
        @Select("select * from article")
        List<Article> getArticles();
    
        // 其他方法省略
    }

在这个例子中，前端发送 GET 请求到 `/api/articles` 接口，后端接收到请求后，使用 ArticleService 调用 ArticleMapper 中的数据查询方法获得文章列表，最后返回 JSON 格式的数据给前端。

以上仅是一个简单的例子，在实际开发中可能还需要考虑参数验证、用户权限等问题。