【意见收集】欢迎您对renren-fast-vue提出自己的建议及问题 #9

daxiongYang · 2018-04-03T06:32:12Z

No description provided.

QiuMing · 2018-04-06T13:04:12Z

建议tag 标签，提供关闭所有，关闭其它，刷新的功能

daxiongYang · 2018-04-06T14:46:37Z

@QiuMing 感谢您的建议，已列入开发计划中。

daxiongYang · 2018-04-07T11:09:26Z

@QiuMing 功能已经实现，请及时更新！

QiuMing · 2018-04-08T15:39:47Z

已更新，楼主非常给力，赞一个

QiuMing · 2018-04-09T15:02:27Z

楼主，要不要考虑加上NProgress，看好的vue 后台都有，挺不错的

daxiongYang · 2018-04-10T01:38:24Z

@QiuMing NProgress已排在计划中，但目前还是优先考虑实用型的功能。

pickerX · 2018-04-18T08:54:27Z

hi @daxiongYang,
执行 npm run dev 遇到一个语法问题，还请帮忙看看是什么原因？
环境 ubuntu16.04，npm v4.2.0

renren-fast-vue@1.0.0 dev /home/tic/work/github/fk-things/renren-fast-vue
webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

/home/tic/work/github/fk-things/renren-fast-vue/build/webpack.base.conf.js:43
...(config.dev.useEslint ? [createLintingRule()] : []),
^^^

SyntaxError: Unexpected token ...
at exports.runInThisContext (vm.js:53:16)
at Module._compile (module.js:374:25)
at Object.Module._extensions..js (module.js:417:10)
at Module.load (module.js:344:32)
at Function.Module._load (module.js:301:12)
at Module.require (module.js:354:17)
at require (internal/module.js:12:17)
at Object. (/home/tic/work/github/fk-things/renren-fast-vue/build/webpack.dev.conf.js:6:27)
at Module._compile (module.js:410:26)
at Object.Module._extensions..js (module.js:417:10)

npm ERR! Linux 4.13.0-38-generic
npm ERR! argv "/usr/bin/nodejs" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v4.2.6
npm ERR! npm v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! renren-fast-vue@1.0.0 dev: webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the renren-fast-vue@1.0.0 dev script 'webpack-dev-server --inline --progress --config build/webpack.dev.conf.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the renren-fast-vue package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs renren-fast-vue
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls renren-fast-vue
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! /home/tic/.npm/_logs/2018-04-18T08_51_56_169Z-debug.log

daxiongYang · 2018-04-19T01:48:09Z

@Tic-pf ...是ES6语法报错！尝试更新下nodejs和重新安装项目依赖插件。

pickerX · 2018-04-23T03:38:11Z

@daxiongYang 发现了。 Nodejs 7.x版本的问题，今天更新到8.11就没有问题了。感谢

zhoujin798946620 · 2018-05-10T08:26:39Z

<el-form-item label="租户" prop="tenantId" size="small" :class="{ 'is-required': !dataForm.id }" > <el-option-group v-model="dataForm.roleIdList"> <el-option v-for="role in roleList" :key="role.roleId" :value="role.roleId">{{role.roleName}}</el-option> </el-option-group> </el-form-item>这样好像前端没有效果，是什么问题

daxiongYang · 2018-05-10T13:03:54Z

@zhoujin798946620 element-ui组件，需要在element-ui/index.js文件中开启组件才能使用。
https://github.com/daxiongYang/renren-fast-vue/blob/master/src/element-ui/index.js

zhoujin798946620 · 2018-05-14T01:57:54Z

@daxiongYang 多谢，已解决，就是 placeholder="请选择租户"，好像不显示，这是什么问题

daxiongYang · 2018-05-18T06:43:40Z

@zhoujin798946620 抱歉！这几天有事回家，没来得及看信息。
placeholder属性肯定是会显示的。是不是你默认选中值？key值对应的value为空？

