react前端项目_如何使用React前端设置Ruby on Rails项目

react前端项目

The author selected the Electronic Frontier Foundation to receive a donation as part of the Write for DOnations program.

作者选择了电子前沿基金会来接受捐款，这是Write for DOnations计划的一部分。

介绍 (Introduction)

Ruby on Rails is a popular server-side web application framework, with over 42,000 stars on GitHub at the time of writing this tutorial. It powers a lot of the popular applications that exist on the web today, like GitHub, Basecamp, SoundCloud, Airbnb, and Twitch. With its emphasis on programmer experience and the passionate community that has built up around it, Ruby on Rails will give you the tools you need to build and maintain your modern web application.

Ruby on Rails是一种流行的服务器端Web应用程序框架，在撰写本教程时， GitHub上已有42,000多颗星 。 它支持当今网络上许多流行的应用程序，例如GitHub ， Basecamp ， SoundCloud ， Airbnb和Twitch 。 Ruby on Rails着重于程序员的经验并建立了热情的社区，它将为您提供构建和维护现代Web应用程序所需的工具。

React is a JavaScript library used to create front-end user interfaces. Backed by Facebook, it is one of the most popular front-end libraries used on the web today. React offers features like a virtual Document Object Model (DOM), component architecture, and state management, which make the process of front-end development more organized and efficient.

React是一个JavaScript库，用于创建前端用户界面。 在Facebook的支持下，它是当今网络上最受欢迎的前端库之一。 React提供了诸如虚拟文档对象模型(DOM) ， 组件架构和状态管理之类的功能，这些功能使前端开发过程更加有条理和高效。

With the frontend of the web moving toward frameworks that are separate from the server-side code, combining the elegance of Rails with the efficiency of React will let you build powerful and modern applications informed by current trends. By using React to render components from within a Rails view instead of the Rails template engine, your application will benefit from the latest advancements in JavaScript and front-end development while still leveraging the expressiveness of Ruby on Rails.

随着Web的前端转向与服务器端代码分离的框架，将Rails的优雅与React的效率相结合将使您能够根据当前趋势构建功能强大且现代的应用程序。 通过使用React从Rails视图而不是Rails模板引擎中呈现组件，您的应用程序将受益于JavaScript和前端开发的最新进展，同时仍可利用Ruby on Rails的表现力。

In this tutorial, you will create a Ruby on Rails application that stores your favorite recipes then displays them with a React frontend. When you are finished, you will be able to create, view, and delete recipes using a React interface styled with Bootstrap:

在本教程中，您将创建一个Ruby on Rails应用程序，该应用程序存储您喜欢的食谱，然后将它们显示在React前端。 完成后，您将能够使用以Bootstrap样式化的React界面创建，查看和删除配方：

If you would like to take a look at the code for this application, check out the companion repository for this tutorial on the DigitalOcean Community GitHub.

如果您想看一下该应用程序的代码，请在DigitalOcean社区GitHub上查看本教程的配套存储库 。

先决条件 (Prerequisites)

To follow this tutorial, you need to have the following:

要遵循本教程，您需要具备以下条件：

• Node.js and npm installed on your development machine. This tutorial uses Node.js version 10.16.0 and npm version 6.9.0. Node.js is a JavaScript run-time environment that allows you to run your code outside of the browser. It comes with a pre-installed Package Manager called npm, which lets you install and update packages. To install these on macOS or Ubuntu 18.04, follow the steps in How to Install Node.js and Create a Local Development Environment on macOS or the “Installing Using a PPA” section of How To Install Node.js on Ubuntu 18.04.

  开发机器上已安装Node.js和npm 。 本教程使用Node.js版本10.16.0和npm版本6.9.0。 Node.js是一个JavaScript运行时环境，可让您在浏览器之外运行代码。 它附带了一个预安装的软件包管理器npm ，它使您可以安装和更新软件包。 要将它们安装在macOS或Ubuntu 18.04上，请遵循如何在macOS上安装Node.js并创建本地开发环境中的步骤，或如何在Ubuntu 18.04上安装Node.js的“使用PPA安装”部分中的步骤 。

• The Yarn package manager installed on your development machine, which will allow you to download the React framework. This tutorial was tested on version 1.16.0; to install this dependency, follow the official Yarn installation guide.

  开发机器上安装的Yarn软件包管理器，它将允许您下载React框架。 本教程已在1.16.0版上进行了测试； 要安装此依赖项，请遵循官方的Yarn安装指南 。

• Installation of the Ruby on Rails framework. To get this, follow our guide on How to Install Ruby on Rails with rbenv on Ubuntu 18.04, or How To Install Ruby on Rails with rbenv on CentOS 7. If you would like to develop this application on macOS, please see this tutorial on How To Install Ruby on Rails with rbenv on macOS. This tutorial was tested on version 2.6.3 of Ruby and version 5.2.3 of Rails, so make sure to specify these versions during the installation process.

  Ruby on Rails框架的安装。 要获取此信息，请遵循我们的指南， 如何在Ubuntu 18.04上使用rbenv安装Ruby on Rails ，或如何在CentOS 7上使用rbenv安装Ruby on Rails 。 如果您想在macOS上开发此应用程序，请参阅有关如何在macOS上使用rbenv安装Ruby on Rails的教程。 本教程已在Ruby 2.6.3版和Rails 5.2.3版上进行了测试，因此请确保在安装过程中指定这些版本。

• Installation of PostgreSQL, as shown in Steps 1 and 2 of our tutorial How To Use PostgreSQL with Your Ruby on Rails Application on Ubuntu 18.04 or How To Use PostgreSQL with Your Ruby on Rails Application on macOS. To follow this tutorial, use PostgreSQL version 10. If you are looking to develop this application on a different distribution of Linux or on another OS, see the official PostgreSQL downloads page. For more information on how to use PostgreSQL, see our How To Install and Use PostgreSQL tutorials.

  PostgreSQL安装，如本教程的步骤1和2中所示， 如何在Ubuntu 18.04上的Ruby on Rails应用程序中 使用PostgreSQL或在macOS上的Ruby on Rails应用程序中使用PostgreSQL 。 要遵循本教程，请使用PostgreSQL版本10。如果要在其他Linux发行版或其他OS上开发此应用程序，请参见PostgreSQL官方下载页面 。 有关如何使用PostgreSQL更多信息，请参见我们的“ 如何安装和使用PostgreSQL”教程。

第1步-创建新的Rails应用程序 (Step 1 — Creating a New Rails Application)

In this step, you will build your recipe application on the Rails application framework. First, you’ll create a new Rails application, which will be set up to work with React out of the box with little configuration.

在此步骤中，您将在Rails应用程序框架上构建您的配方应用程序。 首先，您将创建一个新的Rails应用程序，该应用程序无需任何配置即可直接与React一起使用。

Rails provides a number of scripts called generators that help in creating everything that’s necessary to build a modern web application. To see a full list of these commands and what they do, run the following command in your Terminal window:

Rails提供了许多称为生成器的脚本，它们可以帮助创建构建现代Web应用程序所需的一切。 要查看这些命令及其作用的完整列表，请在“终端”窗口中运行以下命令：

• rails -h
  轨-h

This will yield a comprehensive list of options, which will allow you to set the parameters of your application. One of the commands listed is the new command, which creates a new Rails application.

这将产生一个完整的选项列表，使您可以设置应用程序的参数。 列出的命令之一是new命令，它创建一个新的Rails应用程序。

Now, you will create a new Rails application using the new generator. Run the following command in your Terminal window:

现在，您将使用new生成器创建一个新的Rails应用程序。 在“终端”窗口中运行以下命令：

• rails new rails_react_recipe -d=postgresql -T --webpack=react --skip-coffee

  rails new rails_react_recipe -d = postgresql -T --webpack = react --skip-coffee

The preceding command creates a new Rails application in a directory named rails_react_recipe, installs the required Ruby and JavaScript dependencies, and configures Webpack. Let’s walk through the flags that are associated with this new generator command:

前面的命令在名为rails_react_recipe的目录中创建一个新的Rails应用程序，安装所需的Ruby和JavaScript依赖项，并配置Webpack。 让我们看一下与此new成器命令关联的标志：

• The -d flag specifies the preferred database engine, which in this case is PostgreSQL.

  -d标志指定首选的数据库引擎，在这种情况下为PostgreSQL。

• The -T flag instructs Rails to skip the generation of test files, since you won’t be writing tests for the purposes of this tutorial. This command is also suggested if you want to use a Ruby testing tool different from the one Rails provides.

  -T标志指示Rails跳过测试文件的生成，因为在本教程中您不会编写测试。 如果要使用与Rails提供的工具不同的Ruby测试工具，也建议使用此命令。

• The --webpack instructs Rails to preconfigure for JavaScript with the webpack bundler, in this case specifically for a React application.

  --webpack指示Rails使用webpack捆绑程序为JavaScript进行预配置，在这种情况下，它专门针对React应用程序。

• The --skip-coffee asks Rails not to set up CoffeeScript, which is not needed for this tutorial.

  --skip-coffee要求Rails不要设置CoffeeScript ，本教程不需要。

Once the command is done running, move into the rails_react_recipe directory, which is the root directory of your app:

命令运行完成后，移至rails_react_recipe目录，该目录是应用程序的根目录：

• cd rails_react_recipe

  cd rails_react_recipe

Next, list out the contents of the directory:

接下来，列出目录的内容：

• ls
  ls

This root directory has a number of auto-generated files and folders that make up the structure of a Rails application, including a package.json file containing the dependencies for a React application.

这个根目录有许多自动生成的文件和文件夹，这些文件和文件夹构成了Rails应用程序的结构，包括一个package.json文件，其中包含React应用程序的依赖项。

Now that you have successfully created a new Rails application, you are ready to hook it up to a database in the next step.

既然您已经成功创建了一个新的Rails应用程序，则可以在下一步中将其连接到数据库了。

步骤2 —设置数据库 (Step 2 — Setting Up the Database)

Before you run your new Rails application, you have to first connect it to a database. In this step, you’ll connect the newly created Rails application to a PostgreSQL database, so recipe data can be stored and fetched when needed.

在运行新的Rails应用程序之前，必须首先将其连接到数据库。 在此步骤中，您会将新创建的Rails应用程序连接到PostgreSQL数据库，以便可以在需要时存储和获取配方数据。

The database.yml file found in config/database.yml contains database details like database name for different development environments. Rails specifies a database name for the different development environments by appending an underscore (_) followed by the environment name to your app’s name. You can always change any environment database name to whatever you prefer.

在config/database.yml中找到的database.yml文件包含数据库详细信息，例如不同开发环境的数据库名称。 Rails通过在应用程序名称后附加下划线( _ )和环境名称，从而为不同的开发环境指定数据库名称。 您始终可以将任何环境数据库名称更改为您喜欢的名称。

Note: At this point, you can alter config/database.yml to set up which PostgreSQL role you would like Rails to use to create your database. If you followed the Prerequisite How To Use PostgreSQL with Your Ruby on Rails Application and created a role that is secured by a password, you can follow the instructions in Step 4 for macOS or Ubuntu 18.04.

注意：此时，您可以更改config/database.yml来设置您希望Rails使用哪个PostgreSQL角色来创建数据库。 如果遵循先决条件如何在Ruby on Rails应用程序中使用PostgreSQL并创建了一个受密码保护的角色，则可以按照步骤4中针对macOS或Ubuntu 18.04的说明进行操作 。

As earlier stated, Rails offers a lot of commands to make developing web applications easy. This includes commands to work with databases, such as create, drop, and reset. To create a database for your application, run the following command in your Terminal window:

如前所述，Rails提供了许多命令来简化Web应用程序的开发。 这包括用于数据库的命令，例如create ， drop和reset 。 要为您的应用程序创建数据库，请在“终端”窗口中运行以下命令：

• rails db:create
  rails db：create

This command creates a development and test database, yielding the following output:

该命令创建一个development和test数据库，产生以下输出：

   
   
     
     
     
     

      
      
      
      
    
    Output
   
   
     
     
     
     
Created database 'rails_react_recipe_development'
Created database 'rails_react_recipe_test'

Now that the application is connected to a database, start the application by running the following command in you Terminal window:

现在，应用程序已连接到数据库，通过在“终端”窗口中运行以下命令来启动应用程序：

• rails s --binding=127.0.0.1
  rails-绑定= 127.0.0.1

The s or server command fires up Puma, which is a web server distributed with Rails by default, and --binding=127.0.0.1 binds the server to your localhost.

s或server命令启动Puma ，这是默认情况下与Rails一起分发的Web服务器，并且--binding=127.0.0.1将服务器绑定到localhost 。

Once you run this command, your command prompt will disappear, and you will see the following output:

一旦运行此命令，命令提示符将消失，您将看到以下输出：

   
   
     
     
     
     

      
      
      
      
    
    Output
   
   
     
     
     
     
=> Booting Puma
=> Rails 5.2.3 application starting in development 
=> Run `rails server -h` for more startup options
Puma starting in single mode...
* Version 3.12.1 (ruby 2.6.3-p62), codename: Llamas in Pajamas
* Min threads: 5, max threads: 5
* Environment: development
* Listening on tcp://127.0.0.1:3000
Use Ctrl-C to stop

To see your application, open a browser window and navigate to http://localhost:3000. You will see the Rails default welcome page:

要查看您的应用程序，请打开浏览器窗口，然后浏览至http://localhost:3000 。 您将看到Rails的默认欢迎页面：

This means that you have properly set up your Rails application.

这意味着您已经正确设置了Rails应用程序。

To stop the web server at anytime, press CTRL+C in the Terminal window where the server is running. Go ahead and do this now; you will get a goodbye message from Puma:

要随时停止Web服务器，请在运行服务器的“终端”窗口中按CTRL+C 快去做吧； 您将收到Puma的再见消息：

   
   
     
     
     
     

      
      
      
      
    
    Output
   
   
     
     
     
     
^C- Gracefully stopping, waiting for requests to finish
=== puma shutdown: 2019-07-31 14:21:24 -0400 ===
- Goodbye!
Exiting

Your prompt will then reappear.

您的提示将再次出现。

You have successfully set up a database for your food recipe application. In the next step, you will install all the extra JavaScript dependencies you need to put together your React frontend.

您已成功为食品食谱应用程序建立了数据库。 在下一步中，您将安装将React前端放在一起所需的所有其他JavaScript依赖项。

第3步-安装前端依赖项 (Step 3 — Installing Frontend Dependencies)

In this step, you will install the JavaScript dependencies needed on the frontend of your food recipe application. They include:

在此步骤中，您将在食品食谱应用程序的前端安装所需JavaScript依赖项。 它们包括：

• React Router, for handling navigation in a React application.

  React Router ，用于在React应用程序中处理导航。

• Bootstrap, for styling your front-end components.

  Bootstrap ，用于设置前端组件的样式。

• jQuery and Popper, for working with Bootstrap.

  jQuery和Popper ，用于使用Bootstrap。

Run the following command in your Terminal window to install these packages with the Yarn package manager:

在“终端”窗口中运行以下命令，以使用Yarn软件包管理器安装这些软件包：

• yarn add react-router-dom bootstrap jquery popper.js
  纱线添加react-router-dom引导jquery popper.js

This command uses Yarn to install the specified packages and adds them to the package.json file. To verify this, take a look at the package.json file located in the root directory of the project:

此命令使用Yarn安装指定的软件包，并将其添加到package.json文件。 为了验证这一点，请查看位于项目根目录中的package.json文件：

• nano package.json
  纳米package.json

You’ll see the installed packages listed under the dependencies key:

您会在dependencies项项下看到已安装的软件包：

~/rails_react_recipe/package.json

〜/ rails_react_recipe / package.json

{
  "name": "rails_react_recipe",
  "private": true,
  "dependencies": {
    "@babel/preset-react": "^7.0.0",
    "@rails/webpacker": "^4.0.7",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "popper.js": "^1.15.0",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1"
  },
  "devDependencies": {
    "webpack-dev-server": "^3.7.2"
  }
}

You have installed a few front-end dependencies for your application. Next, you’ll set up a homepage for your food recipe application.

