幽辰

幽辰 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织 youchen12138.github.io/ 编辑
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

幽辰 提出了问题 · 2020-07-26

解决cnpm安装后npm uninstall总是错误

安装的时候为了考虑速度,是使用cnpm安装的,但是使用npm uninstall卸载时
//img.mukewang.com/szimg/5ad072ef0001c91808200339.jpg//img.mukewang.com/szimg/5ad072ef0001986708560367.jpg

关注 2 回答 1

幽辰 赞了回答 · 2020-07-09

解决egg部署阿里云成功之后,在外网访问不到

第二次修改的配置文件是对的。第一次完全错误的。
第二次修改后,本地生效是因为,npm run dev 用的egg-bin启动的。egg-bin内置了ts-node,直接编译ts,所以你修改ts文件后启动,直接生效。
你部署到服务器上,npm start用的是egg-scripts启动。得先执行npm run tsc把ts文件编译成js文件,然后再执行npm start。服务器环境只读取js文件(具体为啥,egg文档上“教程--typeScript”那块有写)。

关注 2 回答 3

幽辰 提出了问题 · 2020-06-25

解决前后端分离时egg的session获取不到

代码

后端

// service/login.js
// 获取验证码
  async getVerifyCode() {
    const { ctx } = this;
    const captcha = svgCaptcha.create({
      size: 4,
      fontSize: 50,
      width: 100,
      height: 40,
      background: '#ccc',
    });

    let res = ctx.returnInfo(0, captcha.data, '请求成功');

    if (!captcha.data) {
      res = ctx.returnInfo(403, '', '请求验证图片错误');
    }

    ctx.session.maxAge = 1000 * 60 * 5; // 5分钟
    ctx.session.renew = false; // 设置在连续访问的时候不刷新剩余时间
    ctx.session.verifyCode = captcha.text; // 设置session
    return res;
  }
  // controller/login.js
  // 登陆
  async login() {
    const { ctx, service } = this;
    const res = await service.login.index();
    console.log(ctx.session.verifyCode); // 获取session
    ctx.body = res;
  }
  // config/config.default.js
  // 跨域设置
  config.cors = {
    origin: '*',
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',
  };

前端

await axios.put(`${backIP}/login`, data)

描述

postman测试一切如预期,但是在项目中实际操作的时候,会出现session的值不能获取到的情况,获取之后的sessionundefined

关注 3 回答 2

幽辰 提出了问题 · 2020-06-22

next+ts引入sass模块化报错

文件配置

// next.config.js

const withSass = require('@zeit/next-sass')
module.exports = withSass({
    cssModules: true
})
// .babelrc

{
    "presets": [
        "next/babel"
    ]
}
// components/login/Login.tsx

import React from 'react'
import styles from '../../styles/login/Login.scss'

export default function Login() {
    return (
        <div className={styles.layout}>
            <div className={styles.main}></div>
        </div>
    )
}

问题

这样写运行代码没有任何问题,但是在编辑器内会有下划线提示错误
image.png

关注 1 回答 0

幽辰 提出了问题 · 2020-06-22

next+ts引入sass模块化报错

文件配置

// next.config.js

const withSass = require('@zeit/next-sass')
module.exports = withSass({
    cssModules: true
})
// .babelrc

{
    "presets": [
        "next/babel"
    ]
}
// components/login/Login.tsx

import React from 'react'
import styles from '../../styles/login/Login.scss'

export default function Login() {
    return (
        <div className={styles.layout}>
            <div className={styles.main}></div>
        </div>
    )
}

问题

这样写运行代码没有任何问题,但是在编辑器内会有下划线提示错误
image.png

关注 1 回答 0

幽辰 发布了文章 · 2020-05-16

typescript搭建egg脚手架出现的beautify格式化之后报错

问题描述

使用官方脚手架搭建的egg应用,可以使用beautify直接格式化
但是可能会遇到个问题,就是自己新创建的文件(比如控制器之类),可以格式化,但是格式化之后会报错,我是因为代码缩进所出的错误

解决方案