sc0574 · 2018-05-20T09:42:56Z

前端复制文件进去出现

@/api in ./node_modules/_babel-loader@7.1.1@babel-loader/lib!./node_modules/_vue-loader@13.3.0@vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/views/go
ods/add-or-update.vue

To install it, you can run: npm install --save @/api
并且js文件中的
import request from '../request'
import requestUrl from '../requestUrl'
import requestParam from '../requestParam'
没有找到文件

zhoujin798946620 · 2018-05-21T01:18:56Z

请问百度echart怎么引入

daxiongYang · 2018-05-21T02:25:47Z

@sc0574 用代码生成器，对应fast-vue前端项目版本 v1.1.0。不要使用v1.2.0

daxiongYang · 2018-05-21T02:26:49Z

@zhoujin798946620 参考mockjs使用方法。或者搜索引擎找下答案

yangwen007 · 2018-05-21T15:18:27Z

请问在npm run dev 后，在chrome浏览器下报这样的错是什么原因：

xhr.js?ec6c:178 OPTIONS http://localhost:8080/renren-fast/sys/menu/nav?t=1526915802895 net::ERR_CONNECTION_REFUSED
dispatchXhrRequest @ xhr.js?ec6c:178
xhrAdapter @ xhr.js?ec6c:12
dispatchRequest @ dispatchRequest.js?c4bb:59
Promise.then (async)
request @ Axios.js?5e65:51
wrap @ bind.js?24ff:9
(anonymous) @ index.js?61a1:70
iterator @ vue-router.esm.js?fe87:1943
step @ vue-router.esm.js?fe87:1717
runQueue @ vue-router.esm.js?fe87:1725
confirmTransition @ vue-router.esm.js?fe87:1972
transitionTo @ vue-router.esm.js?fe87:1874
init @ vue-router.esm.js?fe87:2499
beforeCreate @ vue-router.esm.js?fe87:540
callHook @ vue.esm.js?efeb:2817
Vue._init @ vue.esm.js?efeb:4472
Vue$3 @ vue.esm.js?efeb:4571
(anonymous) @ main.js?3479:26
./src/main.js @ app.js:7135
webpack_require @ app.js:678
fn @ app.js:88
0 @ app.js:7487
webpack_require @ app.js:678
(anonymous) @ app.js:724
(anonymous) @ app.js:727
createError.js?16d0:16 Uncaught (in promise) Error: Network Error
at createError (createError.js?16d0:16)
at XMLHttpRequest.handleError (xhr.js?ec6c:87)

daxiongYang · 2018-05-22T04:57:58Z

@yangwen007 这个错误是ajax请求报出来的。应该是请求localhost:8080/renren-fast本地后台服务报500或者其它错误，请定位下。

yangwen007 · 2018-05-23T04:03:18Z

@daxiongYang 应该是未开启代理造成的，现在应可以了，谢谢！

zhoujin798946620 · 2018-05-25T09:19:26Z

linux部署的时候npm run dev
ERROR Failed to compile with 1 errors 17:17:34

This relative module was not found:

./element-#17b3a3/index.css in ./src/element-ui-theme/index.js

daxiongYang · 2018-05-27T03:11:07Z

@zhoujin798946620 已解决。#22

jinfang134 · 2018-06-01T06:59:02Z

@daxiongYang 你好，我提一个建议，我一觉得 utils/httpRequest.js写得很蹩脚，建议你看一下axios官方文档。
比如：

http.adornUrl = (actionName) => {
  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
}

我觉得直接用baseURL 这个配置项就好了：

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

再比如：

/**
 * get请求参数处理
 * @param {*} params 参数对象
 * @param {*} openDefultParams 是否开启默认参数?
 */
http.adornParams = (params = {}, openDefultParams = true) => {
  var defaults = {
    't': new Date().getTime()
  }
  return openDefultParams ? merge(defaults, params) : params
}

我觉得可以在拦截器里添加默认参数

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

