Spring Boot+Vue实战：快速搭建个人博客

最新推荐文章于 2024-06-05 15:37:37 发布

笼中小夜莺

最新推荐文章于 2024-06-05 15:37:37 发布

阅读量794

点赞数

分类专栏： Spring Boot小白成长之路文章标签： java vue spring boot

本文链接：https://blog.csdn.net/m0_46521785/article/details/112438853

版权

Spring Boot小白成长之路专栏收录该内容

38 篇文章 6 订阅

订阅专栏

描述

前后端分离，前端使用Vue，后端使用SpringBoot，适合作为前后端联调的新手项目。

个人代码地址：https://github.com/coder-zrl/vueblog/

收获与不足

收获

学习到了简单的vue知识
了解到了前后端分离最后合并的过程
增加了自身的编程能力
使用idea进行vue开发
了解到了数据库自动生成代码的步骤
知道了对实体类进行序列化的操作

不足

没有做身份验证，即没整合shior框架，因为12号考线代，还没复习，寒假会完善
markdown详情界面渲染的不好看，甚至❤️这种东西都渲染不出来

项目效果

在这里插入图片描述

java收获

数据库代码自动生成

依赖

		<!--页面引擎-->
		<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-freemarker</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
		<!--mp-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.2.0</version>
        </dependency>

        <!--代码生成器-->
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-generator</artifactId>
            <version>3.2.0</version>
        </dependency>

启动类

package com.example;

import com.baomidou.mybatisplus.core.exceptions.MybatisPlusException;
import com.baomidou.mybatisplus.core.toolkit.StringPool;

import com.baomidou.mybatisplus.core.toolkit.StringUtils;
import com.baomidou.mybatisplus.generator.AutoGenerator;
import com.baomidou.mybatisplus.generator.InjectionConfig;
import com.baomidou.mybatisplus.generator.config.*;
import com.baomidou.mybatisplus.generator.config.po.TableInfo;
import com.baomidou.mybatisplus.generator.config.rules.NamingStrategy;
import com.baomidou.mybatisplus.generator.engine.FreemarkerTemplateEngine;


import java.util.ArrayList;
import java.util.List;
import java.util.Scanner;

// 演示例子，执行 main 方法控制台输入模块表名回车自动生成对应项目目录中
public class CodeGenerator {

    /**
     * <p>
     * 读取控制台内容
     * </p>
     */
    public static String scanner(String tip) {
        Scanner scanner = new Scanner(System.in);
        StringBuilder help = new StringBuilder();
        help.append("请输入" + tip + "：");
        System.out.println(help.toString());
        if (scanner.hasNext()) {
            String ipt = scanner.next();
            if (StringUtils.isNotEmpty(ipt)) {
                return ipt;
            }
        }
        throw new MybatisPlusException("请输入正确的" + tip + "！");
    }