您已经为应用程序安装了一些前端依赖项。 接下来，您将为食品食谱应用程序设置一个主页。

第4步-设置主页 (Step 4 — Setting Up the Homepage)

With all the required dependencies installed, in this step you will create a homepage for the application. The homepage will serve as the landing page when users first visit the application.

安装了所有必需的依赖项之后，在此步骤中，您将为应用程序创建一个主页。 用户首次访问该应用程序时，该主页将用作登录页面。

Rails follows the Model-View-Controller architectural pattern for applications. In the MVC pattern, a controller’s purpose is to receive specific requests and pass them along to the appropriate model or view. Right now the application displays the Rails welcome page when the root URL is loaded in the browser. To change this, you will create a controller and view for the homepage and match it to a route.

Rails遵循针对应用程序的Model-View-Controller架构模式。 在MVC模式中，控制器的目的是接收特定的请求，并将其传递给适当的模型或视图。 现在，当根URL加载到浏览器中时，应用程序将显示Rails欢迎页面。 要更改此设置，您将创建一个控制器并查看主页，并将其与路线匹配。

Rails provides a controller generator for creating a controller. The controller generator receives a controller name, along with a matching action. For more on this, check out the official Rails documentation.

Rails提供了用于创建控制器的controller生成器。 controller生成器将接收控制器名称以及匹配操作。 有关更多信息，请查看官方的Rails文档 。

This tutorial will call the controller Homepage. Run the following command in your Terminal window to create a Homepage controller with an index action.

本教程将称为控制器Homepage 。 在“终端”窗口中运行以下命令，以创建带有index操作的主页控制器。

• rails g controller Homepage index

  rails g controller 主页索引

Note: On Linux, if you run into the error FATAL: Listen error: unable to monitor directories for changes., this is due to a system limit on the number of files your machine can monitor for changes. Run the following command to fix it:

注意：在Linux上，如果遇到错误FATAL: Listen error: unable to monitor directories for changes. ，这是由于系统限制了您的机器可以监视更改的文件数量。 运行以下命令对其进行修复：

• echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
  回声fs.inotify.max_user_watches = 524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

This will permanently increase the amount of directories that you can monitor with Listen to 524288. You can change this again by running the same command and replacing 524288 with your desired number.

这将永久增加您可以使用“ Listen 524288监视的目录数量。 您可以通过运行相同的命令并用所需的号码替换524288再次更改此设置。

Running this command generates the following files:

运行此命令将生成以下文件：

• A homepage_controller.rb file for receiving all homepage-related requests. This file contains the index action you specified in the command.

  一个homepage_controller.rb文件，用于接收所有与主页相关的请求。 该文件包含您在命令中指定的index操作。

• A homepage.js file for adding any JavaScript behavior related to the Homepage controller.

  一个homepage.js文件，用于添加与Homepage控制器相关的任何JavaScript行为。

• A homepage.scss file for adding styles related to the Homepage controller.

  一个homepage.scss文件，用于添加与Homepage控制器相关的样式。

• A homepage_helper.rb file for adding helper methods related to the Homepage controller.

  一个homepage_helper.rb文件，用于添加与Homepage控制器相关的帮助器方法。

• An index.html.erb file which is the view page for rendering anything related to the homepage.

  index.html.erb文件，它是用于呈现与主页相关的任何内容的视图页面。

Apart from these new pages created by running the Rails command, Rails also updates your routes file which is located at config/routes.rb. It adds a get route for your homepage which you will modify as your root route.

除了通过运行Rails命令创建的这些新页面之外，Rails还更新位于config/routes.rb路由文件。 它为您的主页添加了一条get路径，您将其修改为根路径。

A root route in Rails specifies what will show up when users visit the root URL of your application. In this case, you want your users to see your homepage. Open the routes file located at config/routes.rb in your favorite editor:

Rails中的根路由指定当用户访问应用程序的根URL时将显示的内容。 在这种情况下，您希望用户看到您的主页。 在您喜欢的编辑器中打开位于config/routes.rb的路由文件：

• nano config/routes.rb
  纳米配置/ routes.rb

Inside this file, replace get 'homepage/index' with root 'homepage#index' so that the file looks like the following:

在此文件内，将get 'homepage/index'替换为root 'homepage#index'以使该文件如下所示：

~/rails_react_recipe/config/routes.rb

〜/ rails_react_recipe / config / routes.rb

Rails.application.routes.draw do
  root 'homepage#index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

This modification instructs Rails to map requests to the root of the application to the index action of the Homepage controller, which in turn renders whatever is in the index.html.erb file located at app/views/homepage/index.html.erb on to the browser.

此修改指示Rails将请求从应用程序的根目录映射到Homepage控制器的index操作，该控制器依次呈现位于app/views/homepage/index.html.erb上的index.html.erb文件中的内容。浏览器。

To verify that this is working, start your application:

要验证它是否正常运行，请启动您的应用程序：

• rails s --binding=127.0.0.1
  导轨s --binding = 127.0.0.1

Opening the application in the browser, you will see a new landing page for your application:

在浏览器中打开应用程序，您将看到一个新的应用程序登录页面：

Once you have verified that your application is working, press CTRL+C to stop the server.

确认应用程序正常运行后，按CTRL+C停止服务器。

Next, open up the ~/rails_react_recipe/app/views/homepage/index.html.erb file, remove the code inside the file, then save the file as empty. By doing this, you will ensure that the contents of index.html.erb do not interfere with the React rendering of your frontend.

接下来，打开~/rails_react_recipe/app/views/homepage/index.html.erb文件，删除文件中的代码，然后将文件另存为空。 这样，您将确保index.html.erb的内容不会干扰前端的React渲染。

Now that you have set up your homepage for your application, you can move to the next section, where you will configure the frontend of your application to use React.

现在，您已经为应用程序设置了主页，可以转到下一部分，在该部分中，您将配置应用程序的前端以使用React。

第5步—将React配置为Rails前端 (Step 5 — Configuring React as Your Rails Frontend)

In this step, you will configure Rails to use React on the frontend of the application, instead of its template engine. This will allow you to take advantage of React rendering to create a more visually appealing homepage.

在此步骤中，您将配置Rails在应用程序的前端而不是其模板引擎上使用React。 这将使您能够利用React渲染来创建更具视觉吸引力的主页。

Rails, with the help of the Webpacker gem, bundles all your JavaScript code into packs. These can be found in the packs directory at app/javascript/packs. You can link these packs in Rails views using the javascript_pack_tag helper, and you can link stylesheets imported into the packs using the stylesheet_pack_tag helper. To create an entry point to your React environment, you will add one of these packs to your application layout.

Rails在Webpacker gem的帮助下，将所有JavaScript代码打包到pack中 。 这些可以在app/javascript/packs的packs目录中找到。 您可以使用javascript_pack_tag帮助器在Rails视图中链接这些包，也可以使用stylesheet_pack_tag帮助器来链接导入到包中的stylesheet_pack_tag 。 要创建您的React环境的入口点，您将其中一个包添加到您的应用程序布局中。

First, rename the ~/rails_react_recipe/app/javascript/packs/hello_react.jsx file to ~/rails_react_recipe/app/javascript/packs/Index.jsx.

首先，重命名~/rails_react_recipe/app/javascript/packs/hello_react.jsx文件到~/rails_react_recipe/app/javascript/packs/Index.jsx 。

• mv ~/rails_react_recipe/app/javascript/packs/hello_react.jsx ~/rails_react_recipe/app/javascript/packs/Index.jsx
  mv〜/ rails_react_recipe / app / javascript / packs / hello_react.jsx〜/ rails_react_recipe / app / javascript / packs / Index.jsx

After renaming the file, open application.html.erb, the application layout file:

重命名文件后，打开application.html.erb ，应用程序布局文件：

• nano ~/rails_react_recipe/app/views/layouts/application.html.erb
  纳米〜/ rails_react_recipe / app / views / layouts / application.html.erb

Add the following highlighted lines of code at the end of the head tag in the application layout file:

在应用程序布局文件的head标记的末尾添加以下突出显示的代码行：

~/rails_react_recipe/app/views/layouts/application.html.erb

〜/ rails_react_recipe / app / views / layouts / application.html.erb

  
    
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
    
    <%= javascript_pack_tag 'Index' %>
  

  
    <%= yield %>
  

Adding the JavaScript pack to your application’s header makes all your JavaScript code available and executes the code in your Index.jsx file on the page whenever you run the app. Along with the JavaScript pack, you also added a meta viewport tag to control the dimensions and scaling of pages on your application.

将JavaScript包添加到应用程序的标头中后，您可以运行所有JavaScript代码，并在页面上的Index.jsx文件中执行该代码。 除JavaScript包外，还添加了meta viewport标记以控制应用程序中页面的尺寸和缩放。

Save and exit the file.

保存并退出文件。

Now that your entry file is loaded onto the page, create a React component for your homepage. Start by creating a components directory in the app/javascript directory:

现在您的输入文件已加载到页面上，为您的主页创建一个React组件。 首先在app/javascript目录中创建一个components目录：

• mkdir ~/rails_react_recipe/app/javascript/components
  mkdir〜/ rails_react_recipe / app / javascript / components

The components directory will house the component for the homepage, along with other React components in the application. The homepage will contain some text and a call to action button to view all recipes.

components目录将包含主页的组件以及应用程序中的其他React组件。 主页将包含一些文本和一个号召性用语按钮，以查看所有食谱。

In your editor, create a Home.jsx file in the components directory:

在编辑器中，在components目录中创建一个Home.jsx文件：

• nano ~/rails_react_recipe/app/javascript/components/Home.jsx
  纳米〜/ rails_react_recipe / app / javascript / components / Home.jsx

Add the following code to the file:

将以下代码添加到文件中：

~/rails_react_recipe/app/javascript/components/Home.jsx

〜/ rails_react_recipe / app / javascript / components / Home.jsx

import React from "react";
import { Link } from "react-router-dom";

export default () => (
  

    

      

        
Food Recipes
        

          A curated list of recipes for the best homemade meal and delicacies.
        
        

        
          View Recipes
        
      
    
  
);

In this code, you imported React and also the Link component from React Router. The Link component creates a hyperlink to navigate from one page to another. You then created and exported a functional component containing some Markup language for your homepage, styled with Bootstrap classes.

在此代码中，您从React Router中导入了React以及Link组件。 Link组件创建一个超链接以从一个页面导航到另一页面。 然后，您创建并导出了一个功能组件，该组件包含用于首页的某些标记语言的功能部件，并使用Bootstrap类设置了样式。

With your Home component in place, you will now set up routing using React Router. Create a routes directory in the app/javascript directory:

放置好Home组件后，您现在将使用React Router设置路由。 在app/javascript目录中创建一个routes目录：

• mkdir ~/rails_react_recipe/app/javascript/routes
  mkdir〜/ rails_react_recipe / app / javascript / routes

The routes directory will contain a few routes with their corresponding components. Whenever any specified route is loaded, it will render its corresponding component to the browser.

routes目录将包含一些路由及其相应的组件。 每当加载任何指定的路由时，它将把其相应的组件呈现给浏览器。

In the routes directory, create an Index.jsx file:

在routes目录中，创建一个Index.jsx文件：

• nano ~/rails_react_recipe/app/javascript/routes/Index.jsx
  纳米〜/ rails_react_recipe / app / javascript / routes / Index.jsx

Add the following code to it:

向其添加以下代码：

~/rails_react_recipe/app/javascript/routes/Index.jsx

〜/ rails_react_recipe / app / javascript / routes / Index.jsx

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "../components/Home";

export default (
  
    
      
    
  
);

In this Index.jsx route file, you imported a couple of modules: the React module that allows us to use React, and the BrowserRouter, Route, and Switch modules from React Router, which together help us navigate from one route to another. Lastly, you imported your Home component, which will be rendered whenever a request matches the root (/) route. Whenever you want to add more pages to your application, all you need to do is declare a route in this file and match it to the component you want to render for that page.

在这个Index.jsx路由文件中，您导入了两个模块：允许我们使用React的React模块，以及来自React Router的BrowserRouter ， Route和Switch模块，它们一起帮助我们从一条路线导航到另一条路线。 最后，您导入了Home组件，该组件将在请求与根( / )路由匹配时呈现。 每当您想向应用程序中添加更多页面时，您所需要做的就是在此文件中声明一条路由，并将其与您要为该页面呈现的组件进行匹配。

Save and exit the file.

保存并退出文件。

You have now successfully set up routing using React Router. For React to be aware of the available routes and use them, the routes have to be available at the entry point to the application. To achieve this, you will render your routes in a component that React will render in your entry file.

现在，您已经使用React Router成功设置了路由。 为了使React知道可用的路由并使用它们，这些路由必须在应用程序的入口点可用。 为了实现这一点，您将在React中将在您的入口文件中呈现的组件中呈现路线。

Create an App.jsx file in the app/javascript/components directory:

在app/javascript/components目录中创建一个App.jsx文件：

• nano ~/rails_react_recipe/app/javascript/components/App.jsx
  纳米〜/ rails_react_recipe / app / javascript / components / App.jsx

Add the following code into the App.jsx file:

将以下代码添加到App.jsx文件中：

~/rails_react_recipe/app/javascript/components/App.jsx

〜/ rails_react_recipe / app / javascript / components / App.jsx

import React from "react";
import Routes from "../routes/Index";

export default props => <>{Routes};

In the App.jsx file, you imported React and the route files you just created. You then exported a component that renders the routes within fragments. This component will be rendered at the entry point of the aplication, thereby making the routes available whenever the application is loaded.

在App.jsx文件中，您导入了React和刚创建的路由文件。 然后，您导出了一个在片段中呈现路线的组件。 该组件将在应用程序的入口处呈现，从而使路由在应用程序加载时可用。

Now that you have your App.jsx set up, it’s time to render it in your entry file. Open the entry Index.jsx file:

现在您已经设置了App.jsx ，是时候在输入文件中呈现它了。 打开条目Index.jsx文件：

• nano ~/rails_react_recipe/app/javascript/packs/Index.jsx
  纳米〜/ rails_react_recipe / app / javascript / packs / Index.jsx

Replace the code there with the following code:

用以下代码替换那里的代码：

~/rails_react_recipe/app/javascript/packs/Index.jsx

〜/ rails_react_recipe / app / javascript / packs / Index.jsx

import React from "react";
import { render } from "react-dom";
import 'bootstrap/dist/css/bootstrap.min.css';
import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import App from "../components/App";

document.addEventListener("DOMContentLoaded", () => {
  render(
    ,
    document.body.appendChild(document.createElement("div"))
  );
});

In this code snippet, you imported React, the render method from ReactDOM, Bootstrap, jQuery, Popper.js, and your App component. Using ReactDOM’s render method, you rendered your App component in a div element, which was appended to the body of the page. Whenever the application is loaded, React will render the content of the App component inside the div element on the page.

在此代码段中，您导入了React，ReactDOM，Bootstrap，jQuery，Popper.js和您的App组件的render方法。 使用ReactDOM的render方法，您将您的App组件呈现在div元素中，该元素已附加到页面主体中。 每当加载应用程序时，React都会在页面的div元素内呈现App组件的内容。

Save and exit the file.

保存并退出文件。

Finally, add some CSS styles to your homepage.

最后，在您的首页中添加一些CSS样式。

Open up your application.css in your ~/rails_react_recipe/app/assets/stylesheets directory:

在~/rails_react_recipe/app/assets/stylesheets目录中打开application.css ：

• nano ~/rails_react_recipe/app/assets/stylesheets/application.css
  纳米〜/ rails_react_recipe / app / assets / stylesheets / application.css

Next, replace the contents of the application.css file with the follow code:

接下来，用以下代码替换application.css文件的内容：

~/rails_react_recipe/app/assets/stylesheets/application.css

〜/ rails_react_recipe / app / assets / stylesheets / application.css

