一个 Web 利用零碎前端和后端有两种合作形式:
- 服务端渲染:服务端将网页间接生成,浏览器拿到的是残缺的网页,其中是蕴含数据的。
- 前后端拆散:浏览器拿到 HTML 页面,而后再和后端通信取得数据。
两者相比拟各有优缺点:
- 数据量,绝对于服务端渲染,前后端拆散中只传输数据,而服务端渲染相比传输的数据量会大一些。
- 体验:前后端拆散相比服务端渲染多了一个数据渲染的过程,所以,前后端拆散可能呈现首屏渲染问题。
- 耦合:前后端拆散传输的是数据,前端只负责申请和渲染数据,提供数据由后端实现。服务端渲染传输的是 HTML 蕴含数据,也就是服务端渲染要把所有事件都做了。
- 交互管制:网页间存在跳转交互,前后端拆散中其页面管制齐全由前端实现。
- 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 是不能改名的。
- 命令行中切换到我的项目目录,启动 thinkphp 我的项目:php think run
- 命令行中切换到 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 就能够关上我的项目了。
其起因在于:
- 前端我的项目编译目的地设置:ui/vue.config.js
module.exports = {
devServer: {
host: '127.0.0.1',
port: 3333,
open: true,
},
outputDir: '../public/dist',
assetsDir: 'static',
productionSourceMap: false,
publicPath: './'
}
- 默认 thinkphp 我的项目主动跳转:app/admin/controller/Index.php
class Index
{public function index()
{return redirect((string)url('/dist/'));
}
}
如果是须要将前端和后端别离部署到不同的主机,请别离批改上述配置即可。
[
](https://blog.csdn.net/qq_3345…)