About front-end and back-end separation and initial configuration

There are two ways of collaboration between the front-end and back-end of a web application system:

1. Server-side rendering: The server-side directly generates the web page, and the browser gets the complete web page, which contains data.
2. Front-end and back-end separation: The browser gets the HTML page, and then communicates with the back-end to obtain data.

Both have advantages and disadvantages compared to each other:

1. The amount of data, compared to server-side rendering, only transmits data in front-end and back-end separation, while server-side rendering will transmit a larger amount of data.
2. Experience: The front-end and back-end separation has one more data rendering process than server-side rendering. Therefore, the front-end and back-end separation may cause first screen rendering problems.
3. Coupling: The front-end and back-end are separated and transmitted is data, the front-end is only responsible for requesting and rendering data, and the back-end is responsible for providing data. Server-side rendering transmits HTML containing data, that is, server-side rendering has to do everything.
4. Interactive control: There is a jump interaction between web pages, and the page control in the front-end and back-end separation is completely completed by the front-end.
5. SEO: The front-end and back-end separation usually adopts the SPA method, which is not friendly to web crawlers.

The logic of front-end and back-end separation is that front-end personnel only care about the realization of front-end pages and functions, and back-end personnel only provide an API interface to the outside world, and after agreeing on the data format with the front-end, front-end and back-end developers can work independently without interfering with each other. . The front-end personnel only need to obtain data and display it on the front-end according to the API interface provided by the back-end personnel, while the back-end personnel only need to encapsulate the data and provide the interface according to the agreed data format.

Introduction of front-end and back-end separation of RDS rapid development system

The back-end system is a standard Thinkphp project

The front-end system is a standard Vue project

The contents of the ui directory are as follows:

Project configuration

Whether it is source code obtained by download or git clone, it needs to be installed dependently.
Because the front-end is separated after the front-end, that is, the front-end is an independent project (vue project), and the back-end is also an independent project (thinkphp project)
So, you need to install dependencies for their projects separately.

Front-end dependency installation

// 进入项目目录
cd ui
yarn install 或者 npm install

Backend dependency installation

// 进入项目目录
composer install

Database configuration

First create the database, assuming the project database is my_rds:

// 使用命令行或者数据库客户端执行如下命令
CREATE DATABASE my_rds DEFAULT CHARACTER SET utf8mb4;

Import database definition file
Import the data.sql file using the database client

There is no environment configuration file in the default project root directory. An environment configuration file needs to be created:

touch .env

// 文件内容
APP_DEBUG = true

[APP]
DEFAULT_TIMEZONE = Asia/Shanghai

[LANG]
default_lang = zh-cn

[DATABASE]
type = mysql
hostname = 127.0.0.1
database = database_name
username = username
password = password
hostport = 3306
charset = UTF8
prefix = cd_

The database login information set in the configuration file needs to be consistent with the actual server environment.

Other configuration

Many options can be configured in /config/my.php in the project root directory.

• Support configuring single-device login or multi-device login: multiple_login (config/my.php)
• Switch to support verification code: verify_status (config/my.php)
• Use SMS verification code: modify the "SMS Gateway" section (config/my.php)
• Using Cloud Storage: Modify the Cloud Storage section
• Develop WeChat Mini Program: mini_program (config/my.php)
• Develop WeChat official account application: official_accounts (config/my.php)
• Develop WeChat payment application: wechat_pay (config/my.php)
• Support database backup in system maintenance: mysqldump (config/my.php)

By default, most of the above options have no specific configuration.

local development

Note: In order to be able to generate code, the directory ui cannot be renamed.

1. Switch to the project directory on the command line and start the thinkphp project: php think run
2. Switch to the ui directory on the command line. Start the front-end vue project: npm run serve

This allows you to develop, whether you modify the front-end or back-end, you can immediately see it in the browser.
In step 3 above, start the backend project. It listens to port 8000 by default. If yours is not, please set it through the -p parameter

php think run 

Open the ui/src/api/request.js file:
Here you can set the port number and address of the connection backend, which are divided into development environment and production environment

//请求地址
if(process.env.NODE_ENV == 'development'){
    axios.defaults.baseURL = 'http://127.0.0.1:8000/admin'
}
if(process.env.NODE_ENV == 'production'){
    axios.defaults.baseURL = 'http://127.0.0.1:8080/admin'
}

Server deployment

If the local development is completed, it needs to be deployed to the server, and the server-side deployment operation is required.
In order to reduce the difficulty of deployment, this project automatically deploys the front-end package files to the /public/ directory. Students who are familiar with thinkphp will know that the front-end project can be opened through the automatically deployed directory.
For example, we need to deploy to the host demo.test.com
According to the deployment method of the thinkphp project, deploy the back-end project. At this time, directly open http://demo.test.com to open the project.
The reason is:

1. Front-end project compilation destination setting: ui/vue.config.js

module.exports = {
    devServer: {
        host: '127.0.0.1',
        port: 3333,
        open: true,
    },
    outputDir: '../public/dist',
    assetsDir: 'static',
    productionSourceMap: false,
    publicPath: './'
}

2. The default thinkphp project automatically jumps: app/admin/controller/Index.php

class Index
{
    public function index()
    {
        return redirect((string)url('/dist/'));
    }
}

If you need to deploy the front-end and back-end to different hosts, please modify the above configuration separately.
[

](https://blog.csdn.net/qq_33453797/article/details/88680095)