.bg_primary-color {
  background-color: #FFFFFF;
}
.primary-color {
  background-color: #FFFFFF;
}
.bg_secondary-color {
  background-color: #293241;
}
.secondary-color {
  color: #293241;
}
.custom-button.btn {
  background-color: #293241;
  color: #FFF;
  border: none;
}
.custom-button.btn:hover {
  color: #FFF !important;
  border: none;
}
.hero {
  width: 100vw;
  height: 50vh;
}
.hero img {
  object-fit: cover;
  object-position: top;
  height: 100%;
  width: 100%;
}
.overlay {
  height: 100%;
  width: 100%;
  opacity: 0.4;
}

This creates the framework for a hero image, or a large web banner on the front page of your website, that you will add later. Additionally, this styles the button that the user will use to enter the application.

这将为英雄图像或网站首页上的大型网络横幅创建框架，稍后将添加该框架。 此外，这将设置用户用来输入应用程序的按钮的样式。

With your CSS styles in place, save and exit the file. Next, restart the web server for your application, then reload the application in your browser. You will see a brand new homepage:

放置好CSS样式后，保存并退出文件。 接下来，为您的应用程序重新启动Web服务器，然后在浏览器中重新加载该应用程序。 您会看到一个全新的主页：

In this step, you configured your application so that it uses React as its frontend. In the next section, you will create models and controllers that will allow you to create, read, update, and delete recipes.

在此步骤中，您配置了应用程序，以使其使用React作为其前端。 在下一节中，您将创建模型和控制器，这些模型和控制器将允许您创建，读取，更新和删除配方。

第6步-创建配方控制器和模型 (Step 6 — Creating the Recipe Controller and Model)

Now that you have set up a React frontend for your application, in this step you’ll create a Recipe model and controller. The recipe model will represent the database table that will hold information about the user’s recipes while the controller will receive and handle requests to create, read, update, or delete recipes. When a user requests a recipe, the recipe controller receives this request and passes it to the recipe model, which retrieves the requested data from the database. The model then returns the recipe data as a response to the controller. Finally, this information is displayed in the browser.

现在您已经为应用程序设置了一个React前端，在这一步中，您将创建一个Recipe模型和控制器。 配方模型将代表数据库表，该表将保存有关用户配方的信息，而控制器将接收并处理创建，读取，更新或删除配方的请求。 当用户请求配方时，配方控制器将接收此请求，并将其传递给配方模型，该模型将从数据库中检索所请求的数据。 然后，模型将配方数据作为对控制器的响应返回。 最后，此信息显示在浏览器中。

Start by creating a Recipe model by using the generate model subcommand provided by Rails and by specifying the name of the model along with its columns and data types. Run the following command in your Terminal window to create a Recipe model:

首先使用Rails提供的generate model子命令创建一个Recipe模型，并指定模型名称及其列和数据类型。 在“终端”窗口中运行以下命令以创建Recipe模型：

• rails generate model Recipe name:string ingredients:text instruction:text image:string
  rails生成模型配方名称：字符串成分：文本指令：文本图像：字符串

The preceding command instructs Rails to create a Recipe model together with a name column of type string, an ingredients and instruction column of type text, and an image column of type string. This tutorial has named the model Recipe, because by convention models in Rails use a singular name while their corresponding database tables use a plural name.

前面的命令指示Rails创建一个Recipe模型，以及一个string类型的name列， text类型的ingredients和instruction列以及string类型的image列。 本教程将模型命名为Recipe ，因为按照惯例，Rails中的模型使用单数名称，而其对应的数据库表使用复数名称。

Running the generate model command creates two files:

运行generate model命令将创建两个文件：

• A recipe.rb file that holds all the model related logic.

  一个保存所有与模型相关的逻辑的recipe.rb文件。

• A 20190407161357_create_recipes.rb file (the number at the beginning of the file may differ depending on the date when you run the command). This is a migration file that contains the instruction for creating the database structure.

  20190407161357 _create_recipes.rb文件(文件开头的数字可能会有所不同，具体取决于运行命令的日期)。 这是一个迁移文件，其中包含用于创建数据库结构的指令。

Next, edit the recipe model file to ensure that only valid data is saved to the database. You can achieve this by adding some database validation to your model. Open your recipe model located at app/models/recipe.rb:

接下来，编辑配方模型文件以确保仅将有效数据保存到数据库。 您可以通过在模型中添加一些数据库验证来实现。 打开位于app/models/recipe.rb配方模型：

• nano ~/rails_react_recipe/app/models/recipe.rb
  纳米〜/ rails_react_recipe / app / models / recipe.rb

Add the following highlighted lines of code to the file:

将以下突出显示的代码行添加到文件中：

class Recipe < ApplicationRecord
  validates :name, presence: true
  validates :ingredients, presence: true
  validates :instruction, presence: true
end

In this code, you added model validation which checks for the presence of a name, ingredients, and instruction field. Without the presence of these three fields, a recipe is invalid and won’t be saved to the database.

在此代码中，您添加了模型验证，该模型验证检查name ， ingredients和instruction字段的存在。 如果没有这三个字段，则配方无效，并且不会保存到数据库中。

Save and quit the file.

保存并退出文件。

For Rails to create the recipes table in your database, you have to run a migration, which in Rails is a way to make changes to your database programmatically. To make sure that the migration works with the database you set up, it is necessary to make changes to the 20190407161357_create_recipes.rb file.

为了使Rails在数据库中创建recipes表，您必须运行一次迁移 ，这是在Rails中以编程方式更改数据库的一种方法。 为确保迁移可与您设置的数据库一起使用，必须对20190407161357 _create_recipes.rb文件进行更改。

Open this file in your editor:

在编辑器中打开此文件：

• nano ~/rails_react_recipe/db/migrate/20190407161357_create_recipes.rb

  纳米〜/ rails_react_recipe / db / migrate / 20190407161357 _create_recipes.rb

Add the following highlighted lines, so that the file looks like this:

添加以下突出显示的行，以便文件如下所示：

db/migrate/20190407161357_create_recipes.rb

db / migrate / 20190407161357_create_recipes.rb

class CreateRecipes < ActiveRecord::Migration[5.2]
  def change
    create_table :recipes do |t|
      t.string :name, null: false
      t.text :ingredients, null: false
      t.text :instruction, null: false
      t.string :image, default: 'https://raw.githubusercontent.com/do-community/react_rails_recipe/master/app/assets/images/Sammy_Meal.jpg'
      t.timestamps
    end
  end
end

This migration file contains a Ruby class with a change method, and a command to create a table called recipes along with the columns and their data types. You also updated 20190407161357_create_recipes.rb with a NOT NULL constraint on the name, ingredients, and instruction columns by adding null: false, ensuring that these columns have a value before changing the database. Finally, you added a default image URL for your image column; this could be another URL if you wanted to use a different image.

该迁移文件包含一个带change方法的Ruby类，以及一个用于创建名为recipes的表以及各列及其数据类型的命令。 您还通过添加null: false在name ， ingredients和instruction列上使用NOT NULL约束更新了20190407161357 _create_recipes.rb ，确保在更改数据库之前这些列具有值。 最后，为图像列添加了默认图像URL。 如果要使用其他图像，则可以是另一个URL。

With these changes, save and exit the file. You’re now ready to run your migration and actually create your table. In your Terminal window, run the following command:

进行这些更改后，保存并退出文件。 现在，您可以运行迁移并实际创建表了。 在“终端”窗口中，运行以下命令：

• rails db:migrate
  rails db：migrate

Here you used the database migrate command, which executes the instructions in your migration file. Once the command runs successfully, you will receive an output similar to the following:

在这里，您使用了数据库迁移命令，该命令执行迁移文件中的指令。 命令成功运行后，您将收到类似于以下内容的输出：

   
   
     
     
     
     

      
      
      
      
    
    Output
   
   
     
     
     
     
== 20190407161357 CreateRecipes: migrating ====================================
-- create_table(:recipes)
   -> 0.0140s
== 20190407161357 CreateRecipes: migrated (0.0141s) ===========================

With your recipe model in place, create your recipes controller and add the logic for creating, reading, and deleting recipes. In your Terminal window, run the following command:

放置好食谱模型后，创建食谱控制器，并添加用于创建，读取和删除食谱的逻辑。 在“终端”窗口中，运行以下命令：

• rails generate controller api/v1/Recipes index create show destroy -j=false -y=false --skip-template-engine --no-helper
  rails生成控制器api / v1 / Recipes索引create show destroy -j = false -y = false --skip-template-engine --no-helper

In this command, you created a Recipes controller in an api/v1 directory with an index, create, show, and destroy action. The index action will handle fetching all your recipes, the create action will be responsible for creating new recipes, the show action will fetch a single recipe, and the destroy action will hold the logic for deleting a recipe.

在此命令中，您在api/v1目录中使用index ， create ， show和destroy操作创建了Recipes控制器。 index操作将处理获取所有配方的操作， create操作将负责创建新配方的操作， show操作将获取单个配方的操作， destroy操作将保留删除配方的逻辑。

You also passed some flags to make the controller more lightweight, including:

您还传递了一些标志来使控制器更轻便，包括：

• -j=false which instructs Rails to skip generating associated JavaScript files.

  -j=false ，指示Rails跳过生成关联JavaScript文件。

• -y=false which instructs Rails to skip generating associated stylesheet files.

  -y=false ，指示Rails跳过生成关联的样式表文件。

• --skip-template-engine, which instructs Rails to skip generating Rails view files, since React is handling your front-end needs.

  --skip-template-engine ，它指示Rails跳过生成Rails视图文件，因为React正在处理您的前端需求。

• --no-helper, which instructs Rails to skip generating a helper file for your controller.

  --no-helper ，它指示Rails跳过为您的控制器生成帮助文件的过程。

Running the command also updated your routes file with a route for each action in the Recipes controller. To use these routes, make changes to your config/routes.rb file.

运行该命令还会使用“ Recipes控制器中每个动作的路线更新您的路线文件。 要使用这些路由，请对config/routes.rb文件进行更改。

Open up the routes file in your text editor:

在文本编辑器中打开路线文件：

• nano ~/rails_react_recipe/config/routes.rb
  纳米〜/ rails_react_recipe / config / routes.rb

Once it is open, update it to look like the following code, altering or adding the highlighted lines:

打开后，将其更新为以下代码，以更改或添加突出显示的行：

~/rails_react_recipe/config/routes.rb

〜/ rails_react_recipe / config / routes.rb

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      get 'recipes/index'
      post 'recipes/create'
      get '/show/:id', to: 'recipes#show'
      delete '/destroy/:id', to: 'recipes#destroy'
    end
  end
  root 'homepage#index'
  get '/*path' => 'homepage#index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

In this route file, you modified the HTTP verb of the create and destroy routes so that it can post and delete data. You also modified the routes for the show and destroy action by adding an :id parameter into the route. :id will hold the identification number of the recipe you want to read or delete.

在此路由文件中，您修改了create和destroy路由的HTTP动词，以便它可以post和delete数据。 您还通过在路由中添加:id参数来修改了show和destroy操作的路由。 :id将保存您要读取或删除的配方的标识号。

You also added a catch all route with get '/*path' that will direct any other request that doesn’t match the existing routes to the index action of the homepage controller. This way, the routing on the frontend will handle requests that are not related to creating, reading, or deleting recipes.

您还使用get '/*path'添加了一条全部捕获路由，它将所有与现有路由不匹配的其他请求定向到homepage控制器的index操作。 这样，前端上的路由将处理与创建，读取或删除配方无关的请求。

Save and exit the file.

保存并退出文件。

To see a list of routes available in your application, run the following command in your Terminal window:

要查看您的应用程序中可用的路由列表，请在“终端”窗口中运行以下命令：

• rails routes
  铁轨路线

Running this command displays a list of URI patterns, verbs, and matching controllers or actions for your project.

运行此命令将显示URI模式，动词以及项目的匹配控制器或动作的列表。

Next, add the logic for getting all recipes at once. Rails uses the ActiveRecord library to handle database-related tasks like this. ActiveRecord connects classes to relational database tables and provides a rich API for working with them.

接下来，添加一次获取所有配方的逻辑。 Rails使用ActiveRecord库来处理类似数据库的任务。 ActiveRecord将类连接到关系数据库表，并提供了用于处理它们的丰富API。

To get all recipes, you’ll use ActiveRecord to query the recipes table and fetch all the recipes that exist in the database.

要获取所有配方，您将使用ActiveRecord查询配方表并获取数据库中存在的所有配方。

Open the recipes_controller.rb file with the following command:

使用以下命令打开recipes_controller.rb文件：

• nano ~/rails_react_recipe/app/controllers/api/v1/recipes_controller.rb
  纳米〜/ rails_react_recipe / app / controllers / api / v1 / recipes_controller.rb

Add the following highlighted lines of code to the recipes controller:

将以下突出显示的代码行添加到配方控制器：

~/rails_react_recipe/app/controllers/api/v1/recipes_controller.rb

〜/ rails_react_recipe / app / controllers / api / v1 / recipes_controller.rb

class Api::V1::RecipesController < ApplicationController
  def index
    recipe = Recipe.all.order(created_at: :desc)
    render json: recipe
  end

  def create
  end

  def show
  end

  def destroy
  end
end

In your index action, using the all method provided by ActiveRecord, you get all the recipes in your database. Using the order method, you order them in descending order by their created date. This way, you have the newest recipes first. Lastly, you send your list of recipes as a JSON response with render.

在index操作中，使用ActiveRecord提供的all方法，可以在数据库中获取所有配方。 使用order方法，您可以按创建日期的降序对它们进行排序。 这样，您就可以拥有最新的食谱。 最后，您使用render发送食谱列表作为JSON响应。

Next, add the logic for creating new recipes. As with fetching all recipes, you’ll rely on ActiveRecord to validate and save the provided recipe details. Update your recipe controller with the following highlighted lines of code:

接下来，添加用于创建新配方的逻辑。 与获取所有食谱一样，您将依靠ActiveRecord来验证并保存所提供的食谱详细信息。 使用以下突出显示的代码行更新您的配方控制器：

~/rails_react_recipe/app/controllers/api/v1/recipes_controller.rb

〜/ rails_react_recipe / app / controllers / api / v1 / recipes_controller.rb

class Api::V1::RecipesController < ApplicationController
  def index
    recipe = Recipe.all.order(created_at: :desc)
    render json: recipe
  end

  def create
    recipe = Recipe.create!(recipe_params)
    if recipe
      render json: recipe
    else
      render json: recipe.errors
    end
  end

  def show
  end

  def destroy
  end

  private

  def recipe_params
    params.permit(:name, :image, :ingredients, :instruction)
  end
end

In the create action, you use ActiveRecord’s create method to create a new recipe. The create method has the ability to assign all controller parameters provided into the model at once. This makes it easy to create records, but also opens the possibility of malicious use. This can be prevented by using a feature provided by Rails known as strong parameters. This way, parameters can’t be assigned unless they’ve been whitelisted. In your code, you passed a recipe_params parameter to the create method. The recipe_params is a private method where you whitelisted your controller parameters to prevent wrong or malicious content from getting into your database. In this case, you are permitting a name, image, ingredients, and instruction parameter for valid use of the create method.

在create动作中，使用ActiveRecord的create方法来创建新配方。 create方法可以一次分配提供给模型的所有控制器参数。 这使创建记录变得容易，但也带来了恶意使用的可能性。 这可以通过使用Rails提供的称为“ 强参数”的功能来防止。 这样，除非将其列入白名单，否则无法分配参数。 在您的代码中，您将一个recipe_params参数传递给了create方法。 recipe_params是一个private方法，您在其中将控制器参数列入了白名单，以防止错误或恶意的内容进入数据库。 在这种情况下，您允许name ， image ， ingredients和instruction参数有效使用create方法。

Your recipe controller can now read and create recipes. All that’s left is the logic for reading and deleting a single recipe. Update your recipes controller with the following code:

您的配方控制器现在可以读取和创建配方。 剩下的就是读取和删除单个配方的逻辑。 使用以下代码更新您的食谱控制器：

~/rails_react_recipe/app/controllers/api/v1/recipes_controller.rb

〜/ rails_react_recipe / app / controllers / api / v1 / recipes_controller.rb

