VUE开发(一)Spring Boot整合Vue并实现前后端贯穿调用
文章更新时间:2020/03/14
一、前言
作为一个后端程序员,前端知识多少还是要了解一些的,vue能很好的实现前后端分离,且更便于我们日常中的调试,还具备了轻量、低侵入性的特点,所以我觉得是很有必要了解的一门前端技术。
这篇文章先记录下如何把vue整合到我们的整个工程中,并作为前端页面的入口,贯穿到后场服务的调用;一些基础知识和使用技巧的总结,后面再找合适的时间去开新的篇幅,看完这篇文章,应该可以大致了解vue的结构,并跑起一个完整的项目了。
二、启动第一个vue工程
1、前置准备:安装node.js
Node是一个让 JavaScript 运行在服务端的开发平台,node.js的npm是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,我们开发vue之前先把node.js安装好,相关教程网上也很多,这里就不详细描述了,安装成功后在idea里面右键工程->open in terminal->输入命令,若出现下图中的场景,我们就可以开始搭建vue环境了
2、创建前端模块
创建完以后的结构:
3、安装vue脚手架工具vue-cli,并初始化项目
##安装脚手架工具vue-cli
npm install --global vue-cli
## 安装webpack模块打包工具
npm install -g webpack
##初始化项目
vue init webpack 刚创建的目录名称
##安装vue的基础依赖库
npm install
由于我的项目已经初始过,这里借用一张图来简单了解下配置:
4、启动项目
##执行package.json中的script脚本
npm run dev
详细解析命令看这里
三、配置自定义页面
1、目录结构
2、运行流程
四、配置跨域
由于浏览器存在同源策略,当我们启动后台的时候,很可能后台服务访问路径的端口会和前端页面工程的端口不一致(比如后台服务端口为8080,即controller的访问为8080,再启动vue工程端口为8081,这时由8081端口的vue页面要发送请求给8080端口的controller,就会存在跨域的问题),所以我们还需要配置一下跨域的设置
1、安装axios用于发送请求
#安装命令【vue主目录下执行,安装完成后在main.js中引入,下面有图解】
$ npm install axios -S
2、跨域代理设置
VUE开发(一)Spring Boot整合Vue并实现前后端贯穿调用的更多相关文章
- Spring Boot 整合JDBC 实现后端项目开发
一.前言 二.新建Spring Boot 项目 三.Spring Boot 整合JDBC 与MySQL 交互 3.1 新建数据表skr_user 3.2 Jdbcproject 项目结构如下 3.3 ...
- Spring Boot整合Elasticsearch
Spring Boot整合Elasticsearch Elasticsearch是一个全文搜索引擎,专门用于处理大型数据集.根据描述,自然而然使用它来存储和搜索应用程序日志.与Logstash和K ...
- spring boot整合servlet、filter、Listener等组件方式
创建一个maven项目,然后此项目继承一个父项目:org.springframework.boot 1.创建一个maven项目: 2.点击next后配置父项目及版本号 3.点击finish后就可查看p ...
- Spring Boot(十四):spring boot整合shiro-登录认证和权限管理
Spring Boot(十四):spring boot整合shiro-登录认证和权限管理 使用Spring Boot集成Apache Shiro.安全应该是互联网公司的一道生命线,几乎任何的公司都会涉 ...
- Spring boot整合jsp
这几天在集中学习Spring boot+Shiro框架,因为之前view层用jsp比较多,所以想在spring boot中配置jsp,但是spring boot官方不推荐使用jsp,因为jsp相对于一 ...
- Spring Boot 整合 FastDFS 客户端
原文地址:Spring Boot 整合 FastDFS 客户端 博客地址:http://www.extlight.com 一.前言 前两篇介绍整体上介绍了通过 Nginx 和 FastDFS 的整合来 ...
- Spring Boot整合JPA、Redis和Swagger2
好久没有总结了,最近也一直在学习.今天就把spring boot与其它技术的整合做个小总结,主要是jpa.redis和swagger2.公司里有用到这些,整合起来也很简单. 首先,新建一个Spring ...
- Spring Boot整合实战Spring Security JWT权限鉴权系统
目前流行的前后端分离让Java程序员可以更加专注的做好后台业务逻辑的功能实现,提供如返回Json格式的数据接口就可以.像以前做项目的安全认证基于 session 的登录拦截,属于后端全栈式的开发的模式 ...
- Spring Boot 项目学习 (四) Spring Boot整合Swagger2自动生成API文档
0 引言 在做服务端开发的时候,难免会涉及到API 接口文档的编写,可以经历过手写API 文档的过程,就会发现,一个自动生成API文档可以提高多少的效率. 以下列举几个手写API 文档的痛点: 文档需 ...
随机推荐
- python setup.py install 报错【Project namexxx was given, but was not able to be found.】
错误信息: [root@wangjq networking-mirror]# python setup.py install /usr/lib64/python2./distutils/dist.py ...
- 给你项目加个Mock吧
mockjs官网:http://mockjs.com/ 一.简介 1.什么是mock 拦截请求,生成随机数据. 2.mock的使用场景 当后端接口还未完成的时候,前端需要一些数据来写页面,此时就需要M ...
- Windows servers 2008 环境下, DHCP的搭建。
日常上网,客户端的主机都是使用DHCP动态分配的,家用的路由器就是内置了一个DHCP服务,所以每次分到的IP地址基本的都是192.168.x.x/24 网段的.不过家用的路由器最多只能连十台左右.那么 ...
- oracle再回首
第一章 Oracle 数据库的使用 一. 数据库相关概念 1 什么是数据库 所谓的数据库其实就是数据的集合.用户可以对集合中的数据进行新增.查询.更新. 删除等操作.数据库是以一定方式储存在一 ...
- ORA-01455: converting column overflows integer datatypes.
系统执行抛了一个ORA-01455: converting column overflows integer datatypes.把当时执行的SQL取出来,在plsql developer里面执行是没 ...
- Unity3d UGUI插件之TSTableView
TSTableView是Tacticsoft工作室开发的一款适用于UGUI的列表(Table)插件,设计灵感来源于iOS/Mac的UITableView,提供高复用.高性能的列表,其主要特点是: 采用 ...
- 敏捷转型谁先动:老总,项目经理or团队
摘要: 敏捷转型成功的企业究竟是从老总开始?还是从项目经理开始?还是团队本身具有这种意识?相信还有很多想要转型敏捷的公司都存在这样的疑问. 从06年首届敏捷中国开发者大会召开到现在,敏捷方法在国内的应 ...
- Codeforces 1321C Remove Adjacent
题意 给你一个字符串,字符\(s_i\)可以被伤处当且仅当\(s_{i-1}=s_i-1\)或\(s_{i+1}=s_i-1\).问最多能删几个字符. 解题思路 其实,有个很简单的做法就是从\(z\) ...
- 【问题】【SpringBoot】记一次springboot框架下用jackson解析RequestBody失败的问题
最近项目中遇到了一个问题,费好大劲才发现问题所在,并且修复了问题,下面分享一下这个问题的定位和修复的新路旅程. 先说下背景:该项目用的是SpringBoot框架,主要功能为对外提供一些Restful ...
- 【Gin-API系列】守护进程和平滑重启(八)
生产环境的API服务我们都会部署在Linux服务器上,为了不受终端状态的影响,启动服务的时候会让服务在后台运行.那么如何让服务在后台运行呢,目前有2种常见的方法. 1.nohub 运行 表示忽略SIG ...