文本----简单编写文章的方法(中),后端接口的编写,自己编写好页面就上传到自己的服务器上,使用富文本编辑器进行编辑,想写好一个项目,先分析一下需求,再理一下实现思路,再搞几层,配好参数校验,lomb

本文涉及的产品
RDS MySQL Serverless 基础系列,0.5-2RCU 50GB
云数据库 RDS MySQL,高可用系列 2核4GB
云数据库 RDS PostgreSQL,高可用系列 2核4GB
简介: 文本----简单编写文章的方法(中),后端接口的编写,自己编写好页面就上传到自己的服务器上,使用富文本编辑器进行编辑,想写好一个项目,先分析一下需求,再理一下实现思路,再搞几层,配好参数校验,lomb

1.1 今天在编写代码的时候,突然想实现一个目标:怎样能够在自己的网站上发一些文章

(lingyidianke.com)

1.2 参考自己之前写的一些资料,做一做试试,那么怎么做呢?首先,我们参考一下我们之前的资料,之前写过的大事件资料:

1.2.1 从项目结构上看,我们要创两个项目

1.3 这里前端项目的名字叫lingyidianke,后端项目的目录叫WorldToLingyidianke,先建一个Vue文档

1.4 创建Vue项目可以参考资料,cmd中放入

视频弹幕网站设计01-我爱发弹幕-CSDN博客

2、在这里创建一个新的项目

3、配置项目

4、简单的配置

5、填写Eslint

6、这样就保存了项目

7、这样前端项目创建好了

开始创建后端:

这里参考资料:idea创建SpringBoot项目

大事件后端项目01-----SpringBoot快速入门_大事件springboot项目-CSDN博客

视频弹幕网站设计01-我爱发弹幕-CSDN博客

将pom.xml文件中idea2019.3.3的相关依赖,进行注入

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.6</version>
    </parent>
<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
 
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.2.2</version>
        </dependency>
 
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

后端项目创建application依赖,链接:

如何使用Maven构建SpringBoot项目-CSDN博客

创建好项目之后:爆了一个bug,不支持发行版本17

这里参考资料:

idea提示不支持发行版本13_idea不支持发行版本13-CSDN博客

这里又报了一个bug

Consider the following:

   If you want an embedded database (H2, HSQL or Derby), please put it on the classpath.

   If you have database settings to be loaded from a particular profile you may need to activate it (no profiles are currently active).

这里可以参考资料:

Action:Consider the following: If you want an embedde ,springBoot配置数据库,补全springBoot的xml和mysql配置信息就好了-CSDN博客

配置文件添加sql的配置:application.yml

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://ip+端口+库名?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&useSSL=false&allowPublicKeyRetrieval=true
    username:
    password:

启动properties就行?

8、弄完上述步骤,上传gitee仓库

8.1  git remote add origin 《仓库路径》

git push --set-upstream origin master

9、先简单分析一下功能流程:最简单的功能流程,写------》发布成功

9.1 先建好自己的数据库,视频链接资料:数据库的格式在这里,state有两种状态:链接资料

大事件后端项目26------新增文章-CSDN博客

9.2 弄一个实体类和数据表,接下来造一个数据库,文本的数据库和实体类

9.3

9.4 首先我们建好四个层,实体类:

9.5 编写实体类:这里参考资料是B站32节:

实战篇-20_新增文章_哔哩哔哩_bilibili

10、编写新增文章分类,我们先写好类和接口:

11、先写个类:Article.class的类

@Data
public class Article {
    private Integer id;//主键ID
    @NotEmpty
    @Pattern(regexp = "^\\S{1,10}$")
    private String title;//文章标题
    @NotEmpty
    private String content;//文章内容
    @NotEmpty
    @URL
    private String coverImg;//封面图像
 