daxiongYang · 2018-06-01T11:44:46Z

@jinfang134 感谢您的建议，您提到的解决方案都是可行的。

下述是我的实现思路和想法：
背景：此项目是将自己负责的前公司项目优化整理过来做renren-fast项目的，所以会存在将之前为了解决公司业务的某些功能给附带进来(比如: 动态配置CDN静态资源／切换新旧版本，以及下述小需求)。请见谅！

为什么不使用axios提供的baseURL属性，而提供一个封装方法处理？
需求：(公司存在的)当项目中存在调用多个不同api请求地址时，通过baseURL属性该如何处理？比如: renren.io/sys baidu.com/erp google.com/cms
思路：提供一个api请求地址统一处理方法，通过某些(约定规则)设置不同类型对应的api请求地址。比如: http.adornUrl('/[sys|erp|cms]/user')使用action前缀，正则匹配或者 http.adornUrl('/user', '[sys|erp|cms]')使用参数，不传值默认renren.io
目前因为还没有这个需求，所以思路中提到的(约定规则)还未实现具体代码。
用您提到的baseURL属性，代码的确更加简洁优雅，同时调用http时不需要调用adornUrl方法。这个我也考虑过，但实现上面的需求还得封装一个方法进行处理。
为什么不使用axios Request拦截处理请求参数，而提供一个封装方法处理？
需求：
- (公司存在的)同1问题提到需求，当存在调用多个不同api请求地址时，会出现不同种contentType类型。(post请求需要根据contentType转换数据格式)
- (公司存在的)特殊接口(登录、验证码、不需要登录的接口)不允许传token，后台直接去验证token的有效性，报错！！(后台这样处理，我们不纠结是否商议协调修改)
- (公司存在的)前后台分离接口使用JSON-RPC 2.0轻量级远程调用协议，存在重复公用属性，需要统一组装请求参数。get请求代码如下：

    var defaults = {
      'token': Vue.cookie.get('token')
    }
    params = openDefultParams ? merge(defaults, params) : params
    return {
      'json': JSON.stringify(
        merge({
          't': new Date().getTime(),
          'params': params,
          'jsonrpc': '2.0'
        }, opts || {})
      )
    }

总结：虽然我所描述的都是公司所存在的需求，但我觉得都可能碰到，需求可变性太大！综合下，我还是觉得提供方法处理比统一拦截处理，利于维护、适应需求的变动。全局虽然很简便，但随着需求变化调整，全局逻辑会变得复杂。如果对它进行调整很有可能影响其它业务！

jinfang134 · 2018-06-01T13:23:54Z

@daxiongYang 条条大路通罗马，解决问题的方式有多种多样。
比如你说的这两个问题，其实在本地服务器配一个nginx做一个代理，问题就解决了，而且简单高效。可配置性更强。
随手给你百度了一条。
https://blog.csdn.net/johnnycode/article/details/48262191

硬编码在代码里，反而失去了灵活性。

daxiongYang · 2018-06-02T03:10:16Z

@jinfang134 代理其实我提过建议，只是领导拒绝了，让整在代码里的....
非常您的建议和提供的思路方案。我想我需要重新梳理下，感觉被自己带沟里了...

其实我也希望写轻便易懂的代码呢！只是当需求(其它部门只提供有限的资源！)出来后，我也只能在解决问题的同时最大程度在自己的领域中寻找解决方案。

jinfang134 · 2018-06-03T02:21:32Z

@daxiongYang 你们那领导有点意思 😂
照他这个思维，前端是不是还得把后端运维的活顺便一路都揽了啊，多好啊。要后台干嘛。

jinfang134 · 2018-06-03T02:23:37Z

@daxiongYang 如果到时再来一个类似这种变态需求，而现有的设计又不能满足要求的时候，你再来把所有的前端请求再撸一遍？:joy: :joy: :joy:

daxiongYang · 2018-06-03T03:23:03Z

