珠峰培训，专注前端

一、express 框架

express是什么？

express是node的一个框架，使用框架可以快速开发服务端程序，处理客户端请求；让后端代码更加清晰

使用 express

1. 安装express

  1. npm install express --save

2. 导入express

  1. let express = require('express');
  2. let bodyParser = require('body-parser');

3. 使用express创建server

  1. let app = express();

4. 使用中间件

  1. app.use(express.static(__dirname)); // 静态资源服务
  2. app.use(bodyParser.json()); // 解析POST请求的数据，并且挂载到req的body上

5 配置路由 （接口）

  1. get请求
  1. app.get('/login', function (req, res) {
  2.   console.log(req.query);
  3.   res.send(req.headers);
  4. });
  1. post请求
  1. app.post('/register', function (req, res) {
  2.   console.log(req.body);
  3.   res.send({
  4.     code: 0,
  5.     data: {},
  6.     msg: 'ok'
  7.   })
  8. });
  1. 无论get还是post请求都会执行
  1. app.all('/api/xyz', function (req, res) {
  2.     console.log('请求来了');
  3. });

5. 监听端口号

  1. app.listen(8000, () => console.log('启动成功'));

二、CRM系统

需求：

  1. 该系统有一个列表页，列表中每一行是一条数据；该列表需要从服务端动态获取，然后渲染到页面中；
  2. 在列表上方有一个新增按钮，点击新增跳转到新增页面，在新增页面输入表单中的值，点击保存会自动把数据存到数据库中，如果保存成功则跳回列表页，失败alert提示；
  3. 在列表中每一行都有一个修改按钮，点击修改跳到修改页面，进入修改页面后要回填原有的数据；点击保存后，把修改后的数据保存到数据库中，如果保存成功则跳转到首页，如果失败则alert提示；
  4. 列表中每一行有一个删除按钮，点击删除时弹出confirme框，如果点击确定时则删除这条数据，点击取消则不动作；删除成功后刷新列表；

列表首页 index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="/static/css/index.css">
  7. </head>
  8. <body>
  9. <div class="box1">
  10.     <a href="/modify.html">增加新客户</a>
  11.     <h4 class="head">
  12.         <span class="w50">编号</span>
  13.         <span class="w150">姓名</span>
  14.         <span class="w50">年龄</span>
  15.         <span class="w200">电话</span>
  16.         <span class="w200">地址</span>
  17.         <span class="w150">操作</span>
  18.     </h4>
  19.     <ul class="list" id="list">
  20.         <li>
  21.             <span class="w50">1</span>
  22.             <span class="w150">2</span>
  23.             <span class="w50">3</span>
  24.             <span class="w200">电话</span>
  25.             <span class="w200">地址</span>
  26.             <span class="w150">
  27.                 <a href="/modify.html">修改</a>
  28.                 <a href="javascript: void 0;">删除</a>
  29.             </span>
  30.         </li>
  31.         <li>
  32.             <span class="w50">1</span>
  33.             <span class="w150">2</span>
  34.             <span class="w50">3</span>
  35.             <span class="w200">电话</span>
  36.             <span class="w200">地址</span>
  37.             <span class="w150">操作</span>
  38.         </li>
  39.         <li>
  40.             <span class="w50">1</span>
  41.             <span class="w150">2</span>
  42.             <span class="w50">3</span>
  43.             <span class="w200">电话</span>
  44.             <span class="w200">地址</span>
  45.             <span class="w150">操作</span>
  46.         </li>
  47.     </ul>
  48. </div>
  50. <script src="/static/js/axios.js"></script>
  51. <script src="/static/js/index.js"></script>
  52. </body>
  53. </html>

新增、修改页面 modify.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <link rel="stylesheet" href="static/css/modify.css">
  7. </head>
  8. <body>
  9. <div class="box2">
  10.     <div>
  11.         <span>姓名</span>
  12.         <input type="text" id="username">
  13.     </div>
  14.     <div>
  15.         <span>年龄</span>
  16.         <input type="text" id="age">
  17.     </div>
  18.     <div>
  19.         <span>电话</span>
  20.         <input type="text" id="phone">
  21.     </div>
  22.     <div>
  23.         <span>地址</span>
  24.         <input type="text" id="address">
  25.     </div>
  26.     <div class="submit" id="submit">提交</div>
  27. </div>
  29. <script src="/static/js/axios.js"></script>
  30. <script src="/static/js/modify.js"></script>
  31. </body>
  32. </html>

