一:创建项目(ajax_demo01)
二:创建两个文件
server.js:用于编写服务端代码;
ajax_demo01.html:用于编写前端页面代码。
三:引入express框架(注:Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用)
E:\ajax\ajax_demo01>npm i express

四:编写服务端代码

  • [// 1.引入express
    const { response } = require('express');
    const express = require('express');
    // 2.创建应用对象
    const app = express();
    // 3.创建路由规则
    app.get('/server', (request, response) => {
    // 设置相应头,设置为允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    //设置响应
    response.send('HelloWorld!');
    })
    // 4.监听端口启动服务
    app.listen(9000, () => {
    console.log('服务已启动,端口为9000');
    })]
    五:加载nodemon工具(用于服务端修改保存时自动重启服务器)
    E:\ajax\express\ajax> npm install -g nodemon
    六:编写页面代码:
  • [
<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>ajax技术</title> <style> #result { width: 300px; height: 200px; border: 1px solid red; } </style> </head> <body> <button>这是一个按钮</button> <div id="result"></div> ]

七:启动服务器
nodemon ./server.js

posted on 2022-03-19 12:39  Hyhange  阅读(50)  评论(0)    收藏  举报