前后端分离之Vue(二)前后端结合

简介:

前后端的结合

前言:前后端分离趋势越来越明显,分离的好处在于前后端可独立进行开发进行,前端写前端的代码,后端写后端的代码,后端提供相应的数据接口提供给前端。本文采用的是Vue+springboot的结合,做了一个登陆的demo,主要是理解前后端如何结合在一起,这里演示的为前后端在各自的服务器上运行,可参考前后端分离之Vue(一)Vue环境搭建,建立Vue项目 

一、后端服务器的开发

后端采用的是SSM的框架结构进行改造,将前端部分交由Vue看来完成,只负责请求处理。这里只列举变化的部分,不变的部分springboot搭建的SSM结构即可,具体后端代码可参看https://github.com/dgyuanjun/SpringBoot-Vue.git

1.跨域的处理



   
   
  1. import org.springframework.context.annotation.Bean;
  2. import org.springframework.context.annotation.Configuration;
  3. import org.springframework.web.cors.CorsConfiguration;
  4. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
  5. import org.springframework.web.filter.CorsFilter;
  6. /**
  7. * @author Administrator
  8. * @create 2018/3/12-15:17
  9. * @DESCRIPTION 跨域系统配置
  10. */
  11. @Configuration
  12. public class CorsConfig {
  13. /**
  14. 允许任何域名使用
  15. 允许任何头
  16. 允许任何方法(post、get等)
  17. */
  18. private CorsConfiguration buildConfig() {
  19. CorsConfiguration corsConfiguration = new CorsConfiguration();
  20. // // addAllowedOrigin 不能设置为* 因为与 allowCredential 冲突,需要设置为具体前端开发地址
  21. corsConfiguration.addAllowedOrigin( "http://localhost:8000"); //前端的开发地址
  22. corsConfiguration.addAllowedHeader( "*");
  23. corsConfiguration.addAllowedMethod( "*");
  24. // allowCredential 需设置为true
  25. corsConfiguration.setAllowCredentials( true);
  26. return corsConfiguration;
  27. }
  28. @Bean
  29. public CorsFilter corsFilter() {
  30. UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
  31. source.registerCorsConfiguration( "/**", buildConfig());
  32. return new CorsFilter(source);
  33. }
  34. }

2.统一API响应结果封装



   
   
  1. import com.alibaba.fastjson.JSON;
  2. /**
  3. * @author Administrator
  4. * @create 2018/3/12-14:31
  5. * @DESCRIPTION 统一API响应结果封装
  6. */
  7. public class RestResult {
  8. private int code; //状态码
  9. private String message; //消息
  10. private Object data; //数据
  11. get.set方法
  12. }

3.响应码的枚举



   
   
  1. /**
  2. * @author Administrator
  3. * @create 2018/3/12-14:33
  4. * @DESCRIPTION 响应码枚举,参考HTTP状态码的语义
  5. */
  6. public enum ResultCode {
  7. SUCCESS( 200), //成功
  8. FAIL( 400), //失败
  9. UNAUTHORIZED( 401), //未认证(签名错误)
  10. NOT_FOUND( 404), //接口不存在
  11. INTERNAL_SERVER_ERROR( 500); //服务器内部错误
  12. private final int code;
  13. ResultCode( int code) {
  14. this.code = code;
  15. }
  16. public int code() {
  17. return code;
  18. }
  19. }

4.接口响应信息生成



   
   
  1. import org.springframework.stereotype.Component;
  2. /**
  3. * 工厂模式
  4. * 接口信息生成工具
  5. * 。@Component 添加到Spring组件中
  6. * Created by bekey on 2017/12/10.
  7. */
  8. @Component
  9. public class ResultGenerator {
  10. private static final String SUCCESS = "success";
  11. //成功
  12. public RestResult getSuccessResult() {
  13. return new RestResult()
  14. .setCode(ResultCode.SUCCESS)
  15. .setMessage(SUCCESS);
  16. }
  17. //成功,附带额外数据
  18. public RestResult getSuccessResult(Object data) {
  19. return new RestResult()
  20. .setCode(ResultCode.SUCCESS)
  21. .setMessage(SUCCESS)
  22. .setData(data);
  23. }
  24. //成功,自定义消息及数据
  25. public RestResult getSuccessResult(String message,Object data) {
  26. return new RestResult()
  27. .setCode(ResultCode.SUCCESS)
  28. .setMessage(message)
  29. .setData(data);
  30. }
  31. //失败,附带消息
  32. public RestResult getFailResult(String message) {
  33. return new RestResult()
  34. .setCode(ResultCode.FAIL)
  35. .setMessage(message);
  36. }
  37. //失败,自定义消息及数据
  38. public RestResult getFailResult(String message, Object data) {
  39. return new RestResult()
  40. .setCode(ResultCode.FAIL)
  41. .setMessage(message)
  42. .setData(data);
  43. }
  44. //自定义创建
  45. public RestResult getFreeResult(ResultCode code, String message, Object data) {
  46. return new RestResult()
  47. .setCode(code)
  48. .setMessage(message)
  49. .setData(data);
  50. }
  51. }

