Skip to main content

6 posts tagged with "练习"

View All Tags

目标：Nest.js常用概念练习​

在这个练习中，我们将通过一步步的实践，熟悉Nest.js中的一些常用概念。

第一步，模块​

Nest.js使用模块化的结构组织应用。创建一个简单的模块，例如users模块：

nest generate module users

第二步，控制器​

在创建的模块中生成一个控制器，用于处理HTTP请求：

nest generate controller users

在控制器中添加一些简单的路由处理逻辑。

第三步，服务​

创建一个服务来处理业务逻辑。在模块中生成一个服务：

nest generate service users

在服务中添加一些简单的业务逻辑，例如从数据库中获取用户信息。

第四步，中间件​

使用中间件处理HTTP请求。在模块中创建一个中间件：

nest generate middleware logger

在中间件中添加一些简单的请求日志记录逻辑。

第五步，异常过滤器​

实现异常过滤器，用于捕获和处理应用中的异常。在模块中生成一个异常过滤器：

nest generate filter exception

在异常过滤器中添加一些简单的异常处理逻辑。

总结​

通过这个Nest.js常用概念的练习，我们熟悉了模块、控制器、服务、中间件以及异常过滤器等Nest.js的基本概念。这些概念帮助我们更好地组织和管理应用的结构，并使得开发更加清晰和可维护。

希望这个练习能够帮助你更好地理解和应用Nest.js中的一些关键概念。

练习nest2 min read

目标：React常用Hook及概念练习​

在这个练习中，我们将通过一步步的实践，熟悉React中常用的Hook和一些重要的概念。

第一步，useState Hook​

使用useState Hook来实现组件状态的管理。

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

export default Counter;

第二步，useEffect Hook​

使用useEffect Hook来处理副作用，例如数据获取、订阅等。

import React, { useState, useEffect } from 'react';

const DataFetching = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then((response) => response.json())
      .then((data) => setData(data));
  }, []);

  return (
    <div>
      <h2>Data Fetching</h2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataFetching;

第三步，useContext Hook​

使用useContext Hook来访问React的上下文。

import React, { useContext } from 'react';

const ThemeContext = React.createContext();

const ThemedComponent = () => {
  const theme = useContext(ThemeContext);

  return (
    <div style={{ color: theme === 'dark' ? 'white' : 'black' }}>
      Themed Component
    </div>
  );
};

export const App = () => {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedComponent />
    </ThemeContext.Provider>
  );
};

第四步，useReducer Hook​

使用useReducer Hook来管理复杂的状态逻辑。

import React, { useReducer } from 'react';

const initialState = { count: 0 };

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const CounterWithReducer = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>Increment</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button>
    </div>
  );
};

export default CounterWithReducer;

第五步，自定义Hook​

创建自定义Hook来提取和重用组件逻辑。

import { useState, useEffect } from 'react';

const useDataFetching = (url) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setLoading(true);
    fetch(url)
      .then((response) => response.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, [url]);

  return { data, loading };
};

export default useDataFetching;

总结​

通过这个React常用Hook及概念的练习，我们熟悉了useState、useEffect、useContext、useReducer等React Hook，以及自定义Hook的使用。这些Hook能够使我们更轻松地管理组件的状态和副作用，提高代码的可维护性和可重用性。

希望这个练习能够帮助你更深入地理解和应用React中的Hook。

练习react2 min read

目标：实现接口的增删改查​

在这个实践中，我们将通过一步步的实践，使用Nest.js和MySQL数据库，实现一个具有增删改查功能的接口。

第一步，配置环境​

首先，确保你已经安装了Node.js和npm。接着，通过以下命令安装Nest CLI：

npm install -g @nestjs/cli

然后，创建一个新的Nest.js项目：

nest new my-nest-project

这将为你创建一个基本的Nest.js项目，并安装必要的依赖。

第二步，启动 MySQL​

确保你已经安装了MySQL数据库。启动MySQL服务，并创建一个新的数据库用于我们的项目。

第三步，链接 MySQL​