客户端index.js

  1. let list = document.getElementById('list');
  3. function bindHTML(data) {
  4.     let str = ``;
  5.     data.forEach(({id, name, age, phone, address}) => {
  6.         str += `<li>
  7.             <span class="w50">${id}</span>
  8.             <span class="w150">${name}</span>
  9.             <span class="w50">${age}</span>
  10.             <span class="w200">${phone}</span>
  11.             <span class="w200">${address}</span>
  12.             <span class="w150">
  13.                 <a href="/modify.html?id=${id}">修改</a>
  14.                 <a href="javascript: void 0;" type="del" data-id="${id}">删除</a>
  15.             </span>
  16.         </li>`
  17.     });
  18.     list.innerHTML = str;
  19. }
  21. axios.get('/api/getList').then(({data}) => {
  22.     if (data.code === 0) {
  23.         bindHTML(data.data)
  24.     }
  25. });
  27. list.onclick = function (e) {
  28.     if (e.target.nodeName.toUpperCase() === 'A' && e.target.getAttribute('type') === 'del') {
  29.         let id = e.target.getAttribute('data-id');
  30.         let isDel =confirm(`您要删除id为${id}的用户吗`)
  31.         if (isDel) {
  32.             axios.get(`/api/removeInfo?id=${id}`).then(({data}) => {
  33.                 if (data.code === 0) {
  34.                     window.location.href = '/'
  35.                 }
  36.             })
  37.         }
  38.     }
  39. };

修改/新增 modify.js

  1. let isModify = /\?id=(\d+)/.exec(location.search);
  2. let $ = selector => document.querySelector(selector);
  3. let submit = $('.submit');
  4. let name = $('#username');
  5. let age = $('#age');
  6. let phone = $('#phone');
  7. let address = $('#address');
  9. // 如果是修改，首先根据id获取数据
  10. if (isModify) {
  11.     let [,id] = isModify;
  12.     axios.get(`/api/getInfo?id=${id}`).then(({data}) => {
  13.         if (data.code === 0) {
  14.             name.value = data.data.name;
  15.             age.value = data.data.age;
  16.             phone.value = data.data.phone;
  17.             address.value = data.data.address;
  18.         } else {
  19.             alert(data.msg)
  20.         }
  21.     });
  22. }
  24. submit.onclick = function () {
  25.     let params = {
  26.         name: name.value,
  27.         age: age.value,
  28.         phone: phone.value,
  29.         address: address.value
  30.     };
  32.     let api = ''
  33.     if (isModify) {
  34.         let [,id] = isModify;
  35.         params.id = +id;
  36.         api = '/api/updateInfo'
  37.     } else {
  38.         api = '/api/addInfo'
  39.     }
  41.     axios.post(api, params).then(({data}) => {
  42.         if (data.code === 0) {
  43.             window.location.href = '/'
  44.         } else {
  45.             alert(data.msg)
  46.         }
  47.     });
  48. };

