ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作！

官方文档地址：

ThinkPHP6.0: https://www.kancloud.cn/manual/thinkphp6_0/1037479

ElemetUI: https://element.eleme.cn/#/zh-CN

axios: https://www.kancloud.cn/yunye/axios/234845

Vue: https://cn.vuejs.org/v2/guide
创建码云仓库

克隆到本地

git clone 你自己的仓库地址 0608

创建数据库

-- 创建数据库 0608

create database `0608` charset utf8;

-- 创建数据表 user

create table `user` (

	`id` int(11) primary key auto_increment comment '用户ID',

	`name` varchar(30) not null default '未知' comment '用户名',

	`pwd` varchar(32) not null default '未知' comment '用户密码'

) engine = InnoDB;

-- 给 user.name 添加唯一索引

alter table `user` add unique key u_name(`name`);

-- 给 user.pwd 添加普通索引

alter table `user` add index u_pwd(`pwd`);

-- 创建数据表 school

create table `school` (

	`id` int(11) primary key auto_increment comment '学校ID',

	`name` varchar(30) not null default '未知' comment '学校名',

	`city` varchar(30) not null default '未知' comment '学校城市',

	`num` varchar(30) not null default '0' comment '学校人数'

) engine = InnoDB;

进入项目
```
cd 0608
```

安装ThinkPHP6.0

composer create-project topthink/think php

配置域名／URL重写

# 自行去配置域名

# url 重写

location / {

   # 省略部分代码

   if (!-e $request_filename) {

   		rewrite  ^(.*)$  /index.php?s=/$1  last;

    }

}

修改配置文件 .env 【来源于项目中的 .example.env】

APP_DEBUG = true

[APP]

DEFAULT_TIMEZONE = Asia/Shanghai

[DATABASE]

TYPE = mysql

HOSTNAME = 127.0.0.1

DATABASE = 0608

USERNAME = root

PASSWORD = root

HOSTPORT = 3306

CHARSET = utf8

DEBUG = true

[LANG]

default_lang = zh-cn

开启错误调试模式

// 1 .env 文件中第 1 行

APP_DEBUG = true

// 2 config/app.php 中第 33 行

 'show_error_msg'   => true

初始化vue

查看node、npm、cnpm、vue-cli是否安装成功

// 查看 node 版本

node -v

// 查看 npm 版本

npm -v

// 查看 cnpm 版本

cnpm -v

// 查看 vue 版本

vue -V

// 初始化项目

vue init webpack vue

进入vue进行测试、查看是否安装成功

// 进入 vue 项目中

cd vue

// npm 启动项目

npm run dev

安装 Element-UI、axios

// 安装 ElementUI

cnpm install element-ui --save

// 安装 axios

cnpm install axios --save

在 vue/src/main.js 中增加以下内容

// 引入 elementUI

// https://element.eleme.cn/#/zh-CN/component/quickstart

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

// 引入 axios

// https://segmentfault.com/a/1190000013128858

import axios from 'axios'

Vue.prototype.$ajax = axios

将初始化好的项目提交到远程仓库

// 进入项目中

cd 0608

// 查看状态【红色、提示使用 git add 】

git status

// 添加代码到仓库

git add ./

// 查看状态【绿色、Changes to be committed:】

git status

// 提交代码到本地仓库

git commit -m '提交注释'

// 查看状态

git status

// 将远程仓库的更新拉取到本地

git pull

// 查看状态

git status

// 将本地的更新提交到远程仓库

git push

添加资源控制器／模型层／资源路由

// 使用命令行：创建资源控制器

php think make:controller School

// 使用命令行：创建模型

php think make:model School

// 添加资源路由 php/route/app.php

// 跨域请求【路由->跨域请求】

Route::resource('school', 'School')->allowCrossDomain();

编辑 curd 接口 - 控制器 - School.php

<?php

declare(strict_types=1);

namespace app\controller;

use app\model\School as ModelSchool;

use think\facade\Validate;

use think\Request;

class School

{

    /**

     * 显示资源列表

     * 【get】http://0608.cc/school

     * 【get】http://0608.cc/school?page=2

     *

     * @return \think\Response

     */

    public function index(ModelSchool $school)

    {

        $pageSize = 3;

        $res = $school->getPage($pageSize);

        if ($res) {

            return json(['code' => 0, 'msg' => 'ok', 'res' => $res]);

        } else {

            return json(['code' => 1, 'msg' => 'no', 'res' => null]);

        }

    }

    /**

     * 显示创建资源表单页.

     *

     * @return \think\Response

     */

