如何利用vue和php做前后端分离开发
你都说了是前后端分离，就不需要把vue嵌套php代码里。前后敬颤端用纯接口交换数据，找后端同事定义好restful接口，清楚返回的数据结构，接下来前端这块你就可以自己mock数据进行开发了。
至于如何搭建环境，看你也是个新手，还是直接用vue-cli，答虚基本满足你的开发需求。记得打包的时候，npm run build一下，打亮举败包好的文件夹就是后台那边需要的。
前端一点都不懂后台，这是简直不可想象的，劝你有时间还是要了解下后台的基本概念。
这样解决就可以了，简单粗暴，个人建议还是去后盾网去经常看看教学视频学习学习吧
vuejs在前端开发起到什么作用
jQuery的诸多局限性导致前端工程师的发展受到了很多的限制，只能做一些表面性的工作，并不能实现前后端分离开发。
而近期出现的Vue，它给前端带来了无限磨渗的可能和改变。
改变一：真正意义上的前端工程师
之前开发都是前端做静态页面，把页面给到后台程序员改成jsp、php、asp等等...一顿乱改，一顿塞变量，做完以后页面样式乱七八糟，最后你再调整css。说白了你会html，css就行了，基本没什么门槛，可以这么说。
有了Vue和Node的前端工程化以后，前端工程师能做的事情越来越多，后台人员只需要抛过来一个Api，剩下的就可以都交给前端了。
改变二：服务端渲染VS客户端渲染
传统的jsp、php或是模板渲染也好，都是服务端渲染，就是客户端一个请求，服务器直接把整个页面返回给你，简单粗暴。（Spring Boot是通过模板引擎，由服务端完成的渲染工作）
但是vue开发好游扮是前后端分离开发，通过api进行交互，客户端请求服务器返回json数据，由客户端进行渲染。
不仅减轻了服务器的压力速度更快而且渲染更加优雅，代码更容易维护。
改变三：渲染优雅，代码易维护
jQuery是通过DOM来控制数据，不仅笨重而且渲染数据特别麻烦，而 Vue是通过数据来控制状态，通过控制数据来控制渲染，变量可以直接写在标签中，渲染更加优雅。
因为前端代码和后台代码都是分开的，所以项目更容易维护，开发效率更高。
改变四：项目工程化，结合npm直接安装第三方库
Vue让前端项目更加工程化，同时也规范了前端工程师的代码，而node和npm的加入才是vue能蓬勃发展的重要原因。
Node为Vue提供了本地server和模块化开发的思路，npm更能安装Vue项目需要的模块，配合Vue使用，比如Moment.js Element ui vuex等等，这些第三方库让Vue有了无限的可能。
敲黑板（补充下）：传统开发jQuery是命令式编程，现代框架开发是函数式编程。现代框架开发，可以使用Webpack（当然使用jQuery也可以使用Webpack），可以使用人家提供的现成的脚手架，比方说create-react-app，vue-cli。极大提高了开发的效率，并且可以使用最新的ES6、ES7语法进行开发，在编码体验上，就提高了一个档次。
总结友灶
知其然，知其所以然，没有最好的框架，只有最合适的框架！
Vue项目前后端分离下的前端鉴权方案
# Vue项目前后端分离下的前端鉴权方案
### 技术栈
前端Vue全家桶，后台.net。
### 需求分析
1. 前端路由鉴权，屏蔽地址栏入侵
2. 路由数据由后台管理，前端只按固定规则异步加载路由
3. 权限控制精确到每一个按钮
4. 自动更新token
5. 同一个浏览器只能登录一个账号
### 前端方案
对于需求1、2、3，采用异步加载路由方案
1. 首先编写vue全局路由守卫
2. 排除登录路由和无需鉴权路由
3. 登录后请求拉取用户菜单数据
4. 在vuex里处理菜单和路由匹配数据
5. 将在vuex里处理好的路由数据通过`addRoutes`异步推入路由
```
router.beforeEach((to, from, next) = {
// 判断当前用户是否已拉取权限菜单
if (store.state.sidebar.userRouter.length === 0) {
// 无菜单时拉取
getMenuRouter()
.then(res = {
let _menu = res.data.Data.ColumnDataList || [];
// if (res.data.Data.ColumnDataList.length 0) {
// 整理菜单路由数据
store.commit("setMenuRouter", _menu);
// 推入权限路由列表
router.addRoutes(store.state.sidebar.userRouter);
next({...to, replace: true });
// }
})
.catch(err = {
// console.log(err);
// Message.error("服务器连接失败");
});
} else {
//当有用户权限的时候，说明所有可访问路由已生成 如访问没权限的菜单会自动进入404页面
if (to.path == "/login") {
next({
name: "index"
});
} else {
next();
}
}
} else {
// 无登录状态时重定向至登录 或可进入无需登录状态路径
if (to.path == "/login" || to.meta.auth === 0) {
慎团大 next();
} else {
next({
path: "/login"
});
}
}
});
```
##### 注意
我这里无需鉴权的路由直接写在router文件夹下的index.js，通过路由元信息meta携带指定标识
```
{
path: "/err-404",
name: "err404",
meta: {
authentication: false
},
component: resolve = require(["../views/error/404.vue"], resolve)
},
```
上面说到路由是根据后台返回菜单数据根据一定规则生成，因此一些不是菜单，又需要登录状态的路由，我写在router文件夹下的router.js里，在上面步骤4里处理后台返回菜单数据时，和处理好的菜单路由数据合并一同通过`addRoutes`推入。
这样做会有一定的被地址栏入侵的风险,但是笔者这里大多是不太重要的路由，如果你要求咳咳，可以定一份字典来和后台接口配合精确加载每一个路由。
```
// 加入企业
{
path: "/宽竖join-company",
name: "join-company",
component: resolve = require([`@/views/index/join-company.vue`], resolve)
},
```
在vuex中将分配的菜单数据转化为前端可用的或喊路由数据，我是这样做的：
管理系统在新增菜单时需要填写一个页面地址字段`Url`,前端得到后台菜单数据后根据`Url`字段来匹配路由加载的文件路径，每个菜单一个文件夹的好处是：你可以在这里拆分js、css和此菜单私有组件等
```
menu.forEach(item = {
let routerItem = {
path: item.Url,
name: item.Id,
meta: {
auth: item.Children,
}, // 路由元信息 定义路由时即可携带的参数，可用来管理每个路由的按钮操作权限
component: resolve =
require([`@/views${item.Url}/index.vue`], resolve) // 路由映射真实视图路径
};
routerBox.push(routerItem);
});
```
关于如何精确控制每一个按钮我是这样做的，将按钮编码放在路由元信息里，在当前路由下匹配来控制页面上的按钮是否创建。
菜单数据返回的都是多级结构，每个菜单下的子集就是当前菜单下的按钮权限码数组，我把每个菜单下的按钮放在此菜单的路由元信息`meta.auth`中。这样作的好处是：按钮权限校验只需匹配每个菜单路由元信息下的数据，这样校验池长度通常不会超过5个。
```
created() {
this.owner = this.$route.meta.auth.map(item = item.Code);
}
methods: {
matchingOwner(auth) {
return this.owner.some(item = item === auth);
}
}
```
需求4自动更新token，就是简单的时间判断，并在请求头添加字段来通知后台更新token并在头部返回，前端接受到带token的请求就直接更新token
```
// 在axios的请求拦截器中
let token = getSession(auth_code);
if (token) config.headers.auth = token;
if (tokenIsExpire(token)) {
// 判断是否需要刷新jwt
config.headers.refreshtoken = true;
}
// 在axios的响应拦截器中
if (res.headers.auth) {
setSession(auth_code, res.headers.auth);
}
```
对于需求5的处理比较麻烦，要跨tab页只能通过`cookie`或`local`,笔者这里不允许使用`cookie`因此采用的`localstorage`。通过打开的新页面读取`localstorage`内的`token`数据来同步多个页面的账号信息。`token`使用的`jwt`并前端md5加密。
这里需要注意一点是页面切换要立即同步账号信息。
经过需求5改造后的全局路由守卫是这样的：
```
function _AUTH_() {
// 切换窗口时校验账号是否发生变化
window.addEventListener("visibilitychange", function() {
let Local_auth = getLocal(auth_code, true);
let Session_auth = getSession(auth_code);
if (document.hidden == false Local_auth Local_auth != Session_auth) {
setSession(auth_code, Local_auth, true);
router.go(0)
}
})
router.beforeEach((to, from, next) = {
// 判断当前用户是否已拉取权限菜单
if (store.state.sidebar.userRouter.length === 0) {
// 无菜单时拉取
getMenuRouter()
.then(res = {
let _menu = res.data.Data.ColumnDataList || [];
// if (res.data.Data.ColumnDataList.length 0) {
// 整理菜单路由数据
store.commit("setMenuRouter", _menu);
// 推入权限路由列表
router.addRoutes(store.state.sidebar.userRouter);
next({...to, replace: true });
// }
})
.catch(err = {
// console.log(err);
// Message.error("服务器连接失败");
});
} else {
//当有用户权限的时候，说明所有可访问路由已生成 如访问没权限的菜单会自动进入404页面
if (to.path == "/login") {
next({
name: "index"
});
} else {
next();
}
}
} else {
// 无登录状态时重定向至登录 或可进入无需登录状态路径
if (to.path == "/login" || to.meta.auth === 0) {
next();
} else {
next({
path: "/login"
});
}
}
});
}
```
经过需求5改造后的axios的请求拦截器是这样的，因为ie无法使用`visibilitychange`，并且尝试百度其他属性无效，因此在请求发出前做了粗暴处理：
```
if (ie浏览器) {
setLocal('_ie', Math.random())
let Local_auth = getLocal(auth_code, true);
let Session_auth = getSession(auth_code);
if (Local_auth Local_auth != Session_auth) {
setSession(auth_code, Local_auth, true);
router.go(0)
return false
}
}
```
这里有一个小问题需要注意：因为用的`local`因此首次打开浏览器可能会有登录已过期的提示，这里相信大家都能找到适合自己的处理方案
### 结语
经过这些简单又好用的处理，一个基本满足需求的前后端分离前端鉴权方案就诞生啦
什么是前后端分离？用vue angular等js框架就能实现前后分离了吗
前后端分离就是后穗兄端把数据都封装缓族哗在一个扰行url地址中，前端只要用ajax去请求就行。不用框架也能实现分离。
vue angular是为开发效率而生的。
一般都在什么系统上运行vue项目
Vue是前端的框架 不分系统 在浏览器渲染前就已经拿到Vue的js脚本了，前后端分离开发Vue在哪都无所谓 所以Vue对系卜神统没什么要求，
如果迹伍前后端不分离的话 前端Vue代码 也就是页面的js是和后端框架在一起的 现在的服务器一般都倾向于使用linux这些类Unix系统
值得注意的是 Vue是浏览器去渲染的 底层还是javascript 本身和服务器是分离的 前后端不分离一般型州亏都是使用后端框架的模板 比如django + jinjia2 或者django 自带的模板
vue的使用跟前后端分不分离有关系吗
前后端不分困则离意味着你族巧们的页面都是字符串汪穗棚拼出来的
你是不可以用vue的
你只可以用js和html
以上内容为新媒号(sinv.com.cn)为大家提供！新媒号，坚持更新大家所需的前端知识。希望您喜欢！
版权申明：新媒号所有作品（图文、音视频）均由用户自行上传分享，仅供网友学习交流，不声明或保证其内容的正确性，如发现本站有涉嫌抄袭侵权/违法违规的内容。请发送邮件至 k2#88.com(替换@) 举报，一经查实，本站将立刻删除。