    @State
    private String state;//发布状态 已发布|草稿
    @NotNull
    private Integer categoryId;//文章分类id
    private Integer createUser;//创建人ID
    private LocalDateTime createTime;//创建时间
    private LocalDateTime updateTime;//更新时间
}

12、在我们serivce层中创建类和接口,接口的名字叫做:ArticleService

13、在impl中添加ArticleSerivice的实现类

14、在impl中编写测试类ArticleSeriviceImpl

15、类上添加接口,添加Service的注解

16、创建ArticleMapper的接口

17、添加@Mapper注解

18、先将Mapper层的接口,controller层的实现类,serivice的接口和实现类写上

19、添加注解和配置映射路径,方法的传递类中接入注解

19.1 添加@RequestBody注解

19.2 配置好Mysql的相关内容,打开Navicate:把Aticle的资料放进去:这里我们重新建一个数据库:重新写一个Aticle的数据库

20、创建好了,配置Mybatis的资料

21、Spring这里我们写一个springBoot参数需要的依赖:

21.1 pom.xml中添加:

1. <dependency>
2. <groupId>org.springframework.boot</groupId>
3. <artifactId>spring-boot-starter-validation</artifactId>
4. </dependency>

22、为检验验证信息,添加Exception的类:

23、接下来创建一个GlobalExceptionHandler的接口:

24、添加@RestControllerAdvice注解,Exception需要result的实现类和lombok的依赖:需要引入对应依赖

1. <!--lombok依赖-->
2. <dependency>
3. <groupId>org.projectlombok</groupId>
4. <artifactId>lombok</artifactId>
5. </dependency>

25、引入对应依赖之后,编写result的实现类

1. package worldtolingyidianke.demo.bean;
2. 
3. 
4. import lombok.AllArgsConstructor;
5. import lombok.Data;
6. import lombok.NoArgsConstructor;
7. 
8. //统一响应结果
9. @NoArgsConstructor
10. @AllArgsConstructor
11. @Data
12. public class Result<T> {
13. private Integer code;//业务状态码  0-成功  1-失败
14. private String message;//提示信息
15. private T data;//响应数据
16. 
17. //快速返回操作成功响应结果(带响应数据)
18. public static <E> Result<E> success(E data) {
19. return new Result<>(0, "操作成功", data);
20.     }
21. 
22. //快速返回操作成功响应结果
23. public static Result success() {
24. return new Result(0, "操作成功", null);
25.     }
26. 
27. public static Result error(String message) {
28. return new Result(1, message, null);
29.     }
30. }

26、GlobalExceptionHandler的资料

package worldtolingyidianke.demo.exception;
 
import org.springframework.util.StringUtils;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.RestControllerAdvice;
import worldtolingyidianke.demo.bean.Result;
 
@RestControllerAdvice
public class GlobalExceptionHandler {
    @ExceptionHandler(Exception.class)
    public Result handleException(Exception e){
        e.printStackTrace();
        return Result.error(StringUtils.hasLength(e.getMessage())? e.getMessage() : "操作失败");
    }
}

27、因为我们需要校验参数,因此我们用相应的依赖:

1. <dependency>
2. <groupId>org.springframework.boot</groupId>
3. <artifactId>spring-boot-starter-validation</artifactId>
4. </dependency>

28、分析一下实现思路:

29、alt + enter就可以实现了

30、ArticleController的类:点击新增实现类:

31、alt + enter重写方法

32、添加@Override

33、articleImpl补全里面的内容

33.1 添加一个ThreadLocalUtil的工具类:

package com.itheima.utils;
 
import java.util.HashMap;
import java.util.Map;
 
/**
 * ThreadLocal 工具类
 */
@SuppressWarnings("all")
public class ThreadLocalUtil {
    //提供ThreadLocal对象,
    private static final ThreadLocal THREAD_LOCAL = new ThreadLocal();
 
    //根据键获取值
    public static <T> T get(){
        return (T) THREAD_LOCAL.get();
    }
  