    public function create()

    {

        //

    }

    /**

     * 保存新建的资源

     * 【post】http://0608.cc/school?name=shbw&city=&num=10000

     *

     * @param  \think\Request  $request

     * @return \think\Response

     */

    public function save(Request $request, ModelSchool $school)

    {

        // 接收数据

        $data['name'] = $request->param('name', '');

        $data['city'] = $request->param('city', '');

        $data['num'] = $request->param('num', '0');

        // 数据验证

        $rule = [

            'name' => 'require|max:30|min:2',

            'city' => 'require',

            'num'  => 'require'

        ];

        $message = [

            'name.require'  => '学校名称是必填项',

            'name.max'      => '学校名称最多30位',

            'name.min'      => '学校名称最少2位',

            'city.require'  => '学校所在城市是必填项',

            'num.require'   => '学校现有人数是必填项'

        ];

        // 粘贴来自于手册：验证->验证规则->方法定义

        $validate = Validate::rule($rule)->message($message);

        if (!$validate->check($data)) {

            return json(['code' => 1, 'msg' => $validate->getError(), 'res' => null]);

        }

        // 调用模型

        $res = $school->addOne($data);

        if ($res) {

            return json(['code' => 0, 'msg' => '添加成功', 'res' => $res]);

        } else {

            return json(['code' => 1, 'msg' => '添加失败', 'res' => $res]);

        }

    }

    /**

     * 显示指定的资源

     * 【get】http://0608.cc/school/3

     *

     * @param  int  $id

     * @return \think\Response

     */

    public function read($id, ModelSchool $school )

    {

        $where['id'] = $id;

        $res = $school->selOne($where);

        if ($res) {

            return json(['code' => 0, 'msg' => '查询成功', 'res' => $res]);

        } else {

            return json(['code' => 1, 'msg' => '查询失败', 'res' => $res]);

        }

    }

    /**

     * 显示编辑资源表单页.

     *

     * @param  int  $id

     * @return \think\Response

     */

    public function edit($id)

    {

        //

    }

    /**

     * 保存更新的资源

     * 【put】http://0608.cc/school/3?name=bjbw3&city=bj3&num=30000

     *

     * @param  \think\Request  $request

     * @param  int  $id

     * @return \think\Response

     */

    public function update(Request $request, $id, ModelSchool $school)

    {

        // 接收数据

        $where['id'] = $id;

        $data['name'] = $request->param('name', '');

        $data['city'] = $request->param('city', '');

        $data['num'] = $request->param('num', '0');

        // 数据验证

        $rule = [

            'name' => 'require|max:30|min:2',

            'city' => 'require',

            'num'  => 'require'

        ];

        $message = [

            'name.require'  => '学校名称是必填项',

            'name.max'      => '学校名称最多30位',

            'name.min'      => '学校名称最少2位',

            'city.require'  => '学校所在城市是必填项',

            'num.require'   => '学校现有人数是必填项'

        ];

        // 粘贴来自于手册：验证->验证规则->方法定义

        $validate = Validate::rule($rule)->message($message);

        if (!$validate->check($data)) {

            return json(['code' => 1, 'msg' => $validate->getError(), 'res' => null]);

        }

        // 调用模型

        $res = $school->updOne($where, $data);

        if ($res) {

            return json(['code' => 0, 'msg' => '修改成功', 'res' => $res]);

        } else {

            return json(['code' => 1, 'msg' => '修改失败', 'res' => $res]);

        }

    }

    /**

     * 删除指定资源

     * 【delete】http://0608.cc/school/1

     *

     * @param  int  $id

     * @return \think\Response

     */

    public function delete($id, ModelSchool $school)

    {

        $where['id'] = $id;

        $res = $school->delOne($where);

        if ($res) {

            return json(['code' => 0, 'msg' => '删除成功', 'res' => $res]);

        } else {

            return json(['code' => 1, 'msg' => '删除失败', 'res' => $res]);

        }

    }

}

编辑 curd 接口 - 模型层 - School.php

<?php

declare (strict_types = 1);

namespace app\model;

use think\Model;

/**

 * @mixin think\Model

 */

class School extends Model

{

    protected $table = 'school';

    protected $pk = 'id';

    // 设置字段信息

    protected $schema = [

        'id'          => 'int',

        'name'        => 'string',

        'city'        => 'string',

        'num'         => 'string'

    ];

    /**

     * 分页

     */

    public function getPage( $pageSize)

    {

        return self::paginate( $pageSize );

    }

    /**

     * 添加一条数据

     */

    public function addOne($data)

