springboot+vue框架

文章目录

1.Vue的安装
2. 使用element-plus组件
3.使用axios进行前后端交互
- 3.1. 安装axios
- 3.2. Vue项目搭建常用的配置文件，request.js和vue.config.js
- - 3.2.1. 前端跨域解决方案
  - 3.2.2. 后端跨域解决方案
4. 数据库设计
5. 创建springboot项目
6. 前端功能实现与后端功能连通
- 6.1. 前端功能实现
- 6.2. 后端功能实现

1.Vue的安装

新建文件夹"springboot+vue框架"
打开dos界面，进入"springboot+vue框架"文件夹
安装node软件
安装vue脚本

npm install vue

创建vue项目
安装成功后，打开项目

 cd springboot-vue-demonpm run serve

直接把springboot-vue-demo拖入到IDEA
设置自动运行按钮
设置自动打开浏览器界面

2. 使用element-plus组件

在IDEA上安装element-plus组件

npm install element-plus --save --legacy-peer-deps

添加配置信息

3.使用axios进行前后端交互

3.1. 安装axios

npm i axios -S

3.2. Vue项目搭建常用的配置文件，request.js和vue.config.js

3.2.1. 前端跨域解决方案

request.js用来请求数据，封装的代码如下：

import axios from 'axios'const request = axios.create({baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！timeout: 5000
})// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';// config.headers['token'] = user.token;  // 设置请求头return config
}, error => {return Promise.reject(error)
});// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response => {let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服务端返回的字符串数据if (typeof res === 'string') {res = res ? JSON.parse(res) : res}return res;},error => {console.log('err' + error) // for debugreturn Promise.reject(error)}
)export default request

vue.config.js:

// 跨域配置
module.exports = {devServer: {                //记住，别写错了devServer//设置本地默认端口  选填port: 9876,proxy: {                 //设置代理，必须填'/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定target: 'http://localhost:9999',     //代理的目标地址changeOrigin: true,              //是否设置同源，输入是的pathRewrite: {                   //路径重写'^/api': ''                     //选择忽略拦截器里面的内容}}}}
}

3.2.2. 后端跨域解决方案

如果后端设置了跨域配置，则使用下面的request.js 代码：

import axios from 'axios'const request = axios.create({baseURL: 'http://localhost:9090',  // 注意！！ 这里是全局统一加上了 后端接口前缀 前缀，后端必须进行跨域配置！timeout: 5000
})// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';// config.headers['token'] = user.token;  // 设置请求头return config
}, error => {return Promise.reject(error)
});// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response => {let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服务端返回的字符串数据if (typeof res === 'string') {res = res ? JSON.parse(res) : res}return res;},error => {console.log('err' + error) // for debugreturn Promise.reject(error)}
)export default request

4. 数据库设计

5. 创建springboot项目

采用分层思想实现功能
Java web各层

返回结果格式

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 reslut = new Result<>();reslut.setCode("0");reslut.setMsg("成功");return reslut;}public static <T> Result<T> success(T data){Result<T> reslut = new Result<>(data);reslut.setCode("0");reslut.setMsg("成功");return reslut;}public static Result error(String code, String msg){Result reslut = new Result();reslut.setCode(code);reslut.setMsg(msg);return reslut;}
}

6. 前端功能实现与后端功能连通

6.1. 前端功能实现

以新增功能为例

<!--功能区域--><div style="margin: 10px 0"><el-button type="primary" @click="handleEdit">新增</el-button><el-button type="primary">导入</el-button><el-button type="primary">导出</el-button></div>

注意save

<template #footer><span class="dialog-footer"><el-button @click="dialogVisible = false">Cancel</el-button><el-button type="primary" @click="save">Confirm</el-button></span>
</template>

注意save函数
使用上文3.2.1中request.js来请求数据

save(){request.post("/user",this.form).then(res =>{console.log(res)if(res.code==='0'){this.$message({type: "success",message: "新增成功"})}else{this.$message({type: "error",message: res.msg,})}this.load() //刷新表格数据this.dialogVisible=false //关闭弹窗})}

6.2. 后端功能实现

@RestController
@RequestMapping("/user")
public class UserController {//@RequestBody:把前台传过来的json,转换为对象@ResourceUserMapper userMapper;@PostMappingpublic Result<?> save(@RequestBody User user){if (user.getPassword()==null){user.setPassword("123456");}userMapper.insert(user);return Result.success();}
}

springboot+vue框架相关推荐

基于 SpringBoot + Vue 框架开发的网页版聊天室项目
‍ ‍简介微言聊天室是基于前后端分离,采用SpringBoot+Vue框架开发的网页版聊天室.使用了Spring Security安全框架进行密码的加密存储和登录登出等逻辑的处理,以WebSocke ...
基于Springboot+VUE框架开发的企业微信SCRM系统
应用介绍基于Springboot+ vue框架开发的企业微信SCRM 系统是一款基于人工智能的企业微信SCRM系统,企业微信SCRM系统基于企业微信开放能力,不仅集成了企微基础的客户管理和后台管理功 ...
springboot+vue框架搭建教程
项目介绍一款 Java 语言基于 SpringBoot2.x.MybatisPlus.Vue.ElementUI.MySQL等框架精心打造的一款前后端分离框架,致力于实现模块化.组件化.可插拔的前后 ...
记录使用springboot+vue框架搭建一个前后端分离的demo（后端项目）
我用的工具版本:idea2019.1.3 vue2.9.6 jdk1.8 数据库用的是mysql 数据库名字叫mydatabase,表名字叫t_b_member 一.最终项目结构 member是项目名 ...
基于springboot+vue框架的二手书交易网站
(1)二手书搜索:用户在输入框中输入二手书的名称等关键字,便可搜索出来需要的二手书. (2)首页轮播:每个轮播所需要的的图片(广告图片)都是由后台管理系统进行添加. (3)二手书展示:首页展示每个二手 ...
Java项目:仿小米电子产品售卖商城系统(java+SpringBoot+Vue+MySQL+Redis+ElementUI)
源码获取:博客首页 "资源" 里下载! 项目描述:这是一个基于SpringBoot+Vue框架开发的仿小米电子产品售卖商城系统.首先,这是一个前后端分离的项目,代码简洁规范,注释说 ...
SpringBoot+Vue实现的高校图书馆管理系统附带详细运行指导视频
文章目录一.项目演示二.项目介绍三.项目运行截图四.主要代码一.项目演示项目演示地址: 视频地址二.项目介绍项目描述:这是一个基于SpringBoot+Vue框架开发的高校图书馆管理系 ...
基于SpringBoot+Vue实现的仿掘金论坛系统（包含完整源码以及部署教程）
项目简介本论坛基于SpringBoot+Vue框架实现前后端分离,自适应手机端和电脑端,界面简洁美观,功能完善,性能高效.分为用户系统和管理系统两部分. 大厂微服务架构设计:代码简洁.高效无冗余:注 ...
springboot+vue毕业生离校系统
目录摘要 I 目录 III 第1章概述 1 1.1 研究背景 1 1.2 研究现状 1 1.3 研究内容 2 第二章开发技术介绍 2 2.1 ...

springboot+vue框架

文章目录

1.Vue的安装

2. 使用element-plus组件

3.使用axios进行前后端交互

3.1. 安装axios

3.2. Vue项目搭建常用的配置文件，request.js和vue.config.js

3.2.1. 前端跨域解决方案

3.2.2. 后端跨域解决方案

4. 数据库设计

5. 创建springboot项目

6. 前端功能实现与后端功能连通

6.1. 前端功能实现

6.2. 后端功能实现

springboot+vue框架相关推荐

最新文章

热门文章