一.新建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页面

路由页面

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运行