ThinkPHP6.0 + Vue + ElementUI + axios 的环境安装到实现 CURD 操作!
发布日期:2021-05-09 04:16:32 浏览次数:19 分类:博客文章

本文共 10958 字,大约阅读时间需要 36 分钟。

  1. ���������������������

    ��� ThinkPHP6.0:

    ��� ElemetUI:

    ��� axios:

    ��� Vue:

  2. ������������������

  3. ���������������

    git clone ������������������������ 0608
  4. ���������������

    -- ��������������� 0608create database `0608` charset utf8;-- ��������������� usercreate 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`);-- ��������������� schoolcreate 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;
  5. ������������

    cd 0608
  6. ������ThinkPHP6.0

    composer create-project topthink/think php
  7. ���������������URL������

    # ���������������������# url ������location / {    # ������������������   if (!-e $request_filename) {   		rewrite  ^(.*)$  /index.php?s=/$1  last;    }}
  8. ������������������ .env ������������������������ .example.env���

    APP_DEBUG = true[APP]DEFAULT_TIMEZONE = Asia/Shanghai[DATABASE]TYPE = mysqlHOSTNAME = 127.0.0.1DATABASE = 0608USERNAME = rootPASSWORD = rootHOSTPORT = 3306CHARSET = utf8DEBUG = true[LANG]default_lang = zh-cn
  9. ������������������������

    // 1 .env ������������ 1 ���APP_DEBUG = true// 2 config/app.php ������ 33 ��� 'show_error_msg'   => true
  10. ���������vue

    ������node���npm���cnpm���vue-cli������������������

    // ������ node ������node -v// ������ npm ������npm -v// ������ cnpm ������cnpm -v// ������ vue ������vue -V// ���������������vue init webpack vue
  11. ������vue���������������������������������������

    // ������ vue ���������cd vue// npm ������������npm run dev
  12. ������ Element-UI���axios

    // ������ ElementUIcnpm install element-ui --save// ������ axioscnpm install axios --save
  13. ��� vue/src/main.js ���������������������

    // ������ elementUI// https://element.eleme.cn/#/zh-CN/component/quickstartimport ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);// ������ axios// https://segmentfault.com/a/1190000013128858import axios from 'axios'Vue.prototype.$ajax = axios
  14. ���������������������������������������������

    // ���������������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
  15. ������������������������������������������������

    // ���������������������������������������php think make:controller School// ������������������������������php think make:model School  // ������������������ php/route/app.php// ���������������������->���������������Route::resource('school', 'School')->allowCrossDomain();
  16. ������ curd ������ - ��������� - School.php

    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]); } }}
  17. ������ curd ������ - ��������� - School.php

    '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(); }}
  18. ������Postman������ curd ������

    # ������/������ gethttp://0608.cc/schoolhttp://0608.cc/school?page=2# ������ post http://0608.cc/school?name=shbw&city=&num=10000# ������ ID ������������ get http://0608.cc/school/3# ������ puthttp://0608.cc/school/3?name=shbw&city=&num=10000# ������ deletehttp://0608.cc/school/1
  19. Vue���������������/������

    // ��� vue/src/ ��������� page/school/{ list.vue,add.vue }// ������������ vue/router/index.jsimport 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    }  ]})
  20. ������������ - list.vue

  21. ������������ - add.vue

  22. ������������

  23. ������������

  24. ������������

上一篇:ThinkPHP6.0 + UniApp 实现小程序的 微信登录
下一篇:ThinkPHP6.0 门面

发表评论

最新留言

做的很好,不错不错
[***.243.131.199]2025年04月23日 19时45分52秒