    //存储键值对
    public static void set(Object value){
        THREAD_LOCAL.set(value);
    }
 
 
    //清除ThreadLocal 防止内存泄漏
    public static void remove(){
        THREAD_LOCAL.remove();
    }
}

34、再添加一个ArticleMapper的工具类

35、add添加alt +  enter方法,添加alt + Mapper的接口

36、

package com.itheima.mapper;
 
import com.itheima.pojo.Article;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
 
import java.util.List;
 
@Mapper
public interface ArticleMapper {
    //新增
    @Insert("insert into article(title,content,cover_img,state,category_id,create_user,create_time,update_time) " +
            "values(#{title},#{content},#{coverImg},#{state},#{categoryId},#{createUser},#{createTime},#{updateTime})")
    void add(Article article);
 
 
    List<Article> list(Integer userId, Integer categoryId, String state);
}

37、最后我要的内容就是点击send能够正常添加:

38、application中的配置文件到java项目的层,

38.1 classpath:这里直接放到mappers下吧!!

39、

40、因为代码是抄的,所以出现了许多的bug

41、impl中的出现了变红的情况:Article是因为多写了一个,这里是因为使用idea的时候,需要相关插件:参考资料:

@Date不管用怎么办,想少写get和setter方法,reate方法创建不了怎么办,Cannot resolve method ‘setxxx‘ in ‘xxx‘不管用怎么办,到Maven创建插件-CSDN博客

添加插件之后,三个错误就全部解决了

42、这里爆了三个错误,

43、这里能够启动说明了里面没有bug了

44、后来经过验证,这里还要添加拦截器和JWT令牌才行:

<!--java-jwt坐标-->

<dependency>

 <groupId>com.auth0</groupId>

 <artifactId>java-jwt</artifactId>

 <version>4.4.0</version>

</dependency>


最后能够用postman进行测试:

1、打开postman工具,导入相应的依赖

1.1 资料链接26分:33秒

实战篇-03_注册接口_哔哩哔哩_bilibili

2、点击wordpress

2.1 创建名字

2.2 第二步创建一个工作集collections

2.3 找到提前准备好的测试用例

2.4 点击import,再点击files

2.5 这里提前准备好了测试用例进行保存就行了

2.6 准入用户测试接口:文档资源路径,导入接口路径

git@gitee.com:lkc20000416/test-case.git

2.7 打开Body,测试一下试试:

2.8 最后点击send,操作一下:

后端这里要的最后的结果是点击send,就能够出现内容

前端使用富文本编辑器:

这里将源码给贴上:

最终结果要能够在对应页面呈现一篇布局不错的文章

48、新增文章的接口,将这几个层给编写完成

49、第一步在pojo层,创建Article类:

50、第二步在ArticleController中添加ArticleController类

51、第三步在service层中创建一个ArticleService接口

52、第四步实体类

53、第五步先继承一下ArticleSerivce的接口,同时配置注解

54、第六步

55、第七步,在ArticleService接口

56、ArticleSerivceImpl的写法

57、ArticleMapper的接口的写法:

最后我想要的情况:点击send之后,就能够存储到数据库当中

做完新增文章的接口:具体参考资料是:

大事件后端项目21-------新增文章分类-CSDN博客

再做完文章分类列表:配置完token之后,显示成功即可

大事件后端项目22----文章分类列表-CSDN博客

再做完获取文章分类详情,参考文章

CSDN

这样我们就可以添加文章了,因为有外键的影响,必须执行完前面的操作才行:


