基于Vue和PHP打造前后端分离的通用管理系统(一)

实用人群

  • 适合小白入门,高手请绕行

技术栈

  • javascript vuejs webpack babel eslint nodejs axios
  • php mysql redis
  • git vagrant centos

整体思路

  • git负责版本控制,这个算是标配

  • 前台: 使用vuejs框架,用javascript语言打造,UI使用ElementUI。webpack babel eslint nodejs 服务于javascript代码编写。

  • 后台: 用PHP作,mysql数据库,redis缓存,运行在装有centos系统虚拟机中,通过vagrant管理虚拟机

  • 前端通过axios和后端通讯。

    • 前端到回台请求url: http://localhost/json.php/Module/Controller/Action/param/value
    • 后端发给前台的Json指令符合如下格式
return {
  // 需要渲染的界面
  view: {
     // 界面名称
    name: 'Table'
    // 界面的配置信息
    column: [ 
      ...
    ]
    // ...
  },
  // 需要渲染的数据列表
  rows: [
    ...
  ],
  //提示信息
  message: '...', 
  status: true 
}

环境搭建

为方便新手入门,本文在windows环境下进行。软件统一安装到D:\Server目录下

1. 创建工作目录

在D盘创建Server目录,用于搭建工作环境

2. 安装git

在git首页下载相应位数(64/32)的Windows版git,
然后一路下一步安装,注意选择安装位置。

调出命令行(win+r输入cmd)输入 git --version 显示git版本号即可。

3. 安装Nodejs和Vue

在nodejs首页下载,一路next,注意选择安装位置。

命令行输入 node -v 显示node版本号。

命令行输入 npm --v 显示npm版本号即可。

在D:\Server\nodejs目录下下建立"node_global"及"node_cache"两个文件夹。然后命令行输入:

npm config set prefix "D:\Server\nodejs\node_global"
npm config set cache "D:\Server\nodejs\node_cache"

桌面/我的电脑/右键【属性】/高级系统设置/高级/环境变量

  1. 用户变量Path中 C:\...npm 替换为D:\Server\nodejs\node_global
  2. 系统变量增加NODE_PATH=D:\Server\nodejs\node_global

可以通过 npm config get prefix查看设置情况

输入npm install --global vue-cli测试一下(不改源,需要喝杯水的时间...)

正常的话,vue就安装完成了,下一步在浏览器插件商店中找到并安装vue-devtools

恭喜,前端环境搭建基本完成

你可能感兴趣的:(基于Vue和PHP打造前后端分离的通用管理系统(一))