vue - blog开发学习5
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 {@Autowiredprivate 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 {@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、修改后访问首页，可以返回后台模拟的数据
6、修改文章的详情接口
注意：修改post结构是post请求格式，又因为axios发送post格式的请求会有跨域问题，所以后端需要配置一下（好多人都说需要axios发送post跨域请求不支持application/json，需要修改content-type，但是我在开发中并没有修改content-type，json格式也可，只需要修改后台允许跨域即可）
//后台用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;/*** 保存一个新建的post** @param postDto*/@Overridepublic 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开发学习6
vue - blog开发学习6 1.问题,如下图,使用iviewui中的card导致页面不能出现滚动条(不太会弄,在网上查了一个vue组件vuescroll,因此使用这个做滚动条) 2.安装vuesc ...
- vue - blog开发学习4
vue - blog开发学习4 1.新建页面的修改,集成富文本编辑 edit-post.vue(新建和修改都用该组件) <template><div class="edit ...
- vue - blog开发学习3
vue - blog开发学习3 1.添加less 和less-loader支持 npm install less less-loader --save-dev 2.新建main.less,将这个样式添 ...
- vue - blog开发学习2
vue - blog开发学习2 首页博客列表的开发 1.修改index.vue,使能够支持列表功能 <template><div><PostList v-for=&quo ...
- vue - blog开发学习1
vue - blog开发学习1 1.安装vue-cli vue intall -g vue-cli 2.创建项目 vue init webpack nblog 3.按提示要求配置项目 ? Projec ...
- vue - blog开发学7
vue - blog开发学7 将基本的项目部署到linux上(前后台只是实现了基本的功能,本次只是记录一些基本的开发流程,完善,等后续) 1.linux环境准备(我用的是阿里云服务器) ①jre.my ...
- 【Vue前端开发学习】第2章，Vue项目目录结构
文章目录 前言 一.新增router文件夹及其配置方法 二.新增store文件夹及其配置方法 三.index.html.App.vue.main.js三者之间的联系 前言 上一章节,通过Pycha ...
- 五、Vue模块化开发学习笔记——JavaScript原始功能、匿名函数的解决方案、使用模块作为出口、CommonJS、ES6 export和import的使用
一.JavaScript原始功能 -在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的. 那个时候的代码是怎么写的呢? 直接将代码写在<scri ...
- Vue 官网学习笔记
VUE介绍 vue git 地址:https://github.com/vuejs/vue/projects Vue 官网教程地址:https://cn.vuejs.org/v2/guide/inst ...
最新文章
- 预训练是 AI 未来所需要的全部吗？
- 二次元妹子五官画风都能改，周博磊团队用无监督方法控制GAN | CVPR 2021
- DDIC和SAP*被锁定后如何解锁或重置密码
- VTK：图片之ImageNoiseSource
- java中添加背景_java中如何增加背景图片
- C/C++基础知识10道题，你都会吗？
- 信奥中的数学：博弈论
- Git/Gitee创建仓库添加文件【1】
- 中世纪判断女巫的方法总结
- 转，docker学习笔记
- eclipse maven项目导入Intellij问题处理
- 快排-Python实现
- 李宏毅机器学习hw1~4作业 强化点
- Keytool命令来生成CA数字证书
- RTI DDS windows环境下的下载和安装
- 画板数据保存成文件的两种方法小结
- 【零基础QQ机器人开发二】服务器篇
- PHP无限极分类两种写法
- Ansible-大总结（六）
- 算法训练 - 筛选号码 （有n个人围成一圈，顺序排号（编号为1到n）。从第1个人开始报数(从1到3报数)，凡报到3的人退出圈子。从下一个人开始继续报数，直到剩下最后一个人，游戏结束。）