likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 26

一个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: './'
}
  1. 默认thinkphp项目自动跳转：app/admin/controller/Index.php
class Index
{
    public function index()
    {
        return redirect((string)url('/dist/'));
    }
}

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

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