相关实践学习
每个IT人都想学的“Web应用上云经典架构”实战
本实验从Web应用上云这个最基本的、最普遍的需求出发,帮助IT从业者们通过“阿里云Web应用上云解决方案”,了解一个企业级Web应用上云的常见架构,了解如何构建一个高可用、可扩展的企业级应用架构。
MySQL数据库入门学习
本课程通过最流行的开源数据库MySQL带你了解数据库的世界。 &nbsp; 相关的阿里云产品:云数据库RDS MySQL 版 阿里云关系型数据库RDS(Relational Database Service)是一种稳定可靠、可弹性伸缩的在线数据库服务,提供容灾、备份、恢复、迁移等方面的全套解决方案,彻底解决数据库运维的烦恼。 了解产品详情:&nbsp;https://www.aliyun.com/product/rds/mysql&nbsp;
相关文章
|
2月前
|
数据安全/隐私保护 Windows
深度剖析:PDF 工具箱功能,编辑器操作及页面 / 图像提取技巧
PDF24 Tools是一款德国开发的免费PDF工具箱,18年始终免费,支持网页与Windows客户端。内置近50个工具,涵盖编辑、转换、合并、提取、加密等功能,操作简单,可离线使用,是高效处理PDF的理想选择。
547 0
|
4月前
|
JSON 监控 API
在线网络PING接口检测服务器连通状态免费API教程
接口盒子提供免费PING检测API,可测试域名或IP的连通性与响应速度,支持指定地域节点,适用于服务器运维和网络监控。
|
弹性计算 网络安全
阿里云国际OpenAPI多接口快速管理ECS服务器教程
阿里云国际OpenAPI多接口快速管理ECS服务器教程
|
9月前
|
移动开发 数据可视化 前端开发
tmagic - editor:大厂开源项目,零代码/低代码页面可视化编辑的利器,多端统一方案揭秘!如何用一套代码支持H5/PC,牛牛牛~~~
腾讯推出的开源项目 **tmagic-editor** 是一款所见即所得的页面可视化编辑器,支持H5、PC、TV等多种页面类型。它已应用于腾讯视频会员、腾讯会议等业务,每月生产和发布数百个页面,极大提高了开发效率。通过简单的拖拽和配置,非技术人员也能轻松创建复杂页面。tmagic-editor 支持 Vue2/Vue3 和 React 等多种前端框架,并提供了丰富的扩展功能,满足不同业务需求。
1033 3
|
11月前
|
存储 人工智能 数据库
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
Codel是一款全自主AI代理工具,支持在终端、浏览器和编辑器中执行复杂任务和项目。它运行在沙盒化的Docker环境中,具备自主操作能力,内置浏览器和文本编辑器,所有操作记录存储于PostgreSQL数据库。Codel能够自动完成复杂任务,如创建项目结构、进行网络搜索等,适用于自动化编程、研究与开发、教育与培训以及数据科学与分析等多个领域。
358 11
Codel:AI代理工具,支持在终端、浏览器、编辑器执行复杂任务和项目
|
UED
判断iframe链接页面 服务器状态
【10月更文挑战第6天】
196 57
|
UED
判断iframe链接页面 服务器状态
判断iframe链接页面 服务器状态
247 58
|
JavaScript 前端开发
vue配合axios连接express搭建的node服务器接口_简单案例
文章介绍了如何使用Express框架搭建一个简单的Node服务器,并使用Vue结合Axios进行前端开发和接口调用,同时讨论了开发过程中遇到的跨域问题及其解决方案。
244 0
vue配合axios连接express搭建的node服务器接口_简单案例
|
Shell
【Azure 应用服务】App Service服务无法启动,打开Kudu站点,App Service Editor 页面均抛出:The service is unavailable
【Azure 应用服务】App Service服务无法启动,打开Kudu站点,App Service Editor 页面均抛出:The service is unavailable
158 0
|
1月前
|
弹性计算 运维 安全
阿里云轻量应用服务器与云服务器ECS啥区别?新手帮助教程
阿里云轻量应用服务器适合个人开发者搭建博客、测试环境等低流量场景,操作简单、成本低;ECS适用于企业级高负载业务,功能强大、灵活可扩展。二者在性能、网络、镜像及运维管理上差异显著,用户应根据实际需求选择。
220 10

热门文章

最新文章