vue 项目引用static目录资源_SpringBoot+Vue从零开始搭建系统(三)前后端整合二
前端整合
前端代码
KwgcFooter.vue
KwgcHeader.vue
KwgcLogin.vue
用户名:
密码:
登录
登录验证情况:
kwgcHeader.vue
这是首页
在main.js里配置支持跨域
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
// 引用axios,并设置基础URL为后端服务api地址var axios = require('axios')axios.defaults.baseURL = 'http://localhost:8443/api'// 将API方法绑定到全局Vue.prototype.$axios = axios
/* eslint-disable no-new */new Vue({ el: '#app', router, components: { App }, template: ''})
router/index.js 页面路由代码:
import Vue from 'vue'
import Router from 'vue-router'
//import HelloWorld from '@/components/HelloWorld'
import KwgcLogin from '@/components/manage/KwgcLogin.vue'
import KwgcIndex from '@/components/home/KwgcIndex.vue'
Vue.use(Router)
export default new Router({ routes: [ { path: '/', redirect: '/login' }, { path: '/index', name: 'KwgcIndex', component: KwgcIndex }, { path: '/manage', redirect: '/login' }, { path: '/login', name: 'KwgcLogin', component: KwgcLogin } ]})
config/index.js 跨域支持代码,找到文件中的proxyTable位置修改为以下内容添加请求到后端的跨域支持:
proxyTable: {
'/api': {
target: 'https://localhost:8443',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
这里可以单独跑下前端试试页面能不能出来!
整合步骤
之前的文章已经帮助搭建好了前端项目,现在进入项目目录下,执行 npm run build命令进行打包,会自动生成打包后的dist目录文件,把里面的文件全部复制到上图中的外层static中,包括static文件夹.
接下来访问:localhost:8080就可以看到登录页面了.
至此,前后端简单的整合就搞定了,作者也正在探索更多难点,希望朋友们能够一起成长.
总结
如果有任何问题可以在底下留言,如果大家都不能成功需要源码,可以在github上提供,因为暂时不知道反馈情况,所以还是看留言的多少来定吧!
未完待续,你的鼓励是我前进的动力^_^
vue 项目引用static目录资源_SpringBoot+Vue从零开始搭建系统(三)前后端整合二相关推荐
- vue axios 跨域_SpringBoot+Vue从零开始搭建系统(三)前后端整合二
前端整合 前端代码 KwgcFooter.vue 页面底部 KwgcHeader.vue 页面头部 KwgcLogin.vue 用户名: 密码: 登录 登录验证情况: kwgcHeader.vue 这 ...
- vue 项目引用static目录资源_Vue2.0项目入门 — 静态资源目录src/assets和static/区别...
rose.png 你应该注意到了,在项目结构上我们有静态资源两个目录:src/assets和static/.他们之间有什么区别? 通过webpack处理的资源 首先我们需要了解webpack如何处理静 ...
- vue 项目引用static目录资源_vuejs-templates静态资源目录src/assets、和static/区别
src/assets/和static/区别和用法 一句话总结:第三方资源都放在static文件夹中(如脚本库),自己在项目中使用的一些资源都放在assets中 文档传送门: vuejs-templat ...
- vue 项目引用static目录资源_详解vue中静态资源的路径问题(深度好文)
前言: webpack中的require解析 首先明确一点,在项目中的webpack.config.js等项目配置文件中使用的require属于nodejs范畴,而进入index.js后,加载的组件中 ...
- 【 Vue全家桶 · Vue CLI(四)】Vue项目的详细目录结构解析
文章目录 前言 -- 一级目录解析 一. dist 二. node_modules 三. public 四. src(基础版) 4.1 main.js 4.2 App.vue 4.3 src / as ...
- Vue项目中的静态资源引入
Vue项目中的静态资源引入 assets和static assets 静态资源访问static assets和static assets assets在src文件夹下面,src里面的文件是参与打包的, ...
- vue项目开发的目录结构
vue项目开发的目录结构 一.通过命令行工具安装vue(npm install webpack vue-project) build -- 项目构建的相关代码 config -- 配置目录,包括端口. ...
- Vue项目部署及使用WebStorm开发Vue
Vue项目部署及使用WebStorm开发Vue Vue项目部署 搭建Vue环境 新建Vue项目 使用WebStorm开发Vue WebStorm相关配置 配置路由 全局页面App.vue 全局引入组件 ...
- Spring Boot Vue从零开始搭建系统(三):项目前后端分离
转载 http://www.360doc.com/content/19/1030/11/67080110_870024161.shtml 前言 本文主要是想通过后端 Spring Boot 技术和前端 ...
最新文章
- 获取服务端https证书
- 使用Python解压zip、rar文件
- flask html css文件更改后(谷歌)浏览器不及时更新样式文件怎么办?(ctrl+shift+delete清除缓存的图片和文件)
- PAT_B_1006_Java(15分)
- elementUI vxe-table结合使用(通用表格)
- C++类型转换方式总结
- java代码-----逻辑运算符
- hive 时间函数_Hive常用大法(聚合/排序/分组)
- .net网络编程(4)TcpListener、TcpClient
- docker-2 深入了解docker
- 游戏代理ip怎么设置_游戏代理怎么做
- linux未找到命令rpm,RPM命令执行失败:bash: rpm: 未找到命令...
- OpenKG祝大家端午安康
- 【VueElementUI学习】表格序号
- puppet kick 报错返回值code3 求解答(finished with exit code 3)
- Ubuntu开机一直卡在[OK] Started GNOME Display Manager处,解决方案!
- mac 打开网页慢_Safari打开网页卡住或加载极慢问题解决方案
- 文本蕴涵模型测试过程
- 如何给运行中的docker容器增加映射端口
- 两个自我的对话和博弈
热门文章
- Arduino开发小项目—光控灯
- 三门问题python 编程_趣味编程:三门问题
- 9665(10:1探头),9666(100:1探头)可以用在哪些存储记录仪上?
- Kafka毒丸消息,危害,如何解决
- 关于 Python 的9个神奇事实
- 5.Java中的基本数据类型有哪些?
- 大跨度桥梁类毕业论文文献包含哪些?
- Debian下最简的添加ttf字体文件的方法(网络收藏)
- OpenCV入门 | 使用Python实现计算机视觉的第一步
- 指南|松下PLC与研控E总线驱动器连接步骤及注意事项