使用Nest.js中的TypeORM库来链接MySQL数据库。在src目录下，创建一个typeorm.config.ts文件，配置数据库链接信息。

// src/typeorm.config.ts

import { TypeOrmModuleOptions } from '@nestjs/typeorm';

const config: TypeOrmModuleOptions = {
  type: 'mysql',
  host: 'localhost',
  port: 3306,
  username: 'your_username',
  password: 'your_password',
  database: 'your_database_name',
  entities: [__dirname + '/../**/*.entity{.ts,.js}'],
  synchronize: true, // Set to false in production
};

export default config;

然后，在主模块 app.module.ts 中引入 TypeOrmModule：

// src/app.module.ts

import { Module } from '@nestjs/common';
import { TypeOrmModule } from '@nestjs/typeorm';
import config from './typeorm.config';

@Module({
  imports: [TypeOrmModule.forRoot(config)],
})
export class AppModule {}

第四步，开发接口​

创建一个新的模块和控制器用于处理数据的增删改查操作。

nest generate module users
nest generate controller users

在users.controller.ts文件中，实现增删改查的业务逻辑。

// src/users/users.controller.ts

import { Controller, Get, Post, Body, Param, Delete, Put } from '@nestjs/common';
import { UsersService } from './users.service';

@Controller('users')
export class UsersController {
  constructor(private readonly usersService: UsersService) {}

  @Get()
  findAll() {
    return this.usersService.findAll();
  }

  @Get(':id')
  findOne(@Param('id') id: string) {
    return this.usersService.findOne(id);
  }

  @Post()
  create(@Body() user) {
    return this.usersService.create(user);
  }

  @Put(':id')
  update(@Param('id') id: string, @Body() user) {
    return this.usersService.update(id, user);
  }

  @Delete(':id')
  remove(@Param('id') id: string) {
    return this.usersService.remove(id);
  }
}

第五步，接口联调​

通过运行以下命令启动应用程序：

npm run start

通过相关接口访问，你将能够使用这个接口进行增删改查操作。

总结​

通过这个Nest.js + MySQL实践，我们实现了一个具有增删改查功能的接口。Nest.js的模块化和TypeORM的数据库支持使得全栈开发更加简单和高效。在实际项目中，你可以根据需要进一步扩展和优化这个基础框架，满足复杂项目的需求。

练习nestmysql2 min read

目标：写个列表+表单​

在这个练习中，我们将通过一步步的实践，使用React和Ant Design，实现一个包含增删改查功能的列表和表单。

在这个实践中，我们将创建一个React组件，包含一个用于展示数据的列表，以及一个用于操作数据的表单。通过这个图，我们可以清晰地了解我们要构建的最终目标。

第一步，安装UI库​

首先，我们需要安装Ant Design。执行以下命令进行安装：

npm install antd

然后，在项目中引入所需的样式和组件。

第二步，写一个列表​

创建一个新的React组件，用于展示列表。在这个组件中，我们将使用Ant Design的Table组件。

import React from 'react';
import { Table, Button } from 'antd';

const MyList = ({ data, onDelete, onEdit }) => {
  const columns = [
    // Define your columns based on your data structure
    { title: 'Name', dataIndex: 'name', key: 'name' },
    { title: 'Age', dataIndex: 'age', key: 'age' },
    // Add more columns as needed
    {
      title: 'Actions',
      key: 'actions',
      render: (text, record) => (
        <span>
          <Button onClick={() => onEdit(record)}>Edit</Button>
          <Button onClick={() => onDelete(record.key)} style={{ marginLeft: 8 }} danger>
            Delete
          </Button>
        </span>
      ),
    },
  ];

  return <Table dataSource={data} columns={columns} />;
};

export default MyList;

第三步，写一个表单​

创建一个新的React组件，用于展示表单。在这个组件中，我们将使用Ant Design的Form和Input组件。

import React from 'react';
import { Form, Input, Button } from 'antd';