class Api::V1::RecipesController < ApplicationController
  def index
    recipe = Recipe.all.order(created_at: :desc)
    render json: recipe
  end

  def create
    recipe = Recipe.create!(recipe_params)
    if recipe
      render json: recipe
    else
      render json: recipe.errors
    end
  end

  def show
    if recipe
      render json: recipe
    else
      render json: recipe.errors
    end
  end

  def destroy
    recipe&.destroy
    render json: { message: 'Recipe deleted!' }
  end

  private

  def recipe_params
    params.permit(:name, :image, :ingredients, :instruction)
  end

  def recipe
    @recipe ||= Recipe.find(params[:id])
  end
end

In the new lines of code, you created a private recipe method. The recipe method uses ActiveRecord’s find method to find a recipe whose idmatches the id provided in the params and assigns it to an instance variable @recipe. In the show action, you checked if a recipe is returned by the recipe method and sent it as a JSON response, or sent an error if it was not.

在新的代码行中，您创建了一个私有recipe方法。 该recipe方法使用的ActiveRecord的find方法找到一个方案，其id的匹配id中所提供的params ，并为其分配实例变量@recipe 。 在show操作中，您检查了食谱方法是否返回了recipe ，并将其作为JSON响应发送，如果不是，则发送错误。

In the destroy action, you did something similar using Ruby’s safe navigation operator &., which avoids nil errors when calling a method. This let’s you delete a recipe only if it exists, then send a message as a response.

在destroy操作中，您使用Ruby的安全导航运算符&.进行了类似的操作&. ，这样可以避免在调用方法时出现nil错误。 这样，您就可以仅在配方存在的情况下将其删除，然后发送消息作为响应。

Now that you have finished making these changes to recipes_controller.rb, save the file and exit your text editor.

现在，您已经完成了对recipes_controller.rb这些更改，保存文件并退出文本编辑器。

In this step, you created a model and controller for your recipes. You’ve written all the logic needed to work with recipes on the backend. In the next section, you’ll create components to view your recipes.

在此步骤中，您为食谱创建了一个模型和控制器。 您已经在后端上编写了使用配方所需的所有逻辑。 在下一部分中，您将创建组件来查看您的食谱。

第7步-查看食谱 (Step 7 — Viewing Recipes)

In this section, you will create components for viewing recipes. First you’ll create a page where you can view all existing recipes, and then another to view individual recipes.

在本部分中，您将创建用于查看配方的组件。 首先，您将创建一个页面，您可以在其中查看所有现有食谱，然后再一个页面来查看各个食谱。

You’ll start off by creating a page to view all recipes. However, before you can do this, you need recipes to work with, since your database is currently empty. Rails affords us the opportunity to create seed data for your application.

您将首先创建一个页面来查看所有食谱。 但是，在执行此操作之前，您需要使用配方，因为您的数据库当前为空。 Rails为我们提供了为您的应用程序创建种子数据的机会。

Open up the seed file seeds.rb to edit:

打开种子文件seeds.rb进行编辑：

• nano ~/rails_react_recipe/db/seeds.rb
  纳米〜/ rails_react_recipe / db / seeds.rb

Replace the contents of this seed file with the following code:

用以下代码替换该种子文件的内容：

~/rails_react_recipe/db/seeds.rb

〜/ rails_react_recipe / db / seeds.rb

9.times do |i|
  Recipe.create(
    name: "Recipe #{i + 1}",
    ingredients: '227g tub clotted cream, 25g butter, 1 tsp cornflour,100g parmesan, grated nutmeg, 250g fresh fettuccine or tagliatelle, snipped chives or chopped parsley to serve (optional)',
    instruction: 'In a medium saucepan, stir the clotted cream, butter, and cornflour over a low-ish heat and bring to a low simmer. Turn off the heat and keep warm.'
  )
end

In this code, you are using a loop to instruct Rails to create nine recipes with a name, ingredients, and instruction. Save and exit the file.

在此代码中，您使用循环来指示Rails创建具有name ， ingredients和instruction九个配方。 保存并退出文件。

To seed the database with this data, run the following command in your Terminal window:

要使用此数据播种数据库，请在“终端”窗口中运行以下命令：

• rails db:seed
  rails db：seed

Running this command adds nine recipes to your database. Now you can fetch them and render them on the frontend.

运行此命令将九个配方添加到您的数据库。 现在，您可以获取它们并将其呈现在前端。

The component to view all recipes will make a HTTP request to the index action in the RecipesController to get a list of all recipes. These recipes will then be displayed in cards on the page.

查看所有配方的组件将向RecipesController的index操作发出HTTP请求，以获取所有配方的列表。 然后，这些食谱将显示在页面上的卡片中。

Create a Recipes.jsx file in the app/javascript/components directory:

在app/javascript/components目录中创建一个Recipes.jsx文件：

• nano ~/rails_react_recipe/app/javascript/components/Recipes.jsx
  纳米〜/ rails_react_recipe / app / javascript / components / Recipes.jsx

Once the file is open, import the React and Link modules into it by adding the following lines:

打开文件后，通过添加以下行将React和Link模块导入其中：

~/rails_react_recipe/app/javascript/components/Recipes.jsx

〜/ rails_react_recipe / app / javascript / components / Recipes.jsx

import React from "react";
import { Link } from "react-router-dom";

Next, create a Recipes class that extends the React.Component class. Add the following highlighted code to create a React component that extends React.Component:

接下来，创建一个Recipes扩展类React.Component类。 添加以下突出显示的代码来创建扩展React.Component的React组件：

~/rails_react_recipe/app/javascript/components/Recipes.jsx

〜/ rails_react_recipe / app / javascript / components / Recipes.jsx

import React from "react";
import { Link } from "react-router-dom";

class Recipes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      recipes: []
    };
  }

}
export default Recipes;

Inside the constructor, we are initializing a state object that holds the state of your recipes, which on initialization is an empty array ([]).

在构造函数内部，我们正在初始化一个状态对象，该对象保存食谱的状态，该对象在初始化时是一个空数组( [] )。

Next, add a componentDidMount method in the Recipe class. The componentDidMount method is a React lifecycle method that is called immediately after a component is mounted. In this lifecycle method, you will make a call to fetch all your recipes. To do this, add the following lines:

接下来，在Recipe类中添加componentDidMount方法。 componentDidMount方法是一个React生命周期方法，在安装组件后立即调用。 在此生命周期方法中，您将调用以获取所有食谱。 为此，请添加以下行：

~/rails_react_recipe/app/javascript/components/Recipes.jsx

〜/ rails_react_recipe / app / javascript / components / Recipes.jsx

import React from "react";
import { Link } from "react-router-dom";

class Recipes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      recipes: []
    };
  }

  componentDidMount() {
      const url = "/api/v1/recipes/index";
      fetch(url)
        .then(response => {
          if (response.ok) {
            return response.json();
          }
          throw new Error("Network response was not ok.");
        })
        .then(response => this.setState({ recipes: response }))
        .catch(() => this.props.history.push("/"));
  }

}
export default Recipes;

In your componentDidMount method, you made an HTTP call to fetch all recipes using the Fetch API. If the response is successful, the application saves the array of recipes to the recipe state. If there’s an error, it will redirect the user to the homepage.

在componentDidMount方法中，您进行了HTTP调用，以使用Fetch API提取所有配方。 如果响应成功，则应用程序将配方数组保存为配方状态。 If there's an error, it will redirect the user to the homepage.

Finally, add a render method in the Recipe class. The render method holds the React elements that will be evaluated and displayed on the browser page when a component is rendered. In this case, the render method will render cards of recipes from the component state. Add the following highlighted lines to Recipes.jsx:

Finally, add a render method in the Recipe class. The render method holds the React elements that will be evaluated and displayed on the browser page when a component is rendered. In this case, the render method will render cards of recipes from the component state. Add the following highlighted lines to Recipes.jsx :

~/rails_react_recipe/app/javascript/components/Recipes.jsx

~/rails_react_recipe/app/javascript/components/Recipes.jsx

import React from "react";
import { Link } from "react-router-dom";

class Recipes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      recipes: []
    };
  }

  componentDidMount() {
    const url = "/api/v1/recipes/index";
    fetch(url)
      .then(response => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then(response => this.setState({ recipes: response }))
      .catch(() => this.props.history.push("/"));
  }
  render() {
    const { recipes } = this.state;
    const allRecipes = recipes.map((recipe, index) => (
      

        

          
          

            
{recipe.name}
            
              View Recipe
            
          
        
      
    ));
    const noRecipe = (
      

        

          No recipes yet. Why not create one
        
      
    );

    return (
      <>
        

          

            
Recipes for every occasion
            

              We’ve pulled together our most popular recipes, our latest
              additions, and our editor’s picks, so there’s sure to be something
              tempting for you to try.
            
          
        
        

          

            

              
                Create New Recipe
              
            
            

              {recipes.length > 0 ? allRecipes : noRecipe}
            
            
              Home
            
          
        
      
    );
  }
}
export default Recipes;

Save and exit Recipes.jsx.

Save and exit Recipes.jsx .

Now that you have created a component to display all the recipes, the next step is to create a route for it. Open the front-end route file located at app/javascript/routes/Index.jsx:

Now that you have created a component to display all the recipes, the next step is to create a route for it. Open the front-end route file located at app/javascript/routes/Index.jsx :

• nano app/javascript/routes/Index.jsx
  nano app/javascript/routes/Index.jsx

Add the following highlighted lines to the file:

将以下突出显示的行添加到文件中：

~/rails_react_recipe/app/javascript/routes/Index.jsx

~/rails_react_recipe/app/javascript/routes/Index.jsx

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "../components/Home";
import Recipes from "../components/Recipes";

export default (
  
    
      
      
    
  
);

Save and exit the file.

保存并退出文件。

At this point, it’s a good idea to verify that your code is working correctly. As you did before, use the following command to start your server:

At this point, it's a good idea to verify that your code is working correctly. As you did before, use the following command to start your server:

• rails s --binding=127.0.0.1
  rails s --binding=127.0.0.1

Go ahead and open the app in your browser. By clicking the View Recipe button on the homepage, you will see a display with your seed recipes:

Go ahead and open the app in your browser. By clicking the View Recipe button on the homepage, you will see a display with your seed recipes:

Use CTRL+C in your Terminal window to stop the server and get your prompt back.

Use CTRL+C in your Terminal window to stop the server and get your prompt back.

Now that you can view all the recipes that exist in your application, it’s time to create a second component to view individual recipes. Create a Recipe.jsx file in the app/javascript/components directory:

Now that you can view all the recipes that exist in your application, it's time to create a second component to view individual recipes. Create a Recipe.jsx file in the app/javascript/components directory:

• nano app/javascript/components/Recipe.jsx
  nano app/javascript/components/Recipe.jsx

As with the Recipes component, import the React and Link modules by adding the following lines:

As with the Recipes component, import the React and Link modules by adding the following lines:

~/rails_react_recipe/app/javascript/components/Recipe.jsx

~/rails_react_recipe/app/javascript/components/Recipe.jsx

import React from "react";
import { Link } from "react-router-dom";

Next create a Recipe class that extends React.Component class by adding the highlighted lines of code:

Next create a Recipe class that extends React.Component class by adding the highlighted lines of code:

~/rails_react_recipe/app/javascript/components/Recipe.jsx

~/rails_react_recipe/app/javascript/components/Recipe.jsx

import React from "react";
import { Link } from "react-router-dom";

class Recipe extends React.Component {
  constructor(props) {
    super(props);
    this.state = { recipe: { ingredients: "" } };

    this.addHtmlEntities = this.addHtmlEntities.bind(this);
  }
}

export default Recipe;

Like with your Recipes component, in the constructor, you initialized a state object that holds the state of a recipe. You also bound an addHtmlEntities method to this so it can be accessible within the component. The addHtmlEntities method will be used to replace character entities with HTML entities in the component.

Like with your Recipes component, in the constructor, you initialized a state object that holds the state of a recipe. You also bound an addHtmlEntities method to this so it can be accessible within the component. The addHtmlEntities method will be used to replace character entities with HTML entities in the component.

In order to find a particular recipe, your application needs the id of the recipe. This means your Recipe component expects an id param. You can access this via the props passed into the component.

In order to find a particular recipe, your application needs the id of the recipe. This means your Recipe component expects an id param . You can access this via the props passed into the component.

Next, add a componentDidMount method where you will access the id param from the match key of the props object. Once you get the id, you will then make an HTTP request to fetch the recipe. Add the following highlighted lines to your file:

Next, add a componentDidMount method where you will access the id param from the match key of the props object. Once you get the id , you will then make an HTTP request to fetch the recipe. 将以下突出显示的行添加到您的文件中：

~/rails_react_recipe/app/javascript/components/Recipe.jsx

~/rails_react_recipe/app/javascript/components/Recipe.jsx

import React from "react";
import { Link } from "react-router-dom";

class Recipe extends React.Component {
  constructor(props) {
    super(props);
    this.state = { recipe: { ingredients: "" } };

    this.addHtmlEntities = this.addHtmlEntities.bind(this);
  }

  componentDidMount() {
    const {
      match: {
        params: { id }
      }
    } = this.props;

    const url = `/api/v1/show/${id}`;

    fetch(url)
      .then(response => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then(response => this.setState({ recipe: response }))
      .catch(() => this.props.history.push("/recipes"));
  }

}

export default Recipe;

In the componentDidMount method, using object destructuring, you get the id param from the props object, then using the Fetch API, you make a HTTP request to fetch the recipe that owns the id and save it to the component state using the setState method. If the recipe does not exist, the app redirects the user to the recipes page.

In the componentDidMount method, using object destructuring , you get the id param from the props object, then using the Fetch API, you make a HTTP request to fetch the recipe that owns the id and save it to the component state using the setState method. If the recipe does not exist, the app redirects the user to the recipes page.

Now add the addHtmlEntities method, which takes a string and replaces all escaped opening and closing brackets with their HTML entities. This will help us convert whatever escaped character was saved in your recipe instruction:

Now add the addHtmlEntities method, which takes a string and replaces all escaped opening and closing brackets with their HTML entities. This will help us convert whatever escaped character was saved in your recipe instruction:

~/rails_react_recipe/app/javascript/components/Recipe.jsx

~/rails_react_recipe/app/javascript/components/Recipe.jsx

import React from "react";
import { Link } from "react-router-dom";

class Recipe extends React.Component {
  constructor(props) {
    super(props);
    this.state = { recipe: { ingredients: "" } };

    this.addHtmlEntities = this.addHtmlEntities.bind(this);
  }

  componentDidMount() {
    const {
      match: {
        params: { id }
      }
    } = this.props;

    const url = `/api/v1/show/${id}`;

    fetch(url)
      .then(response => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then(response => this.setState({ recipe: response }))
      .catch(() => this.props.history.push("/recipes"));
  }

  addHtmlEntities(str) {
    return String(str)
      .replace(/</g, "<")
      .replace(/>/g, ">");
  }
}

export default Recipe;

Finally, add a render method that gets the recipe from the state and renders it on the page. To do this, add the following highlighted lines:

Finally, add a render method that gets the recipe from the state and renders it on the page. To do this, add the following highlighted lines:

~/rails_react_recipe/app/javascript/components/Recipe.jsx

~/rails_react_recipe/app/javascript/components/Recipe.jsx

import React from "react";
import { Link } from "react-router-dom";

class Recipe extends React.Component {
  constructor(props) {
    super(props);
    this.state = { recipe: { ingredients: "" } };

    this.addHtmlEntities = this.addHtmlEntities.bind(this);
  }