    {

        return self::insert( $data );

    }

    /**

     * 删除数据

     */

    public function delOne($where)

    {

        return self::where( $where )->delete();

    }

    /**

     * 修改

     */

    public function updOne($where,$data)

    {

        return self::where( $where )->update( $data );

    }

    /**

     * 查询一条

     */

    public function selOne($where)

    {

        return self::where( $where )->find();

    }

}

使用Postman测试 curd 接口

# 展示/分页 get

http://0608.cc/school

http://0608.cc/school?page=2

# 添加 post

http://0608.cc/school?name=shbw&city=&num=10000

# 根据 ID 查询一个 get

http://0608.cc/school/3

# 修改 put

http://0608.cc/school/3?name=shbw&city=&num=10000

# 删除 delete

http://0608.cc/school/1

Vue中添加路由/页面

// 在 vue/src/ 中增加 page/school/{ list.vue,add.vue }

// 增加路由 vue/router/index.js

import Vue from 'vue'

import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'

// 导入登录页面

import login from '@/page/main/login.vue'

// 导入以下页面

import schoolList from '@/page/school/list.vue'

import schoolAdd from '@/page/school/add.vue'

import schoolEdit from '@/page/school/edit.vue'

Vue.use(Router)

export default new Router({

  routes: [{

      path: '/',

      name: 'HelloWorld',

      component: HelloWorld

    },

    {

      path: '/login',

      name: 'login',

      component: login

    },

    {

      path: '/schoolList',

      name: 'schoolList',

      component: schoolList

    },

    {

      path: '/schoolAdd',

      name: 'schoolAdd',

      component: schoolAdd

    },

    {

      path: '/schoolEdit',

      name: 'schoolEdit',

      component: schoolEdit

    }

  ]

})

展示页面 - list.vue

<template>

  <div>

    <a href="/#/schoolAdd"><el-button type="button" size="small" style="float: left;">数据添加</el-button></a>

    <!--  展示表格 start https://element.eleme.cn/#/zh-CN/component/table -->

    <el-table :data="tableData" stripe style="width: 100%">

      <el-table-column prop="id" label="ID" width="150"></el-table-column>

      <el-table-column prop="name" label="学校名" width="150"></el-table-column>

      <el-table-column prop="city" label="所在城市" width="150"></el-table-column>

      <el-table-column prop="num" label="人数" width="150"></el-table-column>

      <el-table-column label="操作">

        <template slot-scope="scope">

          <el-button @click.native.prevent="deleteRow(scope.row)" type="text" size="small">删除</el-button>

          <el-button @click.native.prevent="editRow(scope.row)" type="text" size="small">编辑</el-button>

        </template>

      </el-table-column>

    </el-table>

    <!--  展示表格 end -->

    <!-- 分页控件 start https://element.eleme.cn/#/zh-CN/component/pagination -->

    <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @current-change="getCurrentPage"></el-pagination>

    <!-- 分页控件 end -->

  </div>

</template>

<script>

export default {

  data() {

    return {

      tableData: [],

      currentPage: 1,

      total: 0,

      pageSize: 3

    };

  },

  created() {

    var _self = this;

    _self.getPage();

  },

  methods: {

    // 调用接口、获取分页数据

    getPage: function() {

      var _self = this;

      // 使用 ajax 请求后台提供的展示接口

      _self.$ajax

        .get('http://0608.cc/school', {

          params: {

            page: _self.currentPage

          }

        })

        .then(function(response) {

          _self.tableData = response.data.res.data;

          _self.total = response.data.res.total;

        })

        .catch(function(error) {

          console.log(error);

        });

    },

    //当前页改变事件

    getCurrentPage: function(page) {

      var _self = this;

      // 改变当前页码

      _self.currentPage = page;

      // 获取当前页数据

      _self.getPage();

    },

    // 删除一条数据

    deleteRow(data) {

      var _self = this;

      var id = data.id;

      _self.$ajax

        .delete('http://0608.cc/school/' + id)

        .then(function(response) {

          alert(response.data.msg);

          if (response.data.code == 0) {

            _self.getPage();

          }

        })

        .catch(function(error) {

          console.log(error);

        });

    },

    // 编辑

    editRow(row) {

      this.$router.push({ name: 'schoolEdit', params: row });

    }

  }

};

</script>

<style></style>

添加页面 - add.vue

