前后端分离

前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。 核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。 在互联网架构中，名词解释： Web服务器 ：一般指像nginx，apache这类的服务器，他们一般只能解析静态资源。 应用服务器 ：一般指像tomcat，jetty，resin这类的服务器可以解析动态资源也可以解析静态资源，但解析静态资源的能力没有web服务器好。 一般都是只有web服务器才能被外网访问，应用服务器只能内网访问。 以前的JavaWeb项目大多数都是java程序员又当爹又当妈，又搞前端，又搞后端。 随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分的越来越明确，前端工程师只管前端的事情，后端工程师只管后端的事情。正所谓术业有专攻，一个人如果什么都会，那么他毕竟什么都不精。 大中型公司需要专业人才，小公司需要全才，但是对于个人职业发展来说，我建议是分开。 1、对于后端java工程师： 把精力放在java基础，设计模式，jvm原理，spring

原文链接： https://www.cnblogs.com/shanrengo/p/6397734.html 前言：分离模式 　　对前后端分离研究了一段时间，恰逢公司有一个大项目决定尝试使用前后端分离模式进行，便参与其中。该项目从2016年初立项至今，平平稳稳得度过，但也涌现出越来越多的问题，绝对不是说前后端分离模式不好，而是很多公司在尝试前后端分离的时候没有做好充分得准备。 　　网上对前后端分离介绍的文章已经屡见不鲜，接下来本人用一点粗浅的言语也谈谈这块，献丑了。 为什么要分离？ 　　如果只问“前后端分离的意义大么？”这是废话，因为从软件架构的角度 Web 的前后端从一开始不就一直是分离的么，而且 browser、server 可能将永远分离下去。 　　为了了解这个问题，我们有必要先了解一下 Web的研发模式演变，关于这个题材，下面这篇博文说得不错，这边就不做搬运工了。 　　 https://github.com/lifesinger/blog/issues/184 　　我们不能“为了分离而分离”，而应该“为了真正理解web开发、为了更好完成需求而分离”。 前后端分离的误区？ 　　 1、前端人员配备是否充足？ 　　由于所在公司以往项目采用传统开发风格，即以后端MVC为主的开发模式，前端人员仅仅提供静态html页面，其余工作皆由后端开发人员完成。 采用前后端分离模式可以减 后

1. 一个原则 做权限管理，一个核心思想就是后端做权限控制，前端做的所有工作都只是为了提高用户体验，我们不能依靠前端展示或者隐藏一个按钮来实现权限控制，这样肯定是不安全的。 就像用户注册时需要输入邮箱地址，前端校验之后，后端还是要校验，两个校验目的不同，前端校验是为了提高响应速度，优化用户体验，后端校验则是为了确保数据完整性。权限管理也是如此，前端按钮的展示/隐藏都只是为了提高用户体验，真正的权限管理需要后端来实现。 这是非常重要的一点，做前后端分离开发中的权限管理，我们首先要建立上面这样的思考框架，然后在这样的框架下，去考虑其他问题。 因此，下文我会和大家分享两种方式实现动态菜单，这两种方式仅仅只是探讨如何更好的给用户展示菜单，而不是探讨权限管理，因为权限管理是在后端完成的，也必须在后端完成。 2. 具体实现 一旦建立起这样的思考框架，你会发现动态菜单的实现办法太多了。 动态菜单就是用户登录之后看到的菜单，不用角色的用户登录成功之后，会看到不用的菜单项，这个动态菜单要怎么实现呢？整体来说，有两种不同的方案，松哥曾经做过的项目中，两种方案也都有用过，这里分别来和大家分享一下。 2.1 后端动态返回 后端动态返回，这是我在微人事中采用的方案。微人事中，权限管理相关的表一共有五张表，如下： 其中 hr 表就是用户表，用户登录成功之后，可以查询到用户的角色

VUE: 使用vue-cli构建vue项目（vueapp）。 npm install -g vue-cli（安装，安装过的就不用了） vue init webpack vueapp import axios from 'axios' var url="http://localhost:3000" //express服务器的地址 axios.get(url+'/product') //放数据的接口 .then(function (response) { //收到的数据 console.log(response); console.log(response.data); //展示数据（看看是否拿到，和数据长啥样） var nodeData=response.data; }) .catch(function (error) { console.log(error); }); axios没安装的记得装一下。（安装不细说） 使用express构建服务器： 新建个myapp放express npm install express 在（routes文件夹中）建一个product,js接口 var express = require('express'); /

