配置UI组件库——ant-design-mobile & 后台接口环境配置-apache和Navicat & 配置全局样式

配置UI组件库——ant-design-mobile & 后台接口环境配置-apache和Navicat

配置UI组件库

• ant-design

• ant-design-mobile

• UI组件库使用步骤

  • 安装依赖包

  yarn add antd-mobile
  

  • 先导入组件库样式

  import 'antd-mobile/dist/antd-mobile.css';
  

  • 使用组件

  // 按需导入组件
  import { Button } from 'antd-mobile';
  

  function App() {
    return (
      <div>
        <Button type='primary'>点击</Button>
      </div>
    );
  }
  

后台接口环境配置

• 启动本地的服务器（数据库）环境（PHPStudy/Wamp）

  • mysql 数据库
  • apache Web服务器，提供网站服务
  • php 提供PHP的运行环境

• 启动集成环境-图标变绿

• 打开Navicat，链接数据库并创建一个新的数据库 hkzf

然后

• 初始化数据库（基于SQL脚本），建议导入数据库不使用Navicat，而使用命令行

• 使用mysql命令终端
  • use hkzf
  • source SQL脚本文件的路径（E:\软件\15-react\react-day05\03-resouce\hkzf_备用数据库.sql）

脚本路径查看

• 查看当前数据库信息
  • show databases;

命令行导入数据库

• 配置后台项目的数据库连接信息 hkzf v1\config\mysql.js

  • 数据库名称
  • 账号名称
  • 密码

  // 用户名
  user: 'root',
  // 密码
  pass: '',
  // 数据库名
  database: 'hkzf',
  

mysql.js文件示例如下：

module.exports = {
  // 数据库类型
  dialect: 'mysql',
  // 数据库主机地址
  host: 'localhost',
  // 用户名
  user: 'root',
  // 密码
  pass: 'root',
  // 端口号
  port: 3306,
  // 数据库名
  database: 'hkzf',
  // 是否允许 query中写多个查询语句
  multipleStatements: false,
  pool: {
    max: 5, // 连接池中最大连接数量
    min: 0, // 连接池中最小连接数量
    idle: 10000 // 如果一个线程 10 秒钟内没有被使用过的话，那么就释放线程
  }
}

• 启动后台项目服务器（在项目根路径下执行如下命令）

  • yarn start

端口验证服务器环境，测试接口是否正常

• http://localhost:8080

配置全局样式

• 先引入第三方样式antd
• 再引入index.css

html,
body {
    height: 100%;
    color: #333;
    background-color: #fff;
}

* {
    touch-action: pan-y;
    /* touch-action: none; */
    box-sizing: border-box;
}

#root,
.App {
    height: 100%;
}

ul {
    list-style: none
}

p,
h3,
ul {
    padding: 0;
    margin: 0;
}