SpringBoot +Vue 前后端分离实例
今天下了Vue,想试一试前后端分离的实现,没想到坑还不少,这里就记录一下我遇到的坑和我的代码:
一、Vue的下载安装:从网上找就好了,没什么问题,除了下载以后,要把镜像库改成淘宝的,要不然太慢了。
二、推荐一个很好用的软件 HBuilder X,可以在上面写前端的项目,直接就能打开浏览器看到效果,还可以自动下载依赖。
三、前端代码:
首先,先创建一个Vue项目,新建以后项目自带的程序结构如图:
因为我也是刚刚接触vue,对里面的东西也不是很了解,只是从网上找了一些项目,边看边学,感觉里面重要的就是main.js、router还有components这三个,当然config里应该是配置文件,也很重要,但在这个初学的项目里,并没有涉及太多里面的东西。
首先,先看一下main.js里面的东西:
里面的东西不多,可以看到大多数都是添加依赖,使用Vue.use()指定全局使用的包之类的功能。
这里一定要注意,比如这个程序添加了ElementUI这样的外部依赖,那么一定要在这里用Vue.use()使用起来,表示全局都载入了这个库,否则的话,在页面显示的时候,没有内容,使用F12查看网页代码,会出现:
Unknown custom element: <xxx> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
这样的提示,这时候就要检查一下自己是否只是Import但是忘了use了。
接着看一下App.vue,这是项目的根组件:
在这里,我为了做测试,在上面加了一个啊咧,就会发现,不管跳转到哪个页面,页面上都会有“啊咧”这两个字,而另一方面,如果去掉下面的<router-view>的话,不管用什么访问路径,都只有这一个页面,无法获得其他页面,也就是说其实这个App.vue,是程序的入口,在此基础上,通过<router-view>来找到对应路径的页面,给予显示。这有点像SpringBoot里面的Application,程序都是从那里开始启动的。
最后,是Index.js,这里面规定了各个路径对应的页面,在这里,我已经写好了两个组件,一个是登录的组件,一个是初始页面:
这里,path就是配置的路径名,而component对应着每一个组件,组件就可以表示一个页面。
下面,就看一看登录的页面代码:
这里主要参考了https://www.jianshu.com/p/4eecd628782a
import Vue from 'vue'
import App from './App'
import router from './router'
import Element from 'element-ui'
import VueResource from 'vue-resource'
Vue.use(Element) <template>
<div>
<el-form :model="login" status-icon :rules="rule" ref="login">
<b>用户名</b>
<el-form-item prop="username" >
<el-input prefix-icon="el-icon-ump-yonghu" v-model="login.username" auto-complete="off" />
</el-form-item>
<b>密码</b>
<el-form-item prop="password">
<el-input prefix-icon="el-icon-ump-mima" type="password" v-model="login.password" auto-complete="off" />
</el-form-item> <el-form-item>
<el-button class="btn" type="primary" @click="submitForm('login')">登录</el-button>
</el-form-item>
</el-form> <p><a href="#" class="tips">还没有账号?点我去注册</a></p>
</div>
</template> <script>
export default {
name: 'login',
data() {
var checkUsername = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入用户名'));
} else {
callback();
}
};
var checkPassword = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'));
} else {
callback();
}
};
return {
checked: false,
token: '',
login: {
username: '',
password: ''
},
rule: {
username: [{
validator: checkUsername,
trigger: 'blur'
}
],
password: [{
validator: checkPassword,
trigger: 'blur'
}]
}
}
},
methods: {
submitForm(login){
this.$refs[login].validate((valid)=>{
if(valid){
this.$http.post('http://127.0.0.1:8080/login',{
username: this.login.username,
password:this.login.password
},{emulateJSON:true}).then(result =>{
console.log(result);
if(result.bodyText ==='index'){
this.$router.push({path:'home'});
}else{
console.log("登录失败");
return false;
}
});
}else{
console.log("error submit!!");
return false;
}
});
},
},
}
</script> <style>
</style>
这个程序里面,有一些点需要说明:
①上面的<el-form>这样的标签,是在ElementUI里面的,所以一定要在main.js中使用Vue.use()来导入依赖
②对于 :model,他相当于v-bind和v-on的集合,它负责监听用户的输入事件,从而更新数据,具体的解释和实例可以参考:https://www.jianshu.com/p/20e485cb65d9
③:rules:用来添加对表单字段的检验,通常使用语法是:{validator:验证方式,trigger:验证触发},如果是自己定义的验证方式,应该传入函数名,而不加参数。
④下面的methods里,要注意的就是post的地址不要出错,不要写localhost,写127.0.0.1进行测试,端口号写自己服务器端部署的端口号。
这样子,前端就算完成了,可以运行了,但是我们看vue项目config下面的index.js(或者运行的时候,看命令行也可以),我们可以看到这样的内容,项目运行的端口地址是8080,而这个又是服务器默认运行的端口,这两个不可以在同一个端口上运行,所以必须修改一个端口,不妨把前端的端口改为8081:
其中,home的代码,随便写一写就好了:
<template>
<div>
<h2>这是主页</h2>
</div>
</template> <script>
export default{
name:"name"
}
</script> <style>
</style>
四、后端代码:
新建SpringBoot项目:在Controller层直接写平常写的代码即可:
@RestController
public class TestController { @CrossOrigin(origins = "*")
@RequestMapping("/login")
public String login(
@RequestParam(value = "username", required = false) String username,
@RequestParam(value = "password",required = false) String password,
Model model
){
System.out.println("用户名为"+username);
System.out.println("密码为"+password);
if (username.equals("11")){
return "index";
}else{
return "login";
}
}
}
只不过要注意的就是 最上面的注解变成了@RestController:这个注解就是@Controller和在方法上加@ResponseBody的结合,这样使得返回值自动写入返回响应中,方便了前端读取。
在部署的时候,第一个问题就是:
①:Your ApplicationContext is unlikely to start due to a @ComponentScan of the default package
这个是因为启动的程序Application放的位置不对,应该把它放到,包含所有java文件的包下,而不能在java包下,比如这样子放才是正确的姿势
②:运行了以后,发现可以使用postMan传送数据,但是却接收不到来自前段的数据:这是因为前段的数据格式不是JSON的,要转成JSON才可以接收到:
需要在传送数据的时候,加上这样一行:
③上面的写完以后,后端接收到了数据,但是前端没有反应:这时候,是因为跨域问题:详细可以参见https://blog.csdn.net/xcbeyond/article/details/84453832
而SpringBoot的解决方案十分简单:直接在方法上加@CrossOrigin()注解即可:
SpringBoot +Vue 前后端分离实例的更多相关文章
- SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题
原文链接:https://segmentfault.com/a/1190000012879279 当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异.笔者前几天刚好在负责一个项目的权限管理 ...
- Springboot+vue前后端分离项目,poi导出excel提供用户下载的解决方案
因为我们做的是前后端分离项目 无法采用response.write直接将文件流写出 我们采用阿里云oss 进行保存 再返回的结果对象里面保存我们的文件地址 废话不多说,上代码 Springboot 第 ...
- SpringBoot,Vue前后端分离开发首秀
需求:读取数据库的数据展现到前端页面 技术栈:后端有主要有SpringBoot,lombok,SpringData JPA,Swagger,跨域,前端有Vue和axios 不了解这些技术的可以去入门一 ...
- SpringBoot+Vue前后端分离项目,maven package自动打包整合
起因:看过Dubbo管控台的都知道,人家是个前后端分离的项目,可是一条打包命令能让两个项目整合在一起,我早想这样玩玩了. 1. 建立个maven父项目 next 这个作为父工程,next Finish ...
- Jeecg-Boot 2.0 版本发布,基于Springboot+Vue 前后端分离快速开发平台
目录 Jeecg-Boot项目简介 源码下载 升级日志 Issues解决 v1.1升级到v2.0不兼容地方 系统截图 Jeecg-Boot项目简介 Jeecg-boot 是一款基于代码生成器的智能开发 ...
- SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题(一)
当前后端分离时,权限问题的处理也和我们传统的处理方式有一点差异. 笔者前几天刚好在负责一个项目的权限管理模块,现在权限管理模块已经做完了,我想通过5-6篇文章,来介绍一下项目中遇到的问题以及我的解决方 ...
- springboot+vue前后端分离,nginx代理配置 tomcat 部署war包详细配置
1.做一个小系统,使用了springboot+vue 基础框架参考这哥们的,直接拿过来用,链接https://github.com/smallsnail-wh/interest 前期的开发环境搭建就不 ...
- Nginx+Springboot+Vue 前后端分离 解决跨域问题
1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: ngin ...
- Springboot+Vue前后端分离的博客项目
项目介绍 演示站(服务器已过期):http://blog.hanzhe.site 开源项目地址 ( 求给个Star ):https://gitee.com/zhang_hanzhe/blog 前端采用 ...
随机推荐
- C#客户端打印条形码
第一种方法: 引用第三方插件文件zxing.dll // 1.设置条形码规格 EncodingOptions encodeOption = new EncodingOptions(); encodeO ...
- 为什么redis是单线程的以及为什么这么快?
官网的说法 我们先来认真看一下官网的说法.翻译过来大意如下: CPU并不是您使用Redis的瓶颈,因为通常Redis要么受内存限制,要么受网络限制.例如,使用在一般Linux系统上运行的流水线Redi ...
- sql注入原理+mysql相关知识点
什么是SQL注入 sql就是经常说的数据库,而sql注入就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令.SQL注入是比较常见的网络攻击 ...
- 米特运输——(dfs)
米特是D星球上一种非常神秘的物质,蕴含着巨大的能量.在以米特为主要能源的D星上,这种米特能源的运输和储 存一直是一个大问题.D星上有N个城市,我们将其顺序编号为1到N,1号城市为首都.这N个城市由N- ...
- 2019-2020-1 20199329《Linux内核原理与分析》第二周作业
<Linux内核原理与分析>第二周作业 一.上周问题总结: 未能及时整理笔记 Linux还需要多用 markdown格式不熟练 发布博客时间超过规定期限 二.本周学习内容: <庖丁解 ...
- linux find string in files
http://blog.csdn.net/duguduchong/article/details/7716908 查找目录下的所有文件中是否含有某个字符串 find .|xargs grep -ri ...
- Configure Visual Studio with UNIX end of lines
As OP states "File > Advanced Save Options", select Unix Line Endings. https://stackove ...
- Rust 1.31正式发布,首次引入Rust 2018新功能
Rust 1.31是第一个实现了Rust 2018独有新功能并且不保证与现有代码库兼容的版本.Rust 2018相关工作正在进行中,而Rust 1.31只是整个三年开发周期的开始,这个开发周期将对这门 ...
- 程序员最喜欢用的在线IDE代码编译器,什么?你竟然不知道!
1.网址https://tech.io/snippet 支持 20+ 种编程语言,页面上没有杂七杂八的东西,非常简约,非常干净,另外,它上面的代码段还可以嵌入到网页之中. 2.网址 https://w ...
- C语言编程入门题目--No.15
题目:利用条件运算符的嵌套来完成此题:学习成绩>=90分的同学用A表示,60-89分之间的用B表示, 60分以下的用C表示. 1.程序分析:(a>b)?a:b这是条件运算符的基本例子. 2 ...