    public static void main(String[] args) {
        // 代码生成器
        AutoGenerator mpg = new AutoGenerator();

        // 全局配置
        GlobalConfig gc = new GlobalConfig();
        String projectPath = System.getProperty("user.dir");
        gc.setOutputDir(projectPath + "/src/main/java");
//        gc.setOutputDir("D:\\test");
        gc.setAuthor("coder-zrl");
        gc.setOpen(false);
        // gc.setSwagger2(true); 实体属性 Swagger2 注解
        gc.setServiceName("%sService");
        mpg.setGlobalConfig(gc);

        // 数据源配置
        DataSourceConfig dsc = new DataSourceConfig();
        dsc.setUrl("jdbc:mysql://localhost:3306/vueblog?useUnicode=true&useSSL=false&characterEncoding=utf8&serverTimezone=UTC");
        // dsc.setSchemaName("public");
        dsc.setDriverName("com.mysql.cj.jdbc.Driver");
        dsc.setUsername("root");
        dsc.setPassword("422518");
        mpg.setDataSource(dsc);

        // 包配置
        PackageConfig pc = new PackageConfig();
        pc.setModuleName(null);
        pc.setParent("com.example");
        mpg.setPackageInfo(pc);

        // 自定义配置
        InjectionConfig cfg = new InjectionConfig() {
            @Override
            public void initMap() {
                // to do nothing
            }
        };

        // 如果模板引擎是 freemarker
        String templatePath = "/templates/mapper.xml.ftl";
        // 如果模板引擎是 velocity
        // String templatePath = "/templates/mapper.xml.vm";

        // 自定义输出配置
        List<FileOutConfig> focList = new ArrayList<>();
        // 自定义配置会被优先输出
        focList.add(new FileOutConfig(templatePath) {
            @Override
            public String outputFile(TableInfo tableInfo) {
                // 自定义输出文件名 ， 如果你 Entity 设置了前后缀、此处注意 xml 的名称会跟着发生变化！！
                return projectPath + "/src/main/resources/mapper/"
                        + "/" + tableInfo.getEntityName() + "Mapper" + StringPool.DOT_XML;
            }
        });

        cfg.setFileOutConfigList(focList);
        mpg.setCfg(cfg);

        // 配置模板
        TemplateConfig templateConfig = new TemplateConfig();

        // 配置自定义输出模板
        //指定自定义模板路径，注意不要带上.ftl/.vm, 会根据使用的模板引擎自动识别
        // templateConfig.setEntity("templates/entity2.java");
        // templateConfig.setService();
        // templateConfig.setController();

        templateConfig.setXml(null);
        mpg.setTemplate(templateConfig);

        // 策略配置
        StrategyConfig strategy = new StrategyConfig();
        strategy.setNaming(NamingStrategy.underline_to_camel);
        strategy.setColumnNaming(NamingStrategy.underline_to_camel);
        strategy.setSuperEntityClass("com.example.entity.BaseEntity");
        strategy.setEntityLombokModel(true);
        strategy.setRestControllerStyle(true);
        strategy.setSuperControllerClass("com.example.controller.BaseController");
        strategy.setInclude(scanner("表名，多个英文逗号分割").split(","));
        strategy.setSuperEntityColumns("id", "created", "modified", "status");
        strategy.setControllerMappingHyphenStyle(true);
        strategy.setTablePrefix(pc.getModuleName() + "_");
        mpg.setStrategy(strategy);
        mpg.setTemplateEngine(new FreemarkerTemplateEngine());
        mpg.execute();
    }
}

在对应包下写上BaseEntity、BaseController这两个类

BaseEntity:

@Data
public class BaseEntity implements Serializable {
    private static final long serialVersionUID = 1L;
    private Long id;
    private Date created;
    private Date modified;
}

BaseController:

public class BaseController {
    @Autowired
    HttpServletRequest req;
}

复制代码

简单测试

原来返回一种数据类型到前端，只要这个类继承了Serializable他的数据就会自动拆解为json
可以返回Object类型到前端

一种意识：方法重载时方法之间要学会调用，将数据多层封装

    public static Result fail(String msg) {
        return fail(400,msg,null);
    }

    public static Result fail(String msg,Object data) {
        return fail(400,msg,data);
    }

    public static Result fail(int code,String msg,Object data) {
        Result r = new Result();
        r.setCode(code);
        r.setMsg(msg);
        r.setData(data);
        return r;
    }

解决跨域问题

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","HEAD","POST","PUT")
                .allowCredentials(true)
                .allowedHeaders("*");
    }
}

时间（返回字段）的格式

对实体类的对应字段添加@JsonFormat(pattern=“yyyy-MM-dd”)注解

例如时间2021-01-10T07:21:45.000+00:00变成了2021-01-10

Vue学习收获

安装与基本配置

下载node.js

进入官网https://nodejs.org/zh-cn/下载长期支持版并安装

设置淘宝源

换源之后安装速度会很快，命令行键入

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装vue

命令行键入

cnpm install vue

启动vue ui并创建vue

