码云开源项目:利用SpringBoot+Vue 实现留言版

[复制链接]
一.新建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. */@[email protected]@[email protected] 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<Message, Long> {}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<Message> 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";    }}处理跨源请求题目


码云开源项目:操纵SpringBoot+Vue 实现留言版-1.jpg

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


码云开源项目:操纵SpringBoot+Vue 实现留言版-2.jpg


码云开源项目:操纵SpringBoot+Vue 实现留言版-3.jpg

写Home页面

<template>    <div>        <h1>留言版</h1>        <el-input                type="text"                placeholder="请输入你的名字"                v-model="messageBoard.author"                maxlength="16"                show-word-limit        >        </el-input>        <div style="margin: 20px 0;"></div>        <el-input                type="textarea"                placeholder="请输入留言"                v-model="messageBoard.message"                show-word-limit        >        </el-input>        <div style="margin: 20px 0;"></div>        <el-button type="primary" plain @click="postMessage">留言</el-button>        <el-divider></el-divider>        <el-table                :data="messages"                height="250"                border                style="width: 100%">            <el-table-column                    prop="id"                    label="序号"                    width="100">            </el-table-column>            <el-table-column                    prop="author"                    label="名字">            </el-table-column>            <el-table-column                    prop="message"                    label="留言">            </el-table-column>            <el-table-column                    prop="time"                    label="时候"                    width="160">            </el-table-column>        </el-table>        <el-link type="primary" href="https://github.com/Enaium">By Enaium</el-link>    </div></template><script>    export default {        name: "Home",        data() {            return {                messageBoard: {                    author: '',                    message: ''                },                messages: []            }        },        methods: {            postMessage() {                if (this.messageBoard.author === '') {                    this.$message.error('请输入你的名字');                    return                }                if (this.messageBoard.message === '') {                    this.$message.error('请输入留言');                    return                }                axios.get("http://localhost:8181/postMessage?author=" + this.messageBoard.author + "&message=" + this.messageBoard.message).then((t) => {                    if (t.data === 'success') {                        this.$message({                            message: '留言成功',                            type: 'success'                        });                    } else {                        this.$message.error('留言失利');                    }                })            }        },        created() {            axios.get("http://localhost:8181/getMessages").then((t) => {                this.messages = t.data            })        }    }</script>路由页面

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

温馨提示:
好向圈www.kuaixunai.com是各行业经验分享交流社区,你可以在这里发布交流经验,也可以发布需求与服务,经验圈子里面禁止带推广链接、联系方式、违法词等,违规将封禁账号,相关产品信息将永久不予以通过,同时有需要可以发布在自己的免费建站官网里面或者广告圈, 下载好向圈APP可以加入各行业交流群 本文不代表好向圈的观点和立场,如有侵权请下载好向圈APP联系在线客服进行核实处理。
审核说明:好向圈社区鼓励原创内容发布,如果有从别的地方拷贝复制将不予以通过,原创优质内容搜索引擎会100%收录,运营人员将严格按照上述情况进行审核,望告知!
回复

使用道具 举报

没找到任何评论,期待你打破沉寂

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

24小时热文