|
目录
前言
搭建Springboot框架
Springboot整合JDBC
Springboot整合MyBatis-plus
添加依赖
使用lombok
搭建Vue框架
Vue框架引入axios
Vue框架引入iView（可选）
Springboot与Vue的通信
Springboot整合Vue跨域解决
前言
这个网页是一个社团管理网页，是一个毕设，设计的技术比较简单，写这个博客主要是一个回忆整理的过程，如果有更好的实现可以在评论区告知。如果发现过程有所错误，也请不吝斧正。
代码在最后
中间过程只是一些测试的代码
我的后台部分技术也是做这次毕设才第一次接触的，非常感谢一个大佬的指导，大佬在简书上也发表一些技术类文章，感兴趣的可以看一下。此处附上这位大佬的其中一篇文章地址。
https://www.jianshu.com/p/42989805b831
搭建Springboot框架
后台开发工具：IDEA（我用的版本是IntelliJ IDEA 2019.2.3 x64）
IDEA配置tomcat
IDEA配置maven
以上两个配置百度一下就有很多教程，可以按照教程走。
完成后如下图：
可以直接删除
新建一个controller文件夹，新建一个HelloWorld.java，测试一下
可以在浏览器输入localhost:8080/hello 就可以看到有Hello World的输出
Springboot整合JDBC
 我用的是MySQL数据库，用的Navicat
