springboot+vue+ElementUi项目实例,部署到云服务器上
2020-07-16 04:55
447 查看
项目地址:https://e.coding.net/dabfdebfhui/springbootvue.git
SpringBoot(端口号:8081)
1.导入mysql数据库
2.代码生成器生成实体类与Mapper文件
3.搭建springBoot+mybatis+Swagger项目
创建项目过程中开始可以不选,进入项目后在pom.xml文件中添加
Vue(端口号:8080)
1.使用Vue cli脚手架创建Vue项目
1.下载node.js 2.切换npm源为天猫 3.全局安装vue-cli npm install --global vue-cli 4.生成项目 vue init webpack 项目名称 5.启动命令npm run dev 6.localhost:8080 启动 npm run dev 打包 npm run build 参考网址 https://blog.csdn.net/mentalitys/article/details/93845973
2.安装Axios
**1.安装** npm install axios -s **2.main.js引入并设置** import axios from 'axios'; // var axios = require('axios') axios.defaults.baseURL = 'http://localhost:8081/NingAcc' // 将API方法绑定到全局 Vue.prototype.$axios = axios Vue.config.productionTip = false 3.方法使用 moneyData() { this.$axios.get("/findAll", { query: { } }).then(res => { this.moneyLists = res || []; console.log(this.moneyLists); console.log("moneyList---------->" + this.moneyLists); console.log("moneyList-------->" + this.moneyListT); }); }
3.安装ElementUI
1.进入项目目录下安装elementUI的依赖包 npm i element-ui -S 2.在main.js中加入 import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI) 参考网址 https://blog.csdn.net/mentalitys/article/details/93845973
4.安装Route
具体看项目
1.导航栏route跳转必须添加 :default-active="this.$route.path" router 如: <el-menu :default-active="this.$route.path" router class="el-menu-demo" mode="horizontal" @select="handleSelect" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
Springboot与Vue集成jar包
(1)vue
1.设置后端代理 在根目录的config目录下的index.js中设置 proxyTable: { '/': { target: 'http://localhost:8081', changeOrigin: true, pathRewrite: { '^/': '' } } }, 2.打包 npm run build 3.集成 在根目录的dist目录中,存在Vue打的包,全部复制放置于springboot项目的resources下的static目录下。
(2)springboot
1.左上角clean
2.左上角package,生成target文件,注意:检查mapping是否存在
3.在target目录下打开shell窗口,运行java -jar xxxxxx.jar,浏览器访问localhost:8081。
jar包部署到云服务器上
链接:https://blog.csdn.net/weixin_45573378/article/details/106861562
相关文章推荐
- SpringBoot + Thymeleaf + vue + element-ui 全栈开发入门——项目部署
- spring boot + vue + element-ui全栈开发入门——项目部署
- vue,element-ui,springboot,pageHelper对多个页面操作的分页实例~~(自己记下的,便于学习)
- 阿里云ubuntu轻量级服务器部署SpringCloud+Vue+Element-UI项目
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(一)
- Spring boot + mybatis + Vue.js + ElementUI 实现数据的增删改查实例代码(二)
- 视频教程-Springboot+Vue+Shiro+ElementUI前后端分离权限快速上手项目实战开发-Java
- vue+element-ui+springboot+axios的多对多项目
- 在线教育项目1--使用element-ui配合springboot oss上传文件/视频到阿里云oss
- spring boot + vue前后台分离项目部署
- 将springBoot项目部署到docker入门实例
- 部署SpringBoot,Vue项目到Linux服务器上
- Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之三 vue简单页面实战
- springboot+vue+element ui(upload+download)实现excel上传及下载(附带通过网关、前端获取token封装和携带请求方式)
- spring boot + vue + element + vux + 微信公众号部署文档
- Spring boot+Shiro+ spring MVC+swagger UI +Mybatis+mysql+Vue +Element UI 之四 vue 整合Element UI
- SpringBoot+Vue+ElementUI实现含国际化的前后端不分离的传统简易管理系统搭建(一)
- 将spring boot项目jar包部署到云服务器
- 记录一次vue+springboot项目打包部署到服务器上
- docker-compose 部署 Vue+SpringBoot 前后端分离项目