@jinfang134 我相信现实中不管前端、后端、运维、设计也好，都会遇见我这种问题的。领导或者上级已经将各个部门的任务协调好了，我们只能提出建议，当建议没被采纳时，你没有理由不去撸！！
每个人遇到过业务场景或解决过的问题不一样，也会导致在预知和避免问题的时候想法思路不一样。

zhoujin798946620 · 2018-06-06T02:32:34Z

配置域名了之后访问显示Invalid Host header，这是什么问题

jinfang134 · 2018-06-08T06:57:06Z

@daxiongYang 我理解你的难处，回到我们讨论的问题，就算你不能用代理，要实现你的以上需求，你也还是可以用拦截器来实现．
在拦截器里，拿到config，进而根据你请求的路径，来修改config 中的 baseURL, 以及添加默认的参数.

daxiongYang · 2018-06-09T01:11:55Z

@jinfang134 我并没有否定不可以用拦截器实现！因为在封装方法之前我有使用拦截器去实现处理过的，然而并没有你所描述的『在拦截器里，拿到config，进而根据你请求的路径，来修改config 中的 baseURL, 以及添加默认的参数.』这样简单高效！

请求地址可以通过拦截器config处理，对于之前我提到的需求『调用多个不同api请求地址』也仅限于思路中提到的『http.adornUrl('/[sys|erp|cms]/user')使用action前缀，正则匹配』，区分不同类型请求地址。假如此项(约定规则)无法施行，就需要在多传类型参数进行处理，这样并不优雅！
默认参数可以通过拦截器config处理，对于之前我提到需求『特殊接口(登录、验证码、不需要登录的接口)不允许传token，后台直接去验证token的有效性，报错！！』并不能优雅实现。这里拿token当默认参数举例(下面的分支我们用t时间戳做默认参数)，因为很多项目token是放在请求参数中，renren放在header中。
现在我拉个分支dev。咱们以码会友，交流经验。

daxiongYang · 2018-06-09T14:18:48Z

@jinfang134 dev分支已经通过拦截器实现，满足目前的业务功能。待确定后再决定是否合并主干。
如未实现你说描述建议，请帮忙优化代码，达到你所描述结果。

daxiongYang · 2018-07-09T08:41:46Z

@zhoujin798946620 用户切换菜单还保留，这是单页面vux本地数据还存在的问题，之前通过强制刷新有处理这个bug，但是最近有人提出不要刷新，bug就又出现了。你可以回档下代码 9785ad9344dbba868de8ef2d85d49ff84faea1b5。
现在已经找到重置vux数据方法，后面会修复上。

daxiongYang · 2018-07-09T08:42:26Z

@zhoujin798946620 导出，如果浏览器可以直接访问。那么只需要一个a标签src填写地址就可以了。

daxiongYang · 2018-07-09T11:55:56Z

@zhoujin798946620 你能不能尝试修改后台，将head中传的token改变成通过params参数传入后台？

maozhiling2018 · 2018-07-10T00:55:04Z

侧导航栏建议实现点击切换自动收缩，现在这个效果好像必须手动点击收缩

daxiongYang · 2018-07-10T08:43:43Z

@maozhiling2018 自动收缩，具体效果逻辑是怎样？

jsdawn · 2018-07-17T01:16:34Z

表格 el-table 添加右侧固定列的时候覆盖表格边框并且固定列表头下边框不显示的问题有遇到过吗

daxiongYang · 2018-07-17T04:13:28Z

@jsdawn 没有，可以截图看效果，看是否有办法解决。如果确认是element bug 可以去官方提issues

ouyang-yuxuan · 2018-07-17T10:09:31Z

前端运行报错<% if (process.env.NODE_ENV === 'production') { %> <% }else { %> <% } %>几种安装方法都试了，求大佬帮助

error in ./src/assets/scss/index.scss

Module build failed: Error: ENOENT: no such file or directory, scandir 'E:\Class\SSM\IDEA\demo\renren-fast-vue\node_modules\node-sass\vendor'