框架采用.NetCore + Vue前后端分离，并且支持前端、后台代码业务动态扩展，框架内置了一套有着20多种属性配置的代码生成器，可灵活配置生成的代码，代码生成器界面配置完成即可生成单表(主表)的增、删、改、查、导入、导出、上传、审核基础功能。只需要简单了解即可上手开发 框架基础功能已构建完成，可直接上手开发功能 Vol.WebApi类库可独立用于restful api服务单独部署,用于其他系统单独提供接口,直接上手编写业务代码即可。 Vue+Vol.WebApi 可用于现有框架前后端分离进行开发 Vol.Web类库可用于传统MVC+Razor方式进行项目开发 Vol.Builder类库可作为一个独立的代码生成器,可生成cshtml页面、Vue页面、Model文件、Service与Repository.cs业务处理代码类 可作为一个独立站点来发布静态html网页. 可直接用于H5移动App开发 框架特点 支持前端、后台基础业务代码动态扩展，可在现有框架增、删、改、查、导入、导出、审核基础业务上扩展复杂的业务代码 基本业务全部由框架完成，上手即可对基础业务以外的代码进行扩展 上手简单，需要.net core2.1、VsCode mysql/sqlservcer 2012、redis(可选) 及以上版本的开发环境 学习成本低，封装了常用可扩展组件及Demo(前端基于Iview

public class CustomCorsFilter extends OncePerRequestFilter { @Override protected void doFilterInternal ( HttpServletRequest request , HttpServletResponse response , FilterChain filterChain ) throws ServletException , IOException { response . setHeader ( "Access-Control-Allow-Origin" , request . getHeader ( "origin" )); response . setHeader ( "Access-Control-Allow-Methods" , "POST, GET, OPTIONS, DELETE" ); response . setHeader ( "Access-Control-Allow-Headers" , "x-requested-with,Authorization, token" ); response . setHeader ( "Access-Control-Allow-Credentials" , "true" ); response . setHeader (

json格式是字符串形式，将数据库中的数据取出来转为json格式时，要将小数等数据转位字符串（str方法） 　　 报错类型： 　　1，decimal(5,2) 表示5位数，其中小数有两位，decimal要转为str类型 来源：博客园 作者： Wjun0 链接：https://www.cnblogs.com/wjun0/p/11526727.html

尽量使用相对路径存储于数据库 为了安全性，目前H5是不能直接使用绝对路径读取图片或者文件， 在本地电脑，在绝对路径前面加上file:/// ，有时候在其他浏览器可能可以，但在chrome上运行html ，亲测发现还是不行 唯一的方法就只能是 将绝对路径转成URL，不过这也就可能只是在Linux上行得通，Linux只有一个磁盘，而Windows下有多个磁盘，无法准确地转成URL找到资源 。 所以可以避免的话，就不要使用使用绝对路径 另外，解决方法是，通过绝对路径，在后台获取文件数据，然后发到前端，前端保存，就可以使用相对路径了 共同学习，共同进步，若有补充，欢迎指出，谢谢！

前后端分离已成为互联网项目开发的业界标准使用方式，通过Nginx+Tomcat的方式（也可以中间加一个NodeJS）有效地对前端和后端的开发进行解耦。并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（各种客户端，比如浏览器、车载终端、安卓、IOS等）打下坚实的基础。前后端分离的核心思想就是前端HTML页面通过AJAX调用后端的RESTFUL API接口，并通过JSON数据进行交互。 前端的开发与后端的开发分离 以前的JavaWeb项目，大多数都是Java程序员又搞前端，又搞后端。而随着时代的发展，渐渐的许多大中小公司开始把前后端的界限分得越来越明确，即前端工程师只管前端的开发，后端工程师只管后端的开发。大中型公司需要专业的人才，小公司需要全才（省钱）。但是对于个人职业发展来说，还是分开比较好，因为当生涯发展到后期的时候，企业往往要的是在某一方面上的专家，而不是熟练工。如果一个人前端后端都会一点，那也可以说什么都不会。 前端追求的是页面的表现、速度的流畅、兼容性和用户的体验等。因此对于前端开发工程师来说，需要把精力放在HTML5、CSS3、JavaScript、jQuery、AngularJS、BootStrap、ReactJS、VueJS、Webpack、Less/Sass、Gulp、NodeJS、Google V8引擎、JS多线程、JS模块化

1.前后端分离后，前端登录状态保持一般采用webstorage或是cookie来保存token或用户信息的方式来维持登录状态。如果webstorage或是cookie中没有token，则前端认为是没有登录，拦截到登录页面。vue中利用路由的beforeEach实现，可在main.js中做如下逻辑： // 路由判断登录 根据路由配置文件的参数 router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth)){ // 判断该路由是否需要登录权限 if (localStorage.token) { // 判断当前的token是否存在 ； 登录存入的token next(); } else { console.log('需要登录'); next({ path: '/login', query: {redirect: to.fullPath} // 将跳转的路由path作为参数，登录成功后跳转到该路由 }) } } else { next(); } }); router中配置，通过meta指定路由是否需要登录校验标识 export default new Router({ routes: [ { path: '/login', name: 'login',