web应用开发

我们假定你已经对 HTML 和 JavaScript 都比较熟悉。除此，在使用前，你还需要对以下知识有所了解：Ant Design 、React、ES6

在开始之前，需要通过H Visions注册用户权限！

安装Needle

# 使用已开通的用户名和密码
$ npm adduser --registry https://registry.hipermatic.com
# 全局安装Needle 或 更新Needle
$ npm install @hvisions/needle -g --registry https://registry.hipermatic.com

创建新应用

这将会自动创建appName目录。

这里的appName即为项目名称，用户可以自行命名

$ needle appName
$ cd appName
$ npm start

启动成功后会自动打开系统默认浏览器并访问http://localhost:3000。

目录结构

my-app
├── README.md
├── node_modules
├── .env              # API开发环境配置
├── .env.test         # API测试环境配置
├── .env.production   # API生产环境配置
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── api           # API接口目录
    ├── components    # 组件目录
    ├── icon          # 自定义Icon目录
    ├── locales       # 自定义国际化目录
    ├── pages         # 页面模块目录
    ├── router.js     # 配置路由
    ├── index.js      # 入口文件

配置API

我们先设置服务端地址和端口，可以分别配置.env、.env.test和.env.production文件来区分不同的环境。设置如下：

# api 配置
API_HTTPS=false
API_HOST=192.168.0.0    // 微服务网关地址
API_PORT=9000           // 微服务网关端口号

Hello World示例

在Needle构建的项目中我们准备了一个Example模块示例代码。

1. 页面模块

在page目录里创建页面，如Example/index.js。

import React, { Component } from 'react';
export default class Example extends Component {
  render() {
    return (<div>Hello World!</div>);
  }
}

或

import React from 'react';
const Example = (props) => (<div>Hello World!</div>);
export default Example;

2. 设置路由

// 引入页面
import Example from '~/pages/Example';
export default [{
  path: '/example',   // 路由地址
  component: Example  // 配置路由对应的页面
}];

3. API调用

在api目录创建对应的文件，如example.js。

import { Service } from '@hvisions/toolkit';
class Example extends Service {
  getUsers() {
    return this.post('/auth/user/getUserPageByNameOrAccount');
  }
}
export default new Example();

然后在浏览器里打开http://localhost:3000/example，你应该能看到前面定义的页面。

2022-08-29