前端汇总

面试问题

开发问题

跨域

• 问题：浏览器的同源策略不允许跨域访问，所谓同源策略是指协议、域名、端口相同，当前页面为http://localhost:10010不能访问http://localhost:31001的后台接口。
• 解决：vue-cli提供的解决vue开发环境下跨域问题的方法，proxyTable的底层使用了http-proxy-
  middleware（https://github.com/chimurai/http-proxy-middleware），它是 http代理中间件，它依赖node.js，
  基本原理是用服务端代理解决浏览器跨域。
  nodejs相当于是后台服务，服务于服务之间是不存在跨域的。
• 使用vue开发，在index.js中添加proxyTable进行转发

sass问题

• 报错：Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime
  这里直接说了node sass不支持当前环境，所以可以直接删掉原来不支持本机的node sass，再重新安装就行了

• 解决：

1. 进入前端项目根目录.
2. 执行删除命令：cnpm uninstall --save node-sass
3. 执行安装命令：cnpm install --save node-sass

钩子函数

1. created：vue实例已创建但是DOM元素还没有渲染生成。
2. mounted：DOM元素渲染生成完成后调用。理论上已经能看到页面的数据了，然后再次调用这个方法渲染新的数据。

Vue

route-link

<router‐link class="mui‐tab‐item" :to="{path:'/cms/page/add/'}">
  <el‐button  type="primary" size="small">新增页面</el‐button>
</router‐link>

说明：router-link是vue提供的路由功能，用于在页面生成路由链接，最终在html渲染后就是<a标签。
to：目标路由地址

<router‐link class="mui‐tab‐item" :to="{path:'/cms/page/add/',query:{
  page: this.params.page,
  siteId: this.params.siteId}}">
  <el‐button  type="primary" size="small">新增页面</el‐button>
</router‐link>

query表示在路由url上带上参数

go_back(){
  this.$router.push({
    path: '/cms/page/list', query: {
      page: this.$route.query.page,
      siteId:this.$route.query.siteId
    }
  })
}

this.$route.query 表示取出路由上的参数列表，有两个取路由参数的方法：

a、通过在路由上添加key/value串使用this.$route.query来取参数，例如：/router1?id=123 ,/router1?id=456
可以通过this.$route.query.id获取参数id的值。
b、通过将参数作为路由一部分进行传参数使用this.$route.params来获取，例如：定义的路由为/router1/:id ，请
求/router1/123时可以通过this.$route.params.id来获取，此种情况用this.$route.query.id是拿不到的。

this.params.page = Number.parseInt(this.$route.query.page||1);

在前端方法中转换数字类型。

<el‐form   :model="pageForm" :rules="pageFormRules" label‐width="80px" >