image.png
会出现以下文件页面
image.png
然后,找到我们的项目目录,新建.jsbeautifyrc文件
image.png

{
  "brace_style": "none,preserve-inline",
  "indent_size": 2, // 缩进长度
  "indent_char": " ", // 缩进以是什么代替
  "jslint_happy": true,
  "unformatted": [""],
  "css": {
    "indent_size": 2
  },
  "end_with_newline": true // 行尾是否有换行符
}

这是我的文件配置,如有需要,请到 官方文档 进行查找
接下来,我们使用 Alt+Shift+f 组合键就可以格式化代码了

如果不能成功,可以重启试一试

查看原文

赞 0 收藏 0 评论 0

幽辰 提出了问题 · 2020-05-16

egg-socket.io插件中的socket.id是什么

我这里直接使用的是官方推荐的egg-socket.io demo

// /app/io/middleware/auth.js
module.exports = () => {
  return async (ctx, next) => {
    const { app, socket, logger, helper } = ctx;
    const id = socket.id;
    
    socket.emit(id, helper.parseMsg('deny', msg));
    // ...
  };
};

想请教下这里的 socket.id 指的是什么,为什么可以通过 socket.emit 进行广播,而且demo里面的html文件的代码里也没有监听这个的事件啊,这个东西具体来说有什么用处啊

关注 1 回答 0

幽辰 赞了文章 · 2020-05-16

使用egg-socket.io 搭建socket 服务

1.后台

安装 egg-socket.io
npm i egg-socket.io --save
开启插件
// {app_root}/config/plugin.js
exports.io = {
  enable: true,
  package: 'egg-socket.io',
};
配置
// {app_root}/config/config.${env}.js
exports.io = {
  init: { }, // passed to engine.io
  namespace: {
    '/': {
      connectionMiddleware: [中间件],
      packetMiddleware: [中间件],
    },
    '/example': {
      connectionMiddleware: [],
      packetMiddleware: [],
    },
  },
};

namespace 是指分配到不同的接入点或者路径,前端链接socket时需要和此保持一致

io(http://127.0.0.1:7001{namespace})

connectionMiddleware 在每一个客户端链接或者退出时发生作用,socket链接先走的中间件,可以在这里处理授权认证,链接处理等操作

packetMiddleware 作用于数据包(每一条消息),通常对消息进行预处理(信息加密)

路由
// {app_root}/app/router.js

module.exports = app => {
  const { router, controller, io } = app;

  // default
  router.get('/', controller.home.index);

  // socket.io
  io.of('/').route('server', io.controller.home.server);
};

对于在命名空间"/" 下,监听到的serve事件将由 app/io/controller/home 中 server 方法处理
server 方法可以前端可以通过调用 socket.emit('server',{name:'jjj'}),可以将数据传递到app/io/controller/home 中 server 方法中进行处理

//后台 server方法 
 async server() {
    const { ctx, app } = this;
    const nsp = app.io.of('/');
    const message = ctx.args[0] || {};
    const socket = ctx.socket;
    const client = socket.id;
   await nsp.emit('server',{age:12})
  }

2.前端

前端使用vue 框架,需要vue-socket.io 插件

安装vue-socket.io

npm install vue-socket.io --save

在入口文件main.js中使用插件,并建立socket链接
import VueSocket from 'vue-socket.io'
Vue.use(new VueSocket({
  debug:true,
  connection:'http://127.0.0.1:7001/', // namespace --> /
}))
在组件中调用方法
// 前端代码
 this.$socket.emit('server',{name:'jjj'})

前端emit 数据,后台返回结果这样我们就能在浏览器上看到返回的数据

image.png

查看原文

赞 3 收藏 0 评论 0

幽辰 关注了用户 · 2020-05-12

null仔 @xiaoqianduan_58b28cfebff36

总是有人要赢的,那为什么不能是我呢

关注 3058

幽辰 关注了专栏 · 2020-05-12

前端 1943

前端技术文章

关注 2465

认证与成就

  • 获得 0 次点赞
  • 获得 6 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 6 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2019-11-29
个人主页被 413 人浏览