起因竟然是因为做了一个梦,不过是因为确实想明白这个弹幕是什么个原理,也想压测一下面对秒级百万覆盖的弹幕是不是会出现卡顿,然后这四个前端vue项目,我不碰前端的啊,上次写前端页面都追溯到20年1月写中台的时候了,就在今天我终于把他折腾起来了。
后端
springboot+netty+Mysql+jdk1.8
1-改动mysql数据库用户名密码
2-验证项目启动
3-所有编译级别调整到1.8
启动成功
前端 vue
1-npm 环境配置
下载:
https://nodejs.org/en/download/
2-环境变量配置
3-在nodejs根目录新建文件夹【node_global】及【node_cache】
4-创建完两个空文件夹之后,打开cmd命令窗口,输入
npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"
此处失败的可用管理员打开
5-环境变量配置
用户变量,系统变量配置
6-在用户变量的path路径更改npm路径为node_global绝对路径
7-在系统变量下新建NODE_PATH
好了开始前端排坑之路
项目进行启动前导入依赖
npm install router
npm install axios
npm install uuid
启动项目
npm run server
首先贴出错误:
0 info it worked if it ends with ok
1 verbose cli [ 'D:\\nodejs\\node.exe',
1 verbose cli 'D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli 'install',
1 verbose cli '-g',
1 verbose cli 'cnpm',
1 verbose cli '--registry=https://registry.npm.taobao.org' ]
2 info using npm@6.4.1
3 info using node@v10.15.3
4 verbose npm-session 026191e276c3f621
5 silly install loadCurrentTree
6 silly install readGlobalPackageData
7 silly fetchPackageMetaData error for cnpm@latest request to https://registry.npm.taobao.org/cnpm failed, reason: connect ETIMEDOUT 93.184.216.34:8080
8 timing stage:rollbackFailedOptional Completed in 1ms
9 timing stage:runTopLevelLifecycles Completed in 133469ms
10 verbose type system
11 verbose stack FetchError: request to https://registry.npm.taobao.org/cnpm failed, reason: connect ETIMEDOUT 93.184.216.34:8080
11 verbose stack at ClientRequest.req.on.err (D:\nodejs\node_modules\npm\node_modules\node-fetch-npm\src\index.js:68:14)
11 verbose stack at ClientRequest.emit (events.js:189:13)
11 verbose stack at onerror (D:\nodejs\node_modules\npm\node_modules\agent-base\index.js:100:9)
11 verbose stack at callbackError (D:\nodejs\node_modules\npm\node_modules\agent-base\index.js:122:5)
11 verbose stack at process._tickCallback (internal/process/next_tick.js:68:7)
12 verbose cwd C:\Users\Administrator.L6BFMF7743P5SU1
13 verbose Windows_NT 10.0.17763
14 verbose argv "D:\\nodejs\\node.exe" "D:\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "-g" "cnpm" "--registry=https://registry.npm.taobao.org"
15 verbose node v10.15.3
16 verbose npm v6.4.1
17 error code ETIMEDOUT
18 error errno ETIMEDOUT
19 error network request to https://registry.npm.taobao.org/cnpm failed, reason: connect ETIMEDOUT 93.184.216.34:8080
20 error network This is a problem related to network connectivity.
20 error network In most cases you are behind a proxy or have bad network settings.
20 error network
20 error network If you are behind a proxy, please make sure that the
20 error network 'proxy' config is set properly. See: 'npm help config'
21 verbose exit [ 1, true ]
经查需要安装淘宝代理
第一步:
npm config set prefix "D:\nodejs\node_global"
第二步:
npm config set cache "D:\nodejs\node_cache"
第三步:
npm config set proxy localhost:8080
第四步:
npm config set https-proxy localhsot:8080
最后:
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后接着启动
vue-cli-service不是内部或外部命令,也不是可运行的程序
首先我必然是配置了此处
"scripts": {
"server": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
比较一下启动命令,坑爹啊serve-server,不是我写错了,是启动手册这么写的,那么多方改动完是什么样
"scripts": {
"server": "vue-cli-service server",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
}
此处留坑,即便你看出来也不要笑
好继续执行npm install
但我环境变量不是配的全局的吗?其实一开始是配错了,但后来又改过来的
原因是未在package.json同级目录下执行,未找到
ok再次重启,其次这个install命令卡在这不动了
npm install出现一直停留在“fetchMetadata: sill resolveWithNewModule find-cache-dir
删除node_model,删除package-lock.json
执行
npm cache clean --force
重新install
执行完install 这个执行npm run server提示没有server这个命令
注意此处的server-serve
"scripts": {
"server": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"start": "npm run dev"
}
我不记得大概遇到多少个错误了
最终在启动成功!!!
但是此时页面发送弹幕时,报无法链接
在room.vue这里配置ws链接地址时改为后端统一地址
const ip = "127.0.0.1"
最终效果
参考博客
https://blog.csdn.net/jagger_guo/article/details/102884480?utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
https://blog.csdn.net/Ayydead/article/details/109777894
https://blog.csdn.net/weixin_41851906/article/details/10700233
https://blog.csdn.net/L_D_W/article/details/8934443
https://blog.csdn.net/weixin_43170297/article/details/107039529
项目地址有需要联系,鸣谢阿容同学的vue帮助