前端VUE+后端Springboot 项目搭建

网址:https://v3.cn.vuejs.org/guide/introduction.html#vue-js-是什么 vue.js node下载:https://nodejs.org/zh-cn/
C:\Users\GW00240066\Desktop\springboot_vue>npm -v 6.14.14 C:\Users\GW00240066\Desktop\springboot_vue>node -v v14.17.4 C:\Users\GW00240066\Desktop\springboot_vue>npm install -g @vue/cli ... C:\Users\GW00240066\Desktop\springboot_vue>vue create vue_springboot_demo

在这里插入图片描述
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J8jbtmoR-1633678903917)(D:\notes\vue+springboot.assets\image-20210903095447450.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mm5LA8jA-1633678903918)(D:\notes\vue+springboot.assets\image-20210903095620852.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8jeYV32h-1633678903922)(D:\notes\vue+springboot.assets\image-20210903095721777.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GOEzN8Ul-1633678903923)(D:\notes\vue+springboot.assets\image-20210903095925875.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vi00s2TC-1633678903924)(D:\notes\vue+springboot.assets\image-20210903100013859.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-12Q1ktyT-1633678903926)(D:\notes\vue+springboot.assets\image-20210903100232994.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-darqcmed-1633678903926)(D:\notes\vue+springboot.assets\image-20210903100449904.png)]
Ctrl + c 关闭当前启动的项目。

App running at: - Local: http://localhost:8080/ - Network: http://10.20.46.76:8080/ Note that the development build is not optimized. To create a production build, run npm run build. 终止批处理操作吗(Y/N)? y

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rjpazp2l-1633678903927)(D:\notes\vue+springboot.assets\image-20210903101406485.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-10Dqn2PP-1633678903927)(D:\notes\vue+springboot.assets\image-20210903101628500.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZROj1EoI-1633678903927)(D:\notes\vue+springboot.assets\image-20210903101834722.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZjzLXosd-1633678903928)(D:\notes\vue+springboot.assets\image-20210903103246199.png)]
安装Element-plus

//网址:https://element-plus.gitee.io/#/zh-CN/component/installation $ npm install element-plus --save

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vw3J6S1J-1633678903928)(D:\notes\vue+springboot.assets\image-20210903132059762.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kic9paz5-1633678903929)(D:\notes\vue+springboot.assets\image-20210904142134025.png)]
阿里云的springboot搭建网站:

https://start.aliyun.com

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MhAv1EUJ-1633678903930)(D:\notes\vue+springboot.assets\image-20210904144339742.png)]
上图为搭建项目时所选择的依赖。

下图为项目结构:前端vue,后端springboot
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x5mPHlg5-1633678903930)(D:\notes\vue+springboot.assets\image-20210904150735052.png)]
搭建数据库表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lXPWy5Ep-1633678903930)(D:\notes\vue+springboot.assets\image-20210904151441354.png)]
启动时出现程序包不存在的错误,要将如图所示选项勾上
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1aLenKm4-1633678903931)(D:\notes\vue+springboot.assets\image-20210904152832412.png)]
Mybatis - plus :官网:https://mp.baomidou.com/

<dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.4.3.1</version> </dependency>

自定义Result 函数返回方法。

package com.example.demo.common; public class Result<T> { private String code ; private String msg ; private T data ; public String getCode() { return code ; } public void setCode(String code) { this.code = code ; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } public T getData() { return data; } public void setData(T data) { this.data = data; } public Result(){ } public Result(T data) { this.data = data ; } public static Result success() { Result result = new Result<>(); result.setCode("0"); result.setMsg("成功"); return result; } public static <T> Result<T> success(T data){ Result result = new Result<>(); result.setCode("0"); result.setMsg("成功"); return result; } public static Result error(String code , String msg){ Result result = new Result(); result.setCode(code); result.setMsg(msg); return result; } }

在这里插入图片描述

https://blog.csdn.net/xqnode/article/details/118325868 Vue项目搭建常用的配置文件,request.js和vue.config.js

工具类:https://www.hutool.cn/

chrom添加JSON格式:https://www.cnblogs.com/xifenglou/p/11364426.html

选中文件: shift +F6 改名

断点模式,F8跳转

BigDecimal Decimal

@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8") private Date date;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8EY9p4xB-1633678903932)(D:\notes\vue+springboot.assets\image-20210910092504941.png)]
add as maven project

富文本编辑器:https://www.wangeditor.com/
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-i8IWckqo-1633678903933)(D:\notes\vue+springboot.assets\image-20210910093927061.png)]


__EOF__

本文作者Stdio.Qu
本文链接https://www.cnblogs.com/czarQ/p/17537221.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   沉淀i  阅读(23)  评论(0编辑  收藏  举报  
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
点击右上角即可分享
微信分享提示