  componentDidMount() {
    const {
      match: {
        params: { id }
      }
    } = this.props;

    const url = `/api/v1/show/${id}`;

    fetch(url)
      .then(response => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then(response => this.setState({ recipe: response }))
      .catch(() => this.props.history.push("/recipes"));
  }

  addHtmlEntities(str) {
    return String(str)
      .replace(/</g, "<")
      .replace(/>/g, ">");
  }

  render() {
    const { recipe } = this.state;
    let ingredientList = "No ingredients available";

    if (recipe.ingredients.length > 0) {
      ingredientList = recipe.ingredients
        .split(",")
        .map((ingredient, index) => (
          

            {ingredient}
          
        ));
    }
    const recipeInstruction = this.addHtmlEntities(recipe.instruction);

    return (
      

        

          
          

          

            {recipe.name}
          
        
        

          

            

              

                
Ingredients
                {ingredientList}
              
            
            

              
Preparation Instructions
              

            
            

              
                Delete Recipe
              
            
          
          
            Back to recipes
          
        
      
    );
  }

}

export default Recipe;

In this render method, you split your comma separated ingredients into an array and mapped over it, creating a list of ingredients. If there are no ingredients, the app displays a message that says No ingredients available. It also displays the recipe image as a hero image, adds a delete recipe button next to the recipe instruction, and adds a button that links back to the recipes page.

In this render method, you split your comma separated ingredients into an array and mapped over it, creating a list of ingredients. If there are no ingredients, the app displays a message that says No ingredients available . It also displays the recipe image as a hero image, adds a delete recipe button next to the recipe instruction, and adds a button that links back to the recipes page.

Save and exit the file.

保存并退出文件。

To view the Recipe component on a page, add it to your routes file. Open your route file to edit:

To view the Recipe component on a page, add it to your routes file. Open your route file to edit:

• nano app/javascript/routes/Index.jsx
  nano app/javascript/routes/Index.jsx

Now, add the following highlighted lines to the file:

Now, add the following highlighted lines to the file:

~/rails_react_recipe/app/javascript/routes/Index.jsx

~/rails_react_recipe/app/javascript/routes/Index.jsx

import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "../components/Home";
import Recipes from "../components/Recipes";
import Recipe from "../components/Recipe";

export default (
  
    
      
      
      
    
  
);

In this route file, you imported your Recipe component and added a route for it. Its route has an :id param that will be replaced by the id of the recipe you want to view.

In this route file, you imported your Recipe component and added a route for it. Its route has an :id param that will be replaced by the id of the recipe you want to view.

Use the rails s command to start your server again, then visit http://localhost:3000 in your browser. Click the View Recipes button to navigate to the recipes page. On the recipes page, view any recipe by clicking its View Recipe button. You will be greeted with a page populated with the data from your database:

Use the rails s command to start your server again, then visit http://localhost:3000 in your browser. Click the View Recipes button to navigate to the recipes page. On the recipes page, view any recipe by clicking its View Recipe button. You will be greeted with a page populated with the data from your database:

In this section, you added nine recipes to your database and created components to view these recipes, both individually and as a collection. In the next section, you will add a component to create recipes.

In this section, you added nine recipes to your database and created components to view these recipes, both individually and as a collection. In the next section, you will add a component to create recipes.

Step 8 — Creating Recipes (Step 8 — Creating Recipes)

The next step to having a usable food recipe application is the ability to create new recipes. In this step, you will create a component for creating recipes. This component will contain a form for collecting the required recipe details from the user and will make a request to the create action in the Recipe controller to save the recipe data.

The next step to having a usable food recipe application is the ability to create new recipes. In this step, you will create a component for creating recipes. This component will contain a form for collecting the required recipe details from the user and will make a request to the create action in the Recipe controller to save the recipe data.

Create a NewRecipe.jsx file in the app/javascript/components directory:

Create a NewRecipe.jsx file in the app/javascript/components directory:

• nano app/javascript/components/NewRecipe.jsx
  nano app/javascript/components/NewRecipe.jsx

In the new file, import the React and Link modules you have used so far in other components:

In the new file, import the React and Link modules you have used so far in other components:

~/rails_react_recipe/app/javascript/components/NewRecipe.jsx

~/rails_react_recipe/app/javascript/components/NewRecipe.jsx

import React from "react";
import { Link } from "react-router-dom";

Next create a NewRecipe class that extends React.Component class. Add the following highlighted code to create a React component that extends react.Component:

Next create a NewRecipe class that extends React.Component class. Add the following highlighted code to create a React component that extends react.Component :

~/rails_react_recipe/app/javascript/components/NewRecipe.jsx

~/rails_react_recipe/app/javascript/components/NewRecipe.jsx

import React from "react";
import { Link } from "react-router-dom";

class NewRecipe extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      ingredients: "",
      instruction: ""
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.stripHtmlEntities = this.stripHtmlEntities.bind(this);
  }
}

export default NewRecipe;

In the NewRecipe component’s constructor, you initialized your state object with empty name, ingredients, and instruction fields. These are the fields you need to create a valid recipe. You also have three methods; onChange, onSubmit, and stripHtmlEntities, which you bound to this. These methods will handle updating the state, form submissions, and converting special characters (like <) into their escaped/encoded values (like <), respectively.

In the NewRecipe component's constructor, you initialized your state object with empty name , ingredients , and instruction fields. These are the fields you need to create a valid recipe. You also have three methods; onChange , onSubmit , and stripHtmlEntities , which you bound to this . These methods will handle updating the state, form submissions, and converting special characters (like < ) into their escaped/encoded values (like < ), respectively.

Next, create the stripHtmlEntities method itself by adding the highlighted lines to the NewRecipe component:

Next, create the stripHtmlEntities method itself by adding the highlighted lines to the NewRecipe component:

~/rails_react_recipe/app/javascript/components/NewRecipe.jsx

~/rails_react_recipe/app/javascript/components/NewRecipe.jsx

class NewRecipe extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      ingredients: "",
      instruction: ""
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.stripHtmlEntities = this.stripHtmlEntities.bind(this);
  }

  stripHtmlEntities(str) {
    return String(str)
      .replace(//g, ">");
  }

}

export default NewRecipe;

In the stripHtmlEntities method, you’re replacing the < and > characters with their escaped value. This way you’re not storing raw HTML in your database.

In the stripHtmlEntities method, you're replacing the < and > characters with their escaped value. This way you're not storing raw HTML in your database.

Next add the onChange and onSubmit methods to the NewRecipe component to handle editing and submission of the form:

Next add the onChange and onSubmit methods to the NewRecipe component to handle editing and submission of the form:

~/rails_react_recipe/app/javascript/components/NewRecipe.jsx

~/rails_react_recipe/app/javascript/components/NewRecipe.jsx