命令行输入vue ui

如果没反应就是版本太低，输入这行代码cnpm i -g @vue/cli

如果显示vue无法加载文件就管理员身份运行PowerShell，输入set-ExecutionPolicy RemoteSigned在输入A

Ider安装vue.js插件，电脑下载element-ui和axios

cnpm install element-ui -S
cnpm install axios -S  # 与ajax类似，但是基于xxx

引入模块

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

import axios from 'axios'

全局使用

Vue.app文件中输入

Vue.use(Element)
Vue.prototype.$axios = axios

启动

npm run serve  # 也可以自己给idea配置npm，然后点击右上角的播放即可

配置路由中心

进入router文件夹下的index.js
引入写好的vue界面

编写路由配置

import Login from '../views/Login.vue'
import Blogs from '../views/Blogs.vue'
import BlogDetail from '../views/BlogDetail.vue'
import BlogEdit from '../views/BlogEdit.vue'

const routes = [
  {
    path: '/',//主页面
    name: 'Index',
    redirect: {name: "Blogs"}//页面重定向到Blogs
  },
  {
    path: '/blogs',
    name: 'Blogs',
    component: Blogs
  },
  {
    path: '/blog/add',//这个一定要放在下面这个路由之前，因为否则会把add作为参数传到下面去
    name: 'BlogEdit',
    component: BlogEdit
  },
  {
    path: '/blog/:blogId',
    name: 'BlogDetail',
    component: BlogDetail
  },
  {
    path: '/blog/:blogId/edit',//此时blogId就会作为一个参数，页面可以获取
    name: 'BlogEdit',
    component: BlogEdit
  },
]

新手基础

vue文件下的template只能有一个标签，最好是div标签，多个是不可以的
App.vue文件的内容是全局设置的，包括布局

提交表单数据

vue的数据是双向数据绑定的，ruleForm中包含两个表单字段（用name区分）
ruleForm: {
        username: '',
        password: ''
      }
then是的得到结果后怎么办
this.$axios.post('http://localhost:8080/login',this.ruleForm()).then(res => {
            console.log(res)
          })

store文件夹下的index.js中state的参数是全局可以使用的，牵一发而动全身
_this.$store.commit(“SET_USERINFO”,userInfo)//调用方法
console.log(_this.$store.getters.GET_USERINFO)
_this.route.push(’/blogs’)//跳转

引入另一个vue文件

通常情况下，通用的页面事放在components文件夹下的，此时在需要的文件下的scrip代码中import，然后再在default中注册components，然后就能使用Header标签作为这个页面的一部分了

<script>
//导入头部
import Herder from "@/components/Herder";

export default {
  name: "Blogs.vue",
  components:{Herder},
  }
</script>

引入Markdown编辑器

安装编辑器

cnpm i mavon-editor -S

main.js进行全局注册

// 全局注册
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
// use
Vue.use(mavonEditor)

页面解析md为html

# 用于解析md文档
cnpm i markdown-it -S
# md样式
cnpm i github-markdown-css -S

渲染内容为html格式

var MarkdownIt = require('markdown-it')
var md = new MarkdownIt()

var result = md.render(blog.content)

_this.blog.content = result

script中引入markdown渲染css格式

import 'github-markdown-css'

内容添加标签

<div class="markdown-body" v-html="blog.content"></div>

笼中小夜莺

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
Spring Boot+Vue实战：快速搭建个人博客

描述前后端分离，前端使用Vue，后端使用SpringBoot，适合作为前后端联调的新手项目。个人代码地址：https://github.com/coder-zrl/vueblog/收获与不足收获学习到了简单的vue知识了解到了前后端分离最后合并的过程增加了自身的编程能力使用idea进行vue开发了解到了数据库自动生成代码的步骤知道了对实体类进行序列化的操作不足没有做身份验证，即没整合shior框架，因为12号考线代，还没复习，寒假会完善markdown详情界面渲染的不好看，甚
复制链接

扫一扫