一.新建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運行

總結

以上是生活随笔為你收集整理的idea新建springboot后端到前端_码云开源项目：利用SpringBoot+Vue 实现留言版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。