daxiongYang · 2018-07-18T03:24:29Z

@farthest 搜索引擎 -> node-sass安装失败

ouyang-yuxuan · 2018-07-18T03:32:02Z

@daxiongYang 大佬非常感谢，解决了

daxiongYang · 2018-07-19T02:19:55Z

此issues内容越积越多，不方便阅读。现在关闭！
有问题或建议请单独提issues，感谢大家的支持和帮助！

daxiongYang changed the title ~~【意见收集】欢迎你对renren-fast-vue 提出自己的建议及问题~~ 【意见收集】欢迎您对renren-fast-vue提出自己的建议及问题 Apr 3, 2018

daxiongYang added bug Something isn't working help wanted Extra attention is needed and removed bug Something isn't working labels Apr 6, 2018

daxiongYang closed this as completed Jul 19, 2018

【意见收集】欢迎您对renren-fast-vue提出自己的建议及问题 #9

【意见收集】欢迎您对renren-fast-vue提出自己的建议及问题 #9

Comments

daxiongYang commented Apr 3, 2018

QiuMing commented Apr 6, 2018

daxiongYang commented Apr 6, 2018

daxiongYang commented Apr 7, 2018

QiuMing commented Apr 8, 2018

QiuMing commented Apr 9, 2018

daxiongYang commented Apr 10, 2018 • edited Loading

pickerX commented Apr 18, 2018

daxiongYang commented Apr 19, 2018

pickerX commented Apr 23, 2018

zhoujin798946620 commented May 10, 2018 • edited Loading

daxiongYang commented May 10, 2018 • edited Loading

zhoujin798946620 commented May 14, 2018

daxiongYang commented May 18, 2018

sc0574 commented May 20, 2018

zhoujin798946620 commented May 21, 2018

daxiongYang commented May 21, 2018

daxiongYang commented May 21, 2018

yangwen007 commented May 21, 2018

daxiongYang commented May 22, 2018 • edited Loading

yangwen007 commented May 23, 2018

zhoujin798946620 commented May 25, 2018

daxiongYang commented May 27, 2018

jinfang134 commented Jun 1, 2018 • edited Loading

daxiongYang commented Jun 1, 2018 • edited Loading

jinfang134 commented Jun 1, 2018 • edited Loading

daxiongYang commented Jun 2, 2018

jinfang134 commented Jun 3, 2018

jinfang134 commented Jun 3, 2018

daxiongYang commented Jun 3, 2018

zhoujin798946620 commented Jun 6, 2018

jinfang134 commented Jun 8, 2018 • edited Loading

daxiongYang commented Jun 9, 2018 • edited Loading

daxiongYang commented Jun 9, 2018

daxiongYang commented Jul 9, 2018 • edited Loading

daxiongYang commented Jul 9, 2018

daxiongYang commented Jul 9, 2018

maozhiling2018 commented Jul 10, 2018

daxiongYang commented Jul 10, 2018

jsdawn commented Jul 17, 2018

daxiongYang commented Jul 17, 2018

ouyang-yuxuan commented Jul 17, 2018

daxiongYang commented Jul 18, 2018

ouyang-yuxuan commented Jul 18, 2018

daxiongYang commented Jul 19, 2018

daxiongYang commented Apr 10, 2018 •

edited

Loading

zhoujin798946620 commented May 10, 2018 •

edited

Loading

daxiongYang commented May 10, 2018 •

edited

Loading

daxiongYang commented May 22, 2018 •

edited

Loading

jinfang134 commented Jun 1, 2018 •

edited

Loading

daxiongYang commented Jun 1, 2018 •

edited

Loading

jinfang134 commented Jun 1, 2018 •

edited

Loading

jinfang134 commented Jun 8, 2018 •

edited

Loading

daxiongYang commented Jun 9, 2018 •

edited

Loading

daxiongYang commented Jul 9, 2018 •

edited

Loading