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示例：