vue - blog開發(fā)學(xué)習(xí)5

基本功能和后臺(tái)聯(lián)調(diào)

?

1、首頁(yè)的所有博客

因?yàn)槭乔昂笈_(tái)都是本地開發(fā)，所以前端vue需要設(shè)置proxy：修改/config/index.js中的這個(gè)proxyTable

proxyTable: {'/api': {target: 'http://localhost:8888',changeOrigin: true,pathRewrite: {'^/api': ''}},

同時(shí)將mock.js中的模擬數(shù)據(jù)方法注釋掉

2、后臺(tái)添加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、添加后臺(tái)接口

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 {@Autowiredprivate PostService postService;/*** 獲取所有的博客（博客列表展示）** @return*/@GetMapping//不設(shè)置具體的mapping，會(huì)默認(rèn)“/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 {@Autowiredprivate 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、修改后訪問(wèn)首頁(yè)，可以返回后臺(tái)模擬的數(shù)據(jù)

?

6、修改文章的詳情接口

注意：修改post結(jié)構(gòu)是post請(qǐng)求格式，又因?yàn)閍xios發(fā)送post格式的請(qǐng)求會(huì)有跨域問(wèn)題，所以后端需要配置一下（好多人都說(shuō)需要axios發(fā)送post跨域請(qǐng)求不支持application/json，需要修改content-type，但是我在開發(fā)中并沒(méi)有修改content-type，json格式也可，只需要修改后臺(tái)允許跨域即可）

//后臺(tái)用security安全框架，所以需要配置 @Overrideprotected void configure(HttpSecurity http) throws Exception {super.configure(http);http.authorizeRequests().anyRequest().permitAll().and().cors()//****.and().csrf().disable();}@BeanCorsConfigurationSource 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 {@Autowiredprivate PostService postService;@Autowiredprivate PostClassService postClassService;@PostMapping("/post")public Result createPost(@RequestBody PostDto postDto){postService.createPost(postDto);return Result.success();}

service：

@Autowiredprivate PostDao postDao;/*** 保存一個(gè)新建的post** @param postDto*/@Overridepublic void createPost(PostDto postDto) {Post post = new Post();BeanUtils.copyProperties(postDto, post);postDao.save(post);}

dao：

dao使用的jpaReposiroty默認(rèn)的save方法，只需要將post對(duì)象傳入即可，其中post對(duì)象中的id有值代表修改，無(wú)值代表新建

7、修改post后重新進(jìn)入，會(huì)出現(xiàn)以下情況，html標(biāo)簽會(huì)輸出到頁(yè)面上

這時(shí)候需要將文本的html內(nèi)容輸出為真正的html標(biāo)簽：

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

修改后：

?

8、記錄一個(gè)問(wèn)題，就是之前postcontent字段數(shù)據(jù)庫(kù)用的是varchar類型，簡(jiǎn)單內(nèi)容還可以，但是對(duì)于博客，需要的是長(zhǎng)字段存儲(chǔ)，因此數(shù)據(jù)庫(kù)改為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//加上之后，因?yàn)橛玫膉pa ddl-auto：update 因此重啟項(xiàng)目后會(huì)自動(dòng)更新表字段，如果不行的話，刪掉表后重啟，會(huì)自動(dòng)建表private String postContent;private Long createDate;private Long updateDate;}

9、修改一個(gè)post示例：

?

posted @ 2019-06-12 20:45 巡山小妖N 閱讀(...) 評(píng)論(...) 編輯 收藏

總結(jié)

以上是生活随笔為你收集整理的vue - blog开发学习5的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。