springboot+Vue项目-微博留言(前后端分离 跨域)

所用技术

数据库：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="/POM/4.0.0" xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/POM/4.0.0 /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;@Mapperpublic 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;@Configurationpublic 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;@Configurationpublic 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.cssaxios.jsjquery.jsvue.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>

最终效果