写篇文章让自己清楚egg——(2)url设置

1,175 阅读4分钟

通过上篇文章我们知道默认的地址是http://localhost:7001, 但是实际开发是需要特殊ip地址,我们这里先初步的修改。

image.png
该图为初期操作的项目结构。app可以理解项目的直接源代码(路由+后端模块+前端静态);config可以理解为对项目整体的配置(插件和服务器的配置)

设置端口号

进入config文件夹,我们通过config.default.js文件进行配置服务器信息。

config.default.js文件

//只留下相关的代码,减少阅读压力,详细结构可以自己打开项目里的文件查看
'use strict';
module.exports = appInfo => {
...
  const config = exports = {};
...
};

这里我们需改设置访问信息,在config这个对象初始化时添加cluster属性,具体写法如下:

module.exports = appInfo => {
...
  const config = exports = {
    cluster: {
      listen: {
        path: '',
        port: 8081,//这个对象内的深层属性决定了egg服务器的访问端口号。
      },
    },
  };
...
};

现在可以使用http://localhost:8081 进行服务器访问。

设置hostname主机名(包含ip和域名)

设置了端口号的cluster属性,同样也能设置主机名。

...
    cluster: {
      listen: {
        path: '',
        port: 8081,
        hostname: 'juejinjin.com',//这个深层属性决定了egg服务器的访问主机名。
      },
    },
...

但是这并不能算是配置成功,我们还需要去修改主机的系统文件host c:\windows\system32\drivers\etc下的host文件——用记事本(text)打开手动添加下面的代码(最后放在最后)

你的ipv4地址 juejinjin.com

Ctrl+R后——输入cmd回车——打开终端输出:ipconfig——得到本机ip详细。 现在你可以使用juejinjin.com:8081 这个url访问你的后台了(失败就重启服务器)

增加可用路由

在主机名和端口号后通常是路由信息,egg服务器默认只实现'/'路由地址的接收处理。
我假设一个路由/login——完整url为:juejinjin.com:8081/login 然后逐步实现他。

  1. 新增路由对象对新地址处理 所有路由信息和接收都是在app文件夹里的router.js文件负责指定。

router.js文件

...
module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);//初始化的基本路由配置。
  router.get('/login', controller.home.login);//新增路由,参数一是新的路由地址,参数二controller对象下的方法————专门处理路由请求。
};

controller.home.fn写法和controller文件夹里home.js文件有关。


  1. 实现对应路由的处理函数

router.js文件中新增的路由显性的指定了controller.home.fn作为参数参与路由请求处理,所以我们还需要去实现这个新controller.home.fn

home.js文件

...
class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    ctx.body = 'hi, egg';
  }
  async login() {//新增的路由的处理方法。
    const { ctx } = this;
    ctx.body = 'hi, egg, this is login page';//这里是返回给客户端的响应body
  }
}
...

Context 是一个请求级别的对象,在每一次收到用户请求时,框架会实例化一个 Context 对象,通过ctx.body属性我们将客户端请求的数据响应回去。


3. 测试新增路由

点击测试一下吧:juejinjin.com:8081/login
得到的信息应该就是 hi, egg, this is login page (或则你自己写的内容)

通过12步骤你可以创建各种你想要的路由地址。

而路由后携带的内容的写法将会在下一篇文章中讲解

访问public路径

在点击这样一个url路径之前: juejinjin.com:8081/public/inde… ,我要告诉你egg支持一种特殊的路由访问。

egg项目默认允许通过在 juejinjin.com:8081 后添加/public路径来访问app文件夹中public文件夹里的资源(访问即响应)。同时egg建议将静态资源放在public文件夹内。所以我们可以通过/public/静态资源的写法直接请求得到这个静态资源。

为了请求成功,我们先要创建一个静态资源-静态网页放在public文件夹里供浏览器请求。 index.html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    <h1>这是public里的静态资源</h1>
</body>
</html>

image.png

现在再去点击上面的网址你应该看得到你写的网页内容:

image.png

public路由其实就是node中用fs实现的路由效果,被egg框架封装了,初始化就自动支持。

隐藏端口号

哈哈哈哈,告诉你们小技巧,虽然大佬们可能都知道,就是咱的追求极致,这端口号我们能留他吗?不能留,太丑,得去掉,咋去?

这里提出一个指令,我们启动服务器指令是npm run dev,其实在配置里dev指令是egg-bin dev指令得简写。

所有egg服务器指令都在根目录得package.json配置文件里

  • 本地启动egg服务器应用默认监听 7001 端口,可指定其他端口
    egg-bin dev //等效于egg-bin dev --port 7001

我们通过--port参数指定egg服务器监听得端口号。一旦明文指定端口号,配置文件中设置端口号就会被忽视。

  • 我们监听80端口号,80为默认端口号,浏览器地址栏会默认附加和隐藏得特殊端口号
    "dev": "egg-bin dev --port 80" //需要手动修改package.json文件中dev指令。

这个时候juejinjin.com 就可以直接访问你的服务器了!!!!!!!!