egg项目搭建+AJAX请求+常见问题解决

这篇文章距离上次修改已过202天，其中的内容可能已经有所变动。

以下是一个简单的Egg.js项目搭建的例子，并展示了如何使用AJAX发送请求和解决一些常见问题的方法。

安装Egg.js：




$ mkdir egg-example && cd egg-example
$ npm init egg --type=simple
$ npm install

修改config/config.default.js，设置内容 negg-example 的端口号：




export default appInfo => {
  const config = (exports = {});
 
  config.keys = appInfo.name + '_1503937476017_8482';
 
  config.middleware = [];
 
  config.security = {
    csrf: {
      enable: false,
    },
  };
 
  config.view = {
    mapping: {
      '.html': 'ejs',
    },
  };
 
  // 设置端口号
  config.cluster = {
    listen: {
      path: '',
      port: 7001,
      hostname: '',
    },
  };
 
  return config;
};

创建一个简单的Controller：




// app/controller/hello.js
const Controller = require('egg').Controller;
 
class HelloController extends Controller {
  async index() {
    await this.ctx.render('hello.html');
  }
  
  async postData() {
    this.ctx.body = {
      data: 'Hello, World!'
    };
  }
}
 
module.exports = HelloController;

创建对应的视图文件hello.html：




<!-- app/view/hello.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Egg.js AJAX Example</title>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <button id="send-ajax">Send AJAX Request</button>
  <div id="response"></div>
 
  <script>
    $(document).ready(function(){
      $("#send-ajax").click(function(){
        $.ajax({
          type: "POST",
          url: "/postData",
          success: function(data){
            $("#response").html(data.data);
          },
          error: function(jqXHR, textStatus, errorThrown){
            console.log('Error: ' + textStatus);
          }
        });
      });
    });
  </script>
</body>
</html>

启动Egg.js项目：




$ npm run dev

创建一个简单的AJAX请求，当点击按钮时，发送请求到/postData路由。

这个例子演示了如何使用Egg.js搭建一个简单的Web项目，并通过AJAX请求与该项目进行数据交互。注意，Egg.js默认启用了CSRF防御，为了简化例子，在config/config.default.js中关闭了它。在实际生产环境中，应当开启CSRF防御以保障安全。

egg项目搭建+AJAX请求+常见问题解决

评论已关闭

推荐阅读