class NewRecipe extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      ingredients: "",
      instruction: ""
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.stripHtmlEntities = this.stripHtmlEntities.bind(this);
  }

  stripHtmlEntities(str) {
    return String(str)
      .replace(//g, ">");
  }

  onChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  onSubmit(event) {
    event.preventDefault();
    const url = "/api/v1/recipes/create";
    const { name, ingredients, instruction } = this.state;

    if (name.length == 0 || ingredients.length == 0 || instruction.length == 0)
      return;

    const body = {
      name,
      ingredients,
      instruction: instruction.replace(/\n/g, "
 
")
    };

    const token = document.querySelector('meta[name="csrf-token"]').content;
    fetch(url, {
      method: "POST",
      headers: {
        "X-CSRF-Token": token,
        "Content-Type": "application/json"
      },
      body: JSON.stringify(body)
    })
      .then(response => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then(response => this.props.history.push(`/recipe/${response.id}`))
      .catch(error => console.log(error.message));
  }

}

export default NewRecipe;

In the onChange method, you used the ES6 computed property names to set the value of every user input to its corresponding key in your state. In the onSubmit method, you checked that none of the required inputs are empty. You then build an object that contains the parameters required by the recipe controller to create a new recipe. Using regular expression, you replace every new line character in the instruction with a break tag, so you can retain the text format entered by the user.

In the onChange method, you used the ES6 computed property names to set the value of every user input to its corresponding key in your state. In the onSubmit method, you checked that none of the required inputs are empty. You then build an object that contains the parameters required by the recipe controller to create a new recipe. Using regular expression , you replace every new line character in the instruction with a break tag, so you can retain the text format entered by the user.

To protect against Cross-Site Request Forgery (CSRF) attacks, Rails attaches a CSRF security token to the HTML document. This token is required whenever a non-GET request is made. With the token constant in the preceding code, your application verifies the token on the server and throws an exception if the security token doesn’t match what is expected. In the onSubmit method, the application retrieves the CSRF token embedded in your HTML document by Rails and makes a HTTP request with a JSON string. If the recipe is successfully created, the application redirects the user to the recipe page where they can view their newly created recipe.

To protect against Cross-Site Request Forgery (CSRF) attacks, Rails attaches a CSRF security token to the HTML document. This token is required whenever a non- GET request is made. With the token constant in the preceding code, your application verifies the token on the server and throws an exception if the security token doesn't match what is expected. In the onSubmit method, the application retrieves the CSRF token embedded in your HTML document by Rails and makes a HTTP request with a JSON string. If the recipe is successfully created, the application redirects the user to the recipe page where they can view their newly created recipe.

Lastly, add a render method that renders a form for the user to enter the details for the recipe the user wishes to create:

Lastly, add a render method that renders a form for the user to enter the details for the recipe the user wishes to create:

~/rails_react_recipe/app/javascript/components/NewRecipe.jsx

~/rails_react_recipe/app/javascript/components/NewRecipe.jsx

class NewRecipe extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      ingredients: "",
      instruction: ""
    };

    this.onChange = this.onChange.bind(this);
    this.onSubmit = this.onSubmit.bind(this);
    this.stripHtmlEntities = this.stripHtmlEntities.bind(this);
  }

  stripHtmlEntities(str) {
    return String(str)
      .replace(//g, ">");
  }

  onChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  onSubmit(event) {
    event.preventDefault();
    const url = "/api/v1/recipes/create";
    const { name, ingredients, instruction } = this.state;

    if (name.length == 0 || ingredients.length == 0 || instruction.length == 0)
      return;

    const body = {
      name,
      ingredients,
      instruction: instruction.replace(/\n/g, "
 
")
    };

    const token = document.querySelector('meta[name="csrf-token"]').content;
    fetch(url, {
      method: "POST",
      headers: {
        "X-CSRF-Token": token,
        "Content-Type": "application/json"
      },
      body: JSON.stringify(body)
    })
      .then(response => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then(response => this.props.history.push(`/recipe/${response.id}`))
      .catch(error => console.log(error.message));
  }

  render() {
    return (
      

        

          

            

              Add a new recipe to our awesome recipe collection.
            
            

              

                Recipe name
                
              
              

                Ingredients
                
                
                  Separate each ingredient with a comma.
                
              
              Preparation Instructions
                            <button type="submit" className="btn custom-button mt-3">
                Create Recipe
              </button>
              <Link to="/recipes" className="btn btn-link mt-3">
                Back to recipes
              </Link>
            </form>
          </div>
        </div>
      </div>
    );
  }

}

export default NewRecipe;</code></pre> 
   <p>In the render method, you have a form that contains three input fields; one for the <code>recipeName</code>, <code>recipeIngredients</code>, and <code>instruction</code>. Each input field has an <code>onChange</code> event handler that calls the <code>onChange</code> method. Also, there’s an <code>onSubmit</code> event handler on the submit button that calls the <code>onSubmit</code> method which then submits the form data.</p> 
   <p> In the render method, you have a form that contains three input fields; one for the <code>recipeName</code> , <code>recipeIngredients</code> , and <code>instruction</code> . Each input field has an <code>onChange</code> event handler that calls the <code>onChange</code> method. Also, there's an <code>onSubmit</code> event handler on the submit button that calls the <code>onSubmit</code> method which then submits the form data. </p> 
   <p>Save and exit the file.</p> 
   <p> 保存并退出文件。 </p> 
   <p>To access this component in the browser, update your route file with its route:</p> 
   <p> To access this component in the browser, update your route file with its route: </p> 
   <div> 
    <div> 
     <ul> 
      <li class="line">nano app/javascript/routes/Index.jsx <p class="nodelete"></p> nano app/javascript/routes/Index.jsx </li> 
     </ul> 
    </div> 
   </div> 
   <p>Update your route file to include these highlighted lines:</p> 
   <p> Update your route file to include these highlighted lines: </p> 
   <div class="code-label ">
     ~/rails_react_recipe/app/javascript/routes/Index.jsx 
   </div> 
   <div class="code-label ">
     ~/rails_react_recipe/app/javascript/routes/Index.jsx 
   </div> 
   <pre class="has"><code>import React from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "../components/Home";
import Recipes from "../components/Recipes";
import Recipe from "../components/Recipe";
import NewRecipe from "../components/NewRecipe";

export default (
  <Router>
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/recipes" exact component={Recipes} />
      <Route path="/recipe/:id" exact component={Recipe} />
      <Route path="/recipe" exact component={NewRecipe} />
    </Switch>
  </Router>
);</code></pre> 
   <p>With the route in place, save and exit your file. Restart your development server and visit <code>http://localhost:3000</code> in your browser. Navigate to the recipes page and click the <strong>Create New Recipe</strong> button. You will find a page with a form to add recipes to your database:</p> 
   <p> With the route in place, save and exit your file. Restart your development server and visit <code>http://localhost:3000</code> in your browser. Navigate to the recipes page and click the <strong>Create New Recipe</strong> button. You will find a page with a form to add recipes to your database: </p> 
   <p>Enter the required recipe details and click the <strong>Create Recipe</strong> button; you will see the newly created recipe on the page.</p> 
   <p> Enter the required recipe details and click the <strong>Create Recipe</strong> button; you will see the newly created recipe on the page. </p> 
   <p>In this step, you brought your food recipe application to life by adding the ability to create recipes. In the next step, you’ll add the functionality to delete recipes.</p> 
   <p> In this step, you brought your food recipe application to life by adding the ability to create recipes. In the next step, you'll add the functionality to delete recipes. </p> 
   <h3 id="step-9-—-deleting-recipes"> Step 9 — Deleting Recipes <span style="font-weight: bold;">(</span>Step 9 — Deleting Recipes<span style="font-weight: bold;">)</span></h3> 
   <p>In this section, you will modify your Recipe component to be able to delete recipes. </p> 
   <p> In this section, you will modify your Recipe component to be able to delete recipes. </p> 
   <p>When you click the delete button on the recipe page, the application will send a request to delete a recipe from the database. To do this, open up your <code>Recipe.jsx</code> file:</p> 
   <p> When you click the delete button on the recipe page, the application will send a request to delete a recipe from the database. To do this, open up your <code>Recipe.jsx</code> file: </p> 
   <div> 
    <div> 
     <ul> 
      <li class="line">nano app/javascript/components/Recipe.jsx <p class="nodelete"></p> nano app/javascript/components/Recipe.jsx </li> 
     </ul> 
    </div> 
   </div> 
   <p>In the constructor of the <code>Recipe</code> component, bind <code>this</code> to the <code>deleteRecipe</code> method:</p> 
   <p> In the constructor of the <code>Recipe</code> component, bind <code>this</code> to the <code>deleteRecipe</code> method: </p> 
   <div class="code-label ">
     ~/rails_react_recipe/app/javascript/components/Recipe.jsx 
   </div> 
   <div class="code-label ">
     ~/rails_react_recipe/app/javascript/components/Recipe.jsx 
   </div> 
   <pre class="has"><code>class Recipe extends React.Component {
  constructor(props) {
    super(props);
    this.state = { recipe: { ingredients: "" } };
    this.addHtmlEntities = this.addHtmlEntities.bind(this);
    this.deleteRecipe = this.deleteRecipe.bind(this);
  }
...</code></pre> 
   <p>Now add a <code>deleteRecipe</code> method to the Recipe component:</p> 
   <p> Now add a <code>deleteRecipe</code> method to the Recipe component: </p> 
   <div class="code-label ">
     ~/rails_react_recipe/app/javascript/components/Recipe.jsx 
   </div> 
   <div class="code-label ">
     ~/rails_react_recipe/app/javascript/components/Recipe.jsx 
   </div> 
   <pre class="has"><code>class Recipe extends React.Component {
  constructor(props) {
    super(props);
    this.state = { recipe: { ingredients: "" } };

    this.addHtmlEntities = this.addHtmlEntities.bind(this);
    this.deleteRecipe = this.deleteRecipe.bind(this);
  }

  componentDidMount() {
    const {
      match: {
        params: { id }
      }
    } = this.props;
    const url = `/api/v1/show/${id}`;
    fetch(url)
      .then(response => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then(response => this.setState({ recipe: response }))
      .catch(() => this.props.history.push("/recipes"));
  }

  addHtmlEntities(str) {
    return String(str)
      .replace(/</g, "<")
      .replace(/>/g, ">");
  }

  deleteRecipe() {
    const {
      match: {
        params: { id }
      }
    } = this.props;
    const url = `/api/v1/destroy/${id}`;
    const token = document.querySelector('meta[name="csrf-token"]').content;

    fetch(url, {
      method: "DELETE",
      headers: {
        "X-CSRF-Token": token,
        "Content-Type": "application/json"
      }
    })
      .then(response => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then(() => this.props.history.push("/recipes"))
      .catch(error => console.log(error.message));
  }

  render() {
    const { recipe } = this.state;
    let ingredientList = "No ingredients available";
...</code></pre> 
   <p>In the <code>deleteRecipe</code> method, you get the <code>id</code> of the recipe to be deleted, then build your url and grab the CSRF token. Next, you make a <code>DELETE</code> request to the <code>Recipes</code> controller to delete the recipe. If the recipe is successfully deleted, the application redirects the user to the recipes page.</p> 
   <p> In the <code>deleteRecipe</code> method, you get the <code>id</code> of the recipe to be deleted, then build your url and grab the CSRF token. Next, you make a <code>DELETE</code> request to the <code>Recipes</code> controller to delete the recipe. If the recipe is successfully deleted, the application redirects the user to the recipes page. </p> 
   <p>To run the code in the <code>deleteRecipe</code> method whenever the delete button is clicked, pass it as the click event handler to the button. Add an <code>onClick</code> event to the delete button in the <code>render</code> method:</p> 
   <p> To run the code in the <code>deleteRecipe</code> method whenever the delete button is clicked, pass it as the click event handler to the button. Add an <code>onClick</code> event to the delete button in the <code>render</code> method: </p> 
   <div class="code-label ">
     ~/rails_react_recipe/app/javascript/components/Recipe.jsx 
   </div> 
   <div class="code-label ">
     ~/rails_react_recipe/app/javascript/components/Recipe.jsx 
   </div> 
   <pre class="has"><code>...
return (
  <div className="">
    <div className="hero position-relative d-flex align-items-center justify-content-center">
      <img
        src={recipe.image}
        alt={`${recipe.name} image`}
        className="img-fluid position-absolute"
      />
      <div className="overlay bg-dark position-absolute" />
      <h1 className="display-4 position-relative text-white">
        {recipe.name}
      </h1>
    </div>
    <div className="container py-5">
      <div className="row">
        <div className="col-sm-12 col-lg-3">
          <ul className="list-group">
            <h5 className="mb-2">Ingredients</h5>
            {ingredientList}
          </ul>
        </div>
        <div className="col-sm-12 col-lg-7">
          <h5 className="mb-2">Preparation Instructions</h5>
          <div
            dangerouslySetInnerHTML={{
              __html: `${recipeInstruction}`
            }}
          />
        </div>
        <div className="col-sm-12 col-lg-2">
          <button type="button" className="btn btn-danger" onClick={this.deleteRecipe}>
            Delete Recipe
          </button>
        </div>
      </div>
      <Link to="/recipes" className="btn btn-link">
        Back to recipes
      </Link>
    </div>
  </div>
);
...</code></pre> 
   <p>At this point in the tutorial, your complete <code>Recipe.jsx</code> file will look like this:</p> 
   <p> At this point in the tutorial, your complete <code>Recipe.jsx</code> file will look like this: </p> 
   <div class="code-label ">
     ~/rails_react_recipe/app/javascript/components/Recipe.jsx 
   </div> 
   <div class="code-label ">
     ~/rails_react_recipe/app/javascript/components/Recipe.jsx 
   </div> 
   <pre class="has"><code>import React from "react";
import { Link } from "react-router-dom";

class Recipe extends React.Component {
  constructor(props) {
    super(props);
    this.state = { recipe: { ingredients: "" } };

    this.addHtmlEntities = this.addHtmlEntities.bind(this);
    this.deleteRecipe = this.deleteRecipe.bind(this);
  }

  addHtmlEntities(str) {
    return String(str)
      .replace(/</g, "<")
      .replace(/>/g, ">");
  }

  componentDidMount() {
    const {
      match: {
        params: { id }
      }
    } = this.props;
    const url = `/api/v1/show/${id}`;
    fetch(url)
      .then(response => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then(response => this.setState({ recipe: response }))
      .catch(() => this.props.history.push("/recipes"));
  }

  deleteRecipe() {
    const {
      match: {
        params: { id }
      }
    } = this.props;
    const url = `/api/v1/destroy/${id}`;
    const token = document.querySelector('meta[name="csrf-token"]').content;
    fetch(url, {
      method: "DELETE",
      headers: {
        "X-CSRF-Token": token,
        "Content-Type": "application/json"
      }
    })
      .then(response => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Network response was not ok.");
      })
      .then(() => this.props.history.push("/recipes"))
      .catch(error => console.log(error.message));
  }

  render() {
    const { recipe } = this.state;
    let ingredientList = "No ingredients available";
    if (recipe.ingredients.length > 0) {
      ingredientList = recipe.ingredients
        .split(",")
        .map((ingredient, index) => (
          <li key={index} className="list-group-item">
            {ingredient}
          </li>
        ));
    }

    const recipeInstruction = this.addHtmlEntities(recipe.instruction);

    return (
      <div className="">
        <div className="hero position-relative d-flex align-items-center justify-content-center">
          <img
            src={recipe.image}
            alt={`${recipe.name} image`}
            className="img-fluid position-absolute"
          />
          <div className="overlay bg-dark position-absolute" />
          <h1 className="display-4 position-relative text-white">
            {recipe.name}
          </h1>
        </div>
        <div className="container py-5">
          <div className="row">
            <div className="col-sm-12 col-lg-3">
              <ul className="list-group">
                <h5 className="mb-2">Ingredients</h5>
                {ingredientList}
              </ul>
            </div>
            <div className="col-sm-12 col-lg-7">
              <h5 className="mb-2">Preparation Instructions</h5>
              <div
                dangerouslySetInnerHTML={{
                  __html: `${recipeInstruction}`
                }}
              />
            </div>
            <div className="col-sm-12 col-lg-2">
              <button type="button" className="btn btn-danger" onClick={this.deleteRecipe}>
                Delete Recipe
              </button>
            </div>
          </div>
          <Link to="/recipes" className="btn btn-link">
            Back to recipes
          </Link>
        </div>
      </div>
    );
  }
}

export default Recipe;</code></pre> 
   <p>Save and exit the file.</p> 
   <p> 保存并退出文件。 </p> 
   <p>Restart the application server and navigate to the homepage. Click the <strong>View Recipes</strong> button to view all existing recipes, view any individual recipe, and click the <strong>Delete Recipe</strong> button on the page to delete the article. You will be redirected to the recipes page, and the deleted recipe will no longer exists.</p> 
   <p> Restart the application server and navigate to the homepage. Click the <strong>View Recipes</strong> button to view all existing recipes, view any individual recipe, and click the <strong>Delete Recipe</strong> button on the page to delete the article. You will be redirected to the recipes page, and the deleted recipe will no longer exists. </p> 
   <p>With the delete button working, you now have a fully functional recipe application!</p> 
   <p> With the delete button working, you now have a fully functional recipe application! </p> 
   <h3 id="conclusion"> 结论 <span style="font-weight: bold;">(</span>Conclusion<span style="font-weight: bold;">)</span></h3> 
   <p>In this tutorial, you created a food recipe application with Ruby on Rails and a React frontend, using PostgreSQL as your database and Bootstrap for styling. If you’d like to run through more Ruby on Rails content, take a look at our Securing Communications in a Three-tier Rails Application Using SSH Tunnels tutorial, or head to our How To Code in Ruby series to refresh your Ruby skills. To dive deeper into React, try out our How To Display Data from the DigitalOcean API with React article.</p> 
   <p> In this tutorial, you created a food recipe application with Ruby on Rails and a React frontend, using PostgreSQL as your database and Bootstrap for styling. If you'd like to run through more Ruby on Rails content, take a look at our Securing Communications in a Three-tier Rails Application Using SSH Tunnels tutorial, or head to our How To Code in Ruby series to refresh your Ruby skills. To dive deeper into React, try out our How To Display Data from the DigitalOcean API with React article. </p> 
   <blockquote> 
    <p>翻译自: https://www.digitalocean.com/community/tutorials/how-to-set-up-a-ruby-on-rails-project-with-a-react-frontend</p> 
   </blockquote> 
   <p>react前端项目</p> 
  </div> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1728818431970586624"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(数据库,vue,java,javascript,web,ViewUI)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1835512920797179904.htm"
                           title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a>
                        <span class="text-muted">软件技术NINI</span>
<a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div>
                    </li>
                    <li><a href="/article/1835511912843014144.htm"
                           title="理解Gunicorn：Python WSGI服务器的基石" target="_blank">理解Gunicorn：Python WSGI服务器的基石</a>
                        <span class="text-muted">范范0825</span>
<a class="tag" taget="_blank" href="/search/ipython/1.htm">ipython</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
                        <div>理解Gunicorn：PythonWSGI服务器的基石介绍Gunicorn，全称GreenUnicorn，是一个为PythonWSGI（WebServerGatewayInterface）应用设计的高效、轻量级HTTP服务器。作为PythonWeb应用部署的常用工具，Gunicorn以其高性能和易用性著称。本文将介绍Gunicorn的基本概念、安装和配置，帮助初学者快速上手。1.什么是Gunico</div>
                    </li>
                    <li><a href="/article/1835509897106649088.htm"
                           title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div>
                    </li>
                    <li><a href="/article/1835509769822105600.htm"
                           title="LocalDateTime 转 String" target="_blank">LocalDateTime 转 String</a>
                        <span class="text-muted">igotyback</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>importjava.time.LocalDateTime;importjava.time.format.DateTimeFormatter;publicclassMain{publicstaticvoidmain(String[]args){//获取当前时间LocalDateTimenow=LocalDateTime.now();//定义日期格式化器DateTimeFormatterformat</div>
                    </li>
                    <li><a href="/article/1835509391361667072.htm"
                           title="Linux下QT开发的动态库界面弹出操作（SDL2）" target="_blank">Linux下QT开发的动态库界面弹出操作（SDL2）</a>
                        <span class="text-muted">13jjyao</span>
<a class="tag" taget="_blank" href="/search/QT%E7%B1%BB/1.htm">QT类</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/sdl2/1.htm">sdl2</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                        <div>需求：操作系统为linux，开发框架为qt，做成需带界面的qt动态库，调用方为java等非qt程序难点：调用方为java等非qt程序，也就是说调用方肯定不带QApplication::exec()，缺少了这个，QTimer等事件和QT创建的窗口将不能弹出(包括opencv也是不能弹出)；这与qt调用本身qt库是有本质的区别的思路：1.调用方缺QApplication::exec()，那么我们在接口</div>
                    </li>
                    <li><a href="/article/1835504218178416640.htm"
                           title="Google earth studio 简介" target="_blank">Google earth studio 简介</a>
                        <span class="text-muted">陟彼高冈yu</span>
<a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a>
                        <div>GoogleEarthStudio是一个基于Web的动画工具，专为创作使用GoogleEarth数据的动画和视频而设计。它利用了GoogleEarth强大的三维地图和卫星影像数据库，使用户能够轻松地创建逼真的地球动画、航拍视频和动态地图可视化。网址为https://www.google.com/earth/studio/。GoogleEarthStudio是一个基于Web的动画工具，专为创作使用G</div>
                    </li>
                    <li><a href="/article/1835502578050363392.htm"
                           title="PHP环境搭建详细教程" target="_blank">PHP环境搭建详细教程</a>
                        <span class="text-muted">好看资源平台</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a>
                        <div>PHP是一个流行的服务器端脚本语言，广泛用于Web开发。为了使PHP能够在本地或服务器上运行，我们需要搭建一个合适的PHP环境。本教程将结合最新资料，介绍在不同操作系统上搭建PHP开发环境的多种方法，包括Windows、macOS和Linux系统的安装步骤，以及本地和Docker环境的配置。1.PHP环境搭建概述PHP环境的搭建主要分为以下几类：集成开发环境：例如XAMPP、WAMP、MAMP，这</div>
                    </li>
                    <li><a href="/article/1835501821569888256.htm"
                           title="关于提高复杂业务逻辑代码可读性的思考" target="_blank">关于提高复杂业务逻辑代码可读性的思考</a>
                        <span class="text-muted">编程经验分享</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E7%BB%8F%E9%AA%8C/1.htm">开发经验</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>目录前言需求场景常规写法拆分方法领域对象总结前言实际工作中大部分时间都是在写业务逻辑，一般都是三层架构，表示层（Controller）接收客户端请求，并对入参做检验，业务逻辑层（Service）负责处理业务逻辑，一般开发都是在这一层中写具体的业务逻辑。数据访问层（Dao）是直接和数据库交互的，用于查数据给业务逻辑层，或者是将业务逻辑层处理后的数据写入数据库。简单的增删改查接口不用多说，基本上写好一</div>
                    </li>
                    <li><a href="/article/1835499681732456448.htm"
                           title="SQL Server_查询某一数据库中的所有表的内容" target="_blank">SQL Server_查询某一数据库中的所有表的内容</a>
                        <span class="text-muted">qq_42772833</span>
<a class="tag" taget="_blank" href="/search/SQL/1.htm">SQL</a><a class="tag" taget="_blank" href="/search/Server/1.htm">Server</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/sqlserver/1.htm">sqlserver</a>
                        <div>1.查看所有表的表名要列出CrabFarmDB数据库中的所有表（名），可以使用以下SQL语句：USECrabFarmDB;--切换到目标数据库GOSELECTTABLE_NAMEFROMINFORMATION_SCHEMA.TABLESWHERETABLE_TYPE='BASETABLE';对这段SQL脚本的解释：SELECTTABLE_NAME：这个语句的作用是从查询结果中选择TABLE_NAM</div>
                    </li>
                    <li><a href="/article/1835498925755297792.htm"
                           title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a>
                        <span class="text-muted">STU学生网页设计</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a>
                        <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div>
                    </li>
                    <li><a href="/article/1835498547785592832.htm"
                           title="【华为OD机试真题2023B卷 JAVA&JS】We Are A Team" target="_blank">【华为OD机试真题2023B卷 JAVA&JS】We Are A Team</a>
                        <span class="text-muted">若博豆</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>华为OD2023（B卷）机试题库全覆盖，刷题指南点这里WeAreATeam时间限制：1秒|内存限制：32768K|语言限制：不限题目描述：总共有n个人在机房，每个人有一个标号（1<=标号<=n），他们分成了多个团队，需要你根据收到的m条消息判定指定的两个人是否在一个团队中，具体的：1、消息构成为：abc，整数a、b分别代</div>
                    </li>
                    <li><a href="/article/1835497411179540480.htm"
                           title="深入理解 MultiQueryRetriever：提升向量数据库检索效果的强大工具" target="_blank">深入理解 MultiQueryRetriever：提升向量数据库检索效果的强大工具</a>
                        <span class="text-muted">nseejrukjhad</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>深入理解MultiQueryRetriever：提升向量数据库检索效果的强大工具引言在人工智能和自然语言处理领域，高效准确的信息检索一直是一个关键挑战。传统的基于距离的向量数据库检索方法虽然广泛应用，但仍存在一些局限性。本文将介绍一种创新的解决方案：MultiQueryRetriever，它通过自动生成多个查询视角来增强检索效果，提高结果的相关性和多样性。MultiQueryRetriever的工</div>
                    </li>
                    <li><a href="/article/1835496149843275776.htm"
                           title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a>
                        <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div>
                    </li>
                    <li><a href="/article/1835496148601761792.htm"
                           title="HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动</a>
                        <span class="text-muted">二挡起步</span>
<a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div>
                    </li>
                    <li><a href="/article/1835495170972413952.htm"
                           title="git - Webhook让部署自动化" target="_blank">git - Webhook让部署自动化</a>
                        <span class="text-muted">大猪大猪</span>

                        <div>我们现在有一个需求，将项目打包上传到gitlab或者github后，程序能自动部署，不用手动地去服务器中进行项目更新并运行，如何做到？这里我们可以使用gitlab与github的挂钩，挂钩的原理就是，每当我们有请求到gitlab与github服务器时，这时他俩会根据我们配置的挂钩地扯进行访问，webhook挂钩程序会一直监听着某个端口请求，一但收到他们发过来的请求，这时就知道用户有请求提交了，这时</div>
                    </li>
                    <li><a href="/article/1835493374514262016.htm"
                           title="MongoDB Oplog 窗口" target="_blank">MongoDB Oplog 窗口</a>
                        <span class="text-muted">喝醉酒的小白</span>
<a class="tag" taget="_blank" href="/search/MongoDB/1.htm">MongoDB</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
                        <div>在MongoDB中，oplog（操作日志）是一个特殊的日志系统，用于记录对数据库的所有写操作。oplog允许副本集成员（通常是从节点）应用主节点上已经执行的操作，从而保持数据的一致性。它是MongoDB副本集实现数据复制的基础。MongoDBOplog窗口oplog窗口是指在MongoDB副本集中，从节点可以用来同步数据的时间范围。这个窗口通常由以下因素决定：Oplog大小：oplog的大小是有限</div>
                    </li>
                    <li><a href="/article/1835493267907637248.htm"
                           title="webpack图片等资源的处理" target="_blank">webpack图片等资源的处理</a>
                        <span class="text-muted">dmengmeng</span>

                        <div>需要的loaderfile-loader（让我们可以引入这些资源文件）url-loader（其实是file-loader的二次封装）img-loader（处理图片所需要的）在没有使用任何处理图片的loader之前，比如说css中用到了背景图片，那么最后打包会报错的，因为他没办法处理图片。其实你只想能够使用图片的话。只加一个file-loader就可以，打开网页能准确看到图片。{test:/\.(p</div>
                    </li>
                    <li><a href="/article/1835492740536823808.htm"
                           title="node.js学习" target="_blank">node.js学习</a>
                        <span class="text-muted">小猿L</span>
<a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
                        <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div>
                    </li>
                    <li><a href="/article/1835490974911000576.htm"
                           title="python os 环境变量" target="_blank">python os 环境变量</a>
                        <span class="text-muted">CV矿工</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/numpy/1.htm">numpy</a>
                        <div>环境变量：环境变量是程序和操作系统之间的通信方式。有些字符不宜明文写进代码里，比如数据库密码，个人账户密码，如果写进自己本机的环境变量里，程序用的时候通过os.environ.get（）取出来就行了。os.environ是一个环境变量的字典。环境变量的相关操作importos"""设置/修改环境变量：os.environ[‘环境变量名称’]=‘环境变量值’#其中key和value均为string类</div>
                    </li>
                    <li><a href="/article/1835489460372992000.htm"
                           title="【PG】常见数据库、表属性设置" target="_blank">【PG】常见数据库、表属性设置</a>
                        <span class="text-muted">江无羡</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                        <div>PG的常见属性配置方法数据库复制、备份相关表的复制标识单表操作批量表操作链接数据库复制、备份相关表的复制标识单表操作通过ALTER语句单独更改一张表的复制标识。ALTERTABLE[tablename]REPLICAIDENTITYFULL;批量表操作通过代码块的方式，对某个schema中的所有表一起更新其复制标识。SELECTtablename,CASErelreplidentWHEN'd'TH</div>
                    </li>
                    <li><a href="/article/1835483159630802944.htm"
                           title="nosql数据库技术与应用知识点" target="_blank">nosql数据库技术与应用知识点</a>
                        <span class="text-muted">皆过客，揽星河</span>
<a class="tag" taget="_blank" href="/search/NoSQL/1.htm">NoSQL</a><a class="tag" taget="_blank" href="/search/nosql/1.htm">nosql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E9%9D%9E%E5%85%B3%E7%B3%BB%E5%9E%8B%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">非关系型数据库</a>
                        <div>Nosql知识回顾大数据处理流程数据采集(flume、爬虫、传感器)数据存储(本门课程NoSQL所处的阶段)Hdfs、MongoDB、HBase等数据清洗(入仓)Hive等数据处理、分析(Spark、Flink等)数据可视化数据挖掘、机器学习应用(Python、SparkMLlib等)大数据时代存储的挑战(三高)高并发(同一时间很多人访问)高扩展(要求随时根据需求扩展存储)高效率(要求读写速度快)</div>
                    </li>
                    <li><a href="/article/1835477614848995328.htm"
                           title="insert into select 主键自增_mybatis拦截器实现主键自动生成" target="_blank">insert into select 主键自增_mybatis拦截器实现主键自动生成</a>
                        <span class="text-muted">weixin_39521651</span>
<a class="tag" taget="_blank" href="/search/insert/1.htm">insert</a><a class="tag" taget="_blank" href="/search/into/1.htm">into</a><a class="tag" taget="_blank" href="/search/select/1.htm">select</a><a class="tag" taget="_blank" href="/search/%E4%B8%BB%E9%94%AE%E8%87%AA%E5%A2%9E/1.htm">主键自增</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/delete%E8%BF%94%E5%9B%9E%E5%80%BC/1.htm">delete返回值</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/insert%E8%BF%94%E5%9B%9E%E4%B8%BB%E9%94%AE/1.htm">insert返回主键</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/insert%E8%BF%94%E5%9B%9E%E5%AF%B9%E8%B1%A1/1.htm">insert返回对象</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/plus/1.htm">plus</a><a class="tag" taget="_blank" href="/search/insert%E8%BF%94%E5%9B%9E%E4%B8%BB%E9%94%AE/1.htm">insert返回主键</a><a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a><a class="tag" taget="_blank" href="/search/plus/1.htm">plus</a><a class="tag" taget="_blank" href="/search/%E6%8F%92%E5%85%A5%E7%94%9F%E6%88%90id/1.htm">插入生成id</a>
                        <div>前言前阵子和朋友聊天，他说他们项目有个需求，要实现主键自动生成，不想每次新增的时候，都手动设置主键。于是我就问他，那你们数据库表设置主键自动递增不就得了。他的回答是他们项目目前的id都是采用雪花算法来生成，因此为了项目稳定性，不会切换id的生成方式。朋友问我有没有什么实现思路，他们公司的orm框架是mybatis，我就建议他说，不然让你老大把mybatis切换成mybatis-plus。mybat</div>
                    </li>
                    <li><a href="/article/1835476093189058560.htm"
                           title="Java 重写(Override)与重载(Overload)" target="_blank">Java 重写(Override)与重载(Overload)</a>
                        <span class="text-muted">叨唧唧的</span>

                        <div>Java重写(Override)与重载(Overload)重写(Override)重写是子类对父类的允许访问的方法的实现过程进行重新编写,返回值和形参都不能改变。即外壳不变，核心重写！重写的好处在于子类可以根据需要，定义特定于自己的行为。也就是说子类能够根据需要实现父类的方法。重写方法不能抛出新的检查异常或者比被重写方法申明更加宽泛的异常。例如：父类的一个方法申明了一个检查异常IOExceptio</div>
                    </li>
                    <li><a href="/article/1835473830873755648.htm"
                           title="简单了解 JVM" target="_blank">简单了解 JVM</a>
                        <span class="text-muted">记得开心一点啊</span>
<a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a>
                        <div>目录♫什么是JVM♫JVM的运行流程♫JVM运行时数据区♪虚拟机栈♪本地方法栈♪堆♪程序计数器♪方法区/元数据区♫类加载的过程♫双亲委派模型♫垃圾回收机制♫什么是JVMJVM是JavaVirtualMachine的简称，意为Java虚拟机。虚拟机是指通过软件模拟的具有完整硬件功能的、运行在一个完全隔离的环境中的完整计算机系统（如：JVM、VMwave、VirtualBox）。JVM和其他两个虚拟机</div>
                    </li>
                    <li><a href="/article/1835471689929027584.htm"
                           title="关于Mysql 中 Row size too large (＞ 8126) 错误的解决和理解" target="_blank">关于Mysql 中 Row size too large (＞ 8126) 错误的解决和理解</a>
                        <span class="text-muted">秋刀prince</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                        <div>提示：啰嗦一嘴，数据库的任何操作和验证前，一定要记得先备份！！！不会有错；文章目录问题发现一、问题导致的可能原因1、页大小2、行格式2.1compact格式2.2Redundant格式2.3Dynamic格式2.4Compressed格式3、BLOB和TEXT列二、解决办法1、修改页大小（不推荐）2、修改行格式3、修改数据类型为BLOB和TEXT列4、其他优化方式（可以参考使用）4.1合理设置数据</div>
                    </li>
                    <li><a href="/article/1835471058648526848.htm"
                           title="1分钟解决 -bash: mvn: command not found，在Centos 7中安装Maven" target="_blank">1分钟解决 -bash: mvn: command not found，在Centos 7中安装Maven</a>
                        <span class="text-muted">Energet!c</span>
<a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>1分钟解决-bash:mvn:commandnotfound，在Centos7中安装Maven检查Java环境1下载Maven2解压Maven3配置环境变量4验证安装5常见问题与注意事项6总结检查Java环境Maven依赖Java环境，请确保系统已经安装了Java并配置了环境变量。可以通过以下命令检查：java-version如果未安装，请先安装Java。1下载Maven从官网下载：前往Apach</div>
                    </li>
                    <li><a href="/article/1835470931783413760.htm"
                           title="「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验" target="_blank">「豆包Marscode体验官」 | 云端 IDE 启动 & Rust 体验</a>
                        <span class="text-muted">张风捷特烈</span>
<a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
                        <div>theme:cyanosis我正在参加「豆包MarsCode初体验」征文活动MarsCode可以看作一个运行在服务端的远程VSCode开发环境。对于我这种想要学习体验某些语言，但不想在电脑里装环境的人来说非常友好。本文就来介绍一下在MarsCode里，我的体验rust开发体验。一、MarsCode是什么它的本质是:提供代码助手和云端IDE服务的web网站，可通过下面的链接访问https://www</div>
                    </li>
                    <li><a href="/article/1835469672334585856.htm"
                           title="Java企业面试题3" target="_blank">Java企业面试题3</a>
                        <span class="text-muted">马龙强_</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>1.break和continue的作用(智*图)break：用于完全退出一个循环（如for,while）或一个switch语句。当在循环体内遇到break语句时，程序会立即跳出当前循环体，继续执行循环之后的代码。continue：用于跳过当前循环体中剩余的部分，并开始下一次循环。如果是在for循环中使用continue，则会直接进行条件判断以决定是否执行下一轮循环。2.if分支语句和switch分</div>
                    </li>
                    <li><a href="/article/1835468916290318336.htm"
                           title="JVM、JRE和 JDK：理解Java开发的三大核心组件" target="_blank">JVM、JRE和 JDK：理解Java开发的三大核心组件</a>
                        <span class="text-muted">Y雨何时停T</span>
<a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>Java是一门跨平台的编程语言，它的成功离不开背后强大的运行环境与开发工具的支持。在Java的生态中，JVM（Java虚拟机）、JRE（Java运行时环境）和JDK（Java开发工具包）是三个至关重要的核心组件。本文将探讨JVM、JDK和JRE的区别，帮助你更好地理解Java的运行机制。1.JVM：Java虚拟机（JavaVirtualMachine）什么是JVM？JVM，即Java虚拟机，是Ja</div>
                    </li>
                    <li><a href="/article/1835464504918503424.htm"
                           title="Java面试题精选：消息队列(二)" target="_blank">Java面试题精选：消息队列(二)</a>
                        <span class="text-muted">芒果不是芒</span>
<a class="tag" taget="_blank" href="/search/Java%E9%9D%A2%E8%AF%95%E9%A2%98%E7%B2%BE%E9%80%89/1.htm">Java面试题精选</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a>
                        <div>一、Kafka的特性1.消息持久化：消息存储在磁盘，所以消息不会丢失2.高吞吐量：可以轻松实现单机百万级别的并发3.扩展性：扩展性强，还是动态扩展4.多客户端支持：支持多种语言（Java、C、C++、GO、）5.KafkaStreams（一个天生的流处理）:在双十一或者销售大屏就会用到这种流处理。使用KafkaStreams可以快速的把销售额统计出来6.安全机制：Kafka进行生产或者消费的时候会</div>
                    </li>
                                <li><a href="/article/92.htm"
                                       title="log4j对象改变日志级别" target="_blank">log4j对象改变日志级别</a>
                                    <span class="text-muted">3213213333332132</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/log4j/1.htm">log4j</a><a class="tag" taget="_blank" href="/search/level/1.htm">level</a><a class="tag" taget="_blank" href="/search/log4j%E5%AF%B9%E8%B1%A1%E5%90%8D%E7%A7%B0/1.htm">log4j对象名称</a><a class="tag" taget="_blank" href="/search/%E6%97%A5%E5%BF%97%E7%BA%A7%E5%88%AB/1.htm">日志级别</a>
                                    <div>log4j对象改变日志级别可批量的改变所有级别，或是根据条件改变日志级别。 
 
log4j配置文件： 
 
 

log4j.rootLogger=ERROR,FILE,CONSOLE,EXECPTION
 
#log4j.appender.FILE=org.apache.log4j.RollingFileAppender
log4j.appender.FILE=org.apache.l</div>
                                </li>
                                <li><a href="/article/219.htm"
                                       title="elk+redis 搭建nginx日志分析平台" target="_blank">elk+redis 搭建nginx日志分析平台</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/elasticsearch/1.htm">elasticsearch</a><a class="tag" taget="_blank" href="/search/kibana/1.htm">kibana</a><a class="tag" taget="_blank" href="/search/logstash/1.htm">logstash</a>
                                    <div>              elk+redis 搭建nginx日志分析平台 
logstash,elasticsearch,kibana 怎么进行nginx的日志分析呢？首先，架构方面，nginx是有日志文件的，它的每个请求的状态等都有日志文件进行记录。其次，需要有个队 列，redis的l</div>
                                </li>
                                <li><a href="/article/346.htm"
                                       title="Yii2设置时区" target="_blank">Yii2设置时区</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/timezone/1.htm">timezone</a><a class="tag" taget="_blank" href="/search/yii2/1.htm">yii2</a>
                                    <div>时区这东西，在开发的时候，你说重要吧，也还好，毕竟没它也能正常运行，你说不重要吧，那就纠结了。特别是linux系统，都TMD差上几小时，你能不痛苦吗？win还好一点。有一些常规方法，是大家目前都在采用的1、php.ini中的设置，这个就不谈了，2、程序中公用文件里设置，date_default_timezone_set一下时区3、或者。。。自己写时间处理函数，在遇到时间的时候，用这个函数处理（比较</div>
                                </li>
                                <li><a href="/article/473.htm"
                                       title="js实现前台动态添加文本框，后台获取文本框内容" target="_blank">js实现前台动态添加文本框，后台获取文本框内容</a>
                                    <span class="text-muted">171815164</span>
<a class="tag" taget="_blank" href="/search/%E6%96%87%E6%9C%AC%E6%A1%86/1.htm">文本框</a>
                                    <div>

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w</div>
                                </li>
                                <li><a href="/article/600.htm"
                                       title="持续集成工具" target="_blank">持续集成工具</a>
                                    <span class="text-muted">g21121</span>
<a class="tag" taget="_blank" href="/search/%E6%8C%81%E7%BB%AD%E9%9B%86%E6%88%90/1.htm">持续集成</a>
                                    <div>        持续集成是什么？我们为什么需要持续集成？持续集成带来的好处是什么？什么样的项目需要持续集成？...        持续集成(Continuous integration ,简称CI)，所谓集成可以理解为将互相依赖的工程或模块合并成一个能单独运行</div>
                                </li>
                                <li><a href="/article/727.htm"
                                       title="数据结构哈希表(hash)总结" target="_blank">数据结构哈希表(hash)总结</a>
                                    <span class="text-muted">永夜-极光</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a>
                                    <div>1.什么是hash 
来源于百度百科: 
Hash，一般翻译做“散列”，也有直接音译为“哈希”的，就是把任意长度的输入，通过散列算法，变换成固定长度的输出，该输出就是散列值。这种转换是一种压缩映射，也就是，散列值的空间通常远小于输入的空间，不同的输入可能会散列成相同的输出，所以不可能从散列值来唯一的确定输入值。简单的说就是一种将任意长度的消息压缩到某一固定长度的消息摘要的函数。 
  
</div>
                                </li>
                                <li><a href="/article/854.htm"
                                       title="乱七八糟" target="_blank">乱七八糟</a>
                                    <span class="text-muted">程序员是怎么炼成的</span>

                                    <div>eclipse中的jvm字节码查看插件地址： 
http://andrei.gmxhome.de/eclipse/ 
安装该地址的outline 插件  后重启，打开window下的view下的bytecode视图 
http://andrei.gmxhome.de/eclipse/ 
  
jvm博客： 
http://yunshen0909.iteye.com/blog/2</div>
                                </li>
                                <li><a href="/article/981.htm"
                                       title="职场人伤害了“上司” 怎样弥补" target="_blank">职场人伤害了“上司” 怎样弥补</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA/1.htm">职场</a>
                                    <div> 由于工作中的失误，或者平时不注意自己的言行“伤害”、“得罪”了自己的上司，怎么办呢？ 
　　在职业生涯中这种问题尽量不要发生。下面提供了一些解决问题的建议： 
　　一、利用一些轻松的场合表示对他的尊重 
　　即使是开明的上司也很注重自己的权威，都希望得到下属的尊重，所以当你与上司冲突后，最好让不愉快成为过去，你不妨在一些轻松的场合，比如会餐、联谊活动等，向上司问个好，敬下酒，表示你对对方的尊重，</div>
                                </li>
                                <li><a href="/article/1108.htm"
                                       title="深入浅出url编码" target="_blank">深入浅出url编码</a>
                                    <span class="text-muted">antonyup_2006</span>
<a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a><a class="tag" taget="_blank" href="/search/IE/1.htm">IE</a>
                                    <div>出处：http://blog.csdn.net/yzhz  杨争   
http://blog.csdn.net/yzhz/archive/2007/07/03/1676796.aspx 
 
一、问题： 
        编码问题是JAVA初学者在web开发过程中经常会遇到问题，网上也有大量相关的</div>
                                </li>
                                <li><a href="/article/1235.htm"
                                       title="建表后创建表的约束关系和增加表的字段" target="_blank">建表后创建表的约束关系和增加表的字段</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/%E6%A0%87%E7%9A%84%E7%BA%A6%E6%9D%9F%E5%85%B3%E7%B3%BB/1.htm">标的约束关系</a><a class="tag" taget="_blank" href="/search/%E5%A2%9E%E5%8A%A0%E8%A1%A8%E7%9A%84%E5%AD%97%E6%AE%B5/1.htm">增加表的字段</a>
                                    <div>  
下面所有的操作都是在表建立后操作的,主要目的就是熟悉sql的约束,约束语句的万能公式 
  
1,增加字段(student表中增加 姓名字段) 
  
alter table 增加字段的表名 add  增加的字段名   增加字段的数据类型

  alter table student add name varchar2(10);
 
  
&nb</div>
                                </li>
                                <li><a href="/article/1362.htm"
                                       title="Uploadify 3.2 参数属性、事件、方法函数详解" target="_blank">Uploadify 3.2 参数属性、事件、方法函数详解</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/uploadify/1.htm">uploadify</a>
                                    <div>一.属性     
属性名称   
默认值   
说明     
auto   
true   
设置为true当选择文件后就直接上传了，为false需要点击上传按钮才上传。     
buttonClass   
”   
按钮样式     
buttonCursor   
‘hand’   
鼠标指针悬停在按钮上的样子     
buttonImage   
null   
浏览按钮的图片的路</div>
                                </li>
                                <li><a href="/article/1489.htm"
                                       title="精通Oracle10编程SQL(16)使用LOB对象" target="_blank">精通Oracle10编程SQL(16)使用LOB对象</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a>
                                    <div>/*
 *使用LOB对象
 */
--LOB(Large Object)是专门用于处理大对象的一种数据类型，其所存放的数据长度可以达到4G字节
--CLOB/NCLOB用于存储大批量字符数据，BLOB用于存储大批量二进制数据，而BFILE则存储着指向OS文件的指针

/*
 *综合实例
 */
--建立表空间 
--#指定区尺寸为128k,如不指定，区尺寸默认为64k 
CR</div>
                                </li>
                                <li><a href="/article/1616.htm"
                                       title="【Resin一】Resin服务器部署web应用" target="_blank">【Resin一】Resin服务器部署web应用</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/resin/1.htm">resin</a>
                                    <div>工作中，在Resin服务器上部署web应用，通常有如下三种方式： 
  
 
 配置多个web-app 
 配置多个http id 
 为每个应用配置一个propeties、xml以及sh脚本文件 
 配置多个web-app 
  
 
 在resin.xml中,可以为一个host配置多个web-app 
 
  
<cluster id="app&q</div>
                                </li>
                                <li><a href="/article/1743.htm"
                                       title="red5简介及基础知识" target="_blank">red5简介及基础知识</a>
                                    <span class="text-muted">白糖_</span>
<a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80/1.htm">基础</a>
                                    <div>  
 
 简介 
 
  
Red5的主要功能和Macromedia公司的FMS类似，提供基于Flash的流媒体服务的一款基于Java的开源流媒体服务器。它由Java语言编写，使用RTMP作为流媒体传输协议，这与FMS完全兼容。它具有流化FLV、MP3文件，实时录制客户端流为FLV文件，共享对象，实时视频播放、Remoting等功能。用Red5替换FMS后,客户端不用更改可正</div>
                                </li>
                                <li><a href="/article/1870.htm"
                                       title="angular.fromJson" target="_blank">angular.fromJson</a>
                                    <span class="text-muted">boyitech</span>
<a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+%E5%AE%98%E6%96%B9API/1.htm">AngularJS 官方API</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a>
                                    <div>angular.fromJson   描述:   把Json字符串转为对象    使用方法:   angular.fromJson(json);   参数详解:      Param Type Details   json 
string  
JSON 字符串      返回值:   对象, 数组, 字符串 或者是一个数字   示例:   
<!DOCTYPE HTML>
<h</div>
                                </li>
                                <li><a href="/article/1997.htm"
                                       title="java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I" target="_blank">java-颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>

public class ReverseWords {

	/**
	 * 题目：颠倒一个句子中的词的顺序。比如： I am a student颠倒后变成：student a am I.词以空格分隔。
	 * 要求：
	 * 1.实现速度最快,移动最少
	 * 2.不能使用String的方法如split,indexOf等等。
	 * 解答：两次翻转。
	 */
	publ</div>
                                </li>
                                <li><a href="/article/2124.htm"
                                       title="web实时通讯" target="_blank">web实时通讯</a>
                                    <span class="text-muted">Chen.H</span>
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a>
                                    <div>关于web实时通讯，做一些监控软件。 
由web服务器组件从消息服务器订阅实时数据，并建立消息服务器到所述web服务器之间的连接，web浏览器利用从所述web服务器下载到web页面的客户端代理与web服务器组件之间的socket连接，建立web浏览器与web服务器之间的持久连接；利用所述客户端代理与web浏览器页面之间的信息交互实现页面本地更新，建立一条从消息服务器到web浏览器页面之间的消息通路</div>
                                </li>
                                <li><a href="/article/2251.htm"
                                       title="[基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗?" target="_blank">[基因与生物]远古生物的基因可以嫁接到现代生物基因组中吗?</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E7%94%9F%E7%89%A9/1.htm">生物</a>
                                    <div> 
 
      大家仅仅把我说的事情当作一个IT行业的笑话来听吧..没有其它更多的意思 
 
 
    如果我们把大自然看成是一位伟大的程序员,专门为地球上的生态系统编制基因代码,并创造出各种不同的生物来,那么6500万年前的程序员开发的代码,是否兼容现代派的程序员的代码和架构呢? 
 
  </div>
                                </li>
                                <li><a href="/article/2378.htm"
                                       title="oracle 外部表" target="_blank">oracle 外部表</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%A4%96%E9%83%A8%E8%A1%A8/1.htm">外部表</a><a class="tag" taget="_blank" href="/search/external+tables/1.htm">external tables</a>
                                    <div>    oracle外部表是只允许只读访问，不能进行DML操作，不能创建索引，可以对外部表进行的查询，连接，排序，创建视图和创建同义词操作。 
you can select, join, or sort external table data. You can also create views and synonyms for external tables. Ho</div>
                                </li>
                                <li><a href="/article/2505.htm"
                                       title="aop相关的概念及配置" target="_blank">aop相关的概念及配置</a>
                                    <span class="text-muted">daysinsun</span>
<a class="tag" taget="_blank" href="/search/AOP/1.htm">AOP</a>
                                    <div>切面(Aspect): 
通常在目标方法执行前后需要执行的方法（如事务、日志、权限），这些方法我们封装到一个类里面，这个类就叫切面。 
 
 
连接点（joinpoint） 
spring里面的连接点指需要切入的方法，通常这个joinpoint可以作为一个参数传入到切面的方法里面（非常有用的一个东西）。 
 
 
通知（Advice） 
通知就是切面里面方法的具体实现，分为前置、后置、最终、异常环</div>
                                </li>
                                <li><a href="/article/2632.htm"
                                       title="初一上学期难记忆单词背诵第二课" target="_blank">初一上学期难记忆单词背诵第二课</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a>
                                    <div>middle 中间的，中级的 
well 喔，那么；好吧 
phone 电话，电话机 
policeman 警察 
ask 问 
take 拿到；带到 
address 地址 
glad 高兴的，乐意的 
why 为什么  
China 中国 
family 家庭 
grandmother (外)祖母 
grandfather (外)祖父 
wife 妻子 
husband 丈夫 
da</div>
                                </li>
                                <li><a href="/article/2759.htm"
                                       title="Linux日志分析常用命令" target="_blank">Linux日志分析常用命令</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/log/1.htm">log</a>
                                    <div>1.查看文件内容 
cat 
-n 显示行号 2.分页显示 
more 
Enter 显示下一行 
空格 显示下一页 
F 显示下一屏 
B 显示上一屏 
less 
/get 查询"get"字符串并高亮显示 3.显示文件尾 
tail 
-f 不退出持续显示 
-n 显示文件最后n行 4.显示头文件 
head 
-n 显示文件开始n行 5.内容排序 
sort 
-n 按照</div>
                                </li>
                                <li><a href="/article/2886.htm"
                                       title="JSONP 原理分析" target="_blank">JSONP 原理分析</a>
                                    <span class="text-muted">fantasy2005</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a><a class="tag" taget="_blank" href="/search/jsonp+%E8%B7%A8%E5%9F%9F/1.htm">jsonp 跨域</a>
                                    <div>转自 http://www.nowamagic.net/librarys/veda/detail/224 
JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的</div>
                                </li>
                                <li><a href="/article/3013.htm"
                                       title="使用connect by进行级联查询" target="_blank">使用connect by进行级联查询</a>
                                    <span class="text-muted">234390216</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E8%AF%A2/1.htm">查询</a><a class="tag" taget="_blank" href="/search/%E7%88%B6%E5%AD%90/1.htm">父子</a><a class="tag" taget="_blank" href="/search/Connect+by/1.htm">Connect by</a><a class="tag" taget="_blank" href="/search/%E7%BA%A7%E8%81%94/1.htm">级联</a>
                                    <div>使用connect by进行级联查询 
  
       connect by可以用于级联查询，常用于对具有树状结构的记录查询某一节点的所有子孙节点或所有祖辈节点。 
  
       来看一个示例，现假设我们拥有一个菜单表t_menu，其中只有三个字段：</div>
                                </li>
                                <li><a href="/article/3140.htm"
                                       title="一个不错的能将HTML表格导出为excel,pdf等的jquery插件" target="_blank">一个不错的能将HTML表格导出为excel,pdf等的jquery插件</a>
                                    <span class="text-muted">jackyrong</span>
<a class="tag" taget="_blank" href="/search/jquery%E6%8F%92%E4%BB%B6/1.htm">jquery插件</a>
                                    <div>发现一个老外写的不错的jquery插件，可以实现将HTML 
表格导出为excel,pdf等格式， 
地址在： 
https://github.com/kayalshri/ 
 
下面看个例子，实现导出表格到excel,pdf 
 
 


<html>
			<head>
				<title>Export html table to excel an</div>
                                </li>
                                <li><a href="/article/3267.htm"
                                       title="UI设计中我们为什么需要设计动效" target="_blank">UI设计中我们为什么需要设计动效</a>
                                    <span class="text-muted">lampcy</span>
<a class="tag" taget="_blank" href="/search/UI/1.htm">UI</a><a class="tag" taget="_blank" href="/search/UI%E8%AE%BE%E8%AE%A1/1.htm">UI设计</a>
                                    <div>关于Unity3D中的Shader的知识 
首先先解释下Unity3D的Shader，Unity里面的Shaders是使用一种叫ShaderLab的语言编写的，它同微软的FX文件或者NVIDIA的CgFX有些类似。传统意义上的vertex shader和pixel shader还是使用标准的Cg/HLSL 编程语言编写的。因此Unity文档里面的Shader，都是指用ShaderLab编写的代码，</div>
                                </li>
                                <li><a href="/article/3394.htm"
                                       title="如何禁止页面缓存" target="_blank">如何禁止页面缓存</a>
                                    <span class="text-muted">nannan408</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/cache/1.htm">cache</a>
                                    <div>禁止页面使用缓存~ 
------------------------------------------------ 
jsp:页面no cache： 
 
response.setHeader("Pragma","No-cache"); 
response.setHeader("Cache-Control","no-cach</div>
                                </li>
                                <li><a href="/article/3521.htm"
                                       title="以代码的方式管理quartz定时任务的暂停、重启、删除、添加等" target="_blank">以代码的方式管理quartz定时任务的暂停、重启、删除、添加等</a>
                                    <span class="text-muted">Everyday都不同</span>
<a class="tag" taget="_blank" href="/search/%E5%AE%9A%E6%97%B6%E4%BB%BB%E5%8A%A1%E7%AE%A1%E7%90%86/1.htm">定时任务管理</a><a class="tag" taget="_blank" href="/search/spring-quartz/1.htm">spring-quartz</a>
                                    <div>      【前言】在项目的管理功能中，对定时任务的管理有时会很常见。因为我们不能指望只在配置文件中配置好定时任务就行了，因为如果要控制定时任务的 “暂停” 呢？暂停之后又要在某个时间点 “重启” 该定时任务呢？或者说直接 “删除” 该定时任务呢？要改变某定时任务的触发时间呢？ “添加” 一个定时任务对于系统的使用者而言，是不太现实的，因为一个定时任务的处理逻辑他是不</div>
                                </li>
                                <li><a href="/article/3648.htm"
                                       title="EXT实例" target="_blank">EXT实例</a>
                                    <span class="text-muted">tntxia</span>
<a class="tag" taget="_blank" href="/search/ext/1.htm">ext</a>
                                    <div>  
（1） 增加一个按钮 
  
JSP: 
  
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
Stri</div>
                                </li>
                                <li><a href="/article/3775.htm"
                                       title="数学学习在计算机研究领域的作用和重要性" target="_blank">数学学习在计算机研究领域的作用和重要性</a>
                                    <span class="text-muted">xjnine</span>
<a class="tag" taget="_blank" href="/search/Math/1.htm">Math</a>
                                    <div>最近一直有师弟师妹和朋友问我数学和研究的关系，研一要去学什么数学课。毕竟在清华，衡量一个研究生最重要的指标之一就是paper,而没有数学，是肯定上不了世界顶级的期刊和会议的，这在计算机学界尤其重要！你会发现，不论哪个领域有价值的东西，都一定离不开数学！在这样一个信息时代，当google已经让世界没有秘密的时候，一种卓越的数学思维，绝对可以成为你的核心竞争力.  无奈本人实在见地</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>