前面我们学习egg项目初始化+egg资源路由+egg请求参数处理+egg使用cookie，现在我们可以结合所学实现一个持久化的web小项目。这是一个阶段性实践。

从零开始搭建前后端

1.初始化egg项目

找到合适本地路径，使用终端依次执行下面代码完成初始化：

    cnpm init egg --type=simple
    //下面的指令要进入init文件夹后在执行，init才是项目代码所在。
    cnpm i
    //启动成功后点击终端提供的访问地址显示hi, egg，则初始化成功。
    npm run dev

2.设置主机名和端口

找到config.default.js文件（config文件夹中）配置端口号和主机名：(添加进config对象内)

    cluster: {
      listen: {
        port: 80,
        hostname: 'juejinlogin.com',
      },
    },

找到host文件添加ip映射信息：

你的ip地址 juejinlogin.com

这里配置好默认端口号80和主机名后我们重启egg服务器（ Ctrl+C 终端egg服务器），向浏览器地址栏输入 juejinlogin.com/ ，得到 hi, egg 的默认页面信息。

3.创建静态登录网页

我们在app文件夹下的public文件夹内创建新的html静态网页，用于发起登录。

    <form action="" onsubmit="login(event)">
        <label for="">账号<input type="text" id="name"></label>
        <label for="">密码<input type="password" id="pwd"></label>
        <input type="submit" id="btn" value="登录">
    </form>
    <script>
        function login(event){
            event.preventDefault();//阻止表单默认submit事件
            let name = document.querySelector('#name').value;
            let pwd = document.querySelector('#pwd').value;
            let xhr = new XMLHttpRequest()
            xhr.open('post','http://juejinlogin.com/login')
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
            xhr.timeout = 5000;//超时时间
            xhr.onload=()=>{
                console.log('接收到服务器响应');
                console.log(JSON.parse(xhr.responseText));
            }
            xhr.onerror=()=>{
                console.log('请求失败')
            }
            xhr.send(`name=${name}&pwd=${pwd}`);
        }
    </script>

配置请求跨域

4.配置登录请求路由

router.js文件内添加新的路由配置，注意是post。

module.exports = app => {
  const { router, controller } = app;
  router.get('/', controller.home.index);
  router.post('/login', controller.login.index);
};

5.配置cors和CSRF插件

因为egg-security是内置的所以不需要安装且自动启用，所以我们要需要先手动下载和启动egg-cors。

安装和启用egg-cors插件（一个终端指令，一个是plugin.js内要添加的配置）

cnpm i egg-cors --save

  cors: {
    enable: true,
    package: 'egg-cors',
  },

在config.default.js文件中添加关于egg-security和egg-cors插件的配置。

  config.security = {
    csrf: {
      enable: false,
      ignoreJSON: true,
    },
    domainWhiteList: [ '*' ],
  };
  config.cors = {
    origin: '*',
    allowMethods: 'GET,HEAD,PUT,POST,DELETE,PATCH',
  };

验证登录并持久化

6.处理参数添加cookie

创建login.js（前面路由也暗示），写入包含对参数的处理，对cookie的处理：

...
class LoginController extends Controller {
  async index() {
    const { ctx } = this;
    console.log(ctx.request.body);
    console.log(ctx.cookies.get('name', {
      signed: false,
    }));
    ctx.cookies.set('name', ctx.request.body.name, {
      maxAge: 100000,
      httpOnly: false,
      signed: false,
      encrypt: false,
      domain: 'juejinlogin.com',
    });
    ctx.cookies.set('pwd', ctx.request.body.pwd, {
      maxAge: 100000,
      httpOnly: false,
      signed: false,
      encrypt: false,
      domain: 'juejinlogin.com',
    });
    ctx.body = {
      data: 'ok',
    };
  }
}

module.exports = LoginController;

此刻重启egg服务器，通过服务器静态资源路径打开public中的login网页。juejinlogin.com/public/logi… ，然后我们可以看到项目已经成型。

post请求和响应成功

cookie信息客户端展示成功

post参数和cookie信息服务端展示成功（cookie.get在第二次才会有值，因为第一次cookie还没创建，也说明了第二次的cookie值是http请求携带而来的）

如果没有问题，请给自己一次掌声。

7.添加登录状态逻辑（客户端和服务端）

具体的需求就是模仿主流设计，添加一个用户信息展示在网页内，会根据cookie信息进行渲染，没有就是未登录，有就是登录。因为cookie是本地缓存，所以我们可以关闭页面再次打开静态路由下的该网页，此时按照设计就应该是显示登录状态。

向浏览器添加结构和逻辑代码(整体更新代码如下)

    <form action="" onsubmit="login(event)">
        <label for="">账号<input type="text" id="name"></label>
        <label for="">密码<input type="password" id="pwd"></label>
        <input type="submit" id="btn" value="登录">
    </form>
    <div class="login">
    </div>
    <script>
        function login(event){
            event.preventDefault();
            let name = document.querySelector('#name').value;
            let pwd = document.querySelector('#pwd').value;
            let xhr = new XMLHttpRequest()
            xhr.open('post','http://juejinlogin.com/login')
            xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
            xhr.timeout = 5000;
            xhr.onload=()=>{
                console.log('接收到服务器响应');
                console.log(JSON.parse(xhr.responseText));
                show();
            }
            xhr.onerror=()=>{
                console.log('请求失败')
            }
            xhr.send(`name=${name}&pwd=${pwd}`);
        }
        setTimeout(show, 100);
        function show(){
            let name = document.cookie
            if(name.includes('name'))
                name = `用户${name.replace(/[^]*name=/,'').replace(/;[^]*/,'')}已登录`
            else
                name=`未登录`
            document.querySelector('.login').innerHTML=name
        }
    </script>

8.效果展示：

初始状态

登录状态

登录持久化（刷新页面或关闭重新打开）

完成持久化的项目，接下来的学习中我们将实现关联数据库操作。

写篇文章让自己清楚egg——（5）登录持久化实现