<template>

  <div>

    <a href="/#/schoolList"><el-button type="button" size="small" style="float: left;">数据列表</el-button></a>

    <br />

    <br />

    <!--  表单 start https://element.eleme.cn/#/zh-CN/component/form -->

    <el-form :model="dataForm" status-icon ref="dataForm" label-width="100px" class="">

      <el-form-item label="学校名称" prop="name"><el-input type="text" v-model="dataForm.name"></el-input></el-form-item>

      <el-form-item label="所在城市" prop="city"><el-input type="text" v-model="dataForm.city"></el-input></el-form-item>

      <el-form-item label="人数" prop="num"><el-input type="number" v-model.number="dataForm.num"></el-input></el-form-item>

      <el-form-item>

        <el-button type="primary" @click="submitForm()">提交</el-button>

        <el-button @click="resetForm('dataForm')">重置</el-button>

      </el-form-item>

    </el-form>

    <!--  表单 end -->

  </div>

</template>

<script>

export default {

  data() {

    return {

      dataForm: {

        name: '',

        city: '',

        num: ''

      }

    };

  },

  methods: {

    submitForm() {

      var _self = this;

      _self.$ajax

        .post('http://0608.cc/school', _self.dataForm)

        .then(function(response) {

          // 不管成功与失败、都弹出消息

          alert(response.data.msg);

          // 判断是否成功、成功跳转至展示页面

          if (response.data.code == 0) {

            _self.$router.push({ name: 'schoolList' });

          }

        })

        .catch(function(error) {

          console.log(error);

        });

    },

    resetForm(formName) {

      this.$refs[formName].resetFields();

    }

  }

};

</script>

<style></style>

修改页面

<template>

  <div>

    <a href="/#/schoolList"><el-button type="button" size="small" style="float: left;">数据列表</el-button></a>

    <br />

    <br />

    <!--  表单 start https://element.eleme.cn/#/zh-CN/component/form -->

    <el-form :model="dataForm" status-icon ref="dataForm" label-width="100px" class="">

      <el-form-item label="学校名称" prop="name"><el-input type="text" v-model="dataForm.name"></el-input></el-form-item>

      <el-form-item label="所在城市" prop="city"><el-input type="text" v-model="dataForm.city"></el-input></el-form-item>

      <el-form-item label="人数" prop="num"><el-input type="number" v-model.number="dataForm.num"></el-input></el-form-item>

      <el-form-item>

        <el-button type="primary" @click="submitForm()">提交</el-button>

        <el-button @click="resetForm('dataForm')">重置</el-button>

      </el-form-item>

    </el-form>

    <!--  表单 end -->

  </div>

</template>

<script>

export default {

  data() {

    return {

      dataId: this.$route.params.id,

      dataForm: {

        name: this.$route.params.name,

        city: this.$route.params.city,

        num: this.$route.params.num

      }

    };

  },

  methods: {

    submitForm() {

      var _self = this;

      _self.$ajax

        .put('http://0608.cc/school/' + _self.dataId, _self.dataForm)

        .then(function(response) {

          // 不管成功与失败、都弹出消息

          alert(response.data.msg);

          // 判断是否成功、成功跳转至展示页面

          if (response.data.code == 0) {

            _self.$router.push({ name: 'schoolList' });

          }

        })

        .catch(function(error) {

          console.log(error);

        });

    },

    resetForm(formName) {

      this.$refs[formName].resetFields();

    }

  }

};

</script>

<style></style>

登录页面

<template>

  <div>

    <!--  表单 start https://element.eleme.cn/#/zh-CN/component/form -->

    <el-form :model="dataForm" status-icon ref="dataForm" label-width="100px" class="">

      <el-form-item label="用户名" prop="name"><el-input type="text" v-model="dataForm.name"></el-input></el-form-item>

      <el-form-item label="密码" prop="pwd"><el-input type="password" v-model="dataForm.pwd"></el-input></el-form-item>

      <el-form-item>

        <el-button type="primary" @click="submitForm()">登录</el-button>

        <el-button @click="resetForm('dataForm')">重置</el-button>

      </el-form-item>

    </el-form>

    <!--  表单 end -->

  </div>

</template>

<script>

export default {

  data() {

    return {

      dataForm: {

        name: '',

        pwd: ''

      }

    };

  },

  methods: {

    submitForm() {

      var _self = this;

      _self.$ajax

        .get('http://0608.cc/login', { params: _self.dataForm })

        .then(function(response) {

          // 不管成功与失败、都弹出消息

          alert(response.data.msg);

          // 判断是否成功、成功跳转至展示页面

          if (response.data.code == 0) {

            _self.$router.push({ name: 'schoolList' });

          }

        })

        .catch(function(error) {

          console.log(error);

        });

    },

    resetForm(formName) {

      this.$refs[formName].resetFields();

    }

  }

};

