springboot+Vue项目-微博留言(前后端分离,跨域)
2024-04-21 03:43:20
所用技术
- 数据库：mysql
- 后台框架：springboot,mybatis plus
- 前台框架：Vue
- 实体类：lombok
- 异步：axios
一丶微博留言后端
小贴士：约定>配置>编码
先做好准备,在去写代码
1.sql语句
CREATE TABLE `ol_msg` (`id` VARCHAR(200) PRIMARY KEY ,`create_date` DATETIME DEFAULT NULL,`content` VARCHAR(2000) DEFAULT NULL,`acc` INT(8) DEFAULT NULL,`ref` INT(8) DEFAULT NULL
) ENGINE=INNODB DEFAULT CHARSET=utf8
2.改pom
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.chufeng</groupId><artifactId>springboot-vue-blog</artifactId><version>0.0.1-SNAPSHOT</version><name>springboot-vue-blog</name><description>Demo project for Spring Boot</description><properties><java.version>1.8</java.version><project.build.sourceEncoding>UTF-8</project.build.sourceEncoding><project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding><spring-boot.version>2.4.1</spring-boot.version></properties><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-actuator</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.2</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><scope>runtime</scope><optional>true</optional></dependency><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><scope>runtime</scope></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope><exclusions><exclusion><groupId>org.junit.vintage</groupId><artifactId>junit-vintage-engine</artifactId></exclusion></exclusions></dependency></dependencies><dependencyManagement><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-dependencies</artifactId><version>${spring-boot.version}</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement><build><plugins><plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-compiler-plugin</artifactId><version>3.8.1</version><configuration><source>1.8</source><target>1.8</target><encoding>UTF-8</encoding></configuration></plugin><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configuration><fork>true</fork><addResources>true</addResources></configuration></plugin><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><version>2.4.1</version><configuration><mainClass>com.chufeng.springbootvueblog.SpringbootVueBlogApplication</mainClass></configuration><executions><execution><id>repackage</id><goals><goal>repackage</goal></goals></execution></executions></plugin></plugins></build></project>3.写yml文件
server:port: 8080spring:application:name: springboot-vueblogdatasource:driver-class-name: com.mysql.cj.jdbc.Drivername: defaultDataSourcepassword: 123456url: jdbc:mysql://localhost:3306/test?serverTimezone=UTCusername: root
4.业务类
BlogMapper
package com.chufeng.springbootvueblog;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.chufeng.springbootvueblog.entities.Blog;
import org.apache.ibatis.annotations.Mapper;@Mapper
public interface BlogMapper extends BaseMapper<Blog> {}BlogService接口
package com.chufeng.springbootvueblog.service;import com.baomidou.mybatisplus.extension.service.IService;
import com.chufeng.springbootvueblog.entities.Blog;public interface BlogService extends IService<Blog> {}BlogServiceImpl实现类
package com.chufeng.springbootvueblog.service.impl;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.chufeng.springbootvueblog.entities.Blog;
import com.chufeng.springbootvueblog.mapper.BlogMapper;
import com.chufeng.springbootvueblog.service.BlogService;public class BlogServiceImpl extends ServiceImpl<BlogMapper, Blog> implements BlogService {}
5.配置类
MybatisPlusConfig 数据分页配置类
package com.chufeng.springbootvueblog.config;import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
@Configuration
public class MyBatisPlusConfig {// 最新版分页@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}
}
AppConfig跨域配置类
package com.chufeng.springbootvueblog.config;import org.springframework.context.annotation.Bean;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class AppConfig {// 全局跨域配置： 可以在java后台配置，也可以在vue前台配置private CorsConfiguration addCorsConfig() {CorsConfiguration corsConfiguration = new CorsConfiguration();//请求常用的三种配置，*代表允许所有，当时你也可以自定义属性（比如header只能带什么，只能是post方式等等）corsConfiguration.addAllowedOrigin("*");corsConfiguration.addAllowedHeader("*");corsConfiguration.addAllowedMethod("*");return corsConfiguration;}@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**", addCorsConfig());return new CorsFilter(source);}
}BlogController
package com.chufeng.springbootvueblog.controller;import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.chufeng.springbootvueblog.entities.Blog;
import com.chufeng.springbootvueblog.service.BlogService;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import javax.annotation.Resource;@Slf4j
@RestController
@RequestMapping("/api/blogs")
public class BlogController {@Resourceprivate BlogService blogService;@GetMappingpublic IPage<Blog> selectByPage(Integer pageNo, Integer pageSize){return blogService.page(new Page<>(pageNo,pageSize));}@PostMappingpublic boolean savaBlog(@RequestBody Blog blog){//打印日志log.info(blog.toString());return blogService.save(blog);}@DeleteMapping("/{id}")public boolean deleteBlogById(@PathVariable("id") String id ){return blogService.removeById(id);}@PutMappingpublic boolean updateBlog(@RequestBody Blog blog){return blogService.updateById(blog);}
}
二丶Vue前端
需要导入
- bootstrap.css
- axios.js
- jquery.js
- vue.js
自定义css代码
@charset "utf-8";*{margin:0; padding:0;}
li{list-style:none;}
img{border:none;}
a{text-decoration:none;}
input,textarea{outline:none; resize:none; border:none;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{*zoom:1;}body{background:url(../img/bg.jpg) center center no-repeat; background-size:100% 140%;}
/*登陆*/
.loginBox{width:278px; padding:30px 80px 20px 80px; margin:40px auto; background-image: -webkit-linear-gradient(top,rgb(255,255,255),rgb(242,242,242));box-shadow: 0 0 3px rgba(21,62,78,0.8); position:relative;border-radius:2px;
}
.loginList{width:100%;}
.loginList li{margin-bottom:10px; overflow:hidden;}
.hTxt{font:18px/1.5 "Microsoft YaHei";}
.inputs{width:260px; display:block; font-weight:bold; background:url(../img/inputBg.png) 0 0 no-repeat; height:14px; line-height:14px; padding:9px; color:#666;}
.loginList .btns{text-align:right; background:none; width:280px;}
.reg{background:url(../img/btns.png) 0 -42px no-repeat; width:70px; height:42px; display:inline-block; overflow:hidden; opacity:.8;}
.login{background:url(../img/btns.png) 0 0 no-repeat; width:70px; height:42px; display:inline-block; overflow:hidden; opacity:.8;}
.reg:hover,.login:hover{opacity:1;}
.reg:active,.login:active{opacity:.9;}
.look{text-align:right; font:12px/1.2 "Microsoft YaHei"; color:#999;}/*ad*/
.ad{background:url(../img/ad.png) left top no-repeat; position:fixed; bottom:20px; height:16px; left:50%; width:106px; margin-left:-53px;}
::selection {background-color:#669900; color:#ffffff;}
::-moz-selection {background-color:#669900; color:#ffffff;}weibo.css代码
@charset "utf-8";body,ul,ol,li,dl,dt,dd,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0}
body{font-size:12px;font-family:"Microsoft YaHei"}
ul,ol{list-style-type:none}
select,input,img,select{vertical-align:middle}
a{text-decoration:underline;color:#313030}
a{blr:expression(this.onFocus=this.blur())}
input,textarea{outline:0;resize:none}
a{outline:0}
.msgArea{width:755px;overflow:hidden;margin:0 auto;font-family:"Microsoft YaHei"}
.commentOn{width:753px;display:block;overflow:hidden;border:#a5bcff solid 1px;background:#f3f8fd;margin-top:25px;font-family:Verdana}
.reply{overflow:hidden;padding:10px 20px;background:#FFF;border-top:#e9e9e9 solid 1px;border-bottom:#e9e9e9 solid 1px}
.userInfo{display:block;overflow:hidden;height:25px;border-bottom:#bababa solid 1px}
.userName{float:left;background:url(../img/userBj.png) left center no-repeat;padding-left:15px;color:#000;font-size:14px;font-weight:bold}
.replyTime{float:left;color:#8b8585;line-height:30px;font-size:11px}
.replyContent{line-height:24px;font-size:14px;color:#2b2b2b;font-family:"Microsoft YaHei"}
.operation{clear:both;width:100%;height:30px;margin-top:8px}
.handle{float:right;padding-top:6px}
.handle a{text-decoration:none;float:left;margin-left:12px;background:url(../img/icons.png) 0 0 no-repeat;height:18px;line-height:18px;padding-left:20px}
.handle .top_icon{background-position:0 0}
.handle .down_icon{background-position:0 -17px}
.handle .cut{background-position:0 -33px}
.handle a:active{color:#09F}
.noContent{text-align:center;display:block;background:#FFF;font:14px/2.3 "Microsoft YaHei";border-bottom:#e9e9e9 solid 1px;border-top:#e9e9e9 solid 1px;color:#999}
.takeComment{width:713px;display:block;overflow:hidden;border:#a5bcff solid 1px;background:#f3f8fd;margin-top:25px;font-family:Verdana;padding:15px 20px}
.takeTextField{width:701px;height:70px;border:#b1b1b1 solid 1px;clear:both;display:block;margin:10px 0 10px 0;line-height:20px;padding:5px;box-shadow:inset 0 0 5px #DDD;font-family:"Microsoft YaHei"}
.takeSbmComment{display:block;overflow:hidden}
.takeSbmComment span{float:right;color:#CCC;line-height:37px;padding-right:10px}
.inputs{float:right;width:125px;height:37px;border:none 0;background:tranparent;background:url(../img/takeSbmComment.png) left top no-repeat;cursor:pointer;opacity:.8}
.inputs:hover{opacity:1}
.inputs:active{opacity:.9}
.messList{overflow:hidden}
.page{text-align:right;font-size:0;font-family:Verdana;padding:10px 16px}
.page a{display:inline-block;height:20px;padding:0 7px;border:#CCC solid 1px;font:12px/20px Verdana;text-decoration:none;margin-left:5px;background:#FFF}
.page a:hover{background:#09F;color:#FFF;border-color:#09F}
.page .active{background:#CCC}
.page a:active{opacity:.8}<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--公共样式--><link href="css/common.css" rel="stylesheet" /><!--微博样式--><link href="css/weibo.css" rel="stylesheet" /><!--bootstrap--><link href="css/bootstrap.css" rel="stylesheet" /><script src="js/vue.js"></script><script src="js/axios.js"></script><title>微博</title>
</head>
<body>
<div id="app" class="container"><!--留言--><div class="takeComment"><!--回复内容--><textarea name="textarea" class="takeTextField" id="tijiaoText" v-model="content" v-on:keyup.enter="addBlog()"></textarea><div class="takeSbmComment"><!--回复按钮--><button class="btn btn-default" @click.stop="addBlog()">回复</button><span>(可按 Enter 回复)</span></div></div><!--已留--><div class="commentOn"><!--如果没有数据，显示暂无留言--><div class="noContent">暂无留言</div><!--如果查询有数据，使用列表显示--><div class="messList"><div class="reply" v-for="(item,index) in records"><p class="replyContent" v-cloak>{{item.content}}</p><p class="operation"><span class="replyTime" v-cloak>{{item.createDate}}</span><span class="handle">{{userid}}{{useracc}}{{userref}}<button class="top" @click="updateAcc(item)">{{item.acc}}</button><button class="down_icon"@click="updateRef(item)" >{{item.ref}}</button><button @click="delMsg(item.id)">删除</button></span></p></div></div><p>总数据：{{total}}<a>下一页</a></p></div>
</div>
<script>//创建一个axios的实例let http=axios.create(({//基础配置baseURL: 'http://127.0.0.1:8081/api/',timeout:1000}))let _this;let vm=new Vue({el:"#app",data:{content:'',//添加评论的内容records:[],//数组数组pageNo:1,//默认页码pageSize:2,//默认页大小total:0,//总数据,userid:1,useracc:0,userref:0},mounted(){//挂载_this=this;this.initData(this.pageNo,this.pageSize);},methods:{initData:function (pageNo,pageSize){http.get("/blogs?pageNo="+pageNo+"&pageSize="+pageSize+"").then(function (resp){//注意取值的时候要使用resp.data_this.records=resp.data.records;_this.total=resp.data.total;console.log("相应数据"+resp);})//成功回调.catch(function (error){console.log(error)})},addBlog:function (){let data={"content":this.content,"acc":10,"ref":0}http.post("/blogs",data).then(function (resp){console.log(resp);//清空内容_this.content="";_this.initData(_this.pageNo,_this.pageSize);}).catch(function (error){console.log(error)})},// 删除delMsg:function(id){http.delete("/blogs/"+id).then(function(resp){console.log(resp);// 重新加载数据_this.initData(_this.pageNo,_this.pageSize);}).catch(function(error){console.log(error)})},//修改updateAcc:function(data) {data.acc=data.acc+1;console.log(data)http.put("/blogs",data).then(function (resp) {console.log(resp);// 重新加载数据_this.initData(_this.pageNo,_this.pageSize);}).catch(function (error) {console.log(error)})},updateRef:function(data) {data.ref=data.ref+1;console.log(data)http.put("/blogs",data).then(function (resp) {console.log(resp);// 重新加载数据_this.initData(_this.pageNo,_this.pageSize);}).catch(function (error) {console.log(error)})}}});
</script>
</body>
</html>
最终效果
springboot+Vue项目-微博留言(前后端分离,跨域)相关推荐
- Springboot+vue 社团管理系统（前后端分离）
Springboot+vue 社团管理系统(前后端分离) zero.项目功能设计图 一.数据库设计(项目准备) 1.建表 2.表目录 二.前端编写(vue) 1.搭建Vue框架 2.放入静态资源(as ...
- Springboot整合Shiro前后端分离跨域问题
Springboot整合Shiro前后端分离跨域问题 前言:SpringBoot整合shiro进行前后端分离开发时(前端是Vue),项目做了跨域配置,但还是前端请求会出现cros err–显示的跨域问 ...
- 前后端分离跨域问题解决方案
问题 因为最近在学习vue和springboot.用到了前后端分离.前端webpack打包运行的时候会启动nodejs的服务器占用8080端口,后端springboot自带tomcat启动占用1111 ...
- pc网站调用微服务器,【微服务】前后端分离-跨域问题和解决方案
跨域问题存在的原因 跨域问题的根本原因:因为浏览器收到同源策略的限制,当前域名的js只能读取同域下的窗口属性.什么叫做同源策略?就是不同的域名, 不同端口, 不同的协议不允许共享资源的,保障浏览器安全 ...
- 【python学习笔记】关于python Flask前后端分离跨域问题
关于python Flask前后端分离跨域问题 前后端分离过程中,前后端对接测试难免遇到跨域问题.因为是个新司机,所以在我经过一天的测试,才找到解决办法=-= 第一种方法 from functools ...
- nginx处理前后端分离跨域问题
在微服务中,通常会使用前后端分离的方式进行开发和部署.由于前后端分开部署,属于不同的"资源",因此前端调用后端API时可能会出现跨域问题,Cross-Origin Resource ...
- 毕设：基于SpringBoot+Vue 实现云音乐(前后端分离)
文章目录 一.简介 2.项目介绍 二.功能 2.功能介绍 三.核心技术 1.系统架构图 2.技术选型 五.运行 3.截图 前端界面 后台管理界面 总结 1.完整工程 2.其他 一.简介 2.项目介绍 ...
- SpringBoot+Vue分页实现，前后端分离
一.前期准备 1.简介 熟悉SpringBoot,Mybatis,Vue,Element UI等框架的使用:Vue-cli脚手架工具的使用:掌握前后端分离思想,熟悉单体架构等思想. 2.工具下载(No ...
- cors 前后端分离跨域问题_前后端分离之CORS跨域访问踩坑总结
前言 前后端分离的开发模式越来越流行,目前绝大多数的公司与项目都采取这种方式来开发,它的好处是前端可以只专注于页面实现,而后端则主要负责接口开发,前后端分工明确,彼此职责分离,不再高度耦合,但是由于这 ...
最新文章
- mysql+翻页性能,mysql 翻页优化
- 【剑指offer-Java版】24二叉搜索树后序遍历序列
- Blender文档翻译：Operators tutorial(操作教程)
- mysql 启动卡主，cpu 100%
- 图论--双连通E-DCC缩点模板
- Asterisk权威指南/第五章 用户设备配置
- java方法报错_.setUndecorated 方法报错
- 94年的博士后又拿到了这个金奖！原来是他的学弟
- c# 之抽象工厂模式
- 以太坊PHP离线交易签名生成,以太坊web3.sendRawTransaction离线签名交易
- 从氨基酸到大分子（蛋白质、核酸）
- SQL面试题（1-10）oracle写的
- 面向对象及软件工程——团队作业3
- pyqt5 treewidget图标_Python基础之PyQt5写TreeWidget（二）--代码篇
- 陈纪修老师《数学分析》 第12章：多元函数微分学 笔记
- 485通讯的校验和_MCGS 与 FX3U PLC 之间的无线通讯实例
- Android 强大的图片加载缓存— Glide
- Mac：scroll reverser触控板和鼠标反转独立设置【free】
- python有四个数字_Python生成0-9任意4位数字组合的方法
- 智能路灯引路冰蓄冷替空调