一.新建Vue项目和SpringBoot项目
新建Vue项目
新建文件夹SpringBoot-Vue-MessageBoard创建Vue项目使用vue ui命令(需要vue 3.0选择刚才的目录 名字为Vue创建后V还是小写 创建后可以改为大写 取消git初始化 手动配置 取消 打开 创建项目,不保存预设
新建SpringBoot项目
用IDEA打开SpringBoot-Vue-MessageBoard这个目录 创建SpringBoot项目右键 选择Spring Initializr 选择这四个 名字改为SpringBoot
二. 后端
配置application.properties
#Mysqlspring.datasource.url=jdbc:mysql://localhost:3306/enaium?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghaispring.datasource.username=rootspring.datasource.password=rootspring.datasource.driver-class-name=com.mysql.cj.jdbc.Driverspring.jpa.show-sql= truespring.jpa.properties.hibernate.format_sql = true#Serverserver.port=8181
写实体类
package cn.enaium.message.entity;import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;import javax.persistence.Entity;import javax.persistence.Id;/** * Project: message * ----------------------------------------------------------- * Copyright © 2020 | Enaium | All rights reserved. */@Data@Entity@NoArgsConstructor@AllArgsConstructorpublic class Message { @Id private Long id; private String author; private String message; private String time;}
实体类Jpa
package cn.enaium.message.repository;import cn.enaium.message.entity.Message;import org.springframework.data.jpa.repository.JpaRepository;/** * Project: message * ----------------------------------------------------------- * Copyright © 2020 | Enaium | All rights reserved. */public interface MessageRepository extends JpaRepository {}
Controller
package cn.enaium.message.controller;import cn.enaium.message.entity.Message;import cn.enaium.message.repository.MessageRepository;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.RequestParam;import org.springframework.web.bind.annotation.RestController;import java.text.SimpleDateFormat;import java.util.Date;import java.util.List;/** * Project: message * ----------------------------------------------------------- * Copyright © 2020 | Enaium | All rights reserved. */@RestControllerpublic class Controller { @Autowired private MessageRepository messageRepository; @RequestMapping("/getMessages") private List getMessages() { return messageRepository.findAll();//遍历所有留言 } @GetMapping("/postMessage") private String postMessage(@RequestParam String author, @RequestParam String message) { if(author.replaceAll(" ","").equals("") || message.replaceAll(" ","").equals("")) { return "filed"; }//判断名字和留言是否为空 messageRepository.save(new Message((long) (messageRepository.findAll().size() + 1),author,message,new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(new Date())));//保存留言到数据库 return "success"; }}
解决跨源请求问题
package cn.enaium.message.config;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.CorsRegistry;import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;/** * Project: message * ----------------------------------------------------------- * Copyright © 2020 | Enaium | All rights reserved. */@Configurationpublic class CorsConfig implements WebMvcConfigurer { @Override//重写这个方法 public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); }}
三. 前端
安装插件axios和Element UI
写Home页面
留言版
留言By Enaium
路由页面
import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [ { path: '/', name: 'Home', component: Home }]const router = new VueRouter({ mode: 'history', routes})export default router
四. 运行
运行SpringBootcd 到Vue使用npm run serve运行