关于前后端分离及初始化配置

有志者，事竟成！如果你在学习数据库，那么本文《关于前后端分离及初始化配置》，就很适合你！文章讲解的知识点主要包括MySQL、PHP、vue.js、npm、git，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

一个Web应用系统前端和后端有两种协作方式：

1. 服务端渲染：服务端将网页直接生成，浏览器拿到的是完整的网页，其中是包含数据的。
2. 前后端分离：浏览器拿到HTML页面，然后再和后端通信获得数据。

两者相比较各有优缺点：

1. 数据量，相对于服务端渲染，前后端分离中只传输数据，而服务端渲染相比传输的数据量会大一些。
2. 体验：前后端分离相比服务端渲染多了一个数据渲染的过程，所以，前后端分离可能出现首屏渲染问题。
3. 耦合：前后端分离传输的是数据，前端只负责请求和渲染数据，提供数据由后端完成。服务端渲染传输的是HTML包含数据，也就是服务端渲染要把所有事情都做了。
4. 交互控制：网页间存在跳转交互，前后端分离中其页面控制完全由前端完成。
5. SEO：前后端分离通常采用SPA方式，对网页爬虫不友好。

前后端分离的逻辑是前端人员只关心前端页面和功能的实现，后端人员只对外提供一个api接口，然后和前端约定好数据格式之后，前后端开发人员就可以各干各的，互不干扰。前端人员只需要根据后端人员提供的api接口，获取数据并在前端展示，而后端人员只需要按照约定的数据格式，封装数据，并提供接口。

RDS快速开发系统前后端分离介绍

后端系统为标准的Thinkphp项目

前端系统为标准的Vue项目

ui目录内的内容如下：

项目配置

无论是通过下载 或者 git clone 获得的源码，都需要进行依赖安装。
因为前端后分离，即前端是独立的项目（vue项目），后端也是独立的项目（thinkphp项目）
所以，需要分别为其项目安装依赖。

前端依赖安装

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

后端依赖安装

// 进入项目目录
composer install

数据库配置

首先创建数据库，假设项目数据库为 my_rds：

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

导入数据库定义文件
使用数据库客户端导入data.sql文件

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_

配置文件中设置的数据库登录信息，需要和实际服务器环境保持一致。

其他配置

项目根目录下的/config/my.php，可以配置诸多选项。

• 支持配置单设备登录或者多设备登录: multiple_login (config/my.php)
• 支持验证码的开关: verify_status (config/my.php)
• 使用短信验证码：修改“短信网关”部分 (config/my.php)
• 使用云存储：修改“云存储”部分
• 开发微信小程序：mini_program (config/my.php)
• 开发微信公众号应用：official_accounts (config/my.php)
• 开发微信支付应用：wechat_pay (config/my.php)
• 支持系统维护中的数据库备份：mysqldump (config/my.php)

默认情况，以上选项大部分都没有具体配置。

本地开发

注意：为了能够进行代码生成，目录ui是不能改名的。

1. 命令行中切换到项目目录，启动thinkphp项目：php think run
2. 命令行中切换到ui目录下。启动前端vue项目：npm run serve

这样就可以开发了，无论是修改前端还是后端，都可以立即在浏览器中看见。
在上面的步骤3，就是启动后端项目。默认监听8000端口，如果你的不是，请通过-p参数设置

php think run 

打开ui/src/api/request.js文件：
这里可以设置连接后端的端口号和地址，分为开发环境和产品环境

//请求地址
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'
}

服务器部署

如果是本地开发完成了，需要部署到服务器，需要进行服务端部署操作。
为了降低部署难度，本项目将前端打包文件自动部署到/public/目录，熟悉thinkphp的同学就知道了，前端项目通过自动部署的目录就可以打开了。
比如，我们需要部署到主机demo.test.com
按照thinkphp项目的部署方式，将后端项目部署好，这时候，直接打开http://demo.test.com就可以打开项目了。
其原因在于：

1. 前端项目编译目的地设置：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. 默认thinkphp项目自动跳转：app/admin/controller/Index.php

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

如果是需要将前端和后端分别部署到不同的主机，请分别修改上述配置即可。
[

](https://blog.csdn.net/qq_3345...)

理论要掌握，实操不能落！以上关于《关于前后端分离及初始化配置》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！