具体代码可参考:https://github.com/dgyuanjun/SpringBoot-Vue.git

二、Vue前端的开发

1.新建登陆页面,在components里,新建Login.vue



   
   
  1. <template>
  2. <div class="login">
  3. {{ message }}
  4. <input v-model="username" placeholder="用户名">
  5. <input v-model="password" placeholder="密码">
  6. <button v-on:click="login">登陆 </button>
  7. </div>
  8. </template>
  9. <script>
  10. export default {
  11. name: "login",
  12. data() {
  13. return {
  14. message: 'Hello Vue!',
  15. username: '',
  16. password: ''
  17. }
  18. },
  19. http: {
  20. headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
  21. },
  22. methods: {
  23. login: function () {
  24. var _this = this;
  25. console.log(_this.username+_this.password);
  26. _this.$http.post( 'http://localhost:8080/person/login', {
  27. username: _this.username,
  28. password: _this.password
  29. },{ emulateJSON: true}
  30. )
  31. .then( function (response) {
  32. var errorcode = response.data.code;
  33. console.log(response.data.data)
  34. if (errorcode == "200") {
  35. _this.$router.push(
  36. { path: '/HelloWorld',
  37. query: {
  38. user: response.data.data,
  39. }
  40. });
  41. } else {
  42. _this.$router.push({ path: '/Test' });
  43. }
  44. })
  45. .catch( function (error) {
  46. console.log(error);
  47. });
  48. }
  49. }
  50. }
  51. </script>
  52. <style scoped>
  53. </style>

2.新建登陆失败的提示页面Fail.vue,成功的页面可采用原有的HelloWorld.vue



   
   
  1. <template>
  2. <div class="hello">
  3. <h2>{{ msg }} </h2>
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: 'HelloWorld',
  9. data () {
  10. return {
  11. msg: '登陆失败'
  12. }
  13. }
  14. }
  15. </script>
  16. <!-- Add "scoped" attribute to limit CSS to this component only -->
  17. <style scoped>
  18. h1, h2 {
  19. font-weight: normal;
  20. }
  21. ul {
  22. list-style-type: none;
  23. padding: 0;
  24. }
  25. li {
  26. display: inline-block;
  27. margin: 0 10px;
  28. }
  29. a {
  30. color: #42b983;
  31. }
  32. </style>

3.将组件添加到路由表中,在router下的index.js文件



   
   
  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import HelloWorld from '@/components/HelloWorld'//组件的位置
  4. import Login from '@/components/Login'
  5. import Fail from '@/components/Fail'
  6. Vue.use(Router)
  7. export default new Router({
  8. routes: [
  9. {
  10. path: '/',//系统的首页面url
  11. name: 'Login',
  12. component: Login//对应上文的import
  13. },{
  14. path: '/HelloWorld',
  15. name: 'HelloWorld',
  16. component: HelloWorld
  17. },{
  18. path: '/Fail',
  19. name: 'Fail',
  20. component: Fail
  21. }
  22. ]
  23. })

4.main.js文件添加vue-resource,支持http请求,如果未安装依赖包,先npm安装依赖

$ npm install vue-resource


   
   
  1. // The Vue build version to load with the `import` command
  2. // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
  3. import Vue from 'vue'
  4. import App from './App'
  5. import router from './router'
  6. import VueResource from 'vue-resource'
  7. Vue.use(VueResource);
  8. Vue.config.productionTip = false
  9. /* eslint-disable no-new */
  10. new Vue({
  11. el: '#app',
  12. router,
  13. components: { App },
  14. template: ' <App/>'
  15. })

三、测试效果

1.登陆页面


2.成功后显示后台数据信息


3.登陆失败



本文作者:shenbug
本文发布时间:2018年03月13日
本文来自云栖社区合作伙伴 CSDN,了解相关信息可以关注csdn.net网站。
目录
相关文章
|
8天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
8天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
12天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
|
29天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
61 8
|
30天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
151 1
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
3月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
3月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的

热门文章

最新文章