服务器端 server.js

  1. let http = require('http');
  2. let fs = require('fs');
  3. let url = require('url');
  4. let mime = require('mime');
  6. let server = http.createServer((req, res) => {
  7.     let urlObj = url.parse(req.url, true);
  9.     let {pathname, query} = urlObj;
  10.     // 静态资源服务
  11.     if (pathname === '/' || /(\.\w+)$/.test(pathname)) {
  12.         let filePath = '';
  13.         let contentType = '';
  15.         if (pathname === '/') {
  16.             filePath = __dirname + '/index.html';
  17.             contentType = 'text/html';
  18.         } else {
  19.             filePath = __dirname + pathname;
  20.             contentType = mime.getType(pathname)
  21.         }
  23.         fs.readFile(filePath, (err, data) => {
  24.             if (err) {
  25.                 res.statusCode = 404;
  26.                 res.end(`${pathname} is not found`)
  27.             } else {
  28.                 res.end(data);
  29.             }
  30.         })
  31.     } else {
  32.         // 处理ajax接口
  33.         res.setHeader('Content-Type', 'application/json;charset=UTF-8;');
  34.         let database = __dirname + '/database/custom.json'; // 数据文件路径
  35.         let response = {
  36.             code: 0,
  37.             data: null,
  38.             msg: 'ok'
  39.         };
  41.         // 获取列表
  42.         if (pathname === '/api/getList') {
  43.             let con = JSON.parse(fs.readFileSync(database, 'utf8'));
  44.             response.data = con;
  45.             res.end(JSON.stringify(response)); // 服务端不能直接把对象直接响应去，需要对象转成json格式的字符串；
  46.         }
  48.         // 2. 删除数据
  49.         if (pathname === '/api/removeInfo') {
  50.             let arr = JSON.parse(fs.readFileSync(database, 'utf8'));
  51.             let result = arr.find(item => +item.id === +query.id);
  52.             if (result) {
  53.                 arr = arr.filter(item => +item.id !== +query.id);
  54.                 fs.writeFileSync(database, JSON.stringify(arr));
  55.                 res.end(JSON.stringify(response));
  56.             } else {
  57.                 response.code = 1;
  58.                 response.msg = `id为${query.id}的客户不存在`;
  59.                 res.end(JSON.stringify(response))
  60.             }
  61.         }
  63.         // 3. 新增客户
  64.         if (pathname === '/api/addInfo') {
  65.             // 接收客户端post过来的数据
  66.             // 如何接收POST的数据呢？
  67.             // POST的请求数据量一般比较大，客户端会把数据切段，然后一段一段的传过来，每传过来一次就会触发一次data事件，当最后一段发送完会触发一次end事件
  68.             let str = '';
  69.             req.on('data', (chunk) => {
  70.                 // 监听data事件，接收数据
  71.                 str += chunk;
  72.             });
  73.             req.on('end', () => {
  74.                 let curCustom = JSON.parse(str);
  76.                 // 先读取出来，然后写入；
  77.                 let con = JSON.parse(fs.readFileSync(database, 'utf8'));
  78.                 // 为新增的数据生成一个id，如果之前的数据为空，那么这个id为1，如果不为空，那么这个id应该为数据的之前最后一条数据的id + 1
  79.                 con.length
  80.                     ? curCustom.id = con[con.length - 1].id + 1
  81.                     : curCustom.id = 1;
  82.                 con.push(curCustom);
  83.                 fs.writeFileSync(database, JSON.stringify(con), 'utf8');
  84.                 res.end(JSON.stringify(response));
  85.             })
  86.         }
  88.         // 4. 获取某个客户的信息
  89.         if (pathname === '/api/getInfo') {
  90.             // 根据客户端传递的id，从数据库中查出指定id的用户的信息
  91.             let con = JSON.parse(fs.readFileSync(database, 'utf8'));
  92.             let result = con.find(item => +item.id === +query.id);
  93.             if (result) {
  94.                 response.data = result;
  95.                 res.end(JSON.stringify(response))
  96.             } else {
  97.                 response.code = 1;
  98.                 response.msg = `id为${query.id}的用户不存在`;
  99.                 res.end(JSON.stringify(response))
  100.             }
  101.         }
  103.         // 5. 修改客户信息
  104.         if (pathname === '/api/updateInfo') {
  105.             let str = '';
  106.             req.on('data', (chunk) => str += chunk);
  107.             req.on('end', () => {
  108.                 let curData = JSON.parse(str);
  109.                 let con = JSON.parse(fs.readFileSync(database, 'utf8'));
  110.                 let curIndex = con.findIndex(item => +item.id === +curData.id);
  111.                 console.log(curIndex);
  112.                 if (curIndex > -1) {
  113.                     con[curIndex] = curData;
  114.                     fs.writeFileSync(database, JSON.stringify(con), 'utf8');
  115.                     res.end(JSON.stringify(response))
  116.                 } else {
  117.                     response.code = 1;
  118.                     response.msg = `id为${curData.id}用户不存在`;
  119.                     res.end(JSON.stringify(response));
  120.                 }
  121.             })
  122.         }
  123.     }
  124. });
  126. server.listen(8001, () => console.log('port 8001 is on'));

package.json

  1. {
  2.   "name": "crm",
  3.   "version": "1.0.0",
  4.   "description": "",
  5.   "main": "server.js",
  6.   "scripts": {
  7.     "test": "echo \"Error: no test specified\" && exit 1",
  8.     "start": "node server.js"
  9.   },
  10.   "author": "",
  11.   "license": "ISC",
  12.   "dependencies": {
  13.     "axios": "^0.19.0",
  14.     "mime": "^2.4.4"
  15.   }
  16. }

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】