</script>

<style></style>

完工！！

ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作！的更多相关文章

一：项目简介（node express vue elementui axios）
一:项目基本构造 ** 项目一共有 16 个页面,是一个电商网销项目,自己在网上的某网上找的一个要做的网站的设计图: 页面主要包括: 登录页 -- 注册页 -- 首页 -- 产品列表页 -- 产品详 ...
vue+elementUI+axios实现的全局loading加载动画
在项目中,很多时候都需要loading加载动画来缓解用户的焦虑等待,比如说,我打开了一个页面,而这个页面有很多接口请求,但浏览器的请求并发数就那么几个,再加上如果网速不行的话,那么这时候,用户很可能就 ...
LNMP, CentOS7.0+Nginx+Mysql5.7+PHP7环境安装
LNMP代表的就是:Linux系统下Nginx+MySQL+PHP这种网站服务器架构.这里和家分享一下,如何在CentOS 7.0上搭建一个这样的环境,其中软件使用yum方式安装. 进入CentOS ...
redis 从0到1 linux下的安装使用数据类型以及操作指令一
安装 redis 到 /usr/目录下我这里安装的是redis-3.2.9.tar.gz tar zxvf redis-3.2.9.tar.gz -C /usr 然后进行执行编译命令 mak ...
MongoDB学习(1)--安装，基本curd操作
知识点: 1-MongoDB 安装,启动和卸载 2-基本概念 3-基本的增删改查操作(CURD) 来回顾总结一把学习的mongodb,如果有javascript基础,学习"芒果DB" ...
vue-cli3.0和element-ui及axios的安装使用
一.利用vue-cli3快速搭建vue项目 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令( ...
Vue/Element-ui 安装搭建开发环境（一）
Element 是饿了么全段开发团队推出的一套基于 vue.js2.0 的 PC Web 端开发框架. Element 中文文档:https://element.eleme.cn/#/zh-CN 1. ...
项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置
vue项目创建环境 1.傻瓜式安装node: 官网下载:https://nodejs.org/zh-cn/ 2.安装cnpm: >: npm install -g cnpm --regis ...
第三章、vue-项目前端 - vue配置 | axios配置 | cookies配置 | element-ui配置 | bootstrap配置
目录 vue项目创建环境创建项目重构项目目录文件修订:目录中非配置文件的多余文件可以移除全局配置:全局样式.配置文件 axios前后台交互 cookies操作 element-ui页面组件框 ...

随机推荐

ql自动化测试之路-概述篇
前言:本节主要讲解自动化测试的基本概述,包括分层自动化测试.自动化测试中用到的工具.以及关于自动化测试的想法一.分层自动化测试上图是经典的测试金字塔.用它来形容目前测试投入的价值是比较适合的,同样 ...
Django数据库表初始化缓存清除
新建的django项目中没有应用app01??? models中也没有UserInfo表???? 但在migrate是却一直报错!!!!! 产生此种现象的原因: 之前的项目中肯定是用到过应用app01 ...
k8s搭建实操记录一(master)
#1)关闭CentOS7自带的防火墙服务 systemctl disable firewalld systemctl stop firewalld swapoff -a ##虚拟机要关闭交换 ...
使用Flutter开发的抖音国际版
简介最近花了两天时间研究使用Flutter开发一个抖音国际版. 先上图,个人感觉使用Flutter开发app快得不要不要的额. 两天就基本可以开发个大概出来. 最主要是热更新,太方便实时调整U ...
PHPstudy 修改数据库上传大小
要修改的地方已经标出来了直接修改为你需要的值即可:
docker启动各种容器命令大全
安装步骤梳理搜索镜像拉取镜像查看镜像启动镜像停止容器移除容器安装tomcat docker hub好查找tomcat镜像 docker search tomcat 从docker hu ...
组件-vue自定义方法传递
组件样式面包屑导航栏 js Vue.component('bannerOne', { created() { console.log(this.bigbackColor); }, props: { ...
C#实现自定义列表
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
MySQL递归查询
MySQL8.0已经支持CTE递归查询,举例说明 CREATE TABLE EMP (EMPNO integer NOT NULL, ENAME ), JOB ), MGR integer, HIRE ...
配置单机Kafka
配置单机kafka 关闭selinux,开启防火墙9092端口 1.关闭selinux vi /etc/selinux/config #SELINUX=enforcing #注释掉 #SELINUXT ...

ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作！

ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作！的更多相关文章

随机推荐

热门专题