网站设计项目建设内容,济南中建设计院有限公司网站,电商 做图 网站,上海网站网络科技有限公司前些天发现了一个巨牛的人工智能学习网站#xff0c;通俗易懂#xff0c;风趣幽默#xff0c;忍不住分享一下给大家。点击跳转到教程。
Vue实现前后端分离项目的初体验
经过之前学习的Vue的知识#xff1a;
vue基本指令vue组件vue-resourcevue路由
其实我们已经可以开始…前些天发现了一个巨牛的人工智能学习网站通俗易懂风趣幽默忍不住分享一下给大家。点击跳转到教程。
Vue实现前后端分离项目的初体验
经过之前学习的Vue的知识
vue基本指令vue组件vue-resourcevue路由
其实我们已经可以开始实战运用到实际的Web项目中了由于本人是Java后端开发的所以后端是基于SpringMVC的。
以下我们将演示如何使用Vue组件实现一个用户登录系统。
!--more--
介绍
后端 后端基于spring、springMVC、mybatis框架 对后端SSM框架搭建不熟悉的可以参考我的博文 SSM项目整合
前端
前端使用了wepack打包工具利用了vue.cli脚手架快速搭建的项目。由于本人对一些技术也不是很熟悉所以给大家提供些官方文档 想要深入学习还是要仔细分析官方文档。传送门如下也是本项目要用到的
node.jsvue.jsvue-clivue-resourcevue-routerwebpackelement-ui
以上技术都是比较常用的webpack类似一个打包工具它会将你项目中的Vue组件打包为一个庞大的js文件当然我们是看不懂的而我们的前端项目是部署在node.js提供的web容器中的。
即前后端分离的实际效果是这样的 有没有感觉很神奇哈哈反正我第一次见到的时候就是觉得很神奇因为html中完全看不到任何js、css代码但是却能渲染出来这么好看的页面。下面我们就讲一下怎么实现这个过程吧
br/
环境
上面我们提到的技术在本案例中都会遇到后端的SSM框架请参考我的博客文档介绍一下前端环境的搭建
1、安装node.js
具体安装流程还是要去看node.js官网。如果安装完成请在终端输入npm -v查看是否安装成功。一般会出现类似如下版本号 v8.11.3 2、安装VueCLI脚手架
VueCLI能够帮助我们快速搭建一个webpack的项目。
在已经安装好node.js的前提上在终端输入npm install vue-cli -g开始安装VueCLI。如果安装完成请在终端输入vue -V会出现如下版本信息 2.9.6 具体安装流程可以参看博文
由于VueCLI脚手架已经帮我们安装好了webpack、以及相关的node依赖包所以我们不需要再手动安装了。
范例
如果安装完成我们可以看到出现如下目录结构
启动项目
在终端项目路径下输入npm run dev命令正常情况下会出现如下信息 在浏览器中输入指定的URL会出现如下页面 我们继续观察打开项目中的index.html 我们看到这个HTML中没有任何代码甚至没有引入js、css但是页面中的视图是怎样渲染出来的呢
仔细看项目结构我们能看到在src/components/下有一个HelloWorld.vue程序我们页面中的程序就是通过这些.vue组件来渲染出来的。
打包项目
如果我们想将项目部署到服务器上你放一堆.vue程序浏览器是无法解析出来的所以我们需要了解一下webpack的打包命令 npm run build 正常情况下会显示上图中的信息表示打包成功了会在项目根目录中生成一个叫dist的文件夹里面是生成的静态项目 我们双击dist/index.html会看到和之前一样的页面但是其中引入了一个XX.js文件
开始
经过上面的步骤我们应该了解到了所谓前端分离的简易概念其实在之前的博文 Vue组件 我们已经了解到了Vue的模块化开发流程。配合.vue组件其实思路还是相同的。
搭建前端
开始之前我们首先要安装vue-resourceelement-ui执行 npm install vue-resource npm install element-ui 第一步修改main.js
main.js文件是webpack的核心入口我们需要在其中引入Vue-resource以及router
import VueResource from vue-resourceimport router from ./router/index.js在Vue实例中注册router
new Vue({router,
});完整代码 第二步修改router/index.js
这是有关Vue路由的配置前面我们也已经讲过了vue的路由这里不再多说代码如下 如上就配置了如果你访问localhost:8081/那么就会自动路由跳转到login.vue组件中提示我们登录;其中的/home表示如果登录成功就跳转到home.vue组件中相当于登录成功后跳转到后台页面。
第三步创建login.vue
在src/components/下创建login.vue组件。
login组件中表单样式就不再讲了我们主要看一下怎样利用v-model绑定表单数据并请求后端
表单原型
!-- 登录表单 --
el-form :modellogin status-icon :rulesrule refloginel-form-item propusernameel-input prefix-iconel-icon-ump-yonghu v-modellogin.usernameauto-completeoff//el-form-itemel-form-item proppasswordel-input prefix-iconel-icon-ump-mima typepassword v-modellogin.passwordauto-completeoff//el-form-itemel-form-itemel-checkbox classcheck v-modelchecked记住我/el-checkbox/el-form-itemel-form-itemel-button classbtn typeprimary clicksubmitForm(login)登录/el-button/el-form-item
/el-form
divpa href# classtips还没有账号点我去注册/a/p
/div在上面的表单中我们只需要关注三个点
v-modellogin.usernamev-modellogin.passwordclicksubmitForm(login)
为什么不关注其他的 注意这个案例由于我使用了element-ui从标签中就能看出来其中涉及到了一些element-ui提供的js校验我们只需要关注Vue的逻辑即可。
提交表单
关于上面提到的element-ui的校验部分
表单提交方法部分
methods: {submitForm(login) {this.$refs[login].validate((valid) {if (valid) {//提交表单this.$http.post(http://127.0.0.1:8080/login.do, {username: this.login.username,password: this.login.password}).then(result {console.log(result);if (result.bodyText index) {this.$router.push({ path: home }); //跳转到home组件中} else {console.log(登录失败);return false;}});} else {console.log(error submit!!);return false;}});},
}上面就是我们要讲到的核心部分请求后端的接口
解释 首先需要注意的this.$refs[login].validate((valid)){}是element-ui提供的表单验证的逻辑但是是结合vue.js的。因为我们若在不验证表单直接提交的时候会在表单提交按钮中直接传clicksubmitForm(login)因为此时的login是一个data中已经声明的对象其中包含两个参数username,password。而element-ui提供的方式则会根据.validate()获取到login所包含的参数从而实现校验。 经过上面的校验如果校验成功那么将调用this.$http.post()进行提交post表单这是vue-resource提供的方式博文 中我们也讲过。其中包含了两个参数username,password。 请求成功调用.then()回获取到成功的请求结果。判断请求的结果我这里是从后端返回的参数return index中判断是否登录成功如果能录成功就应该跳转到home组件中。 调用vue-router中提供的$router.push方法我们可以理解为向Router对象中添加了一条路由地址其URL是path: home那么就表明了会跳转带名字叫/home的路径下整好对应的是我们配置好的home.vue组件。
注意 最重要的就是跨域请求问题本例中node.js提供的web服务器地址是127.0.0.1:8081但是我们后端Tomcat服务器的地址是127.0.0.1:8080而默认是不能在一个域中访问另一个域中的资源的所以也就出现了跨域请求的概念。 其次重要的就是$http.post()的第一个参数URL地址不要写locahost:不要写.... 具体原因不是很清楚不然请求还会报错为跨域请求。 解决跨域请求的方式也有很多这里我提供一个比较简单的方式只需要在后端的web.xml中提供一个允许跨域访问的过滤器就行了后面会介绍。 还有就是之前我们就说过Vue中默认提交的post请求时不包含表单格式的所以需要配置我已经在main.js中写了Vue.http.options.emulateJSON true;设置全局表单提交格式所以在post()方法中就没有设置。
第四部创建home.vue
在src/components/下创建home.vue组件 br/ br/
搭建后端
经过上面介绍了前端搭建步骤后搭建后端我们就相对熟悉了我们的目标就是在controller中提供一个接口login.do让前端访问。
解决跨域请求
之前已经说了跨域请求很重要不然我们写的所有请求都无法顺利访问后端接口。解决的方式如下
配置
我们只需要在项目中的web.xml中配置如下代码即可。因为这个过滤器是tomcat提供的所以我们并不需要导入任何jar包。
!--配置允许跨域访问--
filterfilter-nameCorsFilter/filter-namefilter-classorg.apache.catalina.filters.CorsFilter/filter-class
/filter
filter-mappingfilter-nameCorsFilter/filter-nameurl-pattern/*/url-pattern
/filter-mappingController
讲了那么多终于到了Controller层这里就比较简单了就是根据获取到的参数判断数据库中有没有对应的用户有就登录成功否者亏登录失败。 由于我这里使用了shiro需要将密码加密处理所以没有直接传入到service层当然思路是相同的。
注意
我这个login.do接口返回的是JSON字符串前面使用了RestController注解不要误认为是返回的页面那么就会404的。接受的参数要用RequestParam注解标记不然会接受不到前端传递的数据
请求成功 跳转到home组件中 转自https://my.oschina.net/u/3955926/blog/1940500