const MyForm = ({ onSubmit, onCancel, form }) => {
  const onFinish = (values) => {
    onSubmit(values);
    form.resetFields();
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };

  return (
    <Form
      form={form}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      layout="vertical"
    >
      <Form.Item label="Name" name="name" rules={[{ required: true, message: 'Please input the name!' }]}>
        <Input />
      </Form.Item>
      <Form.Item label="Age" name="age" rules={[{ required: true, message: 'Please input the age!' }]}>
        <Input />
      </Form.Item>

      {/* Add more form fields as needed */}
      
      {/* Submit and Cancel buttons */}
      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
        <Button type="default" onClick={onCancel} style={{ marginLeft: 8 }}>
          Cancel
        </Button>
      </Form.Item>
    </Form>
  );
};

export default MyForm;

第四步，对接接口​

在实际项目中，你需要将列表和表单与后端接口进行对接。使用fetch、axios等工具来发起请求，并在成功后更新列表数据。

总结​

通过这个React + Ant Design练习，我们实现了一个具有增删改查功能的列表和表单。React的组件化和Ant Design的组件库让前端开发更加高效。在实际项目中，你可以根据需要进一步扩展和优化这个基础组件，满足复杂的前端需求。

练习react3 min read

目标：写个接口​

在这篇文章中，我们将通过一步步的实践，从配置环境到最终开发一个简单的接口，展示Nest.js在全栈开发中的强大功能。

第一步，配置环境​

首先，确保你已经安装了Node.js和npm。接着，通过以下命令安装Nest CLI：

npm install -g @nestjs/cli

创建一个新的Nest.js项目：

nest new my-nest-project

这将为你创建一个基本的Nest.js项目，并安装必要的依赖。

第二步，了解目录​

Nest.js采用了模块化的目录结构，主要包括src、dist和一些配置文件。了解这些目录结构将有助于你更好地组织和管理项目。

  • src: 包含项目的源代码。
  • dist: 包含项目的编译输出。
  • main.ts: 应用程序的入口文件。
  • app.module.ts: 应用程序的主模块。

第三步，创建模块​

Nest.js的模块是应用程序的基本构建块。使用以下命令创建一个新模块：

nest generate module users

这将在src目录下创建一个users模块，并自动在app.module.ts中导入它。

第四步，开发接口​

在users模块中，使用以下命令创建一个控制器：

nest generate controller users

这将为你创建一个基本的用户控制器。在该控制器中，你可以定义路由和处理请求的方法，实现接口的具体逻辑。

第五步，接口联调​

通过运行以下命令启动应用程序：

npm run start

访问http://localhost:3000/users，你将能够看到你刚刚创建的用户接口的默认响应。

总结​

通过这个简单的Nest.js实践，我们完成了从环境配置到接口开发的全过程。Nest.js的模块化和依赖注入机制使得全栈开发更加简单和高效。在实际项目中，你可以根据需要进一步扩展和优化这个基础框架，满足复杂项目的需求。

希望这篇文章能够帮助你入门Nest.js，并在实践中更加熟练地应用它的强大功能。

练习nest2 min read

目标：写个页面​

在这个指南中，我们将一步步地进行React全栈开发，目标是创建一个简单的页面。我们将探讨环境配置、页面编写、页面间的导航和参数传递、组件间的通信以及接口请求等关键步骤。

第一步，配置环境​

在进行React全栈开发之前，首先需要配置开发环境。我们将使用React及其生态中的一些关键库，例如react-dom和nest。以下是配置环境的基本步骤：

代码示例：package.json​

{
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "nest": "^x.x.x"
    // 其他依赖
  },
  "scripts": {
    "start": "your-start-script",
    // 其他脚本
  }
}

代码示例：babel.config.js​

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react'],
};

第二步，写个页面​

一旦环境配置完成，我们可以开始编写我们的第一个页面。这将涉及到创建React组件以及使用一些基本的UI元素。

代码示例：src/pages/Home.js​

import React from 'react';

const Home = () => {
  return (
    <div>
      <h1>Welcome to our React Full-Stack Blog</h1>
      <p>This is the home page of our application.</p>
    </div>
  );
};