删除resources文件夹里的 application.properties文件，新增application.yml文件
往里面写入数据库的配置信息
#配置DataSourceSpring
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/你的数据库的名字?useUnicode=true&useJDBCCompliantTimezoneShift=true&useLegacyDatetimeCode=false&serverTimezone=Asia/Shanghai
username: root
password: 你的数据库密码
initialSize: 5
maxActive: 100
minIdle: 3
maxWait: 50000
main:
banner-mode: "off"
测试连接：
在test里写入
@SpringBootTest
class StoryApplicationTests {
@Autowired
private DataSource dataSource;
@Test
public void contextLoads() {
System.out.println("---------------##--------------------");
System.out.println("dataSource类型:"+dataSource.getClass());
System.out.println("connection连接:"+dataSource.getConnection());
}
}
运行，可以看到输出：
Springboot整合MyBatis-plus
添加依赖
可以去这个网址下依赖 https://mvnrepository.com/
mybatis-plus
连接池 druid
在pom.xml文件里写入
<!-- mybatis-plus -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.3.2</version>
</dependency>
<!-- druid -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.22</version>
</dependency>
字段的含义可以参见 mybatis-plus 官方手册（虽然我看了就忘记了，也不知道为什么写这些）https://mp.baomidou.com/guide/
#mybatis-plus
mybatis-plus:
mapper-locations: classpath:mapper/*.xml
typeAliasesPackage: com.claire.bean
global-config:
field-strategy: not_empty
column-underline: true
capital-mode: true
logic-delete-value: 1
logic-not-delete-value: 0
db-type: mysql
refresh: true
cache-enabled: false
使用lombok
pom.xml增加依赖
<!-- lombok -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<version>1.18.12</version>
<scope>provided</scope>
</dependency>
新建一个common文件夹，创建如图六个文件，主要作用是统一规范返回的信息。使得返回的信息不是单一的数据，而是包含状态码的对象。 ClaireConstat是一个产量类。
新建文件夹bean（存放我们的实体类，与数据库表对应）
 
stories
package com.claire.bean;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.Data;
import java.io.Serializable;
import java.time.LocalDateTime;
/**
* @author Claire
*/
@TableName("stories")
@Data
public class Stories implements Serializable {
/**
* 故事ID
*/
@TableId(type = IdType.AUTO)
private Integer sId;
/**
* 故事名称
*/
private String sTitle;
/**
* 故事作者
*/
private String sAuthor;
/**
* 故事内容
*/
private String content;
/**
* 故事简介
*/
private String summary;
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
@TableField("create_time")
private LocalDateTime createTime;
}
新增mapper包、service包，还有一个工具类包utils,新增下面的文件
DataUtils
package com.claire.utils;
import org.springframework.util.StringUtils;
/**
* @author Claire
* 判断数据非空等
*/
public class DataUtils {
/**
* 判断字符串非空
* @param originalStr
* @return
*/
public static boolean isNotEmptyStr(String originalStr){
return !isEmptyStr(originalStr);
}
/**
* 判断字符串为空
* @param originalStr
* @return
*/
private static boolean isEmptyStr(String originalStr) {
return StringUtils.isEmpty(originalStr);
}
/**
* 判断对象为null
* @param originalData
* @return
*/
public static boolean isNull(Object originalData){
return originalData==null;
}
/**
* 判断对象不为null
* @param originalData
* @return
*/
public static boolean isNotNull(Object originalData){
return !isNull(originalData);
}
/**
* 判断两个对象是否相等
* @param sourceData
* @param targetData
* @return
*/
public static boolean isEqual(Object sourceData,Object targetData){
return sourceData.equals(targetData);
}
/**
* 判断两个对象是否不等
* @param sourceData
* @param targetData
* @return
*/
public static boolean isNotEqual(Object sourceData,Object targetData){
return !isEqual(sourceData,targetData);
}
/**
* 截取字符串一定长度
* @param str
* @param length
* @return
*/
public static String limitLength(String str,int length){
if(isEmptyStr(str)){
return str;
}
return str.length()>length?str.substring(0,length):str;
}
}
在controller里增加ServiceController，目前的结构是，已经增加了一个获取数据库数据的函数，想尝试的话代码贴在下面
ApiCode
package com.claire.common;
/**
* @author Claire
*/
public interface ApiCode<Enum> {
public int getCode();
public String getCodeMsg();
}
ApiResponse
package com.claire.common;
import lombok.Data;
/**
* @author Claire
*/
@Data
public class ApiResponse<T> implements java.io.Serializable {
/**
* 状态码
*/
private int code;
/**
* 错误消息
*/
private String msg;
/**
* 消息响应的对象，比如列表
*/
private T data;
/**
* 时间戳
*/
private long time;
public ApiResponse(){
super();
}
public ApiResponse(ApiCode apiCode,String msg,T data){
this.code=apiCode.getCode();
this.msg=msg;
this.data=data;
this.time=System.currentTimeMillis();
}
public ApiResponse(ApiCode apiCode,T data){
this.code= apiCode.getCode();
this.msg=apiCode.getCodeMsg();
this.data=data;
this.time=System.currentTimeMillis();
}
public static ApiResponse success(Object data) {
return new ApiResponse(BaseApiCode.SUCCESS, BaseApiCode.SUCCESS.getCodeMsg(), data);
}
public static ApiResponse success() {
return new ApiResponse(BaseApiCode.SUCCESS, BaseApiCode.SUCCESS.getCodeMsg(), "");
}
public static ApiResponse failed(ApiCode code, String msg) {
return new ApiResponse(code, msg, "");
}
public static ApiResponse failed(String msg) {
return new ApiResponse(BaseApiCode.FAILED, msg, "");
}
public static ApiResponse failed() {
return new ApiResponse(BaseApiCode.FAILED, BaseApiCode.FAILED.getCodeMsg(), "");
}
public static ApiResponse failed(Object data) {
return new ApiResponse(BaseApiCode.FAILED, BaseApiCode.FAILED.getCodeMsg(), data);
}
}
BaseApiCode
package com.claire.common;
/**
* @author Claire
*/
public enum BaseApiCode implements ApiCode<Enum>{
SUCCESS(0,"操作成功"),
FAILED(-1,"操作失败"),
SYSTEM_ERROR(500,"System Error"),
VALID_ERROR(-1001,"验证失败"),
OBJECT_NOT_EXISTS(-1003,"对象不存在"),
NEED_LOGIN(401, "需要登录"),
RESOURCE_NOT_FOUND(404, "Not Found");
/**
* 错误码
*/
private int code;
/**
* 错误信息
*/
private String codeMsg;
private BaseApiCode(int code,String codeMsg){
this.code=code;
this.codeMsg=codeMsg;
}
@Override
public int getCode() {
return this.code;
}
@Override
public String getCodeMsg() {
return this.codeMsg;
}
}
BaseApiCodeImp
package com.claire.common;
/**
* @author Claire
*/
public class BaseApiCodeImp implements ApiCode {
private Integer code;
private String codeMsg;
@Override
public int getCode() {
return this.code;
}
@Override
public String getCodeMsg() {
return this.codeMsg;
}
}
BaseController
package com.claire.common;
/**
* @author Claire
*/
public class BaseController {
/**
* 成功返回数据
*
* @return ApiResponse
*/
protected ApiResponse success() {
return ApiResponse.success();
}
/**
* 成功返回数据
*
* @param data 待返回数据
* @return ApiResponse
*/
protected ApiResponse success(Object data) {
return ApiResponse.success(data);
}
/**
* 成功返回消息
*
* @param message 待返回成功消息
* @return ApiResponse
*/
protected ApiResponse success(String message) {
return new ApiResponse(BaseApiCode.SUCCESS, message);
}
/**
* 成功返回数据和消息
*
* @param message 待返回消息
* @param data 带返回数据
* @return ApiResponse
*/
protected ApiResponse success(String message, Object data) {
return new ApiResponse(BaseApiCode.SUCCESS, message, data);
}
/**
* 失败返回
*
* @return ApiResponse
*/
protected ApiResponse failed() {
return ApiResponse.failed();
}
/**
* 失败返回数据
*
* @param data 待返回数据
* @return ApiResponse
*/
protected ApiResponse failed(Object data) {
return ApiResponse.failed(data);
}
/**
* 失败返回消息
*
* @param message 待返回成功消息
* @return ApiResponse
*/
protected ApiResponse failed(String message) {
return new ApiResponse(BaseApiCode.FAILED, message);
}
/**
* 失败返回数据和消息
*
* @param message 待返回消息
* @param data 带返回数据
* @return ApiResponse
*/
protected ApiResponse failed(String message, Object data) {
return new ApiResponse(BaseApiCode.FAILED, message, data);
}
/**
* 失败返回数据和消息
*
* @param apiCode 状态码
* @param data 带返回数据
* @return ApiResponse
*/
protected ApiResponse failed(BaseApiCode apiCode, Object data) {
return new ApiResponse(apiCode, apiCode.getCodeMsg(), data);
}
}
ClaireConstant ： 还没写什么内容
package com.claire.common;
/**
* @author Claire
* 常量类
*/
public class ClaireConstant {
}
StoriesMapper
package com.claire.mapper;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.claire.bean.Stories;
/**
* @author Claire
*/
public interface StoriesMapper extends BaseMapper<Stories> {
}
StoriesService
package com.claire.service;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.claire.bean.Stories;
import com.claire.mapper.StoriesMapper;
import com.claire.utils.DataUtils;
import org.springframework.stereotype.Service;
/**
* @author Claire
*/
@Service
public class StoriesService extends ServiceImpl<StoriesMapper, Stories> {
public IPage<Stories> getTestStories(Long current,Long size){
return baseMapper.selectPage(new Page<>(current,size),null);
}
public IPage<Stories> getStories(Long current,Long size,Stories sto){
QueryWrapper<Stories> queryWrapper=new QueryWrapper<>();
//分页条件
queryWrapper.like(DataUtils.isNotEmptyStr(sto.getSTitle()),"s_title",sto.getSTitle());
queryWrapper.like(DataUtils.isNotEmptyStr(sto.getSAuthor()),"s_author",sto.getSAuthor());
queryWrapper.orderByDesc("create_time");
return baseMapper.selectPage(new Page<>(current,size),queryWrapper);
}
}
StoriesController
package com.claire.controller;
import com.claire.bean.Stories;
import com.claire.common.ApiResponse;
import com.claire.common.BaseController;
import com.claire.service.StoriesService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
/**
* @author Claire
*/
@RestController
@RequestMapping("/stories")
public class StoriesController extends BaseController {
@Autowired
private StoriesService storiesService;
/**
* 获取所有的故事
* @param current
* @param size
* @param stories
* @return
*/
@RequestMapping(value = "/getStories",method = RequestMethod.POST,produces = "application/json;charset=UTF-8")
public ApiResponse getStories(Long current, Long size, @RequestBody Stories stories){
return success(storiesService.getStories(current,size,stories));
}
@RequestMapping("/testGetStories")
public ApiResponse testGetStories(@RequestParam Long current,@RequestParam Long size){
return success(storiesService.getTestStories(current,size));
}
}
到这里，运行，就可以看到
当然期间可能会出现很多的错误，可以去咨询下几乎万能的百度。
那么接下来我们来建立前端的框架，然后尝试把Springboot与Vue整合在一起
搭建Vue框架
①装node.js （自行百度）
②安装vue脚手架 （自行百度）
③创建Vue项目
vue init webpack (项目名称)
然后回车回车，安装路由（instal vue-router）那里选择y，其余的是否开启ESLint语法检测什么的就选n，一路往下就可以了
④运行这个项目
用VSCode打开它，Ctrl + ~打开终端，输入 npm install，装了淘宝镜像的可以选择 cnpm install 快一点
完成之后输入
npm run dev
,可以看到已经运行成功了，
去这网址就可以看到
Vue框架引入axios
引入这个是为了连接后台。
①安装axios
停止运行，回到终端，输入
cnpm(npm) install axios --save-dev
说一下后面这个-dev的作用
安装使用--save-dev简写为-D 的插件是被写入到 devDependencies 对象里面。
使用--save简写为-S 的插件是则被写入到 dependencies 对象里面
devDependencies 里面的插件只用于开发环境，不用于生产环境。
dependencies 则是需要发布到生产环境的。
②引入axios
在main.js中写入
import axios from "axios"
Vue.prototype.$http = axios;
axios.defaults.withCredentials = true
此时，main.js全貌：
接下来打开index.js
在proxyTable里面增加一些配置。本来后台的地址是8080，但是前端访问的地址也是8080，那么可以看到这里我写了8081（也可以写别的），因为端口会冲突，稍后会修改后台启动端口
proxyTable: {
'/api': {
target: 'http://localhost:8081', //后端请求服务域名和端口
changeOrigin: true, //设置请求头
pathRewrite: {
'^/api': '' //路径重写
}
}
},
Vue框架引入iView（可选）
这里我个人比较偏向于iView，当然也有很多人偏向于elementUI，都是可以的，不使用这个也是可以的。只是为了样式更方便写这个样子。
①安装
npm install view-design --save
②引入
依然是main.js，写入
import ViewUI from "view-design";
import "view-design/dist/styles/iview.css";
Vue.use(ViewUI);
Springboot与Vue的通信
接下来测试一下，前台调用后台接口。
首先前端调用：
①assets是一个资源文件夹，删除里面的图片，创建三个文件夹css、img、js，在js里新增一个story.js
import Axios from "axios"
let prefix = "/api"
export default {
/**
* 测试获取所有的故事
* @param {*} params
*/
getTestStories(params) {
return new Promise((resolve, rejects) => {
Axios.get(prefix + "/stories/testGetStories?current=" + params.current + "&&size=" + params.size)
.then(response => {
resolve(response.data);
})
.catch(error => {
console.log("Error", error);
})
})
}
}
修改HelloWorld.vue
<template>
<div class="hello">
<Button type="primary" @click="getTestStories">获取故事</Button>
</div>
</template>
<script>
import StoryService from "../assets/js/story";
export default {
name: "HelloWorld",
data() {
return {
params: {
current: 1,
size: 3
}, //获取故事的参数
stories: [] //获取到的故事
};
},
methods: {
getTestStories() {
StoryService.getTestStories(this.params).then(res => {
if (res.code == 0) {
this.stories = res.data.records;
console.log(this.stories);
} else {
this.$Message.error(res.msg);
}
});
}
}
};
</script>
<style scoped>
</style>
同时删除App.vue 里的
Springboot整合Vue跨域解决
在config文件夹新增WebMvcConfig文件
package com.claire.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
/**
* @author Claire
*/
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
/**
* 跨域支持
*
* @return CorsFilter
*/
@Bean
public CorsFilter corsFilter() {
final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
final CorsConfiguration corsConfiguration = new CorsConfiguration();
/* 是否允许请求带有验证信息 */
corsConfiguration.setAllowCredentials(true);
/* 允许访问的客户端域名 */
corsConfiguration.addAllowedOrigin("*");
/* 允许服务端访问的客户端请求头 */
corsConfiguration.addAllowedHeader("*");
/* 允许访问的方法名,GET POST等 */
corsConfiguration.addAllowedMethod("*");
urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
return new CorsFilter(urlBasedCorsConfigurationSource);
}
}
修改后台端口。在resources/application.yml里加入
启动项目，前后台都启动
打开localhost:8080
点击，可以看到在console打印台输出获取到的数据，修改一下HelloWorld.vue,用表格呈现
<template>
<div class="hello">
<Table stripe :columns="columns" :data="stories" style="width:1000px"></Table>
</div>
</template>
<script>
import StoryService from "../assets/js/story";
export default {
name: "HelloWorld",
data() {
return {
params: {
current: 1,
size: 3
}, //获取故事的参数
stories: [], //获取到的故事
columns: [
{
title: "id",
key: "sid"
},
{
title: "故事名称",
key: "stitle"
},
{
title: "故事作者",
key: "sauthor"
},
{
title: "故事内容",
key: "content"
},
{
title: "创建时间",
key: "createTime"
}
]
};
},
methods: {
getTestStories() {
StoryService.getTestStories(this.params).then(res => {
if (res.code == 0) {
this.stories = res.data.records;
console.log(this.stories);
} else {
this.$Message.error(res.msg);
}
});
}
},
created() {
this.getTestStories();
}
};
</script>
<style scoped>
</style>
 最后呈现效果：
 
前端部分：
https://gitee.com/tangjinxia/union_front.git
后台部分：
https://gitee.com/tangjinxia/union.git
数据库：
链接：https://pan.baidu.com/s/1CeVU661NG8ylGZ1dCHfJ1w
提取码：ri0j | 
转播
