React全家桶建站教程-Express #2

简介: React全家桶建站教程-Express #2

介绍


  • 丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件,让你创建健壮、友好的 API 变得既快速又简单。
  • Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用。

例子


https://github.com/xuya227939/blog/tree/master/examples/express/myapp


安装


$ sudo npm install express-generator -g  //因为是在mac下安装的,所以要注意权限问题,使用sudo
$ express myapp  //通过express生成器,生成项目
$ cd myapp
$ npm i   //安装相关依赖
$ npm install compression  //安装compression  压缩请求
$ npm start  //开启

访问 http://localhost:3000


使用


在app.js中使用如下代码

const compression = require('compression');
  app.use(compression());
app.use('/', function(req, res) {
  const count = 24;
  // const count = req.body.count;
  let listData = [];
  for (let i = 0; i < count; i++) {
    listData.push({
      src: '',
      avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
      title: `Title Jiang ${i}`,
      description:'Rise n’ shine and don’t forget to smile',
      star: i * 2,
      like: i * 3
    });
  }
  let data = {};
  data.listData = listData;
  data.count = count;
  res.send(JSON.stringify(data));
});

在app.js中替换app.use('/users', indexRouter);即可,然后 npm start 访问下 http://localhost:3000 就会看到输出了。


更新代码


通过npm start 开启之后,你会发现你修改代码之后,刷新没有效果?这是因为npm start不支持动态更改代码,这时候就需要supervisor来管理node进程

$ npm install supervisor
$ supervisor bin/www

然后试试?

线上的话,通过pm2管理。


在根目录下新建 start.json

输入以下代码$yum install pm2 $ vim start.json

{ 
   "apps" : [{
        "name"        : "app",
        "script"      : "bin/www",
        "log_date_format"  : "YYYY-MM-DD HH:mm:SS",
        "log_file"   : "logs/success.log",
        "error_file" : "logs/error.log",
        "out_file"   : "logs/out.log",
        "pid_file"   : "logs/app.pid",
        "watch"      :  true
    }]
}

$ :wq保存并退出


pm2常用命令


  • $ pm2 start start.json进行启动,帮你管理node进程。
  • $ pm2 stop all停止所有应用。
  • $ pm2 restart all重启所有应用。
  • $ pm2 log查看应用日志。

欢迎在此issue下进行交流、学习



结语


https://github.com/xuya227939/m4a1 可以参考这个项目。

通过express框架,建立后端服务速度还是蛮快的。简单方便,适合初学者入门。

目录
相关文章
|
29天前
|
前端开发 JavaScript CDN
React 教程
10月更文挑战第6天
44 3
|
2月前
|
Web App开发 前端开发 测试技术
react18基础教程系列--安装环境及packagejson文件分析
react18基础教程系列--安装环境及packagejson文件分析
|
2月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
50 3
|
4月前
|
前端开发 JavaScript 开发者
react18【系列实用教程】组件 (2024最新版 | 含父子组件传值、兄弟组件传值、越层组件传值、“插槽“)
react18【系列实用教程】组件 (2024最新版 | 含父子组件传值、兄弟组件传值、越层组件传值、“插槽“)
66 2
|
4月前
|
前端开发 JavaScript 数据格式
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
react18【系列实用教程】Hooks (useState,useReducer,useRef,useEffect,useContext,useMemo,useCallback,自定义 Hook )
89 1
|
4月前
|
JavaScript 前端开发
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
react18【系列实用教程】双向绑定表单 (2024最新版)含受控组件、非受控组件、单行多行输入框 input,下拉选择 select,单选 radio,多选 checkbox,标签 label
150 1
|
4月前
|
JavaScript 前端开发
react18【系列实用教程】JSX (2024最新版)
react18【系列实用教程】JSX (2024最新版)
64 1
|
4月前
|
前端开发
react18【系列实用教程】Hooks 闭包陷阱 (2024最新版)含useState 闭包陷阱,useEffect 闭包陷阱,useCallback 闭包陷阱
react18【系列实用教程】Hooks 闭包陷阱 (2024最新版)含useState 闭包陷阱,useEffect 闭包陷阱,useCallback 闭包陷阱
69 0
|
4月前
|
JavaScript
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
react18【系列实用教程】useRef —— 创建 ref 对象,获取 DOM (2024最新版)
55 0
|
4月前
|
缓存 前端开发
react18【系列实用教程】memo —— 缓存组件 (2024最新版)
react18【系列实用教程】memo —— 缓存组件 (2024最新版)
105 0