export default Home;

第三步，页面跳转传参​

为了使我们的应用更加交互，我们将探讨页面之间的导航和参数传递。

1. 两种路由导航写法​

在React中，有多种方式可以实现路由导航。我们将研究两种常用的方法。

代码示例：使用React Router进行导航​
npm install react-router-dom
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';

const App = () => {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Router>
  );
};
代码示例：使用history进行导航​
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

const navigateTo = (url) => {
  history.push(url);
};

// 使用
navigateTo('/about');

2. 三种路由参数获取方法​

在React中，获取路由参数有多种方式，我们将讨论其中的三种方法。

代码示例：使用useParams Hook​
import { useParams } from 'react-router-dom';

const BlogPost = () => {
  const { postId } = useParams();

  return <p>Displaying blog post #{postId}</p>;
};
代码示例：使用withRouter HOC​
import { withRouter } from 'react-router-dom';

const BlogPost = (props) => {
  const { match } = props;
  const postId = match.params.postId;

  return <p>Displaying blog post #{postId}</p>;
};

export default withRouter(BlogPost);
代码示例：使用useLocation Hook​
import { useLocation } from 'react-router-dom';

const BlogPost = () => {
  const location = useLocation();
  const postId = location.pathname.split('/').pop();

  return <p>Displaying blog post #{postId}</p>;
};

第四步，组件间通信​

在React开发中，组件间通信是一个关键的主题。我们将讨论父子组件通信、兄弟组件通信以及爷孙组件通信（跨组件通信）。

1. 父子组件通信​

在React中，通过props可以实现父子组件之间的通信。

代码示例：父组件传递数据给子组件​
// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const data = 'Data from parent';

  return <ChildComponent data={data} />;
};

// ChildComponent.js
import React from 'react';

const ChildComponent = (props) => {
  const { data } = props;

  return <p>Data received from parent: {data}</p>;
};

export default ChildComponent;

2. 兄弟组件通信​

为了实现兄弟组件之间的通信，可以通过共享状态或者使用父组件作为中介。

代码示例：使用父组件作为中介​
// ParentComponent.js
import React, { useState } from 'react';
import BrotherComponentA from './BrotherComponentA';
import BrotherComponentB from './BrotherComponentB';

const ParentComponent = () => {
  const [sharedData, setSharedData] = useState('');

  return (
    <>
      <BrotherComponentA setSharedData={setSharedData} />
      <BrotherComponentB sharedData={sharedData} />
    </>
  );
};

// BrotherComponentA.js
import React from 'react';

const BrotherComponentA = (props) => {
  const { setSharedData } = props;

  const handleChange = (e) => {
    setSharedData(e.target.value);
  };

  return <input type="text" onChange={handleChange} />;
};

// BrotherComponentB.js
import React from 'react';

const BrotherComponentB = (props) => {
  const { sharedData } = props;

  return <p>Data shared between brothers: {sharedData}</p>;
};

export { BrotherComponentA, BrotherComponentB };

3. 爷孙组件通信（跨组件通信）​

对于爷孙组件之间的通信，可以使用Context API或者第三方状态管理工具，如Redux。

第五步，接口请求​

在现代的Web应用中，与后端进行数据交互是不可避免的。我们将讨论如何在React

中进行接口请求。

代码示例：使用fetch进行简单的接口请求​

import React, { useState, useEffect } from 'react';

const ApiExample = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => setData(data))
      .catch((error) => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h2>API Example</h2>
      <ul>
        {data.map((item) => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </div>
  );
};

export default ApiExample;

总结​

在这篇React全栈开发实践指南中，我们覆盖了从环境配置到页面编写、导航、组件通信以及接口请求的各个方面。通过这些实例，希望读者能够建立起对React全栈开发的整体认识，并能够在实际项目中灵活运用这些技术。

以上示例代码仅为演示目的，实际项目中可能需要根据具体情况进行调整和优化。希望这篇指南对你在React全栈开发中的学习和实践有所帮助。

练习react5 min read