关于vue.js:关于前后端分离及初始化配置

一个 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…)