Springboot+vue项目的搭建，自用

先安装Node.js

使用npm安装node.js

安装完在cmd中输入
$ npm install vue
对vue.js进行安装

记得要对npm、vue进行环境变量的配置
配置完成后用cmd查看npm、vue的版本查看是否配置完成
用vue create Gaokao-demo创建vue项目
之后再文件夹下用npm run serve 对vue项目进行启动
访问localhost:8080访问到vue界面

再直接将项目拖动到IDEA上进行打开

核心是src文件夹下内容，assets是静态资源、components是组件，router中的index.js是路由的位置、store用于定义页面信息遍历，view是视图存放未知

使用Element ui组件库对前端界面进行搭配
https://element-plus.gitee.io/zh-CN/
element -plus是基于vue3的升级
https://element.eleme.cn/#/zh-CN

element的安装
npm install element-plus --save

完整导入Element
import { createApp } from ‘vue’
import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’
import App from ‘./App.vue’
const app = createApp(App)
app.use(ElementPlus)
app.mount(‘#app’)

快速创建Springboot项目

选中需要的配置
无脑安装就完事了
之后对Springboot和vue两个项目进行一个整合，IDEA的项目目录下创建一个VUE文件，将原先创建的vue项目中需要的文件放到一起。文件夹里剪切过去就行。

之后对vue启动项进行配置

配置Springboot的pom.xml和application.yml文件

安装Mybatis-plus的依赖文件

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

配置Result包装类用于前台后台数据的统一，包装后台的返回对象

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=(T) data;}public Result(T data){this.data=data;}public Result(){}public static Result success(){Result result=new Result<>();result.setCode("0");result.setMsg("成功");return result;}public static <T> Result<T> success(T data){Result<T> result=new Result<T>();result.setCode("0");result.setMsg("成功");result.setData(data);System.out.println("result:"+result);return result;}public static Result  error(String code,String msg){Result result=new Result();result.setCode(code);result.setMsg(msg);return result;}@Overridepublic String toString() {return "Result{" +"code='" + code + '\'' +", msg='" + msg + '\'' +", data=" + data +'}';}
}

对axios进行安装

cd到vue文件下
npm i axios -s

并对其进行引入和封装。
request.js和vue.config.js 为vue常用的配置文件request.js

import axios from 'axios'const request = axios.create({baseURL: '/api',  // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！timeout: 20000
})// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';// config.headers['token'] = user.token;  // 设置请求头//取出SessionStorge里面缓存的用户信息，const userJson=sessionStorage.getItem("user");return config
}, error => {return Promise.reject(error)
});// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response => {let res = response.data;//axios默认返回的数据都存于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)}
)

vue.config.js

// 跨域配置
module.exports = {publicPath: process.env.NODE_ENV === "production" ? "/" : "/",lintOnSave: false, // 关闭烦人的eslint，如需打开请修改为trueconfigureWebpack:{//vue cli创建的项目resolve: {// 将 `.ts` 添加为一个可解析的扩展名。extensions: ['.ts', '.js']},module: {rules: [{test: /\.ts$/,loader: 'ts-loader',options: { appendTsSuffixTo: [/\.vue$/] }}]}},// 打包时不生成.map文件productionSourceMap: true,devServer: {                //记住，别写错了devServer//设置本地默认端口  选填port: 9876,proxy: {                 //设置代理，必须填,'/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定target: 'http://localhost:9090',     //代理的目标地址changeOrigin: true,              //是否设置同源，输入是的pathRewrite: {                   //路径重写'^/api': ''                     //选择忽略拦截器里面的内容}},}}
}

Springboot+vue项目的搭建，自用相关推荐

SpringBoot后端项目框架搭建
SpringBoot后端项目框架搭建本节内容服务于SpringBoot + Vue 搭建 JavaWeb 增删改查项目. 工具安装电脑已安装\配置如下工具: IDEA.jdk.MySQL及其可视化 ...
Windows之vue-cli安装和vue项目快速搭建
Windows之vue-cli安装和vue项目快速搭建 1.提前安装好node.js, 安装步骤:https://blog.csdn.net/qq_43842093/article/details/1 ...
一键生成Springboot Vue项目！【私活神器】
今天给大家推荐一款自己公司正在打磨的一款一键部署,一键生成全自动化的低代码生成器工具,可以实现前端可视化操作(拖拽形式+配置就可以生成前端页面),后端直接结合前端代码一键生成,数据库(含表字段)可一键 ...
Mac Webpack Vue项目的搭建
文章目录前言一.Node的安装? 二.Webpack的安装三.Vue 的安装四.Vue项目的创建五:运行项目前言由于公司需要对接浙政厅的H5应用平台,为了满足平台的发布要求,自己第一次研 ...
Vue项目脚手架搭建
Vue项目脚手架搭建 Vue 项目脚手架搭建需要的工具安装NodeJs 安装vue-cli 安装webpack 初始化项目启动项目 Vue 项目脚手架搭建需要的工具 NodeJs vue-cli ...
部署springboot+vue项目文档（若依ruoyi项目部署步骤）
部署springboot+vue项目文档(若依ruoyi项目部署步骤) 一:部署linux + nginx 二:部署windows + tomcat(无nginx) 三:解决调用第三方api如百度地图 ...
「Vue 学习笔记 1」Vue 项目快速搭建，初始项目各个文件夹作用介绍和启动代码执行流程分析
「Vue 学习笔记 1」Vue 项目快速搭建,初始项目各个文件夹作用介绍和启动代码执行流程分析前言一.我的开发环境二.使用 Vue CLI (Vue 脚手架)快速搭建项目三.初始项目的目录结构 ...
springboot+vue项目大型实战（一）后端开发
源码下载地址!!!点我数据库创建表 SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0;-- ---------------------------- -- ...
SpringBoot+Vue项目中实现登录验证码校验
SpringBoot+Vue项目中实现登录验证码校验在各大项目中,为保证数据的安全性,通常在登录页面加入验证码校验,以防止爬虫带来的数据泄露危机.本文将介绍在前后端分离的项目中,怎样实现图形验证码校 ...

Springboot+vue项目的搭建，自用

Springboot+vue项目的搭建，自用相关推荐

最新文章

热门文章