vue - blog开发学习5

Posted nxzblogs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue - blog开发学习5相关的知识,希望对你有一定的参考价值。

基本功能和后台联调

 

1、首页的所有博客

因为是前后台都是本地开发,所以前端vue需要设置proxy:修改/config/index.js中的这个proxyTable

    proxyTable: 
      ‘/api‘: 
        target: ‘http://localhost:8888‘,
        changeOrigin: true,
        pathRewrite: 
          ‘^/api‘: ‘‘
        
      ,

同时将mock.js中的模拟数据方法注释掉

2、后台添加cors

package com.nxz.blog.config;

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class CorsFilter implements Filter 

    final static org.slf4j.Logger logger = org.slf4j.LoggerFactory.getLogger(CorsFilter.class);

    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException 
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest reqs = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, res);
    

    public void init(FilterConfig filterConfig) 
    

    public void destroy() 
    

3、添加后台接口

controller

package com.nxz.blog.controller;

import com.nxz.blog.pojo.vo.PostVo;
import com.nxz.blog.service.PostService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("posts")
public class PostController 


    @Autowired
    private PostService postService;

    /**
     * 获取所有的博客(博客列表展示)
     *
     * @return
     */
    @GetMapping//不设置具体的mapping,会默认“/posts”路径
    public List<PostVo> getPostList() 
        return postService.getAllPostList();
    

service

package com.nxz.blog.service;

import com.nxz.blog.dao.PostDao;
import com.nxz.blog.entity.Post;
import com.nxz.blog.pojo.vo.PostVo;
import org.springframework.beans.BeanUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.ArrayList;
import java.util.List;

@Service
public class PostService 

    @Autowired
    private PostDao postDao;

    /**
     * 获取所有的博客信息
     * @return
     */
    public List<PostVo> getAllPostList() 
        List<PostVo> resList = new ArrayList<>();

        List<Post> allPostList = postDao.findAll();
        allPostList.stream().forEach(item -> 
            PostVo postVo = new PostVo();
            BeanUtils.copyProperties(item, postVo);
            resList.add(postVo);
        );
        return resList;
    

dao:

package com.nxz.blog.dao;

import com.nxz.blog.entity.Post;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;

@Repository
public interface PostDao extends JpaRepository<Post, Integer> 

postvo:

package com.nxz.blog.pojo.vo;

import lombok.Data;

@Data
public class PostVo 

    private Integer postId;

    private String postTitle;

    private String postContent;

    private Long createDate;

post:

package com.nxz.blog.entity;

import lombok.Data;

import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;

@Entity
@Data
public class Post 

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer postId;

    private String postTitle;

    private String postContent;

    private Long createDate;

    private Long updateDate;

5、修改后访问首页,可以返回后台模拟的数据

技术图片

 

6、修改文章的详情接口

注意:修改post结构是post请求格式,又因为axios发送post格式的请求会有跨域问题,所以后端需要配置一下(好多人都说需要axios发送post跨域请求不支持application/json,需要修改content-type,但是我在开发中并没有修改content-type,json格式也可,只需要修改后台允许跨域即可)

//后台用security安全框架,所以需要配置
    @Override
    protected void configure(HttpSecurity http) throws Exception 
        super.configure(http);
        http.authorizeRequests()
                .anyRequest().permitAll()
                .and().cors()//****
                .and().csrf().disable();
    

    @Bean
    CorsConfigurationSource corsConfigurationSource() 
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(Arrays.asList("*"));
        configuration.setAllowedMethods(Arrays.asList("GET", "POST","PUT","DELETE"));
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    

修改post接口:

controller

@RestController
@RequestMapping("posts")
public class PostController 


    @Autowired
    private PostService postService;

    @Autowired
    private PostClassService postClassService;


    @PostMapping("/post")
    public Result createPost(@RequestBody PostDto postDto)
        postService.createPost(postDto);
        return Result.success();
    

service:

   @Autowired
    private PostDao postDao;


    /**
     * 保存一个新建的post
     *
     * @param postDto
     */
    @Override
    public void createPost(PostDto postDto) 
        Post post = new Post();
        BeanUtils.copyProperties(postDto, post);
        postDao.save(post);
    

dao:

dao使用的jpaReposiroty默认的save方法,只需要将post对象传入即可,其中post对象中的id有值代表修改,无值代表新建

7、修改post后重新进入,会出现以下情况,html标签会输出到页面上

技术图片

这时候需要将文本的html内容输出为真正的html标签:

<span v-html="postContent"></span>

修改后:

技术图片

 

8、记录一个问题,就是之前postcontent字段数据库用的是varchar类型,简单内容还可以,但是对于博客,需要的是长字段存储,因此数据库改为Text类型

修改post.java

@Entity
@Data
public class Post 

    @Id
    @GeneratedValue(generator = "system-uuid")
    @GenericGenerator(name = "system-uuid", strategy = "uuid")
    @Column(length = 32)
    private String postId;

    private String postTitle;

    @Lob//加上之后,因为用的jpa ddl-auto:update 因此重启项目后会自动更新表字段,如果不行的话,删掉表后重启,会自动建表
    private String postContent;

    private Long createDate;

    private Long updateDate;

技术图片

9、修改一个post示例:

技术图片

 

以上是关于vue - blog开发学习5的主要内容,如果未能解决你的问题,请参考以下文章

vue - blog开发学习2

vscode代码片段生成vue模板

《分布式微服务电商》专题-电商项目前端Vue模块化开发

vue - blog开发学习6

vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释 自动生成文件名 开发日期时间等内容

IOS开发-OC学习-常用功能代码片段整理